/*
* ============================================================================
* CACHE BUST (read this before editing CSS) — for humans AND LLMs
* ============================================================================
* Why: browsers/proxies cache by URL path. We do NOT use ?v= query params.
* A real CSS change requires a NEW filename so clients fetch fresh styles.
*
* This file is: style141.css
* Next version: style142.css.
*
* Recipe (from portfolioPage root):
*
* 1. Copy, do not only edit this file in place:
* cp style141.css style142.css
*
* 2. Edit ONLY the new file (style142.css).
*
* 3. Find every reference to the OLD name:
* grep -RIn 'style141\.css' \
* --include='*.php' --include='*.html' --include='*.md' --include='*.css' --include='*.js' .
* Typical PHP loaders: index.php, portfolio.php, stock.php, profile.php, login.php
* (every , plus comments/docs).
*
* 4. Point every hit at style142.css.
*
* 5. Delete this old file so the folder does not accumulate dead increments:
* rm style141.css
*
* 6. Confirm nothing still asks for the old name (must print nothing):
* grep -RIn 'style141\.css' \
* --include='*.php' --include='*.html' --include='*.md' --include='*.css' --include='*.js' .
*
* 7. Confirm the new file is wired:
* grep -RIn 'style142\.css' --include='*.php' .
*
* Rules:
* - Only ONE styleN.css should remain on disk (the current N).
* - Same integer-bump pattern for versioned JS: discovery_uiN.js,
* lwc_chart_uiN.js, conversation_history_uiN.js, themeN.js.
* - Ops overview also in readme.md → "Cache-bust static JS / CSS".
* ============================================================================
*/
:root,
html[data-theme="dark"] {
--font: "Arial", sans-serif;
/* MSN-like navy dark theme (default) */
color-scheme: dark;
--bg-primary: #0a0f1a;
--bg-secondary: #121a2b;
--bg-primary-big-items: #121a2b;
--bg-elevated: #1a2336;
--card-borders: rgba(148, 163, 184, 0.14);
--text-primary: #e8eef8;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--accent: rgb(0 123 255);
--accent-soft: #a855f7;
/* Purple family: soft for dark UI, deeper for light (see html[data-theme=light]) */
--purple: #a855f7;
--purple-text: #c4b5fd;
--purple-text-strong: #e9d5ff;
--purple-border: rgba(168, 85, 247, 0.45);
--purple-bg: rgba(168, 85, 247, 0.18);
--purple-bg-strong: rgba(168, 85, 247, 0.32);
--chip-bg: rgba(51, 65, 85, 0.65);
--chip-bg-hover: rgba(71, 85, 105, 0.85);
--chip-border: rgba(148, 163, 184, 0.3);
--stock-card-chart-fade: linear-gradient(
180deg,
rgba(18, 26, 43, 0) 0%,
rgba(10, 14, 24, 0.35) 40%,
rgba(8, 12, 20, 0.55) 100%
);
/* Discovery / watchlist hover panels — keep light text on a dark scrim in both themes */
--overlay-scrim: rgba(6, 10, 18, 0.94);
--overlay-text: #f1f5f9;
--overlay-text-muted: rgba(226, 232, 240, 0.78);
--price-number-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
--radius-card: 16px;
--gap-section: 16px; /* vertical space between stacked cards (desktop) */
--gap-section-horizontal: 12px; /* horizontal space between cards in a row */
--nav-blur: 14px;
--nav-bg: rgba(10, 15, 26, 0.72);
--surface-inset: rgba(15, 23, 42, 0.85);
--surface-overlay: rgba(15, 23, 42, 0.94);
--shadow-color: rgba(0, 0, 0, 0.45);
/* Charts (LWC + ECharts read these via getComputedStyle) */
--chart-bg: #121a2b;
--chart-text: #e8eef8;
--chart-grid: rgba(148, 163, 184, 0.12);
--chart-border: rgba(148, 163, 184, 0.2);
--chart-crosshair: rgba(168, 85, 247, 0.4);
--chart-crosshair-label: #a855f7;
--chart-tooltip-bg: rgba(15, 23, 42, 0.94);
--chart-tooltip-border: rgba(148, 163, 184, 0.25);
--chart-tooltip-text: #e2e8f0;
/* Range switcher pills (TV-style) */
--range-btn-bg: rgba(43, 49, 57, 1);
--range-btn-hover: rgba(54, 61, 71, 1);
--range-btn-active: rgba(64, 72, 84, 1);
--range-btn-color: rgba(255, 255, 255, 0.92);
--range-btn-active-bg: rgba(168, 85, 247, 0.38);
--range-btn-active-color: #f5f3ff;
/* Scrollbars */
--scrollbar-thumb: rgba(100, 116, 139, 0.55);
--scrollbar-track: rgba(15, 23, 42, 0.35);
--chat-compose-fade: rgba(10, 15, 26, 0);
}
html[data-theme="light"] {
color-scheme: light;
--bg-primary: #e8eef6;
--bg-secondary: #f5f8fc;
--bg-primary-big-items: #f5f8fc;
--bg-elevated: #eef3f9;
--card-borders: rgba(15, 23, 42, 0.1);
--text-primary: #0f172a;
--text-secondary: #64748b;
--text-muted: #64748b;
--nav-bg: rgba(245, 248, 252, 0.78);
--purple: #7c3aed;
--purple-text: #6d28d9;
--purple-text-strong: #5b21b6;
--purple-border: rgba(109, 40, 217, 0.4);
--purple-bg: rgba(124, 58, 237, 0.12);
--purple-bg-strong: rgba(124, 58, 237, 0.2);
--chip-bg: rgba(226, 232, 240, 0.95);
--chip-bg-hover: rgba(203, 213, 225, 0.95);
--chip-border: rgba(15, 23, 42, 0.12);
--stock-card-chart-fade: linear-gradient(
180deg,
rgba(245, 248, 252, 0) 0%,
rgba(226, 232, 240, 0.22) 45%,
rgba(203, 213, 225, 0.32) 100%
);
/* Slightly darker than before so hover content reads; still softer than night */
--overlay-scrim: rgba(15, 23, 42, 0.9);
--overlay-text: #f8fafc;
--overlay-text-muted: rgba(226, 232, 240, 0.82);
/* Lighter under-number shade so price/% isn’t a black smear on light cards */
--price-number-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
--surface-inset: rgba(226, 232, 240, 0.9);
--surface-overlay: rgba(255, 255, 255, 0.96);
--shadow-color: rgba(15, 23, 42, 0.12);
--chart-bg: #f5f8fc;
--chart-text: #0f172a;
--chart-grid: rgba(15, 23, 42, 0.08);
--chart-border: rgba(15, 23, 42, 0.12);
--chart-crosshair: rgba(124, 58, 237, 0.4);
--chart-crosshair-label: #7c3aed;
--chart-tooltip-bg: rgba(255, 255, 255, 0.96);
--chart-tooltip-border: rgba(15, 23, 42, 0.12);
--chart-tooltip-text: #0f172a;
--range-btn-bg: rgba(240, 243, 250, 1);
--range-btn-hover: rgba(226, 232, 240, 1);
--range-btn-active: rgba(203, 213, 225, 1);
--range-btn-color: rgba(15, 23, 42, 0.82);
--range-btn-active-bg: rgba(124, 58, 237, 0.18);
--range-btn-active-color: #5b21b6;
--scrollbar-thumb: rgba(100, 116, 139, 0.45);
--scrollbar-track: rgba(226, 232, 240, 0.8);
--chat-compose-fade: rgba(232, 238, 246, 0);
}
/* Reset links */
a {
cursor: pointer;
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
/* Optional: visited links also use same color */
a:visited {
color: inherit;
}
.ai-insight {
/* Width comes from the table cell (table-layout: fixed); keep ellipsis */
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-secondary);
}
/* Chat markdown (bot messages rendered via marked + DOMPurify) */
#chat-container #messages {
max-height: 720px; /* was 360px; taller scroll area for portfolio chat */
overflow-y: auto;
}
/* Shared by chat bubbles + portfolio/stock insight panels */
.chat-md,
#messages .chat-md {
display: block;
line-height: 1.45;
}
.chat-md p,
#messages .chat-md p {
margin: 0.4em 0;
}
.chat-md p:first-child,
#messages .chat-md p:first-child {
margin-top: 0;
}
.chat-md p:last-child,
#messages .chat-md p:last-child {
margin-bottom: 0;
}
.chat-md ul,
.chat-md ol,
#messages .chat-md ul,
#messages .chat-md ol {
margin: 0.4em 0 0.4em 1.25em;
padding: 0;
}
.chat-md li,
#messages .chat-md li {
margin: 0.2em 0;
}
.chat-md strong,
#messages .chat-md strong {
font-weight: 700;
color: inherit;
}
.chat-md code,
#messages .chat-md code {
font-family: ui-monospace, monospace;
font-size: 0.9em;
background: rgba(148, 163, 184, 0.15);
padding: 0.05em 0.3em;
border-radius: 4px;
}
.chat-md pre,
#messages .chat-md pre {
overflow-x: auto;
background: rgba(148, 163, 184, 0.12);
padding: 0.6em 0.75em;
border-radius: 8px;
margin: 0.5em 0;
}
.chat-md pre code,
#messages .chat-md pre code {
background: none;
padding: 0;
}
.via-chat-chart {
width: 100%;
height: 228px;
margin: 0.7em 0 0.45em;
border-radius: 10px;
box-sizing: border-box;
background: var(--bg-primary-big-items, #121a2b);
border: 1px solid var(--card-borders, rgba(148, 163, 184, 0.2));
}
.via-chat-chart.is-pie {
height: 248px;
}
@media (max-width: 720px) {
.via-chat-chart {
height: 200px;
}
.via-chat-chart.is-pie {
height: 220px;
}
}
.chat-md h1,
.chat-md h2,
.chat-md h3,
.chat-md h4,
.chat-md h5,
.chat-md h6,
#messages .chat-md h1,
#messages .chat-md h2,
#messages .chat-md h3,
#messages .chat-md h4,
#messages .chat-md h5,
#messages .chat-md h6 {
font-size: 1.02em;
font-weight: 700;
line-height: 1.3;
margin: 0.85em 0 0.35em;
color: inherit;
}
.chat-md h1:first-child,
.chat-md h2:first-child,
.chat-md h3:first-child,
.chat-md h4:first-child,
.chat-md h5:first-child,
.chat-md h6:first-child,
#messages .chat-md h1:first-child,
#messages .chat-md h2:first-child,
#messages .chat-md h3:first-child,
#messages .chat-md h4:first-child,
#messages .chat-md h5:first-child,
#messages .chat-md h6:first-child {
margin-top: 0;
}
.chat-md em,
#messages .chat-md em {
font-style: italic;
}
.chat-md blockquote,
#messages .chat-md blockquote {
margin: 0.5em 0;
padding: 0 0 0 0.85em;
border-left: 3px solid rgba(148, 163, 184, 0.35);
color: inherit;
}
.chat-md hr,
#messages .chat-md hr {
border: none;
border-top: 1px solid var(--card-borders);
margin: 0.75em 0;
}
/* Insight panels (not chat bubbles) */
#portfolio-insight-text.chat-md,
#ai-insight-text.chat-md,
.insight-md.chat-md {
color: var(--text-secondary);
}
/* Strategic Insights tab: same primary weight as stock chat */
.stock-strategic-insights .insight-md,
.stock-strategic-insights .insight-md.chat-md {
color: var(--text-primary);
}
.link-button {
background: none;
border: none;
padding: 0;
margin: 0;
color: inherit; /* Uses your theme text color */
font-size: inherit;
font-family: inherit;
cursor: pointer;
text-decoration: none;
display: inline;
}
/* Hover effect using CSS (much cleaner) */
.link-button:hover {
color: inherit; /* Uses your accent color from earlier */
text-decoration: none;
}
body {
font-family: var(--font);
background: var(--bg-primary);
color: var(--text-primary);
margin: 0;
padding: 0;
min-height: 100vh;
/* Full-bleed example wall may extend past the chat column; never show a page-level X scroll */
overflow-x: clip;
}
/* Glass top bar — single row: title left, actions right
(backdrop-filter when supported; solid fallback otherwise) */
.top-block {
width: 100%;
position: sticky;
top: 0;
z-index: 200;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.35rem 1rem;
/* ~½–⅔ of former stacked title+nav height */
padding: 0.4rem 0.9rem;
min-height: 2.65rem;
background: var(--nav-bg);
border-bottom: 1px solid var(--card-borders);
transition: transform 0.28s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.top-block {
background: var(--nav-bg);
-webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.35);
backdrop-filter: blur(var(--nav-blur)) saturate(1.35);
}
}
/* Narrow screens: hide on scroll-down (class toggled in js/topnav.js) */
.top-block.nav-hidden {
transform: translateY(-100%);
}
/* Yellow robot mark — first item, links to /main */
.top-block > .site-logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1.6rem;
height: 1.6rem;
margin: 0;
padding: 0;
border-radius: 50%;
line-height: 0;
text-decoration: none;
color: inherit;
}
.top-block > .site-logo img {
display: block;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
}
.top-block > .site-logo:hover img,
.top-block > .site-logo:focus-visible img {
filter: brightness(1.07);
}
.top-block > .site-logo:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
/* Page title sits on the left of the bar */
.top-block > h1,
.top-block h1 {
text-align: left;
margin: 0;
padding: 0;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.25;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Actions cluster (Privacy / Home / Profile / Logout) on the right */
.top-block .within-top-block-items {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 1 auto;
margin: 0;
margin-left: auto;
min-width: 0;
}
.top-block .within-top-block-items > p {
display: none; /* legacy subtitles; actions only in the bar */
}
.main-content-block {
justify-content: center; /* centers the buttons horizontally */
align-items: center; /* aligns them vertically */
}
.login-text-central {
width: 100%;
max-width: 420px; /* Nice readable width for forms */
text-align: center; /* Centers the text inside */
margin-left: auto;
margin-right: auto;
}
/* Make the forms look cleaner */
.login-text-central form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
text-align: left; /* Keep form labels left-aligned */
}
.login-text-central input[type="text"],
.login-text-central input[type="password"] {
padding: 0.75rem;
font-size: 1rem;
width: 100%;
box-sizing: border-box;
background: var(--bg-primary-big-items);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: 10px;
}
.login-text-central input[type="submit"] {
padding: 0.75rem;
font-size: 1.1rem;
cursor: pointer;
background: var(--accent);
color: #fff;
border: none;
border-radius: 10px;
}
.horizontal-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem 1.25rem;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
/* Fallback for any non-nav h1 (nav titles use .top-block h1 above) */
h1 {
text-align: left;
margin: 0.4rem 0 0.25rem;
font-size: 1.45rem;
font-weight: 700;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 30px;
max-width: 1600px;
margin: 20px auto;
/* Match .central-item-text rhythm on desktop; sides drop on narrow */
padding: 16px 18px 18px;
box-sizing: border-box;
/* Don't stretch short cards (e.g. Create Portfolio) to chart height —
keeps the whole create card clickable without a tall empty hit area. */
align-items: start;
}
.portfolio-card {
background: var(--bg-primary-big-items);
border: 1px solid var(--card-borders);
border-radius: var(--radius-card);
padding: 30px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Chart portfolio cards: left-align like TradingView demo cards */
.portfolio-card.portfolio-card-with-chart {
text-align: left;
padding: 18px 18px 14px;
cursor: pointer; /* whole card opens portfolio (range pills override) */
}
.portfolio-card.portfolio-card-with-chart .lwc-range-switcher,
.portfolio-card.portfolio-card-with-chart .lwc-range-btn {
cursor: pointer;
}
/* Purple glow on hover — same for chart cards and Create Portfolio */
.portfolio-card:hover,
.portfolio-card:focus-within,
a.portfolio-card-create:hover,
a.portfolio-card-create:focus-visible {
border-color: rgba(168, 85, 247, 0.55);
box-shadow: 0 2px 14px rgba(168, 85, 247, 0.18);
outline: none;
}
/* Title row → portfolio detail page (chart below is interactive on its own) */
.portfolio-card-title-link {
display: block;
width: 100%;
text-decoration: none;
color: inherit;
margin: 0;
padding: 0;
text-align: left;
cursor: pointer;
}
.portfolio-card-title-link:hover .portfolio-card-title,
.portfolio-card-title-link:focus-visible .portfolio-card-title,
.portfolio-card-title-link:hover .lwc-chart-title,
.portfolio-card-title-link:focus-visible .lwc-chart-title {
color: var(--purple-text);
}
/* ==========================================================================
Lightweight Charts chrome — TradingView demo style
(https://www.tradingview.com/lightweight-charts/ + range-switcher tutorial)
Card layout: title → range pills (left) → chart body, tight spacing.
========================================================================== */
/* Inner panel: padding + stacked chrome (stock / portfolio main charts) */
.lwc-chart-panel {
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 3px;
text-align: left;
}
/* Title + range switcher block */
.lwc-chart-header {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
margin: 0 0 12px 0;
padding: 0;
width: 100%;
text-align: left;
}
/* Large TV-style card title */
.lwc-chart-title {
margin: 0;
padding: 0;
color: var(--text-primary);
font-size: 1.75rem; /* ~28px — matches TV demo card titles */
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
}
/*
* Top-left corner logo motif.
* Solid in the corner, dissolves right and down into the surface so title
* copy can sit in the fade. Reuse .corner-logo + --card/--list/--chart.
*/
.corner-logo {
--corner-logo-size: 3.1rem;
--corner-logo-fade-start: 34%;
--corner-logo-fade-end: 100%;
--corner-logo-opacity: 0.9;
box-sizing: border-box;
display: block;
width: var(--corner-logo-size);
height: var(--corner-logo-size);
pointer-events: none;
user-select: none;
flex: 0 0 var(--corner-logo-size);
overflow: hidden;
}
.corner-logo-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: top left;
opacity: var(--corner-logo-opacity);
-webkit-mask-image:
linear-gradient(
to right,
#000 0%,
#000 var(--corner-logo-fade-start),
rgba(0, 0, 0, 0.35) calc(var(--corner-logo-fade-start) + 28%),
transparent var(--corner-logo-fade-end)
),
linear-gradient(
to bottom,
#000 0%,
#000 var(--corner-logo-fade-start),
rgba(0, 0, 0, 0.35) calc(var(--corner-logo-fade-start) + 28%),
transparent var(--corner-logo-fade-end)
);
mask-image:
linear-gradient(
to right,
#000 0%,
#000 var(--corner-logo-fade-start),
rgba(0, 0, 0, 0.35) calc(var(--corner-logo-fade-start) + 28%),
transparent var(--corner-logo-fade-end)
),
linear-gradient(
to bottom,
#000 0%,
#000 var(--corner-logo-fade-start),
rgba(0, 0, 0, 0.35) calc(var(--corner-logo-fade-start) + 28%),
transparent var(--corner-logo-fade-end)
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
html[data-theme="light"] .corner-logo {
--corner-logo-opacity: 0.82;
}
.corner-logo--chart {
--corner-logo-size: 3.35rem;
--corner-logo-fade-start: 24%;
--corner-logo-opacity: 0.9;
position: absolute;
top: -0.28rem;
left: -0.28rem;
z-index: 0;
}
.lwc-chart-title.has-corner-logo {
position: relative;
padding-left: 1.85rem;
min-height: 2.45rem;
display: flex;
align-items: center;
}
.lwc-chart-title-text {
position: relative;
z-index: 1;
}
.corner-logo--card {
--corner-logo-size: 5.85rem;
--corner-logo-fade-start: 26%;
--corner-logo-opacity: 0.88;
position: absolute;
top: 0.02rem;
left: 0.04rem;
z-index: 0;
}
.stock-card-face-top.has-corner-logo {
padding-left: 3.05rem;
min-height: 4.35rem;
}
.stock-card-face-top.has-corner-logo .stock-card-name,
.stock-card-face-top.has-corner-logo .stock-card-meta,
.stock-card-face-top.has-corner-logo .stock-card-blurb {
position: relative;
z-index: 1;
}
.corner-logo--list {
--corner-logo-size: 2.05rem;
--corner-logo-fade-start: 62%;
--corner-logo-fade-end: 100%;
--corner-logo-opacity: 1;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.corner-logo--list .corner-logo-img {
object-position: center;
}
.mini-stock-sym {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.mini-stock-left.has-corner-logo {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.42rem;
}
/* Home portfolio cards: still prominent, slightly smaller than full-page */
.portfolio-card .lwc-chart-title,
.portfolio-card-title.lwc-chart-title {
font-size: 1.5rem;
font-weight: 600;
text-align: left;
width: 100%;
}
/* Chart canvas area under the chrome */
.lwc-chart-body {
width: 100%;
min-width: 0;
position: relative;
}
/* Range switcher: 1D 1M 3M 1Y Total — same compact pill size as home portfolio cards
(portfolio page + stock page charts share this base; statement cards also match). */
.lwc-range-switcher {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
.lwc-range-btn {
all: unset;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 510;
line-height: 20px;
letter-spacing: -0.32px;
padding: 6px 16px;
color: var(--range-btn-color);
background-color: var(--range-btn-bg);
border-radius: 8px;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.lwc-range-btn:hover {
background-color: var(--range-btn-hover);
}
.lwc-range-btn:active {
background-color: var(--range-btn-active);
}
.lwc-range-btn.is-active {
background-color: var(--range-btn-active-bg);
color: var(--range-btn-active-color);
}
.lwc-range-btn:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
/* Home cards: left-aligned; size inherits compact base above */
.portfolio-card .lwc-range-switcher {
margin: 0;
gap: 8px;
justify-content: flex-start;
}
/* Create Portfolio: the IS the card (natural height only) */
a.portfolio-card-create {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
box-sizing: border-box;
}
a.portfolio-card-create .portfolio-card-title {
margin: 0 0 15px 0;
}
a.portfolio-card-create .placeholder {
font-size: 2.5rem;
line-height: 1.2;
margin: 0.5rem 0;
}
a.portfolio-card-create p {
margin: 0;
color: var(--text-secondary);
font-size: 0.95rem;
}
/* Home / profile portfolio charts — interactive LWC (pan, zoom, crosshair).
Desktop default height; home overrides to a shorter landscape card. */
.profile-grid-charts{
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
/* Grab cursor hints drag-to-pan; LWC owns pointer events */
cursor: grab;
touch-action: none;
}
.profile-grid-charts:active {
cursor: grabbing;
}
.portfolio-page-content {
max-width: 1000px; /* keep horizontal width */
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
padding: 0 16px 16px;
box-sizing: border-box;
/* Let nested grids/tables shrink instead of blowing past the viewport */
min-width: 0;
overflow-x: clip;
}
/* Match stock-page card rhythm (vertical gap + radius) without narrowing */
.portfolio-page-content .central-display-item {
margin-bottom: var(--gap-section);
border-radius: var(--radius-card);
}
.portfolio-page-content .central-display-item-in-grid {
margin-bottom: 0;
border-radius: var(--radius-card);
}
.portfolio-page-content .central-display-grid {
/* row (vertical) · column (horizontal between pie | insights) */
gap: var(--gap-section) var(--gap-section-horizontal);
margin-bottom: var(--gap-section);
}
/* Composition card: fixed height; chart panes flex to fill remaining space */
.portfolio-page-content .central-display-grid .composition-chart-card {
height: 450px;
min-height: 450px;
max-height: 450px;
box-sizing: border-box;
}
.portfolio-page-content .central-display-grid #pie-chart,
.portfolio-page-content .central-display-grid #scatter-chart {
height: 100%;
min-height: 0;
}
/* MSN-like: narrower centered column (same shrink rules as portfolio page) */
.stock-page-content {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
padding: 0 16px 32px;
box-sizing: border-box;
min-width: 0;
overflow-x: clip;
}
.stock-page-content .central-display-item {
margin-bottom: var(--gap-section);
border-radius: var(--radius-card);
}
/* Stock lower band (after chat): same card rhythm as .stock-page-content */
.stock-lower-band .central-display-item,
.stock-lower-band-inner .central-display-item {
margin-bottom: var(--gap-section);
border-radius: var(--radius-card);
}
/* Last card before nested Discover — no extra gap under the section stack */
.stock-lower-band-inner .stock-financials {
margin-bottom: 0;
}
/* Company card: About | Strategic Insights | Vibe */
.stock-company-card .stock-company-tabs {
margin: 0 0 1rem 0;
flex-wrap: wrap;
gap: 0.85rem 1.15rem;
}
.stock-company-panel {
min-width: 0;
}
.stock-company-panel[hidden],
.stock-company-panel:not(.is-active) {
display: none;
}
.stock-company-panel.is-active {
display: block;
}
.stock-vibe-gallery {
min-height: 8.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem 0.75rem;
border-radius: 12px;
border: 1px dashed rgba(148, 163, 184, 0.28);
background: rgba(15, 23, 42, 0.18);
box-sizing: border-box;
}
html[data-theme="light"] .stock-vibe-gallery {
background: rgba(226, 232, 240, 0.45);
border-color: rgba(15, 23, 42, 0.12);
}
.stock-vibe-gallery.has-items {
display: block;
min-height: 0;
padding: 0;
border: none;
background: none;
border-radius: 0;
}
.stock-vibe-placeholder {
margin: 0;
max-width: 28rem;
text-align: center;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.stock-vibe-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.95rem 1rem;
justify-items: center;
}
.stock-vibe-item {
margin: 0;
min-width: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.stock-vibe-item img {
display: block;
width: 88%;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
border-radius: 10px;
background: rgba(15, 23, 42, 0.28);
}
html[data-theme="light"] .stock-vibe-item img {
background: rgba(226, 232, 240, 0.7);
}
.stock-vibe-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
margin: 0.35rem 0 0;
width: 88%;
min-width: 0;
}
.stock-vibe-chat-btn {
flex: 0 0 auto;
}
.stock-vibe-caption {
margin: 0;
width: auto;
flex: 1 1 auto;
min-width: 0;
color: var(--text-primary);
font-size: 12px;
line-height: 1.4;
text-align: left;
}
/* About: Discover-card still sits under the copy (lower-right), text on top */
.stock-about-layout {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
}
.stock-about-layout.has-media {
min-height: 17.5rem;
padding-bottom: 0.35rem;
}
.stock-about-layout #about-text {
position: relative;
z-index: 1;
margin-top: 0;
}
.stock-about-layout.has-media #about-meta {
position: relative;
z-index: 1;
max-width: calc(100% - min(66%, 19.5rem) - 0.75rem);
}
/* Bottom-left key stats: large market cap + 3 TTM metrics */
.stock-about-stats {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 1.15rem 1.7rem;
margin-top: auto;
padding-top: 1.15rem;
position: relative;
z-index: 1;
max-width: calc(100% - min(66%, 19.5rem) - 0.75rem);
}
.stock-about-layout:not(.has-media) .stock-about-stats {
max-width: 100%;
}
.stock-about-stats[hidden] {
display: none !important;
}
.stock-about-mcap,
.stock-about-metric {
min-width: 0;
}
.stock-about-mcap-value {
font-size: 3rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.stock-about-metric-value {
font-size: 1.75rem; /* same as Latest AI Insights title */
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.stock-about-stat-label {
margin-top: 0.18rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-secondary);
line-height: 1.2;
}
.stock-about-key-metrics {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 1.05rem 1.45rem;
min-width: 0;
}
.stock-about-media {
position: absolute;
/* Nudge left of the card edge; hang the still, not the caption row */
right: 0.55rem;
bottom: 0;
width: min(66%, 19.5rem);
margin: 0;
padding: 0;
border: 0;
/* Above About copy / stats so Chat about can receive clicks; the figure
stays pointer-events:none so the dissolved still does not eat text. */
z-index: 2;
pointer-events: none;
}
.stock-about-media[hidden] {
display: none;
}
.stock-about-media-img {
display: block;
width: 100%;
height: auto;
max-height: 20.25rem;
object-fit: contain;
object-position: right bottom;
/* Keep the still ~one line lower without dragging the grey caption down */
transform: translateY(1.35em);
user-select: none;
/* Same dissolve as Discover cards, on the bottom and the left */
-webkit-mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.12) 18%,
rgba(0, 0, 0, 0.55) 42%,
#000 68%,
#000 100%
),
linear-gradient(
to top,
transparent 0%,
rgba(0, 0, 0, 0.12) 18%,
rgba(0, 0, 0, 0.55) 42%,
#000 68%,
#000 100%
);
mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.12) 18%,
rgba(0, 0, 0, 0.55) 42%,
#000 68%,
#000 100%
),
linear-gradient(
to top,
transparent 0%,
rgba(0, 0, 0, 0.12) 18%,
rgba(0, 0, 0, 0.55) 42%,
#000 68%,
#000 100%
);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.stock-about-media-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
margin: 0.35rem 0 0;
position: relative;
z-index: 2;
pointer-events: auto;
}
.stock-about-chat-btn {
flex: 0 0 auto;
pointer-events: auto;
}
.stock-about-media-caption {
display: none;
margin: 0;
color: var(--text-primary);
font-size: 12px;
line-height: 1.4;
text-align: left;
position: relative;
z-index: 1;
min-width: 0;
}
.stock-about-media-caption:not(:empty) {
display: block;
}
/* Strategic insight titles; Chat about sits under the body, bottom-right */
.stock-insight-heading {
margin: 1rem 0 0.45rem;
}
.stock-insight-heading h3 {
margin: 0;
line-height: 1.3;
}
.stock-insight-body {
margin-bottom: 1.25rem;
}
.stock-insight-body:last-child {
margin-bottom: 0;
}
.stock-insight-chat-row {
display: flex;
justify-content: flex-end;
margin: 0.45rem 0 0;
}
.stock-company-panel.stock-strategic-insights .stock-insight-heading:first-of-type {
margin-top: 0.15rem;
}
/* Pros / Cons split above the school-style essays */
.stock-pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.75rem;
margin: 0 0 1.35rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--card-borders);
align-items: start;
}
.stock-pros-cons-col {
min-width: 0;
}
.stock-pros-cons-col .stock-insight-body {
margin-bottom: 0;
}
.stock-pros-cons .stock-insight-heading {
margin-top: 0;
}
.stock-pros-cons .insight-md ul,
.stock-pros-cons .insight-md.chat-md ul {
margin: 0.2em 0 0.2em 1.15em;
padding: 0;
}
.stock-pros-cons .insight-md li,
.stock-pros-cons .insight-md.chat-md li {
margin: 0.35em 0;
}
/* Same Working timer + tool log as chat, inside insight columns */
.stock-insight-body > .chat-activity {
align-items: flex-start;
margin: 0 0 0.7rem;
color: var(--text-muted, var(--text-secondary));
}
.stock-insight-body > .chat-activity .chat-activity-dots {
margin-top: 0.38em;
}
.stock-insight-body > .chat-activity.is-finished {
margin-bottom: 0.45rem;
}
@media (max-width: 720px) {
.stock-pros-cons {
grid-template-columns: 1fr;
gap: 1.15rem;
}
.stock-about-layout.has-media {
min-height: 13.75rem;
}
.stock-about-layout.has-media #about-meta {
max-width: calc(100% - min(74%, 15.25rem) - 0.5rem);
}
.stock-about-stats {
max-width: calc(100% - min(74%, 15.25rem) - 0.5rem);
gap: 0.85rem 1.15rem;
padding-top: 0.9rem;
}
.stock-about-mcap-value {
font-size: 2.4rem;
}
.stock-about-metric-value {
font-size: 1.5rem;
}
.stock-about-media {
width: min(74%, 15.25rem);
right: 0.35rem;
bottom: 0;
}
.stock-about-media-img {
max-height: 15.15rem;
}
.stock-vibe-grid {
grid-template-columns: 1fr;
}
}
/* Stock financial statement sections — desktop padding matches .central-item-text */
.central-item-financials {
padding: 16px 18px 18px;
box-sizing: border-box;
min-width: 0;
}
/* Stock: stack AI Insights + Financials (keep DOM order) */
.stock-page-content .central-display-grid {
grid-template-columns: 1fr;
gap: var(--gap-section);
margin-bottom: var(--gap-section);
}
/* ==========================================================================
Stock financial statements — MSN-style (Income / Balance / Cash flow)
Annual | Quarterly tabs, then chart + table on the same section surface
========================================================================== */
.stock-financials {
display: flex;
flex-direction: column;
gap: var(--gap-section);
width: 100%;
min-width: 0;
margin-bottom: var(--gap-section);
}
.stock-statement {
min-width: 0;
}
.stock-statement-title {
margin: 0 0 0.65rem 0;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
}
/* Annual / Quarterly underline tabs (MSN) */
.stock-period-tabs {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 1.25rem;
margin: 0 0 0.9rem 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.stock-period-tab {
all: unset;
box-sizing: border-box;
position: relative;
cursor: pointer;
padding: 0.35rem 0.1rem 0.55rem;
font-family: inherit;
font-size: 0.92rem;
font-weight: 500;
color: var(--text-secondary);
line-height: 1.2;
transition: color 0.12s ease;
}
.stock-period-tab:hover {
color: var(--text-primary);
}
.stock-period-tab.is-active {
color: var(--text-primary);
font-weight: 600;
}
.stock-period-tab.is-active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
border-radius: 2px 2px 0 0;
background: #e2e8f0;
}
.stock-period-tab:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 3px;
border-radius: 2px;
}
/*
* Content host under Annual | Quarterly (range pills, chart, table).
* No nested card chrome — outer .central-display-item / .stock-statement
* already provides the section card surface.
*/
.stock-statement-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-sizing: border-box;
min-width: 0;
}
/* Range pills + hint (client-side window over preloaded periods) */
.stock-statement-history-bar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.65rem 1rem;
margin: 0 0 0.85rem 0;
min-height: 1.75rem;
}
.stock-statement-range-switcher {
width: auto;
flex: 1 1 auto;
min-width: 0;
}
/* Slightly tighter pills inside statement cards */
.stock-statement-range-switcher .lwc-range-btn {
font-size: 14px;
line-height: 20px;
padding: 6px 14px;
border-radius: 8px;
}
.stock-statement-history-hint {
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
flex: 0 0 auto;
}
.stock-statement-bars {
margin: 0 0 1rem 0;
}
.stock-statement-bars[hidden] {
display: none;
}
.stock-statement-bars-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 0.55rem 0.15rem;
}
/* ECharts host (bar-label-rotation style, labels off) */
.stock-statement-echart {
width: 100%;
height: 260px;
min-height: 200px;
min-width: 0;
}
.stock-statement-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-width: 0;
/* Dark-theme scrollbar (native OS bars are otherwise a harsh grey) */
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.stock-statement-table-wrap::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.stock-statement-table-wrap::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 999px;
margin: 0 4px;
}
.stock-statement-table-wrap::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.stock-statement-table-wrap::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.72);
border: 2px solid transparent;
background-clip: padding-box;
}
.stock-statement-table-wrap::-webkit-scrollbar-corner {
background: transparent;
}
/* If the chart host ever overflows, keep the same dark scrollbar look */
.stock-statement-bars,
.stock-statement-echart {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.stock-statement-bars::-webkit-scrollbar,
.stock-statement-echart::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.stock-statement-bars::-webkit-scrollbar-track,
.stock-statement-echart::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 999px;
}
.stock-statement-bars::-webkit-scrollbar-thumb,
.stock-statement-echart::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.stock-statement-bars::-webkit-scrollbar-thumb:hover,
.stock-statement-echart::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.72);
border: 2px solid transparent;
background-clip: padding-box;
}
.stock-statement-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 0.9rem;
color: var(--text-primary);
}
.stock-statement-table th,
.stock-statement-table td {
padding: 0.65rem 0.55rem;
text-align: right;
white-space: nowrap;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
vertical-align: middle;
transition: background-color 0.12s ease, color 0.12s ease;
}
.stock-statement-table th {
font-weight: 500;
color: var(--text-secondary);
font-size: 0.82rem;
}
.stock-statement-table td.stock-statement-metric-col,
.stock-statement-table th.stock-statement-metric-col {
text-align: left;
white-space: normal;
min-width: 3.5rem;
max-width: 12rem;
color: var(--text-secondary);
font-weight: 500;
padding-left: 0.65rem;
/* Stay pinned while scrolling year columns horizontally */
position: sticky;
left: 0;
z-index: 2;
background: var(--bg-primary-big-items);
box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);
}
.stock-statement-table th.stock-statement-metric-col {
z-index: 3;
background: var(--bg-primary-big-items);
color: var(--text-secondary);
}
/* Sticky metric col keeps an opaque base under row state tints */
.stock-statement-table tbody tr.stock-statement-row:hover td.stock-statement-metric-col {
background: var(--bg-elevated);
}
.stock-statement-table tbody tr.is-default-metric td.stock-statement-metric-col {
background: #171f32;
}
.stock-statement-table tbody tr.is-selected td.stock-statement-metric-col {
background: #241e38;
}
.stock-statement-table tbody tr.is-selected:hover td.stock-statement-metric-col {
background: #2c2348;
}
/* Interactive metric rows */
.stock-statement-table tbody tr.stock-statement-row {
cursor: pointer;
}
.stock-statement-table tbody tr.stock-statement-row:hover td {
background: rgba(148, 163, 184, 0.10);
}
.stock-statement-table tbody tr.stock-statement-row:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.55);
outline-offset: -2px;
}
/* Soft cue for the default chart metric when not selected */
.stock-statement-table tbody tr.is-default-metric td {
background: rgba(91, 110, 166, 0.10);
}
/* Selected series on the chart */
.stock-statement-table tbody tr.is-selected td {
background: rgba(168, 85, 247, 0.14);
}
.stock-statement-table tbody tr.is-selected:hover td {
background: rgba(168, 85, 247, 0.22);
}
.stock-statement-table tbody tr.is-selected td:first-child {
box-shadow: inset 3px 0 0 0 var(--row-series-color, #a855f7);
border-radius: 8px 0 0 8px;
}
.stock-statement-table tbody tr.is-selected td:last-child {
border-radius: 0 8px 8px 0;
}
.stock-statement-table tbody tr.stock-statement-row:hover td:first-child,
.stock-statement-table tbody tr.is-default-metric td:first-child {
border-radius: 8px 0 0 8px;
}
.stock-statement-table tbody tr.stock-statement-row:hover td:last-child,
.stock-statement-table tbody tr.is-default-metric td:last-child {
border-radius: 0 8px 8px 0;
}
.stock-statement-row-swatch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: 0.45rem;
vertical-align: middle;
flex-shrink: 0;
}
.stock-statement-metric-col .stock-statement-row-label {
vertical-align: middle;
}
.stock-statement-table tbody tr:last-child td {
border-bottom: none;
}
.stock-statement-more {
all: unset;
box-sizing: border-box;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0.7rem 0.5rem 0.45rem;
cursor: pointer;
font-family: inherit;
font-size: 0.88rem;
font-weight: 500;
color: var(--text-secondary);
transition: color 0.12s ease;
}
.stock-statement-more:hover {
color: var(--text-primary);
}
.stock-statement-more:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
border-radius: 6px;
}
.stock-statement-more::after {
content: '▾';
font-size: 0.75em;
opacity: 0.85;
}
.stock-statement-more[aria-expanded="true"]::after {
content: '▴';
}
/* ==========================================================================
Stock financial flow — ECharts Sankey (Income | Cash flow)
Period chips under Annual/Quarterly: hover/focus updates the diagram.
========================================================================== */
.stock-sankey-card .stock-sankey-subtitle {
margin: -0.35rem 0 0.85rem;
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.35;
}
.stock-sankey-tab-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 0.65rem 1.25rem;
margin: 0 0 0.75rem 0;
}
.stock-sankey-tab-row .stock-period-tabs {
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
/*
* Period picker: tall vertical chips (labels rotated −90°) so years/quarters
* sit side-by-side and are easy to scrub with the mouse.
*/
.stock-sankey-period-strip {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 0.2rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0.15rem 0 0.5rem;
margin: 0 0 0.35rem 0;
scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}
.stock-sankey-period-strip::-webkit-scrollbar {
height: 5px;
}
.stock-sankey-period-strip::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.4);
border-radius: 999px;
}
.stock-sankey-period-chip {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
flex: 1 1 0;
/* Fatter hit targets (labels are rotated −90°, so width is visual thickness) */
min-width: 2.15rem;
max-width: 3.05rem;
height: 5.5rem;
margin: 0;
cursor: pointer;
padding: 0;
border-radius: 8px;
/* Theme tokens: dark slate on night, pale slate on light (not a hard-coded dark fill) */
border: 1px solid var(--chip-border);
background: var(--chip-bg);
color: var(--text-secondary);
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
/* Label turned 90° (reads bottom → top when scrubbing left → right) */
.stock-sankey-period-chip-label {
display: block;
transform: rotate(-90deg);
white-space: nowrap;
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
pointer-events: none;
user-select: none;
}
.stock-sankey-period-chip:hover,
.stock-sankey-period-chip:focus-visible {
color: var(--text-primary);
border-color: var(--purple-border);
background: var(--chip-bg-hover);
outline: none;
}
.stock-sankey-period-chip.is-active {
color: var(--text-primary);
border-color: var(--purple-border);
background: var(--purple-bg);
}
.stock-sankey-meta {
margin: 0 0 0.65rem;
min-height: 1.2em;
font-size: 0.8rem;
color: var(--text-muted);
}
.stock-sankey-chart {
width: 100%;
height: 420px;
min-height: 300px;
min-width: 0;
}
.stock-sankey-empty {
margin: 0.5rem 0 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.45;
}
/* Home (index.php) — portfolios + AI chat (narrow column).
min-width:0 + overflow-x:clip match portfolio-page-content so LWC
canvases can shrink on phones instead of forcing a ~400–500px floor. */
.home-page-top-content {
max-width: 1240px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
padding: 0 16px 24px;
box-sizing: border-box;
min-width: 0;
overflow-x: clip;
}
/* Below 1300px: keep the top column tighter */
/*
* Discover band shell (shared include: includes/discovery_band.php).
* Prefer discovery-* names; home-page-discovery-content / home-lower-band kept
* as aliases so older markup still styles correctly.
*/
.discovery-content,
.home-page-discovery-content {
max-width: 1680px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 16px 24px;
box-sizing: border-box;
}
/*
* Discover band architecture (includes/discovery_band.php):
*
* .discovery-band-shell — optional outer wrapper (standalone pages).
* Owns full-width band colour + top border via .portfolio-lower-band.
* Main/home sets $discovery_band_standalone = true (default).
*
* .discovery-band-transferable — always-present inner block (watchlist + grid).
* Never draws a top border. Nest it inside any same-colour page-width band
* (portfolio holdings / stock financials lower band) with
* $discovery_band_standalone = false so there is no seam / page-bg flash.
*/
.discovery-band-shell,
.discovery-lower-band,
.home-lower-band {
/* shell uses .portfolio-lower-band for bg + border-top when both classes set */
margin-top: 0;
}
/* Transferable block: no chrome of its own */
.discovery-band-transferable {
border-top: none;
background: transparent;
width: 100%;
max-width: none;
box-sizing: border-box;
}
/* Nested under portfolio holdings band: light separation without a border line */
.portfolio-lower-band > .discovery-band-transferable {
margin-top: 1.5rem;
padding-top: 0;
}
/* Content shell padding when standalone (shell already has vertical band pad) */
.discovery-band-shell .discovery-content,
.discovery-band-shell .home-page-discovery-content,
.discovery-lower-band .discovery-content,
.discovery-lower-band .home-page-discovery-content,
.home-lower-band .discovery-content,
.home-lower-band .home-page-discovery-content {
padding-top: 0;
padding-bottom: 0.5rem;
}
/* Nested transferable still uses discovery-content horizontal rhythm */
.portfolio-lower-band > .discovery-band-transferable.discovery-content,
.portfolio-lower-band > .discovery-band-transferable.home-page-discovery-content {
padding-top: 0;
padding-bottom: 0.25rem;
}
/*
* Narrow-page padding overrides MUST come after the base page-content rules
* above (and stock/home bases). Same specificity + earlier media = always loses
* to a later .stock-page-content { padding: 0 16px 32px } etc.
*/
/* Your Portfolios section — Yahoo Finance-style mini cards in a horizontal strip */
.home-portfolios-section {
margin-bottom: 12px;
min-width: 0;
max-width: 100%;
}
.home-portfolios-section > .central-item-text,
.home-portfolios-section > .home-portfolios-header {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Title + shared 1D/1M/3M/1Y/Total pills (outside the cards) */
.home-portfolios-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
padding-bottom: 0.35rem;
}
.home-portfolios-section > .home-portfolios-header > h2 {
margin-bottom: 0;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.home-portfolios-range-switcher {
width: 100%;
margin: 0;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-start;
}
.home-portfolios-range-switcher .lwc-range-btn {
font-size: 12px;
line-height: 16px;
padding: 4px 10px;
border-radius: 7px;
}
/*
* Horizontal-only scroll strip of ~1/4-size mini portfolio cards.
*
* Inset the first/last cards with flex edge spacers (::before/::after), NOT
* horizontal padding on the scroller. Padding-on-overflow-x creates an elastic
* "dead zone" when rubber-banding left (empty gutter before the first card)
* and can still leave the first tile flush against the section edge under
* scroll-snap. Spacers are real flex items so at rest the first card sits
* clear of the left border; overscroll-behavior-x: none kills the bounce gutter.
*/
.home-page-top-content .portfolio-grid,
.home-page-top-content .portfolio-grid.home-portfolio-scroll {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 10px;
margin-top: 0;
margin-bottom: 0;
/* vertical only — horizontal inset via ::before/::after spacers below */
padding: 8px 0 14px;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: none;
scroll-snap-type: x proximity;
scroll-padding-inline: 16px;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
/* Non-scrolling edge gutters (flex items) — keep first/last cards off the rim */
.home-page-top-content .portfolio-grid.home-portfolio-scroll::before,
.home-page-top-content .portfolio-grid.home-portfolio-scroll::after {
content: '';
flex: 0 0 16px;
width: 16px;
min-width: 16px;
align-self: stretch;
pointer-events: none;
}
.home-page-top-content .portfolio-grid.home-portfolio-scroll::-webkit-scrollbar {
height: 6px;
}
.home-page-top-content .portfolio-grid.home-portfolio-scroll::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.28);
border-radius: 999px;
}
.home-page-top-content .portfolio-card {
/* Desktop: ~7/8 of prior 504px width (slightly narrower strip tiles) */
flex: 0 0 auto;
width: 441px;
min-width: 441px;
max-width: 441px;
padding: 12px 12px 10px;
box-sizing: border-box;
scroll-snap-align: start;
overflow: visible; /* room for TradingView credit under the plot */
}
.home-page-top-content .portfolio-card.portfolio-card-with-chart {
text-align: left;
padding: 12px 12px 10px;
min-width: 441px;
max-width: 441px;
overflow: visible;
}
.home-page-top-content .portfolio-card-title,
.home-page-top-content .portfolio-card-title.lwc-chart-title {
font-size: 1.05rem;
font-weight: 600;
margin: 0;
line-height: 1.2;
letter-spacing: -0.01em;
text-align: left;
/* Clamp long names so tiles stay compact */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
max-height: 2.5em;
}
.home-page-top-content a.portfolio-card-create {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 100%;
text-align: left;
}
.home-page-top-content a.portfolio-card-create .portfolio-card-title {
font-size: 0.82rem;
margin: 0 0 0.35rem 0;
-webkit-line-clamp: 2;
}
.home-page-top-content a.portfolio-card-create .placeholder {
font-size: 1.35rem;
line-height: 1.2;
margin: 0.15rem 0;
}
.home-page-top-content a.portfolio-card-create p {
font-size: 0.72rem;
margin: 0;
line-height: 1.25;
color: var(--text-secondary);
}
.home-page-top-content .lwc-chart-header {
gap: 0;
margin: 0 0 6px 0;
padding: 0;
align-items: flex-start;
text-align: left;
min-width: 0;
max-width: 100%;
}
.home-page-top-content .lwc-chart-body {
min-width: 0;
max-width: 100%;
width: 100%;
overflow: hidden;
}
.home-page-top-content .profile-grid-charts {
/* Desktop: ~2× original mini height (72 → 144) */
height: 144px;
width: 100%;
max-width: 100%;
min-width: 0;
position: relative;
/* Horizontal strip scrolls; page scrolls vertically; chart pan off in JS */
touch-action: pan-x pan-y;
cursor: pointer; /* click plot → open portfolio */
}
/* Hide LWC TradingView corner logo if the option is ignored by an older build */
.home-page-top-content .tv-lightweight-charts a#tv-attr-logo,
.home-page-top-content .profile-grid-charts a[href*="tradingview.com"] {
display: none !important;
}
/* TradingView credit — one line under the whole portfolios strip (not per plot tile) */
.home-chart-tv-credit {
display: block;
margin: 6px 2px 0;
padding: 0;
font-size: 0.62rem;
line-height: 1.25;
color: var(--text-muted);
text-align: right;
letter-spacing: 0.01em;
width: 100%;
box-sizing: border-box;
}
/* Nudge left of the card’s rounded right edge so the sentence isn’t clipped */
.home-portfolios-tv-credit {
margin: 10px 4px 0;
padding: 0 14px 0 2px;
box-sizing: border-box;
}
.home-chart-tv-credit a {
color: var(--text-secondary);
text-decoration: none;
}
.home-chart-tv-credit a:hover {
color: var(--purple-text);
text-decoration: underline;
}
/* Start / end valuation chips (no y-axis gutter on mini cards) */
.home-chart-val-tag {
position: absolute;
z-index: 4;
pointer-events: none;
transform: translateY(-50%);
max-width: 46%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.1;
padding: 2px 5px;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.home-chart-val-tag--start {
left: 3px;
color: var(--text-primary);
background: var(--surface-overlay);
border: 1px solid var(--card-borders);
}
.home-chart-val-tag--end {
right: 3px;
color: #f5f3ff;
background: rgba(168, 85, 247, 0.88);
border: 1px solid rgba(196, 181, 253, 0.45);
}
/* Phones / narrow tablets: one full-width column (same as stock/portfolio pages) */
.home-brief-grid {
margin-bottom: 0;
}
/* Discover title + shared 1D/1M/3M/1Y pills (under heading, before sort) */
.home-discover-header,
.discovery-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
margin: 0 0 0.55rem;
padding: 0;
min-width: 0;
max-width: 100%;
}
.home-discover-header .home-discover-title,
.discovery-header .discovery-title,
.home-discover-header .discovery-title {
margin: 0;
}
.home-discover-range-switcher,
.discovery-range-switcher {
width: 100%;
margin: 0;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-start;
}
.home-discover-range-switcher .lwc-range-btn,
.discovery-range-switcher .lwc-range-btn {
font-size: 12px;
line-height: 16px;
padding: 4px 10px;
border-radius: 7px;
}
/* Section titles: Discover, Your Portfolios (chat title uses .portfolio-chat-header h2) */
.discovery-content > h2,
.home-page-discovery-content > h2,
.home-discovery h2,
.discovery-title,
.home-discover-title,
.home-portfolios-section h2,
.home-advisor-inner h2 {
margin-top: 0;
margin-bottom: 0.75rem;
text-align: left;
}
.home-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.home-controls-sep {
width: 1px;
height: 28px;
background: var(--card-borders);
margin: 0 4px;
}
.home-toggle-btn {
background: var(--accent);
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 8px;
cursor: pointer;
font-size: 0.95rem;
font-family: inherit;
}
.home-toggle-btn:hover {
filter: brightness(0.92);
}
.home-toggle-btn.portfolios {
background: #059669;
}
.home-filter {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.75rem;
color: var(--text-secondary);
}
.home-filter select {
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: 6px;
padding: 8px 10px;
font-size: 0.9rem;
min-width: 140px;
opacity: 0.75;
cursor: not-allowed;
}
/* Enabled sort/filter control on Discover */
.home-filter-active select {
opacity: 1;
cursor: pointer;
min-width: 200px;
}
.home-filter-active select:hover,
.home-filter-active select:focus {
border-color: var(--accent);
outline: none;
}
.discovery-sentinel {
width: 100%;
height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
}
.discovery-status {
margin: 12px 0 0;
min-height: 1.25em;
font-size: 0.85rem;
color: var(--text-secondary);
text-align: center;
}
/* eBay-style: left rail (watchlist) | main gallery (title, range, sort, tiles) */
.home-discover-layout {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
gap: 1.25rem 1.5rem;
align-items: start;
width: 100%;
max-width: none;
box-sizing: border-box;
}
/*
* Minimised watchlist: keep the two option bars exactly where they are
* (watchlist toolbar in the left rail, Discover title / range / sort in
* the right column). Only the tile grid spans into the vacated rail so
* cards fill left → right instead of leaving an empty left column.
*
* display: contents lifts header / filters / grid onto this layout so
* #grid-container can span both columns. Header/filter margins replace
* the layout row-gap so those controls do not jump.
*/
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) {
row-gap: 0;
}
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) > .home-discover-main {
display: contents;
}
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) > .home-watchlist-panel {
grid-column: 1;
grid-row: 1;
}
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .home-discover-header,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-header {
grid-column: 2;
grid-row: 1;
}
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .home-discover-filters,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-filters {
grid-column: 2;
grid-row: 2;
}
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .home-grid-container,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-grid-container,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-list-head,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-sentinel,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-status,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) .discovery-chart-pane {
grid-column: 1 / -1;
}
.home-watchlist-panel {
/* Scroll with the page (not sticky). Discover grid may grow endlessly. */
position: static;
align-self: start;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
z-index: 2;
}
/* Title + ⋯ + chevron live inside .watchlist-div */
.home-watchlist-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
margin: 0 0 0.35rem;
padding: 0 2px;
min-width: 0;
}
.home-watchlist-title {
margin: 0;
flex: 1 1 auto;
min-width: 0;
/* Match Your Portfolios / Discover section titles */
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.home-watchlist-toolbar-actions {
display: flex;
align-items: center;
gap: 0.2rem;
flex: 0 1 auto;
min-width: 0;
justify-content: flex-end;
flex-wrap: nowrap;
}
/* Compact 1D/1M/3M/1Y pills — left of ⋯ / chevron, fits four on one row */
.home-watchlist-range-switcher {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 3px;
width: auto;
margin: 0;
padding: 0;
flex: 0 1 auto;
min-width: 0;
}
.home-watchlist-range-switcher .lwc-range-btn {
font-size: 10px;
line-height: 14px;
padding: 2px 5px;
border-radius: 5px;
letter-spacing: -0.2px;
flex: 0 0 auto;
}
/* Same size/feel as history item ⋯ (previous-conversation-menu-btn) */
.home-watchlist-menu-btn {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
padding: 0 0.2rem;
margin: 0;
line-height: 1;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 6px;
min-width: 1.5rem;
min-height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Ellipsis ⋯ dropdown (Add / Delete / Reorder) */
.home-watchlist-menu-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.home-watchlist-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 40;
min-width: 11.5rem;
padding: 0.35rem 0;
margin: 0;
list-style: none;
background: var(--bg-primary-big-items);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: calc(var(--radius-card) - 4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.home-watchlist-menu-item {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0.55rem 0.9rem;
border: none;
background: transparent;
color: inherit;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.home-watchlist-menu-item:hover,
.home-watchlist-menu-item:focus-visible {
background: var(--bg-secondary, rgba(127, 127, 127, 0.12));
outline: none;
}
/* Mode chrome: add-search card / done-deleting — same footprint as mini cards */
.watchlist-mode-chrome {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
box-sizing: border-box;
}
.watchlist-mode-chrome[hidden] {
display: none !important;
}
.watchlist-add-card {
cursor: default;
overflow: visible;
z-index: 6;
}
.watchlist-add-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.5rem;
padding: 8px 10px;
min-height: 2.65rem;
box-sizing: border-box;
}
.watchlist-add-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.watchlist-search-input {
flex: 1 1 8rem;
min-width: 0;
border: 1px solid var(--card-borders);
border-radius: 6px;
background: var(--bg-primary, transparent);
color: var(--text-primary);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
padding: 0.4rem 0.55rem;
box-sizing: border-box;
}
.watchlist-search-input:focus {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 1px;
}
.watchlist-add-cancel {
flex: 0 0 auto;
border: none;
background: transparent;
color: var(--text-secondary);
font: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
padding: 0.35rem 0.4rem;
}
.watchlist-add-cancel:hover {
color: var(--text-primary);
}
.watchlist-search-results {
border-top: 1px solid var(--card-borders);
max-height: 14rem;
overflow-y: auto;
background: var(--bg-primary-big-items);
}
.watchlist-search-row {
display: grid;
grid-template-columns: minmax(4.5rem, auto) 1fr auto;
gap: 0.4rem 0.55rem;
align-items: center;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0.5rem 0.75rem;
border: none;
border-bottom: 1px solid var(--card-borders);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.watchlist-search-row:last-child {
border-bottom: none;
}
.watchlist-search-row:hover:not(:disabled),
.watchlist-search-row:focus-visible:not(:disabled) {
background: var(--bg-secondary, rgba(127, 127, 127, 0.12));
outline: none;
}
.watchlist-search-row:disabled,
.watchlist-search-row.is-on-list {
opacity: 0.65;
cursor: default;
}
.watchlist-search-sym {
font-weight: 700;
font-size: 0.82rem;
}
.watchlist-search-name {
font-size: 0.8rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.watchlist-search-action {
font-size: 0.78rem;
font-weight: 700;
color: var(--accent, #3b82f6);
}
.watchlist-search-row.is-on-list .watchlist-search-action {
color: var(--text-secondary);
}
.watchlist-search-empty {
padding: 0.65rem 0.75rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
.watchlist-done-card {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.65rem;
margin: 0;
padding: 10px 12px;
border: 1px dashed var(--card-borders);
border-radius: calc(var(--radius-card) - 4px);
background: var(--bg-primary-big-items);
color: var(--text-primary);
font: inherit;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.watchlist-done-card:hover,
.watchlist-done-card:focus-visible {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 1px;
}
/* Delete / reorder mode overlays (always visible, not hover-only) */
.mini-stock-mode-overlay {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 10px 12px;
border-radius: inherit;
background: var(--overlay-scrim);
color: var(--overlay-text);
box-sizing: border-box;
pointer-events: auto;
}
.mini-mode-label {
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.mini-remove-btn {
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 6px;
background: rgba(220, 50, 50, 0.92);
color: #fff;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
padding: 0.35rem 0.65rem;
cursor: pointer;
}
.mini-remove-btn:hover,
.mini-remove-btn:focus-visible {
filter: brightness(1.08);
outline: 2px solid #fff;
outline-offset: 1px;
}
.mini-reorder-actions,
.mini-mode-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex: 0 0 auto;
}
.mini-done-order-btn {
background: rgba(22, 163, 74, 0.92);
}
.mini-drag-handle {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0 0.1rem;
cursor: grab;
user-select: none;
color: var(--overlay-text);
opacity: 0.95;
}
.mini-drag-eq {
display: block;
font-size: 2.55rem;
font-weight: 800;
line-height: 0.62;
letter-spacing: 0;
}
.mini-stock-card.is-mode-reorder {
cursor: grab;
}
.mini-stock-card.is-dragging {
opacity: 1;
background: transparent;
box-shadow: none;
border-style: dashed;
cursor: grabbing;
}
.mini-stock-card.is-dragging .mini-stock-face,
.mini-stock-card.is-dragging .mini-stock-mode-overlay {
visibility: hidden;
}
.mini-stock-card.is-drag-over {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 1px;
}
.mini-cards-container.is-reorder .mini-stock-card {
touch-action: none;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.mini-cards-container.is-reorder .mini-stock-card {
transition: none;
}
}
.home-watchlist-menu-btn:hover,
.home-watchlist-menu-btn:focus-visible {
color: var(--text-primary);
background: rgba(148, 163, 184, 0.18);
outline: none;
}
.home-discover-title {
margin: 0 0 0.55rem;
padding: 0;
text-align: left;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
/* Title margin lives on the header when range pills are present */
.home-discover-header .home-discover-title,
.discovery-header .home-discover-title,
.discovery-header .discovery-title {
margin: 0;
}
.discovery-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
}
.discovery-mode-switch {
flex: 0 0 auto;
width: auto;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.discovery-mode-btn {
all: unset;
box-sizing: border-box;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--range-btn-color);
background-color: var(--range-btn-bg);
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.discovery-mode-btn:hover {
background-color: var(--range-btn-hover);
}
.discovery-mode-btn:active {
background-color: var(--range-btn-active);
}
.discovery-mode-btn.is-active {
background-color: var(--range-btn-active-bg);
color: var(--range-btn-active-color);
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35);
}
.discovery-mode-btn:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
.discovery-mode-btn svg {
display: block;
}
.discovery-layout.is-chart-mode .discovery-range-switcher,
.discovery-layout.is-chart-mode .home-grid-container,
.discovery-layout.is-chart-mode .discovery-grid-container,
.discovery-layout.is-chart-mode .discovery-list-head,
.discovery-layout.is-chart-mode .discovery-sentinel,
.discovery-layout.is-chart-mode .discovery-status,
.discovery-layout.is-chart-mode .discovery-filters,
.discovery-layout.is-chart-mode .home-discover-filters,
.discovery-layout.is-chart-mode label:has(#discovery-chart-listonly),
.discovery-layout.is-chart-mode .discovery-globe-only,
.discovery-layout.is-globe-mode .discovery-range-switcher,
.discovery-layout.is-globe-mode .home-grid-container,
.discovery-layout.is-globe-mode .discovery-grid-container,
.discovery-layout.is-globe-mode .discovery-list-head,
.discovery-layout.is-globe-mode .discovery-sentinel,
.discovery-layout.is-globe-mode .discovery-status,
.discovery-layout.is-globe-mode .discovery-filters,
.discovery-layout.is-globe-mode .home-discover-filters,
.discovery-layout.is-globe-mode label:has(#discovery-chart-listonly),
.discovery-layout.is-globe-mode .discovery-chart-axes,
.discovery-layout.is-globe-mode .discovery-chart-lenses,
.discovery-layout.is-globe-mode .discovery-chart-hists {
display: none !important;
}
/* List mode: same filters as cards; rows stack like the watchlist rail */
.discovery-layout.is-list-mode .home-grid-container,
.discovery-layout.is-list-mode .discovery-grid-container {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.discovery-list-hists {
display: none;
width: 100%;
margin-top: 0.55rem;
gap: 0.65rem 1rem;
}
.discovery-layout.is-list-mode .discovery-list-hists {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.discovery-hist {
min-width: 0;
overflow: hidden;
}
.discovery-hist-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.4rem;
margin-bottom: 0.2rem;
min-width: 0;
}
.discovery-hist-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.discovery-hist-vals {
font-size: 0.7rem;
font-weight: 650;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.discovery-hist.is-active .discovery-hist-vals {
color: #c4b5fd;
}
.discovery-hist-plot {
position: relative;
height: 36px;
}
.discovery-hist-bars {
position: absolute;
inset: 0 0 10px 0;
width: 100%;
height: 26px;
display: block;
}
.discovery-hist-input {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 18px;
margin: 0;
background: transparent;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
}
.discovery-hist-input::-webkit-slider-runnable-track {
height: 2px;
background: rgba(148, 163, 184, 0.35);
border-radius: 1px;
}
.discovery-hist-input::-moz-range-track {
height: 2px;
background: rgba(148, 163, 184, 0.35);
border-radius: 1px;
}
.discovery-hist-input::-webkit-slider-thumb {
pointer-events: auto;
appearance: none;
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #c4b5fd;
border: 2px solid var(--bg-primary-big-items, #121a2b);
box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.7);
margin-top: -5px;
cursor: pointer;
}
.discovery-hist-input::-moz-range-thumb {
pointer-events: auto;
width: 12px;
height: 12px;
border-radius: 50%;
background: #c4b5fd;
border: 2px solid var(--bg-primary-big-items, #121a2b);
box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.7);
cursor: pointer;
}
.discovery-list-head {
display: none;
align-items: center;
gap: 0.45rem;
padding: 0 12px 6px;
margin: 0 0 2px;
min-height: 1.4rem;
}
.discovery-layout.is-list-mode .discovery-list-head {
display: grid;
}
.discovery-list-hcell {
all: unset;
box-sizing: border-box;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
button.discovery-list-hcell {
cursor: pointer;
}
button.discovery-list-hcell:hover,
button.discovery-list-hcell:focus-visible {
color: var(--text-primary);
}
button.discovery-list-hcell.is-sorted {
color: #c4b5fd;
}
button.discovery-list-hcell.is-sorted::after {
content: ' ↓';
font-size: 0.7em;
}
button.discovery-list-hcell.is-sorted.is-asc::after {
content: ' ↑';
}
.discovery-list-h-sym,
.discovery-list-face .mini-stock-left {
text-align: left;
}
.discovery-list-col-mcap,
.discovery-list-col-pe,
.discovery-list-col-dma,
.discovery-list-col-roe,
.discovery-list-col-pb,
.discovery-list-col-yield,
.discovery-list-col-evebitda,
.discovery-list-col-fwdpe,
.discovery-list-col-opm,
.discovery-list-col-beta,
.discovery-list-h-price,
.discovery-list-face .mini-stock-right {
text-align: right;
}
/* Narrow: symbol (can shrink) · mkt cap · P/E · still · spark · last */
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(3.2rem, 0.72fr)
minmax(3.3rem, 0.55fr)
minmax(2.5rem, 0.42fr)
72px
minmax(36px, 0.8fr)
minmax(4.1rem, 0.62fr);
}
.discovery-list-col-dma,
.discovery-list-col-roe,
.discovery-list-col-pb,
.discovery-list-col-yield,
.discovery-list-col-evebitda,
.discovery-list-col-fwdpe,
.discovery-list-col-opm,
.discovery-list-col-beta {
display: none;
}
@media (min-width: 720px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(4.4rem, 0.85fr)
minmax(3.4rem, 0.5fr)
minmax(2.6rem, 0.4fr)
minmax(3.3rem, 0.48fr)
76px
minmax(64px, 1fr)
minmax(4.4rem, 0.55fr);
}
.discovery-list-col-dma {
display: block;
}
}
@media (min-width: 960px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(5rem, 0.9fr)
minmax(3.4rem, 0.46fr)
minmax(2.6rem, 0.38fr)
minmax(3.3rem, 0.44fr)
minmax(2.8rem, 0.38fr)
76px
minmax(80px, 1.05fr)
minmax(4.5rem, 0.5fr);
}
.discovery-list-col-roe {
display: block;
}
}
@media (min-width: 1140px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(5.2rem, 0.88fr)
minmax(3.4rem, 0.42fr)
minmax(2.6rem, 0.36fr)
minmax(3.2rem, 0.4fr)
minmax(2.8rem, 0.36fr)
minmax(2.6rem, 0.34fr)
80px
minmax(88px, 1.05fr)
minmax(4.5rem, 0.46fr);
}
.discovery-list-col-pb {
display: block;
}
}
@media (min-width: 1320px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(5.4rem, 0.85fr)
minmax(3.3rem, 0.4fr)
minmax(2.5rem, 0.34fr)
minmax(3.1rem, 0.38fr)
minmax(2.7rem, 0.34fr)
minmax(2.5rem, 0.32fr)
minmax(2.7rem, 0.34fr)
80px
minmax(92px, 1fr)
minmax(4.5rem, 0.44fr);
}
.discovery-list-col-yield {
display: block;
}
}
@media (min-width: 1500px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(5.5rem, 0.82fr)
minmax(3.2rem, 0.38fr)
minmax(2.5rem, 0.32fr)
minmax(3rem, 0.36fr)
minmax(2.6rem, 0.32fr)
minmax(2.5rem, 0.3fr)
minmax(2.6rem, 0.32fr)
minmax(3.4rem, 0.4fr)
80px
minmax(96px, 1fr)
minmax(4.5rem, 0.42fr);
}
.discovery-list-col-evebitda {
display: block;
}
}
@media (min-width: 1680px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(5.6rem, 0.8fr)
minmax(3.1rem, 0.36fr)
minmax(2.4rem, 0.3fr)
minmax(2.9rem, 0.34fr)
minmax(2.5rem, 0.3fr)
minmax(2.4rem, 0.28fr)
minmax(2.5rem, 0.3fr)
minmax(3.3rem, 0.38fr)
minmax(2.8rem, 0.32fr)
80px
minmax(100px, 1fr)
minmax(4.5rem, 0.4fr);
}
.discovery-list-col-fwdpe {
display: block;
}
}
@media (min-width: 1860px) {
.discovery-list-head,
.discovery-list-face {
grid-template-columns:
minmax(5.6rem, 0.76fr)
minmax(3rem, 0.34fr)
minmax(2.4rem, 0.28fr)
minmax(2.8rem, 0.32fr)
minmax(2.4rem, 0.28fr)
minmax(2.3rem, 0.26fr)
minmax(2.4rem, 0.28fr)
minmax(3.2rem, 0.36fr)
minmax(2.7rem, 0.3fr)
minmax(2.8rem, 0.3fr)
minmax(2.4rem, 0.26fr)
80px
minmax(104px, 1fr)
minmax(4.5rem, 0.38fr);
}
.discovery-list-col-opm,
.discovery-list-col-beta {
display: block;
}
}
/* Sort + facets sit under Discover title / range pills, just before the tiles */
.home-discover-filters {
margin: 0 0 0.85rem;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.home-discover-filters .home-filter {
width: auto;
max-width: none;
}
.home-discover-filters .home-filter select,
.home-discover-filters .home-filter input[type="search"] {
width: 100%;
max-width: 100%;
opacity: 1;
cursor: text;
}
.home-discover-filters .home-filter select {
cursor: pointer;
min-width: 180px;
}
.home-discover-filters .home-filter.is-universe select {
opacity: 0.85;
cursor: default;
min-width: 180px;
}
.discovery-filter-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.5rem 0.75rem;
}
.discovery-find-filter {
flex: 1 1 160px;
min-width: 148px;
max-width: 280px;
}
.discovery-find-filter input[type="search"] {
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: 6px;
padding: 8px 10px;
font-size: 0.9rem;
font-family: inherit;
}
.discovery-find-filter input[type="search"]:hover,
.discovery-find-filter input[type="search"]:focus,
.home-discover-filters .home-filter select:hover,
.home-discover-filters .home-filter select:focus {
border-color: var(--accent);
outline: none;
}
.discovery-filter-facets .home-filter {
flex: 1 1 160px;
min-width: 148px;
max-width: 280px;
}
.discovery-filter-facets .mpick {
min-width: 0;
width: 100%;
}
.discovery-card-toggles {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
width: 100%;
}
.discovery-facet-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.45rem;
}
.discovery-facet-kicker {
flex: 0 0 5.2rem;
font-size: 0.7rem;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.discovery-facet {
appearance: none;
border: 1px solid var(--card-borders);
background: var(--bg-secondary);
color: var(--text-secondary);
border-radius: 999px;
padding: 6px 12px;
font-size: 0.82rem;
line-height: 1.2;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
}
.discovery-facet:hover {
border-color: var(--accent);
color: var(--text-primary);
}
.discovery-facet.is-on,
.discovery-facet[aria-pressed="true"] {
background: var(--range-btn-active-bg);
color: var(--range-btn-active-color);
border-color: transparent;
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35);
}
.discovery-facet:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
.discovery-filters-clear {
appearance: none;
border: 0;
background: transparent;
color: var(--text-secondary);
font-size: 0.82rem;
font-family: inherit;
cursor: pointer;
padding: 6px 4px;
text-decoration: underline;
text-underline-offset: 3px;
}
.discovery-filters-clear:hover {
color: var(--text-primary);
}
.home-discover-main {
min-width: 0;
}
.home-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
align-items: start;
}
.stock-card {
display: block;
position: relative;
overflow: hidden;
background: var(--bg-primary-big-items);
border: 1px solid var(--card-borders);
border-radius: var(--radius-card);
padding: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
height: fit-content;
min-height: 236px;
color: inherit;
cursor: pointer;
}
.stock-card:hover,
.stock-card:focus-visible {
color: inherit;
}
/*
* Face (unselected): company header + blurb on top; large price series on the
* bottom half with price / % badge overlapping the chart (top-left).
*/
.stock-card-face {
display: flex;
flex-direction: column;
min-height: 236px;
height: 100%;
/* Anchor for full-card left/top media fades (::after / ::before when .has-card-bg) */
position: relative;
}
.stock-card-face-top {
flex: 0 0 auto;
padding: 14px 14px 8px;
/* Keep name / blurb above the card-bg cutout that bleeds up from the chart */
position: relative;
z-index: 1;
}
.stock-card-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
letter-spacing: 0.01em;
}
.stock-card-meta {
margin-top: 3px;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
line-height: 1.3;
letter-spacing: 0.01em;
}
/* Legacy class kept if older markup still references it */
.stock-card-ticker {
font-size: 1.05rem;
font-weight: 700;
}
.stock-card-blurb {
margin: 8px 0 0;
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Bottom ~half+: sparkline area; price badge floats over top-left */
.stock-card-face-chart {
position: relative;
flex: 1 1 auto;
min-height: 128px;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* Soft fade under face text; themed so light mode is not a black scrub */
background: var(--stock-card-chart-fade);
/* Let the product cutout paint into .stock-card-face-top */
overflow: visible;
}
.stock-card-price-badge {
position: absolute;
top: 8px;
left: 14px;
/* Above spark cover during reveal; below hover/open overlay (see .stock-card-overlay) */
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
pointer-events: none;
text-shadow: var(--price-number-shadow);
}
.stock-card-price {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.15;
color: var(--text-primary);
margin: 0;
}
.stock-card-change {
font-size: 0.92rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.stock-card-face-sparkline {
width: 100%;
height: 118px;
min-height: 110px;
display: block;
}
/* Discover face chart: very light left scrim (SVG mask does most of the work) */
.stock-card-face-chart > .stock-spark-host,
.stock-card-face-chart > .stock-card-face-sparkline {
position: relative;
}
.stock-card-face-chart > .stock-spark-host::before,
.stock-card-face-chart > .stock-card-face-sparkline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
/* Narrower + softer so the transition sits further left and is less obvious */
width: 18%;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
color-mix(in srgb, var(--bg-primary-big-items) 40%, transparent) 50%,
transparent 100%
);
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
.stock-card-face-chart > .stock-spark-host::before,
.stock-card-face-chart > .stock-card-face-sparkline::before {
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
transparent 100%
);
}
}
/*
* Spark host + solid card-coloured cover on top of the chart.
* JS fades the cover out (opacity 1 → 0) so the series appears underneath.
*/
.stock-spark-host {
position: relative;
width: 100%;
height: 100%;
display: block;
min-height: inherit;
}
.stock-card-face-chart .stock-spark-host {
min-height: 110px;
}
.stock-spark-cover {
position: absolute;
inset: 0;
z-index: 2;
/* Same fill as discovery / watchlist mini cards */
background: var(--bg-primary-big-items, #121a2b);
pointer-events: none;
opacity: 1;
/* CSS fallback reveal if JS is slow/missed — opacity on a plain div is solid */
animation: stock-spark-cover-out 0.75s ease-out 0.04s forwards;
}
@keyframes stock-spark-cover-out {
from { opacity: 1; }
to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.stock-spark-cover {
display: none;
animation: none;
}
}
/* No EOD series: keep price/change badge, drop chart footprint */
.stock-card-face-chart.is-without-chart {
min-height: 0;
flex: 0 0 auto;
background: none;
margin-top: 0;
padding: 0 14px 12px;
}
.stock-card-face-chart.is-without-chart .stock-card-price-badge {
position: static;
text-shadow: none;
}
/* Optional ticker still under the spark (media/tickers/{TICKER}/card-bg.webp) */
.stock-card-face-bg {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100%;
height: auto;
object-fit: contain;
object-position: right bottom;
z-index: 0;
pointer-events: none;
user-select: none;
/* Left + top dissolves cover the still's full box (stills often overflow
the chart well). Bottom dissolve into the card colour is unchanged. */
-webkit-mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.4) 9%,
#000 18%,
#000 100%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.4) 9%,
#000 18%,
#000 100%
),
linear-gradient(
0deg,
transparent 0%,
rgba(0, 0, 0, 0.12) 18%,
rgba(0, 0, 0, 0.55) 42%,
#000 68%,
#000 100%
);
mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.4) 9%,
#000 18%,
#000 100%
),
linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.4) 9%,
#000 18%,
#000 100%
),
linear-gradient(
0deg,
transparent 0%,
rgba(0, 0, 0, 0.12) 18%,
rgba(0, 0, 0, 0.55) 42%,
#000 68%,
#000 100%
);
-webkit-mask-composite: source-in, source-in;
mask-composite: intersect, intersect;
}
.stock-card-face-chart.has-card-bg .stock-card-face-bg {
display: block;
}
.stock-card-face-chart.has-card-bg {
background: var(--bg-primary-big-items);
}
/*
* Theme-aware left + top scrims for ticker stills. Stills are height:auto
* 16:9 and often paint above the chart well; these plates cover the full
* face so the dissolve does not stop at the spark host.
*/
.stock-card-face:has(> .stock-card-face-chart.has-card-bg)::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 18%;
/* Above the still (z 0), below title / spark / price badge */
z-index: 0;
pointer-events: none;
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
color-mix(in srgb, var(--bg-primary-big-items) 40%, transparent) 50%,
transparent 100%
);
}
.stock-card-face:has(> .stock-card-face-chart.has-card-bg)::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 18%;
z-index: 0;
pointer-events: none;
background: linear-gradient(
180deg,
var(--bg-primary-big-items) 0%,
color-mix(in srgb, var(--bg-primary-big-items) 40%, transparent) 50%,
transparent 100%
);
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
.stock-card-face:has(> .stock-card-face-chart.has-card-bg)::after {
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
transparent 100%
);
}
.stock-card-face:has(> .stock-card-face-chart.has-card-bg)::before {
background: linear-gradient(
180deg,
var(--bg-primary-big-items) 0%,
transparent 100%
);
}
}
.stock-card-face-chart.has-card-bg > .stock-spark-host,
.stock-card-face-chart.has-card-bg > .stock-card-face-sparkline {
position: relative;
z-index: 2;
}
/* Still needs the chart well even when the spark has not arrived yet.
is-without-chart otherwise collapses the well to the price badge, so the
bottom-dissolve mask cuts the photo in half. */
.stock-card-face-chart.has-card-bg.is-without-chart {
min-height: 128px;
flex: 1 1 auto;
background: var(--bg-primary-big-items);
padding: 0;
}
.stock-card-face-chart.has-card-bg.is-without-chart .stock-card-price-badge {
position: absolute;
text-shadow: var(--price-number-shadow);
}
/* Nomads-style shaded overlay (main discovery stock tiles only) */
.stock-card-overlay {
position: absolute;
inset: 0;
/* Above face price/% badge + spark cover so hover content is never occluded */
z-index: 5;
display: flex;
flex-direction: column;
justify-content: stretch;
gap: 8px;
padding: 14px 16px 14px;
border-radius: var(--radius-card);
background: var(--overlay-scrim);
color: var(--overlay-text);
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
/* Default: let the page scroll; open state overrides to own horizontal swipe */
touch-action: pan-y;
}
/* Desktop hover/focus; mobile first-tap uses .is-overlay-open (see JS) */
.stock-card:hover .stock-card-overlay,
.stock-card:focus-visible .stock-card-overlay,
.stock-card.is-overlay-open .stock-card-overlay {
opacity: 1;
/* Heart + dismiss X receive clicks while the overlay is visible */
pointer-events: auto;
}
/* On touch / no-hover devices, only the sticky open class keeps the overlay */
@media (hover: none) {
.stock-card:hover .stock-card-overlay {
opacity: 0;
pointer-events: none;
}
.stock-card.is-overlay-open .stock-card-overlay,
.stock-card:focus-visible .stock-card-overlay {
opacity: 1;
pointer-events: auto;
}
}
.stock-card-overlay-header {
flex: 0 0 auto;
padding-right: 5rem; /* clear heart + dismiss */
margin: 0;
}
.stock-card-overlay-name {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
margin: 0;
color: var(--overlay-text);
}
.stock-card-overlay-ticker {
font-size: 0.75rem;
font-weight: 600;
color: var(--overlay-text-muted);
margin-top: 2px;
}
/*
* Metric of interest + AI Insight share the same section-label / body fonts.
* Tight gap under the company name so insight can use the vertical room.
*/
.stock-card-overlay-metric {
flex: 0 0 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 3px;
padding: 0;
margin: 0;
}
.stock-card-overlay-metric-kicker,
.stock-card-overlay-insight-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #a78bfa;
line-height: 1.2;
margin: 0 0 3px;
}
.stock-card-overlay-metric-row {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.stock-card-overlay-metric-label {
font-size: 0.8rem;
font-weight: 600;
color: rgba(241, 245, 249, 0.78);
line-height: 1.35;
min-width: 0;
}
.stock-card-overlay-metric-value {
font-size: 0.8rem;
font-weight: 700;
color: #e9d5ff;
white-space: nowrap;
flex: 0 0 auto;
line-height: 1.35;
}
.stock-card-metric-bars {
width: 100%;
height: 72px;
display: block;
margin-top: 2px;
}
/* Legacy chart classes (older markup / cached JS) */
.stock-card-overlay-chart {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.stock-card-overlay-chart-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 6px;
}
.stock-card-overlay-sparkline {
width: 100%;
height: 52px;
display: block;
}
.stock-card-overlay-insight {
position: relative;
flex: 1 1 auto;
min-height: 0;
margin-top: 2px;
padding-top: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.stock-card-overlay-insight::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.6em;
pointer-events: none;
background: linear-gradient(
180deg,
transparent 0%,
var(--overlay-scrim) 88%
);
}
.stock-card-overlay-insight-text {
margin: 0;
font-size: 0.8rem;
font-weight: 500;
line-height: 1.35;
color: rgba(226, 232, 240, 0.9);
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
flex: 1 1 auto;
min-height: 0;
}
/* Overlay page 1 — stock-page "Latest AI Insights" (scrolls inside the tile) */
.stock-card-overlay-continued {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
}
.stock-card-overlay-continued-text {
margin: 0;
font-size: 0.78rem;
font-weight: 500;
line-height: 1.4;
color: rgba(226, 232, 240, 0.92);
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
padding-right: 2px;
}
.stock-card-overlay-continued-meta {
margin-top: auto;
padding-top: 0.3rem;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
/* Placeholder sub-page — news-style copy until real content exists */
.stock-card-overlay-placeholder {
flex: 1;
min-height: 0;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.4rem;
text-align: left;
padding: 0.1rem 0.15rem 0.2rem;
}
.stock-card-overlay-news {
gap: 0.35rem;
}
.stock-card-overlay-news-kicker {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.95);
line-height: 1.2;
}
.stock-card-overlay-news-headline {
font-size: 0.92rem;
font-weight: 700;
line-height: 1.3;
color: rgba(248, 250, 252, 0.96);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stock-card-overlay-news-body {
margin: 0;
font-size: 0.78rem;
font-weight: 500;
line-height: 1.4;
color: rgba(203, 213, 225, 0.9);
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stock-card-overlay-placeholder-label {
margin-top: auto;
padding-top: 0.35rem;
font-size: 0.62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
}
/* Legacy emoji class (kept for older cached markup) */
.stock-card-overlay-emoji {
font-size: 2.85rem;
line-height: 1;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
user-select: none;
}
/*
* Favourite heart + dismiss X — same transparent circled chrome.
* X sits in the old heart corner; heart shifts left to make room.
*/
.stock-card-overlay-fav,
.stock-card-overlay-dismiss {
position: absolute;
top: 10px;
z-index: 5;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
width: 1.85rem;
height: 1.85rem;
min-width: 1.85rem;
min-height: 1.85rem;
margin: 0;
padding: 0;
border: 1px solid rgba(203, 213, 225, 0.75);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text-secondary);
box-shadow: none;
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease,
background-color 0.12s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
line-height: 0;
}
.stock-card-overlay-fav {
right: 46px;
}
.stock-card-overlay-dismiss {
right: 10px;
}
.stock-card-overlay-fav:hover,
.stock-card-overlay-fav:focus-visible,
.stock-card-overlay-dismiss:hover,
.stock-card-overlay-dismiss:focus-visible {
background: transparent;
border-color: #fff;
color: #fff;
outline: none;
}
.stock-card-overlay-fav:active,
.stock-card-overlay-dismiss:active {
opacity: 0.8;
}
.stock-card-overlay-fav.is-active {
color: #f43f5e;
border-color: rgba(244, 63, 94, 0.75);
background: rgba(244, 63, 94, 0.12);
}
.stock-card-overlay-fav.is-active .stock-card-overlay-fav-path {
fill: #f43f5e;
stroke: #f43f5e;
}
.stock-card-overlay-fav-svg,
.stock-card-overlay-dismiss-svg {
width: 1.05rem;
height: 1.05rem;
display: block;
pointer-events: none;
}
/* Layout shell only (no card chrome) — mini cards / title sit on page bg */
.watchlist-div {
background: transparent;
color: var(--text-primary);
border: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: none;
max-height: none;
overflow: visible;
width: 100%;
box-sizing: border-box;
}
.watchlist-div[hidden] {
display: none !important;
}
/* Collapse hides ticker rows only — toolbar (title + chevron) stays */
.watchlist-div.is-collapsed .mini-cards-container,
.home-watchlist-panel.is-collapsed .mini-cards-container {
display: none !important;
}
.mini-cards-container[hidden] {
display: none !important;
}
.watchlist-header {
text-align: left;
}
.watchlist-header h2 {
margin: 0;
font-size: 1.15rem;
text-align: left;
}
.watchlist-header p {
margin: 8px 0 0;
opacity: 0.85;
font-size: 0.9rem;
color: var(--text-secondary);
}
.mini-cards-container {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.mini-stock-card {
position: relative;
background: var(--bg-primary-big-items);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: calc(var(--radius-card) - 4px);
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
min-height: 2.65rem;
height: auto;
display: block;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.mini-stock-card:hover {
color: inherit;
}
a.mini-stock-card {
cursor: pointer;
}
/* Face row: ticker / spark / price (padding was on the card itself) */
.mini-stock-face {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
padding: 10px 12px;
min-height: 2.65rem;
box-sizing: border-box;
}
/*
* Watchlist hover overlay — Discover-style dark scrim, single panel.
* Content: company name + market cap only (no carousel).
*/
.mini-stock-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.28rem;
padding: 10px 12px;
border-radius: inherit;
background: var(--overlay-scrim);
color: var(--overlay-text);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
box-sizing: border-box;
}
.mini-stock-card:hover .mini-stock-overlay,
.mini-stock-card:focus-visible .mini-stock-overlay,
.mini-stock-card.is-overlay-open .mini-stock-overlay {
opacity: 1;
pointer-events: auto;
}
@media (hover: none) {
.mini-stock-card:hover .mini-stock-overlay {
opacity: 0;
pointer-events: none;
}
.mini-stock-card.is-overlay-open .mini-stock-overlay,
.mini-stock-card:focus-visible .mini-stock-overlay {
opacity: 1;
pointer-events: auto;
}
}
.mini-stock-overlay-name {
font-size: 0.92rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
margin: 0;
color: var(--overlay-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-stock-overlay-mcap {
display: block;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.25;
color: var(--overlay-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-stock-left {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-width: 0;
flex: 0 1 auto;
max-width: 46%;
}
.mini-ticker {
font-weight: bold;
font-size: 1.05rem;
line-height: 1.2;
color: var(--text-primary);
}
.mini-name {
font-size: 0.78rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/*
* Micro sparkline: starts ~halfway across the ticker column and ends just
* before the price block (same green/red area style as Discover face charts).
* Left fade is an SVG in discovery_ui (buildSparklineSvg leftFade).
*/
.mini-stock-spark {
position: absolute;
left: 28%;
right: 4.75rem;
top: 50%;
transform: translateY(-50%);
height: 30px;
z-index: 1;
pointer-events: none;
opacity: 0.95;
min-width: 2.5rem;
overflow: visible;
}
.mini-stock-spark.is-empty {
display: none;
}
.mini-stock-sparkline {
width: 100%;
height: 100%;
display: block;
}
/* Soft card-colour scrim under the ticker side of the micro plot */
.mini-stock-spark::before {
content: '';
position: absolute;
left: 0;
top: -2px;
bottom: -2px;
width: 26%;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
var(--bg-primary-big-items) 18%,
transparent 100%
);
}
/* Host + cover fill the absolutely-positioned spark slot */
.mini-stock-spark .stock-spark-host {
height: 100%;
position: relative;
z-index: 0;
}
.mini-stock-spark .stock-spark-cover {
border-radius: 2px;
}
.mini-stock-right {
position: relative;
z-index: 2;
text-align: right;
flex-shrink: 0;
margin-left: auto;
/* Soft scrim so price stays readable over the sparkline tail */
padding-left: 0.35rem;
background: linear-gradient(
90deg,
transparent 0%,
var(--bg-primary-big-items) 28%
);
}
.mini-price {
font-weight: bold;
font-size: 1.0rem;
line-height: 1.2;
color: var(--text-primary);
}
.mini-change {
font-size: 0.85rem;
font-weight: 600;
line-height: 1.2;
}
/*
* Discover list rows — watchlist mini-card chrome, same two-line height,
* extra mcap / P/E (or sector) because the Discover column is wider.
*/
.discovery-list-card {
position: relative;
background: var(--bg-primary-big-items);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: calc(var(--radius-card) - 4px);
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
min-height: 2.65rem;
height: auto;
display: block;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.discovery-list-card:hover,
.discovery-list-card:focus-visible {
color: inherit;
}
.discovery-list-card .discovery-list-face {
position: relative;
z-index: 1;
display: grid;
align-items: center;
gap: 0.4rem;
padding: 4px 10px 4px 8px;
min-height: 2.65rem;
box-sizing: border-box;
}
.discovery-list-card .mini-stock-left {
position: relative;
z-index: 2;
min-width: 0;
max-width: none;
flex: none;
overflow: hidden;
}
.discovery-list-card .mini-stock-left.has-corner-logo {
overflow: visible;
}
.discovery-list-card .mini-ticker {
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.discovery-list-col {
font-size: 0.8rem;
font-weight: 650;
line-height: 1.2;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.discovery-list-col.is-empty {
color: var(--text-secondary);
font-weight: 500;
}
.discovery-list-col-dma.is-up {
color: #22c55e;
}
.discovery-list-col-dma.is-down {
color: #ef4444;
}
.discovery-list-still {
width: 100%;
height: calc(100% + 8px);
margin-block: -4px;
align-self: stretch;
min-height: 48px;
border-radius: 0;
overflow: hidden;
background: transparent;
flex: none;
justify-self: stretch;
}
.discovery-list-still.is-empty {
visibility: hidden;
}
.discovery-list-still-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: right center;
pointer-events: none;
user-select: none;
-webkit-mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.45) 14%,
#000 28%,
#000 100%
),
linear-gradient(
to bottom,
transparent 0%,
#000 16%,
#000 84%,
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0%,
rgba(0, 0, 0, 0.45) 14%,
#000 28%,
#000 100%
),
linear-gradient(
to bottom,
transparent 0%,
#000 16%,
#000 84%,
transparent 100%
);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.discovery-list-card .mini-stock-spark,
.discovery-list-spark {
position: relative;
left: auto;
right: auto;
top: auto;
transform: none;
width: auto;
height: 30px;
min-width: 0;
max-width: none;
z-index: 1;
pointer-events: none;
opacity: 0.95;
overflow: visible;
justify-self: stretch;
}
.discovery-list-card .mini-stock-spark::before,
.discovery-list-spark::before {
display: none;
}
.discovery-list-card .mini-stock-spark.is-empty,
.discovery-list-spark.is-empty {
display: block;
visibility: hidden;
}
.discovery-list-sparkline {
width: 100%;
height: 100%;
display: block;
}
.discovery-list-card .mini-stock-spark .stock-spark-host {
height: 100%;
position: relative;
z-index: 0;
}
.discovery-list-col-mcap {
font-weight: 700;
}
.discovery-list-card .mini-stock-right {
position: relative;
z-index: 2;
text-align: right;
margin-left: 0;
padding-left: 0;
background: none;
min-width: 0;
}
.discovery-list-overlay {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
padding: 10px 12px;
}
.discovery-list-overlay-copy {
min-width: 0;
flex: 1 1 auto;
}
.discovery-list-overlay-actions {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.discovery-list-card .stock-card-overlay-fav,
.discovery-list-card .stock-card-overlay-dismiss {
position: relative;
top: auto;
right: auto;
width: 1.55rem;
height: 1.55rem;
min-width: 1.55rem;
min-height: 1.55rem;
}
.discovery-list-card:hover .discovery-list-overlay,
.discovery-list-card:focus-visible .discovery-list-overlay,
.discovery-list-card.is-overlay-open .discovery-list-overlay {
opacity: 1;
pointer-events: auto;
}
@media (hover: none) {
.discovery-list-card:hover .discovery-list-overlay {
opacity: 0;
pointer-events: none;
}
.discovery-list-card.is-overlay-open .discovery-list-overlay,
.discovery-list-card:focus-visible .discovery-list-overlay {
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 900px) {
.discovery-layout.is-list-mode .discovery-list-hists {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.portfolios-div {
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: var(--radius-card);
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
grid-row: span 2; /* two vertical grid slots */
grid-column: span 2;
max-height: none;
overflow-y: hidden;
cursor: pointer;
}
/* Whole My Watchlist / My Portfolios panels act as links to /profile */
.home-panel-linkable {
cursor: pointer;
}
.portfolios-header {
text-align: center;
}
.portfolios-header h2 {
margin: 0;
font-size: 1.35rem;
text-align: center;
}
.portfolios-header p {
margin: 8px 0 0;
opacity: 0.85;
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Clickable panel titles (My Watchlist / My Portfolios → /profile) */
.panel-title-link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.panel-title-link:hover {
text-decoration: underline;
color: inherit;
}
.portfolios-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
flex: 1;
min-height: 0;
}
.portfolio-box {
background: var(--bg-primary-big-items);
border: 1px solid var(--card-borders);
border-radius: calc(var(--radius-card) - 2px);
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
.portfolio-name {
font-size: 1.1rem;
font-weight: 700;
}
.portfolio-meta {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 0.95rem;
}
.portfolio-value {
font-weight: 600;
font-size: 1.05rem;
}
.portfolio-change {
font-weight: 600;
font-size: 0.9rem;
}
/* Example portfolio cards (placeholders until real timeseries is cached) */
.portfolio-example-card {
gap: 8px;
}
.portfolio-example-chart {
margin-top: 2px;
}
.portfolio-example-chart-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(203, 213, 225, 0.85);
margin-bottom: 4px;
}
.portfolio-example-chart .stock-card-overlay-sparkline {
width: 100%;
height: 48px;
display: block;
}
.portfolio-example-insight {
margin: 4px 0 0;
font-size: 0.8rem;
line-height: 1.35;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Subscribe CTA — same shell as watchlist mini-stock-card */
.portfolio-subscribe-card {
margin-top: 4px;
width: 100%;
box-sizing: border-box;
justify-content: flex-start;
cursor: inherit;
height: auto;
min-height: 22px;
padding-top: 12px;
padding-bottom: 12px;
}
.portfolio-subscribe-card .mini-ticker {
font-size: 0.85rem;
font-weight: 600;
color: #86efac;
line-height: 1.25;
white-space: normal;
}
.portfolio-holdings {
display: flex;
flex-direction: column;
gap: 8px;
}
.mini-portfolio-card {
min-height: 98px;
padding: 12px 14px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.mini-portfolio-card .mini-ticker {
display: flex;
align-items: center;
gap: 6px;
font-size: 1rem;
flex-wrap: wrap;
}
.allocation {
font-size: 0.68rem;
background: rgba(148, 163, 184, 0.2);
color: var(--text-secondary);
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
}
.mini-portfolio-card .mini-stock-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
min-width: 78px;
}
.mini-graph {
margin-top: 4px;
width: 100%;
max-width: 72px;
height: 26px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.mini-graph svg {
width: 100%;
height: 100%;
}
/* Ticker links — theme-aware purple accent */
a.text-purple-300,
td.text-purple-300 a,
.text-purple-300 {
color: var(--purple-text);
}
td a {
color: inherit;
}
a.text-purple-300:hover,
td.text-purple-300 a:hover,
td a:hover {
color: var(--purple-text-strong);
text-decoration: underline;
}
/*.plotly .main-svg { border-radius: 12px; }*/
.central-display-item,
.central-display-item-in-grid {
border-radius: var(--radius-card);
overflow: hidden;
background-color: var(--bg-primary-big-items);
border: 1px solid var(--card-borders);
}
.central-display-item {
margin-bottom: var(--gap-section);
}
/* Cards inside .central-display-grid: no bottom margin (row gap owns spacing) */
.central-display-item-in-grid {
margin-bottom: 0;
min-width: 0;
max-width: 100%;
}
.central-item-text {
padding: 16px 18px 18px;
}
/* ---------- Portfolio chat zone (no card — sits on page background) ---------- */
.portfolio-chat-zone {
/* Sibling of .portfolio-page-content (not clipped); full viewport width */
width: 100%;
max-width: none;
margin: 0;
/* No top pad; extra bottom padding separates chat from holdings band */
padding: 0 1rem 8rem;
box-sizing: border-box;
background: transparent;
border: none;
overflow: visible;
}
.portfolio-chat-zone-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 1.25rem;
max-width: 1180px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
position: relative;
}
/* Floating previous-insights card (left of chat column) */
.portfolio-chat-history-card {
flex: 0 0 240px;
width: 240px;
max-width: 240px;
position: sticky;
top: 4.5rem;
align-self: flex-start;
background: var(--bg-primary-big-items);
border: 1px solid var(--card-borders);
border-radius: var(--radius-card);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
padding: 0.85rem 0.9rem 0.95rem;
box-sizing: border-box;
max-height: min(70vh, 640px);
display: flex;
flex-direction: column;
z-index: 5;
}
.portfolio-chat-history-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.portfolio-chat-history-header h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
}
.portfolio-chat-new-btn {
flex: 0 0 auto;
background: rgba(168, 85, 247, 0.18);
border: 1px solid rgba(168, 85, 247, 0.5);
border-radius: 8px;
color: #f3e8ff;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3rem 0.55rem;
line-height: 1.2;
}
.portfolio-chat-new-btn:hover {
background: rgba(168, 85, 247, 0.32);
border-color: #c084fc;
color: #fff;
}
.portfolio-chat-history-status {
color: var(--text-secondary);
font-size: 0.75rem;
line-height: 1.35;
margin: 0 0 0.45rem;
}
/* History list body: flex child that receives privacy blur */
.portfolio-chat-history-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.portfolio-chat-history-card .previous-conversations-list {
max-height: none;
flex: 1 1 auto;
overflow-y: auto;
margin: 0;
min-height: 0;
/* Grok-like subtle scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}
.portfolio-chat-history-card .previous-conversations-list::-webkit-scrollbar {
width: 5px;
}
.portfolio-chat-history-card .previous-conversations-list::-webkit-scrollbar-track {
background: transparent;
}
.portfolio-chat-history-card .previous-conversations-list::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.2);
border-radius: 999px;
}
.portfolio-chat-history-card .previous-conversations-list::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.38);
}
/* Message thread wrapper (blur target in privacy mode) */
.portfolio-chat-thread {
display: flex;
flex-direction: column;
min-width: 0;
}
.portfolio-chat-history-card .previous-conversation-item {
padding: 0.55rem 0.65rem;
margin-bottom: 0.45rem;
border-radius: 10px;
}
.portfolio-chat-history-card .previous-conversation-when {
font-size: 0.78rem;
}
.portfolio-chat-history-card .previous-conversation-preview {
font-size: 0.8rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Main ~800px chat column on page background */
.portfolio-chat-main {
flex: 1 1 800px;
width: 100%;
max-width: 800px;
min-width: 0;
box-sizing: border-box;
}
.portfolio-chat-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.65rem 1rem;
margin: 0 0 0.85rem;
}
.portfolio-chat-header h2 {
margin: 0;
/* Match .lwc-chart-title ("Portfolio Holdings Over Time") */
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text-primary);
flex: 1 1 auto;
min-width: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
}
.portfolio-chat-model-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex: 0 1 auto;
margin: 0;
cursor: pointer;
}
.portfolio-chat-model-caption {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.portfolio-chat-model-select {
appearance: none;
-webkit-appearance: none;
background-color: var(--bg-secondary);
background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%);
background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
border: 1px solid var(--card-borders);
border-radius: 10px;
color: var(--text-primary);
font: inherit;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.3;
max-width: min(100%, 15.5rem);
min-width: 10.5rem;
padding: 0.45rem 1.75rem 0.45rem 0.7rem;
cursor: pointer;
}
.portfolio-chat-model-select:hover {
border-color: rgba(168, 85, 247, 0.45);
}
.portfolio-chat-model-select:focus {
outline: none;
border-color: #a855f7;
box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}
.portfolio-chat-model-select option {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* Chat thread: grow with the page; no inner height cap */
.portfolio-chat-messages,
#messages.portfolio-chat-messages {
min-height: 600px;
max-height: none;
overflow-y: visible;
overflow-x: hidden;
display: flex;
flex-direction: column;
/* Airy spacing between user questions and AI answers */
gap: 2.15rem;
padding: 0.35rem 0.15rem 1rem;
margin: 0;
border: none;
background: transparent;
border-radius: 0;
box-sizing: border-box;
/* Grok-like subtle scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}
.portfolio-chat-messages::-webkit-scrollbar,
#messages.portfolio-chat-messages::-webkit-scrollbar {
width: 6px;
}
.portfolio-chat-messages::-webkit-scrollbar-track,
#messages.portfolio-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.portfolio-chat-messages::-webkit-scrollbar-thumb,
#messages.portfolio-chat-messages::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.18);
border-radius: 999px;
}
.portfolio-chat-messages::-webkit-scrollbar-thumb:hover,
#messages.portfolio-chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.35);
}
/* Grok-style rows: AI left, user right */
.portfolio-chat-row {
display: flex;
width: 100%;
box-sizing: border-box;
}
.portfolio-chat-row--assistant {
justify-content: flex-start;
}
.portfolio-chat-row--user {
justify-content: flex-end;
}
.portfolio-chat-bubble {
box-sizing: border-box;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
}
/* AI copy uses the full ~800px chat column — primary text (not muted) */
.portfolio-chat-bubble--assistant {
width: 100%;
max-width: 800px;
background: transparent;
border: none;
color: var(--text-primary);
padding: 0.15rem 0.1rem;
border-radius: 0;
text-align: left;
}
/* User bubbles stay compact on the right */
.portfolio-chat-bubble--user {
max-width: min(88%, 560px);
background: rgba(51, 65, 85, 0.55);
border: 1px solid rgba(148, 163, 184, 0.22);
color: var(--text-primary);
padding: 0.7rem 0.95rem;
border-radius: 18px 18px 4px 18px;
text-align: left;
}
.portfolio-chat-row--opening {
/* Clear the sticky top nav so Chat about doesn't tuck the blurb under it */
scroll-margin-top: 4.75rem;
}
html.stock-embed .portfolio-chat-row--opening {
scroll-margin-top: 0.35rem;
}
.portfolio-chat-row--opening .portfolio-chat-bubble--assistant {
max-width: 800px;
width: 100%;
color: var(--text-primary);
}
.portfolio-chat-opening-meta {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-muted);
margin-bottom: 0.45rem;
text-transform: none;
}
.portfolio-chat-bubble-text {
font-size: 0.98rem;
}
.portfolio-chat-bubble-text.chat-md,
.portfolio-chat-bubble .chat-md {
color: inherit;
}
.portfolio-chat-row.is-error .portfolio-chat-bubble-text {
color: #f87171;
}
.chat-activity {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0.1rem 0 0.5rem;
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.3;
}
.chat-activity[hidden] {
display: none;
}
.chat-activity-dots {
display: inline-flex;
gap: 4px;
align-items: center;
}
.chat-activity-dots i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.35;
animation: chat-dot 1.05s ease-in-out infinite;
}
.chat-activity-dots i:nth-child(2) {
animation-delay: 0.15s;
}
.chat-activity-dots i:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes chat-dot {
0%, 80%, 100% {
transform: translateY(0);
opacity: 0.3;
}
40% {
transform: translateY(-4px);
opacity: 0.95;
}
}
.portfolio-chat-status {
color: var(--text-muted);
font-size: 12px;
min-height: 1.2em;
margin: 0.35rem 0 0.55rem;
}
.portfolio-chat-compose {
display: flex;
gap: 0.55rem;
align-items: flex-end;
margin-top: 0.25rem;
position: sticky;
bottom: 0.5rem;
padding: 0.35rem 0;
background: linear-gradient(
to top,
var(--bg-primary) 70%,
var(--chat-compose-fade)
);
z-index: 2;
}
.chat-nfa-blurb {
margin: 0.35rem 0 0;
padding: 0 0.15rem;
font-size: 12px;
line-height: 1.45;
color: var(--text-muted, #64748b);
max-width: 52rem;
}
.portfolio-chat-compose .portfolio-chat-input,
.portfolio-chat-compose .home-chat-input {
flex: 1 1 auto;
border-radius: 12px;
min-width: 0;
}
/*
* LLM chats (home, portfolio, stock, stock overlay) share this composer.
* Keep them the same: growing textarea, curve on the shell so a native
* scrollbar cannot sit as a square over the rounded box, bar hidden.
*/
.chat-input-shell {
flex: 1 1 auto;
min-width: 0;
border: 1px solid var(--card-borders);
border-radius: 12px;
background: var(--bg-secondary);
overflow: hidden;
box-sizing: border-box;
}
.chat-input-shell:focus-within {
border-color: #a855f7;
}
.chat-input-shell:has(textarea:disabled) {
opacity: 0.6;
}
.portfolio-chat-compose textarea.home-chat-input,
.portfolio-chat-compose textarea.portfolio-chat-input {
display: block;
width: 100%;
flex: none;
resize: none;
overflow-x: hidden;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
min-height: 2.55rem;
max-height: min(42vh, 14rem);
line-height: 1.45;
border: 0;
border-radius: 0;
background: transparent;
padding: 0.62rem 1.05rem;
box-sizing: border-box;
font-family: inherit;
white-space: pre-wrap;
word-break: break-word;
}
.portfolio-chat-compose textarea.home-chat-input:focus,
.portfolio-chat-compose textarea.portfolio-chat-input:focus {
outline: none;
border-color: transparent;
}
.portfolio-chat-compose textarea.home-chat-input:disabled,
.portfolio-chat-compose textarea.portfolio-chat-input:disabled {
opacity: 1;
}
.portfolio-chat-compose textarea.home-chat-input::-webkit-scrollbar,
.portfolio-chat-compose textarea.portfolio-chat-input::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.portfolio-chat-bubble--user .portfolio-chat-bubble-text {
white-space: pre-wrap;
}
/* Full-width colour band under chat (holdings / transactions) */
.portfolio-lower-band {
width: 100%;
max-width: none;
margin: 0.5rem 0 0;
padding: 1.75rem 0 2.5rem;
box-sizing: border-box;
/* Slightly lifted off the main page background */
background: color-mix(in srgb, var(--bg-secondary) 88%, #1e293b 12%);
border-top: 1px solid var(--card-borders);
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
.portfolio-lower-band {
background: #0e1524;
}
}
.portfolio-lower-band-inner {
max-width: 1000px;
width: 100%;
margin: 0 auto;
/* Bottom pad separates holdings/tabs from nested Discover (same colour band) */
padding: 0 16px 1.5rem;
box-sizing: border-box;
min-width: 0;
}
.portfolio-lower-band .portfolio-holdings-section {
margin-bottom: 0;
}
.portfolio-insight-blurb {
margin-bottom: 0.75rem;
}
.portfolio-insight-blurb #portfolio-insight-text {
line-height: 1.45;
}
/* Stock page (expandable card) still uses .home-chat-messages heights */
.home-advisor-chat #messages.home-chat-messages,
#messages.home-chat-messages {
max-height: 420px;
min-height: 220px;
overflow-y: auto;
}
.home-advisor-chat.is-expanded #messages.home-chat-messages {
max-height: min(65vh, 680px);
min-height: 320px;
}
.portfolio-insight-tabs {
display: flex;
flex-wrap: nowrap;
gap: 1.25rem;
margin: 0 0 1rem 0;
border-bottom: 1px solid var(--card-borders);
padding: 0 0.25rem;
/* Narrow viewports: scroll headings horizontally instead of wrapping */
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) transparent;
/* Keep first/last labels fully reachable when scrolling */
scroll-padding-inline: 0.75rem;
justify-content: flex-start;
}
/* Portfolio holdings card: centre only when tabs fit (wide); avoid clipping ends */
.portfolio-holdings-section .portfolio-insight-tabs {
justify-content: safe center;
}
.portfolio-insight-tabs::-webkit-scrollbar {
height: 4px;
}
.portfolio-insight-tabs::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border-radius: 999px;
}
.portfolio-insight-tab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: inherit; /* same text colour selected or not */
cursor: pointer;
font: inherit;
font-size: 1rem;
font-weight: 600;
margin-bottom: -1px; /* sit on the tab bar line */
padding: 0.5rem 0.15rem 0.55rem;
flex: 0 0 auto;
white-space: nowrap;
}
.portfolio-insight-tab:hover {
background: transparent;
color: var(--purple-text);
}
.portfolio-insight-tab.is-active {
background: transparent;
border-bottom-color: var(--purple);
color: var(--purple-text-strong);
font-weight: 600;
}
.portfolio-insight-panel[hidden] {
display: none !important;
}
/* Holdings | Transactions tab box — transactions list grows freely (no max-height) */
.portfolio-holdings-section {
overflow: visible;
}
.portfolio-transactions-panel {
max-height: none;
overflow: visible;
}
.portfolio-transactions-panel #transactions-table,
.portfolio-transactions-panel #dividends-table,
.portfolio-transactions-panel #corp-events-table {
max-height: none;
}
/* Import / AI extract / broker connect placeholder above the transactions table */
.transactions-import-placeholder {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem 1.1rem;
margin: 0 0 0.95rem 0;
padding: 0.95rem 1rem 1rem;
max-width: 720px;
box-sizing: border-box;
border-radius: 14px;
border: 1px solid var(--purple-border);
background:
radial-gradient(120% 140% at 0% 0%, var(--purple-bg), transparent 55%),
radial-gradient(90% 120% at 100% 100%, rgba(56, 189, 248, 0.08), transparent 50%),
var(--bg-elevated);
box-shadow:
0 0 0 1px var(--card-borders) inset,
0 10px 28px var(--shadow-color);
position: relative;
overflow: hidden;
color: var(--text-primary);
}
.transactions-import-placeholder::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, #c084fc, #38bdf8 70%, transparent);
opacity: 0.9;
pointer-events: none;
}
.transactions-import-ai-mark {
flex: 0 0 auto;
width: 2.15rem;
height: 2.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 1.05rem;
line-height: 1;
color: var(--purple-text-strong);
background: var(--purple-bg-strong);
border: 1px solid var(--purple-border);
box-shadow: 0 0 12px var(--purple-bg);
margin-top: 0.1rem;
}
.transactions-import-placeholder-main {
flex: 1 1 14rem;
min-width: 0;
}
.transactions-import-placeholder-heading {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
margin-bottom: 0.35rem;
}
.transactions-import-placeholder-title {
display: inline;
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.3;
}
.transactions-import-soon-pill {
display: inline-flex;
align-items: center;
padding: 0.12rem 0.5rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--purple-text-strong);
background: var(--purple-bg);
border: 1px solid var(--purple-border);
line-height: 1.35;
}
.transactions-import-placeholder-copy {
margin: 0;
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.5;
max-width: 38rem;
}
.transactions-import-placeholder-copy strong {
color: var(--text-primary);
font-weight: 650;
}
.transactions-import-format-list {
list-style: none;
margin: 0.65rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.transactions-import-format-chip {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface-inset);
border: 1px solid var(--card-borders);
line-height: 1.3;
}
.transactions-import-format-chip-ai {
color: var(--purple-text-strong);
background: var(--purple-bg);
border-color: rgba(192, 132, 252, 0.42);
}
.transactions-import-placeholder-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
flex-shrink: 0;
align-self: center;
}
.tx-btn-placeholder {
background: linear-gradient(180deg, rgba(88, 28, 135, 0.35), rgba(30, 41, 59, 0.9));
color: #d8b4fe;
border: 1px solid rgba(192, 132, 252, 0.35);
opacity: 0.92;
cursor: not-allowed;
}
.tx-btn-placeholder:disabled {
cursor: not-allowed;
}
.transactions-import-placeholder.is-live {
cursor: pointer;
}
.transactions-import-placeholder.is-live.is-dragover {
border-color: var(--purple-text-strong);
box-shadow:
0 0 0 1px var(--purple-border) inset,
0 10px 28px var(--shadow-color);
}
.tx-import-file-input {
display: none;
}
.tx-import-paste {
display: block;
width: 100%;
max-width: 38rem;
margin-top: 0.7rem;
box-sizing: border-box;
padding: 0.45rem 0.55rem;
border-radius: 8px;
border: 1px solid var(--card-borders);
background: var(--surface-inset);
color: var(--text-primary);
font: inherit;
font-size: 0.8rem;
line-height: 1.4;
resize: vertical;
min-height: 2.6rem;
}
.tx-import-paste:focus {
outline: none;
border-color: var(--purple-border);
}
.tx-import-status {
flex: 1 1 100%;
margin: 0.15rem 0 0;
font-size: 0.82rem;
color: var(--text-secondary);
}
.tx-import-status.is-error {
color: #f87171;
}
.tx-import-upload-btn,
.tx-import-paste-btn {
background: linear-gradient(180deg, rgba(88, 28, 135, 0.45), rgba(30, 41, 59, 0.95));
color: #e9d5ff;
border: 1px solid rgba(192, 132, 252, 0.45);
cursor: pointer;
}
.tx-import-review-overlay[hidden] {
display: none !important;
}
.tx-import-review-overlay {
position: fixed;
inset: 0;
z-index: 380;
display: flex;
align-items: center;
justify-content: center;
}
.tx-import-review-scrim {
position: absolute;
inset: 0;
background: rgba(6, 10, 18, 0.62);
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
}
html[data-theme="light"] .tx-import-review-scrim {
background: rgba(15, 23, 42, 0.45);
}
body.tx-import-review-open {
overflow: hidden;
}
.tx-import-review-panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(1280px, calc(100vw - 32px));
height: min(88vh, calc(100dvh - 28px));
max-height: calc(100dvh - 28px);
overflow: hidden;
min-width: 0;
}
.tx-import-review {
margin: 0;
padding: 0.85rem 0.9rem 0.95rem;
border-radius: 16px;
border: 1px solid var(--purple-border);
background: var(--bg-elevated);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
max-width: none;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.tx-import-review-close {
all: unset;
box-sizing: border-box;
flex: 0 0 auto;
width: 2.15rem;
height: 2.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
color: var(--text-secondary);
font-size: 1.7rem;
line-height: 1;
font-weight: 500;
}
.tx-import-review-close:hover {
color: var(--text-primary);
background: rgba(148, 163, 184, 0.14);
}
.tx-import-review-close:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
.tx-import-review-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.55rem 0.85rem;
margin-bottom: 0.3rem;
flex: 0 0 auto;
}
.tx-import-review-head-text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.7rem;
min-width: 0;
}
.tx-import-review-title {
font-size: 0.92rem;
}
.tx-import-review-meta {
font-size: 0.78rem;
color: var(--text-secondary);
}
.tx-import-review-copy {
margin: 0 0 0.65rem;
font-size: 0.82rem;
color: var(--text-secondary);
max-width: 52rem;
line-height: 1.45;
flex: 0 0 auto;
}
.tx-import-review-wrap {
overflow: auto;
flex: 1 1 auto;
min-height: 0;
}
.tx-import-review-wrap.transactions-table-wrap {
max-width: none;
}
#tx-import-review-table tfoot td {
text-align: left;
padding: 0.45rem 0.275rem;
border-bottom: none;
}
#tx-import-review-table .tx-import-add-row-btn,
#tx-import-add-row-btn {
min-width: 8.5rem;
}
#tx-import-review-table.stock-statement-table {
width: max-content;
min-width: 100%;
}
#tx-import-review-table.stock-statement-table th,
#tx-import-review-table.stock-statement-table td {
padding: 0.325rem 0.275rem;
}
/* Date is not the leftmost column here (discard + include come first). */
#tx-import-review-table td.stock-statement-metric-col,
#tx-import-review-table th.stock-statement-metric-col {
position: static;
left: auto;
z-index: auto;
box-shadow: none;
background: transparent;
max-width: none;
padding-left: 0.325rem;
}
#tx-import-review-table th.tx-import-col-discard,
#tx-import-review-table td.tx-import-col-discard {
width: 0.9rem;
min-width: 0.9rem;
max-width: 1.15rem;
padding-left: 0.08rem !important;
padding-right: 0.08rem !important;
text-align: center;
}
#tx-import-review-table th.tx-import-col-include,
#tx-import-review-table td.tx-import-col-include {
width: 4.1rem;
min-width: 4.1rem;
max-width: 4.1rem;
text-align: center;
cursor: pointer;
}
#tx-import-review-table th.transactions-col-ccy,
#tx-import-review-table td.transactions-col-ccy {
width: 4.1rem;
min-width: 4.1rem;
max-width: 4.1rem;
}
#tx-import-review-table .tx-import-col-include input[type="checkbox"] {
width: 1.15rem;
height: 1.15rem;
margin: 0;
accent-color: #a855f7;
cursor: pointer;
}
#tx-import-review-table th.transactions-col-ticker,
#tx-import-review-table td.transactions-col-ticker {
min-width: 8.52rem;
width: 8.52rem;
max-width: none;
white-space: nowrap;
overflow: visible;
text-align: left;
}
.tx-import-col-cash {
min-width: 11rem;
white-space: nowrap;
}
#tx-import-review-table th.tx-import-col-convert-fx,
#tx-import-review-table td.tx-import-col-convert-fx,
#transactions-table th.tx-import-col-convert-fx,
#transactions-table td.tx-import-col-convert-fx {
min-width: 7.5rem;
text-align: left;
cursor: pointer;
white-space: nowrap;
}
.tx-import-convert-fx-controls,
.tx-convert-fx-controls {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-wrap: nowrap;
}
#transactions-table .transactions-col-fx-cross,
#tx-import-review-table .transactions-col-fx-cross {
min-width: 6.5rem;
white-space: nowrap;
font-size: 0.78rem;
font-weight: 600;
}
.tx-fx-cross {
letter-spacing: 0.02em;
}
.tx-ccy-select:disabled,
.tx-ccy-select.is-locked {
opacity: 0.55;
cursor: default;
background: rgba(148, 163, 184, 0.12);
}
#tx-import-review-table .tx-convert-fx-cb,
#transactions-table .tx-convert-fx-cb {
width: 0.9rem;
height: 0.9rem;
margin: 0;
accent-color: #a855f7;
cursor: pointer;
}
#tx-import-review-table .tx-convert-fx-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
cursor: pointer;
}
#tx-import-review-table .tx-fx-input[hidden],
#tx-import-review-table .tx-fx-placeholder[hidden],
#transactions-table .tx-fx-input[hidden],
#transactions-table .tx-fx-placeholder[hidden] {
display: none !important;
}
.tx-import-review-table .tx-import-notes,
#tx-import-review-table .tx-import-notes {
font-size: 0.72rem;
color: var(--text-secondary);
max-width: 14rem;
line-height: 1.3;
white-space: normal;
}
.tx-import-review tr.is-review td {
background: rgba(250, 204, 21, 0.08);
}
.tx-import-review-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.65rem;
margin-top: 0;
}
.tx-import-review-error {
font-size: 0.8rem;
color: #f87171;
}
.tx-import-review .tx-ticker-lookup .watchlist-add-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.tx-import-review .tx-ticker-lookup-results,
.tx-ticker-lookup-results {
background: var(--bg-primary-big-items);
z-index: 430;
}
.tx-import-review .tx-btn {
appearance: none;
border: 1px solid rgba(148, 163, 184, 0.28);
cursor: pointer;
font: inherit;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
padding: 0.28rem 0.55rem;
border-radius: 6px;
color: var(--text-secondary);
background: transparent;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tx-import-review .tx-btn:hover {
color: var(--text-primary);
border-color: rgba(148, 163, 184, 0.45);
background: rgba(148, 163, 184, 0.1);
}
.tx-import-review .tx-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.tx-import-review .tx-btn-add {
background: rgba(16, 185, 129, 0.85);
color: #fff;
border-color: transparent;
}
.tx-import-review .tx-btn-add:hover {
background: rgba(52, 211, 153, 0.95);
color: #fff;
}
.tx-import-review .tx-import-discard-row {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
width: 0.85rem;
height: 0.85rem;
min-width: 0;
font-size: 0.62rem;
line-height: 1;
border: none;
border-radius: 3px;
}
.tx-import-review .tx-import-discard-row:hover {
color: #fca5a5;
border-color: transparent;
background: rgba(248, 113, 113, 0.08);
}
.tx-import-review .tx-input {
box-sizing: border-box;
max-width: 100%;
padding: 0.11rem 0.2rem;
font: inherit;
font-size: 0.82rem;
line-height: 1.2;
color: var(--text-primary);
background: var(--surface-inset);
border: 1px solid var(--chip-border);
border-radius: 6px;
color-scheme: inherit;
}
#tx-import-review-table .tx-ticker-lookup .watchlist-search-input {
font-size: 0.76rem;
font-weight: 600;
padding: 0.11rem 0.28rem;
}
.tx-import-review .tx-input-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.tx-import-review .tx-fx-input {
width: 5.25rem;
}
.tx-import-review .tx-ccy-select {
width: auto;
min-width: 3.6rem;
font-size: 0.72rem;
padding: 0.09rem 0.14rem;
cursor: pointer;
}
.tx-import-cash-controls {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-wrap: nowrap;
}
.tx-import-review .tx-deduct-cash-label {
display: inline-flex;
align-items: center;
gap: 0.28rem;
margin: 0;
font-size: 0.72rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.tx-import-review .tx-deduct-cash-cb {
width: 0.9rem;
height: 0.9rem;
margin: 0;
accent-color: #a855f7;
cursor: pointer;
}
.tx-import-review .tx-cash-currency {
width: auto;
min-width: 3.75rem;
font-size: 0.72rem;
padding: 0.09rem 0.15rem;
cursor: pointer;
}
.tx-import-review .tx-cash-currency[hidden] {
display: none !important;
}
.tx-import-review .tx-cash-na {
color: var(--text-muted);
}
#tx-import-review-table tr.is-cash-mode input[name="price"],
#tx-import-review-table input[name="price"].is-cash-disabled,
#tx-import-review-table input[name="price"]:disabled,
#transactions-table #tx-add-price.is-cash-disabled,
#transactions-table #tx-add-price:disabled {
opacity: 0.45;
color: var(--text-muted);
background: rgba(148, 163, 184, 0.12);
cursor: not-allowed;
}
/* Transactions / dividends / corp events — denser rows, sticky date+ticker */
.transactions-table-wrap {
margin-top: 0.15rem;
max-width: 860px;
width: 100%;
/* Horizontal scroll on narrow screens; date + ticker stay sticky on the left */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-width: 0;
}
/* Empty-state copy when a portfolio tab has no rows */
.tx-empty-note {
margin: 0.35rem 0 0;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
#transactions-table.stock-statement-table,
#dividends-table.stock-statement-table,
#corp-events-table.stock-statement-table {
--tx-sticky-date-w: 6.15rem;
--tx-sticky-ticker-w: 5.1rem;
font-variant-numeric: tabular-nums;
width: 100%;
min-width: 0;
max-width: 100%;
table-layout: auto;
}
#transactions-table.stock-statement-table {
--tx-sticky-ticker-w: 5.92rem;
}
/* Screen-reader only (ticker filter label) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
* Keep vertical density tight: many transaction rows.
* Default stock-statement cells use ~0.65rem pad — use ~half so lists stay compact.
* Never wrap a transaction onto two lines — scroll horizontally instead.
*/
#transactions-table.stock-statement-table th,
#transactions-table.stock-statement-table td,
#dividends-table.stock-statement-table th,
#dividends-table.stock-statement-table td,
#corp-events-table.stock-statement-table th,
#corp-events-table.stock-statement-table td {
padding: 0.28rem 0.4rem;
font-size: 0.86rem;
line-height: 1.25;
white-space: nowrap;
vertical-align: middle;
}
#transactions-table.stock-statement-table th,
#dividends-table.stock-statement-table th,
#corp-events-table.stock-statement-table th {
font-size: 0.78rem;
padding-bottom: 0.4rem;
}
/*
* Sticky left columns (same idea as financials metric col):
* Date pinned at left:0, ticker pinned just after it so both stay visible while
* scrolling to shares / price / action buttons on narrow screens.
*/
#transactions-table td.stock-statement-metric-col,
#transactions-table th.stock-statement-metric-col,
#transactions-table td.transactions-col-date,
#transactions-table th.transactions-col-date,
#dividends-table td.stock-statement-metric-col,
#dividends-table th.stock-statement-metric-col,
#dividends-table td.transactions-col-date,
#dividends-table th.transactions-col-date,
#corp-events-table td.stock-statement-metric-col,
#corp-events-table th.stock-statement-metric-col,
#corp-events-table td.transactions-col-date,
#corp-events-table th.transactions-col-date {
min-width: var(--tx-sticky-date-w);
max-width: var(--tx-sticky-date-w);
width: var(--tx-sticky-date-w);
white-space: nowrap;
position: sticky;
left: 0;
z-index: 3;
background: var(--bg-primary-big-items);
box-shadow: none;
}
#transactions-table th.stock-statement-metric-col,
#transactions-table th.transactions-col-date,
#dividends-table th.stock-statement-metric-col,
#dividends-table th.transactions-col-date,
#corp-events-table th.stock-statement-metric-col,
#corp-events-table th.transactions-col-date {
z-index: 5;
background: var(--bg-primary-big-items);
}
#transactions-table .transactions-col-ticker,
#dividends-table .transactions-col-ticker,
#corp-events-table .transactions-col-ticker {
text-align: left;
white-space: nowrap;
min-width: var(--tx-sticky-ticker-w);
max-width: var(--tx-sticky-ticker-w);
width: var(--tx-sticky-ticker-w);
overflow: hidden;
text-overflow: ellipsis;
position: sticky;
left: var(--tx-sticky-date-w);
z-index: 2;
background: var(--bg-primary-big-items);
/* Soft edge so scrolling cells tuck under the sticky pair */
box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);
}
#transactions-table th.transactions-col-ticker,
#dividends-table th.transactions-col-ticker,
#corp-events-table th.transactions-col-ticker {
z-index: 4;
background: var(--bg-primary-big-items);
}
/* Opaque sticky bases under row hover / edit tints (match financials) */
#transactions-table tbody tr.stock-statement-row:hover td.stock-statement-metric-col,
#transactions-table tbody tr.stock-statement-row:hover td.transactions-col-ticker,
#transactions-table tbody tr.transactions-add-row:hover td.stock-statement-metric-col,
#transactions-table tbody tr.transactions-add-row:hover td.transactions-col-ticker,
#dividends-table tbody tr.stock-statement-row:hover td.stock-statement-metric-col,
#dividends-table tbody tr.stock-statement-row:hover td.transactions-col-ticker,
#corp-events-table tbody tr.stock-statement-row:hover td.stock-statement-metric-col,
#corp-events-table tbody tr.stock-statement-row:hover td.transactions-col-ticker {
background: var(--bg-elevated);
}
#transactions-table tbody tr.tx-data-row.is-editing td.stock-statement-metric-col,
#transactions-table tbody tr.tx-data-row.is-editing td.transactions-col-ticker {
background: #1c1830;
}
html[data-theme="light"] #transactions-table tbody tr.tx-data-row.is-editing td.stock-statement-metric-col,
html[data-theme="light"] #transactions-table tbody tr.tx-data-row.is-editing td.transactions-col-ticker {
background: #ede9fe;
}
#transactions-table tbody tr.stock-statement-row,
#dividends-table tbody tr.stock-statement-row,
#corp-events-table tbody tr.stock-statement-row {
cursor: default;
}
#transactions-table .tx-ticker-th,
#dividends-table .tx-ticker-th {
display: inline-flex;
align-items: center;
gap: 0.28rem;
flex-wrap: nowrap;
max-width: 100%;
}
#transactions-table .tx-ticker-th-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#dividends-table .tx-ticker-th-label {
flex: 0 0 auto;
}
/* Compact custom ticker filter — narrow closed control + scrollable menu */
#transactions-table .tx-ticker-filter-wrap {
position: relative;
display: inline-flex;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
#dividends-table .tx-ticker-filter-wrap {
position: relative;
display: inline-flex;
flex: 0 1 auto;
min-width: 0;
max-width: 3.6rem;
}
#transactions-table .tx-ticker-filter-btn,
#dividends-table .tx-ticker-filter-btn {
appearance: none;
position: relative;
display: inline-block;
width: auto;
min-width: 2.8rem;
max-width: 5.75rem;
padding: 0.1rem 1.05rem 0.1rem 0.28rem;
font-size: 0.68rem;
font-weight: 500;
line-height: 1.2;
text-align: left;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-secondary);
}
#transactions-table .tx-ticker-filter-btn::after,
#dividends-table .tx-ticker-filter-btn::after {
content: "";
position: absolute;
right: 0.32rem;
top: 50%;
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
transform: translateY(-35%);
opacity: 0.55;
pointer-events: none;
}
#transactions-table .tx-ticker-filter-btn.is-open,
#dividends-table .tx-ticker-filter-btn.is-open {
border-color: rgba(168, 85, 247, 0.5);
}
/*
* Menu is portaled to document.body (position:fixed) so table overflow and
* add-row overlays cannot clip/cover it. Style by class — a descendant
* selector like #transactions-table .tx-ticker-filter-menu no longer matches
* once the node is moved out of the table. Without these rules, native
* inline-block option buttons spray horizontally to the right.
*/
.tx-ticker-filter-menu {
position: fixed;
z-index: 260;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
width: max-content;
max-width: 12rem;
max-height: 16rem;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.2rem;
margin: 0;
box-sizing: border-box;
background: var(--surface-overlay, rgba(15, 23, 42, 0.98));
border: 1px solid var(--chip-border, rgba(148, 163, 184, 0.28));
border-radius: 8px;
box-shadow: 0 10px 28px var(--shadow-color, rgba(0, 0, 0, 0.45));
color: var(--text-primary);
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}
html[data-theme="dark"] .tx-ticker-filter-menu {
background: rgba(15, 23, 42, 0.98);
border-color: rgba(148, 163, 184, 0.28);
}
html[data-theme="light"] .tx-ticker-filter-menu {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.14);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.tx-ticker-filter-menu::-webkit-scrollbar {
width: 5px;
}
.tx-ticker-filter-menu::-webkit-scrollbar-track {
background: transparent;
}
.tx-ticker-filter-menu::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.2);
border-radius: 999px;
}
.tx-ticker-filter-menu::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.38);
}
.tx-ticker-filter-menu[hidden] {
display: none !important;
}
.tx-ticker-filter-option {
appearance: none;
display: block;
width: 100%;
flex: 0 0 auto;
box-sizing: border-box;
margin: 0;
padding: 0.28rem 0.45rem;
border: none;
border-radius: 5px;
background: transparent;
color: var(--text-primary);
font: inherit;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.25;
text-align: left;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-ticker-filter-option:hover {
background: rgba(148, 163, 184, 0.12);
color: var(--text-primary);
}
.tx-ticker-filter-option.is-selected {
background: rgba(168, 85, 247, 0.18);
color: var(--purple-text-strong);
}
/* Period filter labels are longer than tickers — allow a bit more width */
#dividends-table th:last-child .tx-ticker-filter-wrap,
#dividends-table th:last-child .tx-ticker-filter-btn {
max-width: 6.75rem;
}
#div-period-filter-menu {
max-width: 10rem;
}
#transactions-table .transactions-ticker,
#dividends-table .transactions-ticker,
#corp-events-table .transactions-ticker {
color: var(--purple-text);
font-weight: 500;
}
#dividends-table .transactions-ticker a,
#corp-events-table .transactions-ticker a {
color: inherit;
text-decoration: none;
}
#dividends-table .transactions-ticker a:hover,
#corp-events-table .transactions-ticker a:hover {
text-decoration: underline;
}
#transactions-table .transactions-col-action {
text-align: left;
white-space: nowrap;
}
#transactions-table .transactions-col-side,
#transactions-table th.transactions-col-side {
width: 6.1rem;
min-width: 6.1rem;
text-align: left;
white-space: nowrap;
}
/* One line of controls per row — Edit/Remove (or Save/Cancel) stay in a straight column */
#transactions-table .tx-action-controls,
#transactions-table .tx-row-actions {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.3rem;
flex-wrap: nowrap;
white-space: nowrap;
}
#transactions-table td.transactions-col-action .tx-row-actions {
min-width: 7.6rem;
}
#transactions-table .tx-side-select {
width: 5.85rem;
min-width: 5.85rem;
text-align: left;
cursor: pointer;
}
#transactions-table .tx-cash-label {
font-weight: 500;
color: var(--text-secondary);
}
#transactions-table .tx-cash-na {
color: var(--text-muted);
}
#transactions-table .transactions-add-row .watchlist-add-label {
display: none;
}
#transactions-table tr.transactions-add-row {
position: relative;
}
#transactions-table .tx-add-row-overlay {
position: absolute;
left: 2px;
top: 2px;
right: 2px;
bottom: 2px;
z-index: 12;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.45rem;
padding: 0.2rem 0.9rem;
border-radius: 5px;
background: var(--overlay-scrim);
color: var(--overlay-text);
opacity: 1;
transition: opacity 0.22s ease;
pointer-events: auto;
cursor: pointer;
user-select: none;
}
#transactions-table tr.transactions-add-row.is-overlay-dismissed .tx-add-row-overlay {
opacity: 0;
pointer-events: none;
}
#transactions-table .tx-add-row-overlay-emoji {
flex: 0 0 auto;
font-size: 1.15rem;
line-height: 1;
}
#transactions-table .tx-add-row-overlay-title {
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.25;
color: var(--overlay-text);
text-align: left;
white-space: normal;
}
#transactions-table tr.transactions-add-row.is-cash-mode .tx-add-stock-only,
#transactions-table .tx-add-cash-only[hidden],
#transactions-table .tx-add-stock-only[hidden],
#transactions-table #tx-add-fx[hidden] {
display: none !important;
}
#transactions-table .transactions-col-ticker .tx-cash-label,
#transactions-table .transactions-col-ticker .holdings-symbol-cash,
#transactions-table .transactions-col-ticker a,
#transactions-table .transactions-col-ticker span {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
#transactions-table .transactions-col-ccy,
#transactions-table th.transactions-col-ccy {
width: 4.1rem;
text-align: left;
white-space: nowrap;
}
#transactions-table .transactions-col-fx,
#transactions-table th.transactions-col-fx {
width: 5.6rem;
text-align: left;
white-space: nowrap;
}
#transactions-table .tx-ccy-select {
width: auto;
min-width: 3.6rem;
font-size: 0.72rem;
padding: 0.18rem 0.28rem;
cursor: pointer;
}
#transactions-table .tx-price-ccy {
margin-left: 0.22rem;
font-size: 0.68rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.02em;
}
#transactions-table .tx-fx-rate {
font-variant-numeric: tabular-nums;
font-size: 0.78rem;
}
#transactions-table .tx-fx-none {
color: var(--text-muted);
}
#transactions-table .tx-fx-input {
width: 5.25rem;
}
/* Add-row: optional "deduct from cash" */
#transactions-table .tx-deduct-cash-label {
display: inline-flex;
align-items: center;
gap: 0.28rem;
margin: 0;
font-size: 0.72rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
#transactions-table .tx-deduct-cash-label:hover {
color: var(--text-secondary);
}
#transactions-table .tx-deduct-cash-cb {
width: 0.9rem;
height: 0.9rem;
margin: 0;
accent-color: #a855f7;
cursor: pointer;
}
#transactions-table .tx-cash-currency {
width: auto;
min-width: 3.75rem;
font-size: 0.72rem;
padding: 0.18rem 0.3rem;
cursor: pointer;
}
#transactions-table .tx-cash-currency[hidden] {
display: none !important;
}
#transactions-table tr.tx-data-row.is-editing {
background: rgba(88, 28, 135, 0.12);
}
#transactions-table tr.tx-data-row .tx-edit-cell[hidden],
#transactions-table tr.tx-data-row .tx-view-cell[hidden] {
display: none !important;
}
#transactions-table .tx-side-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.12rem 0.4rem;
border-radius: 999px;
line-height: 1.2;
}
#transactions-table .tx-side-buy {
color: #6ee7b7;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.28);
}
#transactions-table .tx-side-sell {
color: #fca5a5;
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.28);
}
/* Add-row: slightly more pad for form controls, still compact */
#transactions-table tr.transactions-add-row td {
padding-top: 0.4rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
vertical-align: middle;
}
#transactions-table .tx-input,
#dividends-table .tx-input {
box-sizing: border-box;
max-width: 100%;
padding: 0.22rem 0.4rem;
font: inherit;
font-size: 0.82rem;
line-height: 1.2;
color: var(--text-primary);
background: var(--surface-inset);
border: 1px solid var(--chip-border);
border-radius: 6px;
color-scheme: inherit;
}
html[data-theme="dark"] #transactions-table .tx-input,
html[data-theme="dark"] #dividends-table .tx-input {
background: rgba(30, 41, 59, 0.9);
border-color: rgba(148, 163, 184, 0.28);
}
html[data-theme="light"] #transactions-table .tx-input,
html[data-theme="light"] #dividends-table .tx-input {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.16);
color: var(--text-primary);
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
#transactions-table .tx-input:focus,
#dividends-table .tx-input:focus {
outline: 2px solid rgba(168, 85, 247, 0.45);
outline-offset: 1px;
border-color: rgba(168, 85, 247, 0.5);
}
#transactions-table .tx-input-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
#transactions-table .tx-input.uppercase {
text-transform: uppercase;
}
#transactions-table .tx-btn {
appearance: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
padding: 0.28rem 0.55rem;
border-radius: 6px;
transition: background 0.12s ease, color 0.12s ease;
}
#transactions-table .tx-btn-add {
background: rgba(16, 185, 129, 0.85);
color: #fff;
}
#transactions-table .tx-btn-add:hover {
background: rgba(52, 211, 153, 0.95);
}
#transactions-table .tx-btn-remove {
background: transparent;
color: var(--text-secondary);
border: 1px solid rgba(148, 163, 184, 0.28);
padding: 0.18rem 0.45rem;
}
#transactions-table .tx-btn-remove:hover {
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.45);
background: rgba(248, 113, 113, 0.08);
}
#transactions-table .tx-btn-edit {
background: transparent;
color: #a5b4fc;
border: 1px solid rgba(129, 140, 248, 0.35);
padding: 0.18rem 0.45rem;
}
#transactions-table .tx-btn-edit:hover {
color: #c7d2fe;
border-color: rgba(165, 180, 252, 0.55);
background: rgba(99, 102, 241, 0.12);
}
#transactions-table .tx-btn-save {
background: rgba(16, 185, 129, 0.85);
color: #fff;
padding: 0.18rem 0.5rem;
}
#transactions-table .tx-btn-save:hover {
background: rgba(52, 211, 153, 0.95);
}
#transactions-table .tx-btn-cancel {
background: transparent;
color: var(--text-secondary);
border: 1px solid rgba(148, 163, 184, 0.28);
padding: 0.18rem 0.45rem;
}
#transactions-table .tx-btn-cancel:hover {
color: var(--text-primary);
border-color: rgba(148, 163, 184, 0.45);
background: rgba(148, 163, 184, 0.1);
}
/* Holdings tab: in-place base-currency select */
.holdings-base-ccy-bar {
max-width: 550px;
width: 100%;
margin: 0.55rem auto 0;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.4rem;
}
.holdings-base-ccy-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.holdings-base-ccy-select {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
min-width: 4.6rem;
max-width: 6.5rem;
padding: 0.16rem 1.35rem 0.16rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--card-borders);
background-color: var(--surface-inset);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 11px) 48%, calc(100% - 7px) 48%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
color: var(--purple-text-strong);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
cursor: pointer;
}
.holdings-base-ccy-select:hover {
border-color: rgba(168, 85, 247, 0.45);
}
.holdings-base-ccy-select:focus {
outline: none;
border-color: rgba(168, 85, 247, 0.7);
box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}
.holdings-base-ccy-select:disabled {
opacity: 0.55;
cursor: wait;
}
.holdings-base-ccy-select option {
color: var(--text-primary);
background: var(--bg-secondary, var(--surface-inset));
font-weight: 600;
}
.holdings-base-ccy-status {
font-size: 0.72rem;
color: var(--text-muted);
min-width: 0;
}
.holdings-base-ccy-status.is-error {
color: #f87171;
}
/* Current Holdings table — same visual language as stock financial statements */
.holdings-table-wrap {
margin-top: 0.15rem;
/* Compact 5-column table — centre within the holdings card */
max-width: 550px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#holdings-table.stock-statement-table {
font-variant-numeric: tabular-nums;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
/*
* Row hover: use .stock-statement-row so the same cursor-line wash as stock
* financials applies (shared .stock-statement-table tbody tr.stock-statement-row:hover).
* Override pointer — holdings rows are not chart-metric toggles.
*/
#holdings-table tbody tr.stock-statement-row {
cursor: default;
}
#holdings-table .holdings-symbol {
color: var(--purple-text); /* soft purple for tickers */
}
#holdings-table .holdings-symbol-cash {
color: var(--text-secondary);
}
#holdings-table .holdings-pl-gain {
color: #34d399;
}
#holdings-table .holdings-pl-loss {
color: #f87171;
}
#holdings-table .holdings-pl-flat {
color: var(--text-secondary);
}
/* Clear horizontal rule between last holding and Total row */
#holdings-table tbody tr:last-child td {
border-bottom: none;
}
#holdings-table tfoot tr.holdings-table-total td {
font-weight: 600;
color: var(--text-primary);
border-bottom: none;
border-top: 2px solid rgba(148, 163, 184, 0.42);
padding-top: 0.85rem;
margin-top: 0;
}
#holdings-table tfoot tr.holdings-table-total td.stock-statement-metric-col {
text-align: left;
color: var(--text-primary);
background: var(--bg-primary-big-items);
box-shadow: none;
border-top: 2px solid rgba(148, 163, 184, 0.42);
}
/* Profile settings — default model + portfolios list */
.profile-model-card {
margin-top: var(--gap-section);
}
.profile-model-card h2 {
margin: 0 0 0.35rem 0;
}
.profile-model-label {
margin-top: 0.35rem;
}
.profile-settings-status {
margin: 0.55rem 0 0;
min-height: 1.2em;
font-size: 0.85rem;
color: var(--text-secondary);
}
.profile-settings-status.is-error {
color: #f87171;
}
.profile-portfolios-card {
margin-top: var(--gap-section);
}
.profile-portfolios-card h2 {
margin: 0 0 0.35rem 0;
}
.profile-portfolios-hint {
margin: 0 0 0.9rem 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.45;
}
.profile-portfolios-table-wrap {
margin-top: 0.25rem;
}
#profile-portfolios-table .profile-portfolio-name {
text-align: left;
font-weight: 500;
color: var(--text-primary);
}
#profile-portfolios-table .profile-portfolio-name a {
color: var(--purple-text);
}
#profile-portfolios-table .profile-portfolio-name a:hover {
text-decoration: underline;
}
#profile-portfolios-table .profile-portfolio-currency {
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
font-weight: 500;
}
#profile-portfolios-table .profile-portfolio-ccy-select {
min-width: 6.5rem;
max-width: 8.5rem;
width: 100%;
scroll-margin-top: 5.5rem;
}
#profile-portfolios-table tbody tr {
scroll-margin-top: 5.5rem;
}
#profile-portfolios-table .profile-portfolio-actions-col,
#profile-portfolios-table .profile-portfolio-actions {
text-align: right;
width: 1%;
white-space: nowrap;
}
.profile-portfolio-delete-btn {
appearance: none;
background: transparent;
border: 1px solid rgba(248, 113, 113, 0.45);
border-radius: 8px;
color: #fca5a5;
cursor: pointer;
font: inherit;
font-size: 0.82rem;
font-weight: 600;
padding: 0.35rem 0.7rem;
}
.profile-portfolio-delete-btn:hover,
.profile-portfolio-delete-btn:focus-visible {
background: rgba(248, 113, 113, 0.14);
outline: none;
}
.profile-portfolio-delete-btn:disabled {
cursor: wait;
opacity: 0.6;
}
#profile-portfolios-table tbody tr:hover td {
background: rgba(148, 163, 184, 0.08);
}
#profile-portfolios-table tbody tr:hover td:first-child {
border-radius: 8px 0 0 8px;
}
#profile-portfolios-table tbody tr:hover td:last-child {
border-radius: 0 8px 8px 0;
}
#profile-portfolios-table .profile-portfolios-empty {
text-align: left;
color: var(--text-muted);
white-space: normal;
}
.profile-usage-card {
margin-top: var(--gap-section);
}
.profile-usage-card h2 {
margin: 0 0 0.35rem 0;
}
.profile-usage-hint {
margin: 0 0 0.75rem 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.45;
}
.profile-usage-bar {
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.22);
overflow: hidden;
margin: 0 0 0.85rem 0;
}
.profile-usage-bar-fill {
display: block;
height: 100%;
background: var(--purple-text, #7c6af7);
border-radius: 999px;
}
.profile-usage-bar-fill.is-limit {
background: #f87171;
}
.profile-usage-limit-note {
color: #f87171;
font-size: 0.88rem;
margin: -0.35rem 0 0.75rem;
}
.profile-usage-table-wrap {
margin-top: 0.35rem;
}
.profile-usage-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.profile-usage-week-label {
margin: 1rem 0 0.4rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
}
.profile-usage-days {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.28rem;
}
.profile-usage-days li {
display: flex;
justify-content: space-between;
font-size: 0.88rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.previous-conversations-list {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
max-height: 420px;
overflow-y: auto;
}
.previous-conversation-item {
border: 1px solid var(--card-borders, #334155);
border-radius: 8px;
padding: 0.75rem 0.9rem;
margin-bottom: 0.6rem;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.previous-conversation-item:hover,
.previous-conversation-item:focus {
background: rgba(148, 163, 184, 0.1);
border-color: var(--text-muted);
outline: none;
}
.previous-conversation-item.is-active {
border-color: #a855f7;
background: rgba(168, 85, 247, 0.12);
}
.previous-conversation-when-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
margin-bottom: 0.25rem;
min-width: 0;
}
.previous-conversation-when {
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0;
min-width: 0;
flex: 1 1 auto;
line-height: 1.3;
}
/* Narrow portfolio history float: keep stamp on one line next to ⋯ */
.portfolio-chat-history-card .previous-conversation-when {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.previous-conversation-menu {
position: relative;
flex: 0 0 auto;
/* Keep the control out of the row's default click-to-open path */
z-index: 2;
}
.previous-conversation-menu-btn {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
padding: 0 0.2rem;
margin: 0;
line-height: 1;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 6px;
min-width: 1.5rem;
min-height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.previous-conversation-menu-btn:hover,
.previous-conversation-menu-btn:focus-visible {
color: var(--text-primary);
background: rgba(148, 163, 184, 0.18);
outline: none;
}
.previous-conversation-item.is-menu-open {
/* Keep the open menu above neighboring list rows */
position: relative;
z-index: 5;
}
.previous-conversation-menu-dropdown {
position: absolute;
top: calc(100% + 2px);
right: 0;
min-width: 8.5rem;
padding: 0.3rem;
margin: 0;
list-style: none;
background: var(--surface-overlay);
border: 1px solid var(--chip-border, var(--card-borders));
border-radius: 8px;
box-shadow: 0 10px 28px var(--shadow-color);
color: var(--text-primary);
z-index: 20;
}
html[data-theme="light"] .previous-conversation-menu-dropdown {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.14);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.previous-conversation-menu-dropdown[hidden] {
display: none !important;
}
.previous-conversation-menu-item {
appearance: none;
-webkit-appearance: none;
display: block;
width: 100%;
border: none;
background: transparent;
color: var(--text-primary);
text-align: left;
font-size: 0.85rem;
font-weight: 500;
padding: 0.45rem 0.65rem;
border-radius: 6px;
cursor: pointer;
line-height: 1.3;
}
.previous-conversation-menu-item:hover,
.previous-conversation-menu-item:focus-visible {
background: rgba(248, 113, 113, 0.16);
color: #fecaca;
outline: none;
}
.previous-conversation-menu-item.is-danger {
color: #fca5a5;
}
html[data-theme="light"] .previous-conversation-menu-item:hover,
html[data-theme="light"] .previous-conversation-menu-item:focus-visible {
background: rgba(220, 38, 38, 0.1);
color: #991b1b;
}
html[data-theme="light"] .previous-conversation-menu-item.is-danger {
color: #b91c1c;
}
.previous-conversation-preview {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.35;
margin-bottom: 0.35rem;
}
.previous-conversation-meta {
color: var(--text-muted);
font-size: 0.75rem;
}
/*
* Side-by-side cards (composition pie/scatter | AI insights).
* Grid items default to min-width:auto, so wide tables/Plotly SVGs push the
* row past the page — min-width:0 lets 1fr columns actually shrink.
*/
.central-display-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* row · column — horizontal card gap is wider than vertical stack gap */
gap: var(--gap-section) var(--gap-section-horizontal);
margin-bottom: var(--gap-section);
width: 100%;
min-width: 0;
}
.central-display-grid > .central-display-item-in-grid {
min-width: 0;
max-width: 100%;
overflow: hidden; /* contain Plotly/table; don't spill past the card */
margin-bottom: 0;
}
.central-display-grid #pie-chart,
.central-display-grid #scatter-chart {
width: 100%;
max-width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
}
/* Composition card: pie/scatter share one grid cell with a bottom toggle */
.central-display-grid .composition-chart-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
height: 450px;
min-height: 450px;
max-height: 450px;
box-sizing: border-box;
}
/* Fixed table layout so insight text ellipsizes inside the card width */
.central-display-grid table {
width: 100%;
max-width: 100%;
table-layout: fixed;
}
.central-display-grid th,
.central-display-grid td {
overflow: hidden;
text-overflow: ellipsis;
}
/* Current Holdings AI Insights: Symbol + % Change (spark) + Insight */
#holdings-insights-table,
.holdings-insights-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
/* Title row + 1D/1M/3M/1Y range pills (watchlist-style) under the card heading */
.holdings-insights-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.35rem 0.65rem;
margin-bottom: 0.55rem;
}
.holdings-insights-header > h3 {
margin: 0 !important;
flex: 1 1 auto;
min-width: 0;
}
.holdings-insights-range-switcher {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 3px;
width: auto;
margin: 0;
padding: 0;
flex: 0 0 auto;
}
.holdings-insights-range-switcher .lwc-range-btn {
font-size: 10px;
line-height: 14px;
padding: 2px 6px;
border-radius: 5px;
letter-spacing: -0.2px;
flex: 0 0 auto;
}
/*
* Symbol sits on solid card colour so the spark never shows through glyphs.
* Soft right-edge plate continues the solid a bit into the plot column.
*/
#holdings-insights-table .holdings-insights-col-symbol,
.holdings-insights-table .holdings-insights-col-symbol {
width: 5.5rem; /* ~15% wider than 4.75rem so full tickers show */
max-width: 6.3rem;
white-space: nowrap;
vertical-align: middle;
padding-right: 0.15rem;
position: relative;
z-index: 2;
background: var(--bg-primary-big-items);
/* Beat .central-display-grid td { overflow:hidden } so the fade plate can extend */
overflow: visible;
}
/* Solid → transparent plate so the ticker edge bleeds into the plot (softer, shorter) */
#holdings-insights-table .holdings-insights-col-symbol::after,
.holdings-insights-table .holdings-insights-col-symbol::after {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: 100%;
width: 1.05rem;
margin-left: -0.25rem;
pointer-events: none;
z-index: 1;
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
var(--bg-primary-big-items) 18%,
transparent 100%
);
}
/* Keep ticker link/text above the fade plate + spark */
#holdings-insights-table .holdings-insights-col-symbol > *,
.holdings-insights-table .holdings-insights-col-symbol > * {
position: relative;
z-index: 2;
}
#holdings-insights-table .holdings-insights-col-today,
.holdings-insights-table .holdings-insights-col-today {
/* Wider so micro-spark + % change sit in one compact cell */
width: 7.25rem;
max-width: 8.5rem;
white-space: nowrap;
text-align: right;
vertical-align: middle;
font-variant-numeric: tabular-nums;
padding-left: 0.15rem;
padding-right: 0.45rem;
position: relative;
overflow: visible;
}
/* Row cell: spark underlays ticker → ends just before % text; keep original line height */
.holdings-insight-change-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 1.2em;
line-height: 1.2;
width: 100%;
overflow: visible;
}
/*
* Micro spark host. Left fade is an SVG (see buildHoldingsSparkSvg) —
* more reliable than CSS mask-image on table/overflow contexts.
* Extra CSS scrim hard-covers the under-ticker tuck with card colour.
*/
.holdings-insight-spark {
position: absolute;
/* Tuck under the ticker; stop before the % label */
left: -3.4rem;
right: 3.35rem;
top: 50%;
transform: translateY(-50%);
height: 14px;
z-index: 0;
pointer-events: none;
opacity: 0.96;
min-width: 1.75rem;
line-height: 0;
overflow: visible;
}
/* Card-coloured scrim: under-ticker tuck only (SVG mask does the soft fade) */
.holdings-insight-spark::before {
content: '';
position: absolute;
left: 0;
top: -2px;
bottom: -2px;
/* Matches earlier SVG handoff (~left quarter of micro plot) */
width: 24%;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
var(--bg-primary-big-items) 0%,
var(--bg-primary-big-items) 22%,
transparent 100%
);
}
.holdings-insight-spark.is-empty {
display: none;
}
.holdings-insight-sparkline {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
display: block;
/* Light CSS backup; primary fade is the SVG in portfolio.php */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
rgba(0, 0, 0, 0.25) 6%,
rgba(0, 0, 0, 0.75) 16%,
#000 28%,
#000 100%
);
mask-image: linear-gradient(
90deg,
transparent 0%,
rgba(0, 0, 0, 0.25) 6%,
rgba(0, 0, 0, 0.75) 16%,
#000 28%,
#000 100%
);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.holdings-insight-pct {
position: relative;
z-index: 1;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
/* Soft scrim so % stays readable over the spark tail */
padding-left: 0.25rem;
background: linear-gradient(
90deg,
transparent 0%,
var(--bg-primary-big-items) 35%
);
}
#holdings-insights-table .holdings-insights-col-insight,
.holdings-insights-table .holdings-insights-col-insight {
width: auto; /* remaining space under table-layout: fixed */
min-width: 0;
vertical-align: top;
}
#holdings-insights-table th,
.holdings-insights-table th {
font-size: 0.78rem;
font-weight: 500;
color: var(--text-secondary);
padding: 0.15rem 0.25rem 0.25rem;
line-height: 1.2;
}
#holdings-insights-table td,
.holdings-insights-table td {
padding: 0.12rem 0.25rem;
font-size: 0.86rem;
line-height: 1.2;
}
#holdings-insights-table tbody tr + tr td,
.holdings-insights-table tbody tr + tr td {
border-top: 1px solid rgba(148, 163, 184, 0.06);
}
/* Insight text uses global .ai-insight (nowrap + ellipsis) once the column owns leftover width */
#holdings-insights-table td.ai-insight,
.holdings-insights-table td.ai-insight {
max-width: 0; /* with table-layout:fixed, forces ellipsis to use remaining col width */
}
.privacy-mode .privacy-sensitive {
/* Stronger blur so values are not readable at a glance
(main chart, legend, scatter, tables, tax/dividends, latest chat, etc.) */
filter: blur(18px) saturate(0.45) brightness(0.92);
transition: filter 0.15s ease;
user-select: none;
pointer-events: none; /* charts non-interactive while private */
}
/* Extreme subtle soft-focus (almost unblurred): pie, AI Insights card, Symbol col */
.privacy-mode .privacy-soft,
.privacy-mode #pie-chart {
filter: blur(0.55px) saturate(0.97) brightness(0.995);
transition: filter 0.15s ease;
user-select: none;
/* keep pointer-events so soft-blurred links stay usable if desired;
pie disables interaction separately */
}
.privacy-mode #pie-chart {
pointer-events: none;
}
/* Easy alternatives you can switch to later for "disappear" effect:
.privacy-mode .privacy-sensitive { opacity: 0.1; }
.privacy-mode .privacy-sensitive { visibility: hidden; }
.privacy-mode .privacy-sensitive { display: none; } // may affect table layout
*/
/* ---- 2-way privacy switch (normal | private) — compact control ---- */
.privacy-tri {
display: inline-flex;
align-items: center;
flex-shrink: 0;
user-select: none;
}
.privacy-tri-track {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: stretch;
width: 2.85rem; /* compact £ | •• control */
height: 1.35rem;
padding: 2px;
box-sizing: border-box;
border-radius: 999px;
background: var(--surface-inset);
border: 1px solid var(--card-borders);
box-shadow: inset 0 1px 2px var(--shadow-color);
cursor: pointer; /* whole control toggles on click */
}
.privacy-tri-thumb {
position: absolute;
top: 2px;
left: 2px;
width: calc((100% - 4px) / 2);
height: calc(100% - 4px);
border-radius: 999px;
background: linear-gradient(145deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.88));
box-shadow: 0 1px 6px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(167, 243, 208, 0.22) inset;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
pointer-events: none;
z-index: 0;
}
.privacy-tri-track[data-level="normal"] .privacy-tri-thumb {
transform: translateX(0);
background: linear-gradient(145deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.88));
box-shadow: 0 1px 6px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(167, 243, 208, 0.22) inset;
}
.privacy-tri-track[data-level="private"] .privacy-tri-thumb {
transform: translateX(100%);
background: linear-gradient(145deg, rgba(168, 85, 247, 0.95), rgba(124, 58, 237, 0.9));
box-shadow: 0 1px 6px rgba(124, 58, 237, 0.45), 0 0 0 1px rgba(196, 181, 253, 0.25) inset;
}
.privacy-tri-btn {
position: relative;
z-index: 1;
appearance: none;
border: 0;
background: transparent;
margin: 0;
padding: 0;
color: rgba(226, 232, 240, 0.55);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
cursor: pointer;
border-radius: 999px;
transition: color 0.15s ease;
font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
}
.privacy-tri-btn:hover {
color: rgba(248, 250, 252, 0.9);
}
.privacy-tri-btn[aria-checked="true"] {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.privacy-tri-btn:focus-visible {
outline: 2px solid rgba(196, 181, 253, 0.7);
outline-offset: 2px;
}
@media (max-width: 600px) {
.privacy-tri-track {
width: 2.6rem;
height: 1.28rem;
}
.privacy-tri-btn {
font-size: 0.52rem;
}
}
/* Stack the two-up row before content gets unreadable (same full-width cards
as "Latest on your holdings"). Phone tweaks below. */
/* Make it tighter on mobile */
/* ---------- Home AI Wealth Advisor (full-bleed, portfolio chat parity) ---------- */
/* Home reuses .portfolio-chat-zone; keep a light hook for home-only tweaks */
.home-chat-zone {
/*
* Base .portfolio-chat-zone uses a large bottom pad before Discover.
* The example wall itself fills that gap — keep only a slim seam.
*/
padding-bottom: 0.85rem;
padding-left: 0;
padding-right: 0;
overflow: visible;
}
/* Restore horizontal inset for the chat chrome only (wall is full-bleed) */
.home-chat-zone .portfolio-chat-zone-layout {
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
overflow: visible;
}
.home-chat-zone .portfolio-chat-main {
overflow: visible;
}
/* Main-page message log: grows with content (no min-height blank area) */
.main-page-chat-messages,
#home-chat-messages.main-page-chat-messages {
min-height: 0;
max-height: none;
overflow-y: visible;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 2.15rem;
padding: 0.35rem 0.15rem 1rem;
margin: 0;
border: none;
background: transparent;
border-radius: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}
.main-page-chat-messages::-webkit-scrollbar,
#home-chat-messages.main-page-chat-messages::-webkit-scrollbar {
width: 6px;
}
.main-page-chat-messages::-webkit-scrollbar-track,
#home-chat-messages.main-page-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.main-page-chat-messages::-webkit-scrollbar-thumb,
#home-chat-messages.main-page-chat-messages::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.18);
border-radius: 999px;
}
/* Example wall under home chat layout (home-only; full-bleed unified marquee) */
.home-chat-zone .home-chat-examples-wrap {
margin-top: 0.65rem;
/* Tall enough to sit flush toward the Discover / watchlist colour transition */
height: min(22vh, 15.5rem);
max-height: none;
}
/* Hide suggestion wall once the user has a real thread (not just the opening briefing) */
.home-chat-zone.has-messages .home-chat-examples-wrap {
display: none !important;
}
.home-chat-zone .portfolio-chat-compose {
/* Compose sits above chips — no sticky gradient over the examples strip */
position: relative;
bottom: auto;
background: transparent;
padding-bottom: 0;
}
/*
* Stock page chat reuses the full-bleed portfolio/home zone (floating History
* card + ~800px column + narrow expand/minimise). Keep a light hook for
* stock-only spacing tweaks without reintroducing the old card chrome.
*/
.stock-chat-zone {
/* Match home: room under compose for the narrow chevron row */
padding-bottom: 5rem;
}
/* Expand/minimise sits in a dedicated row under compose/examples (no overlay) */
.home-chat-toggle-row {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 0.45rem;
min-height: 0;
width: 100%;
}
/* Honour [hidden] even when we set display on the button/row */
.home-chat-toggle-row[hidden],
.home-chat-examples-wrap[hidden],
.portfolio-chat-history-status[hidden] {
display: none !important;
}
/*
* Spartan chevron: plain stroked SVG V, no pill / border / fill.
* Base path points down; .is-minimize rotates 180° (points up when expanded).
* ~30% larger than the original 1.15rem icon for easier tapping and visual match.
*/
.home-chevron-btn,
.home-chat-minimize-btn {
appearance: none;
-webkit-appearance: none;
position: static;
box-sizing: border-box;
width: auto;
height: auto;
min-width: 2.25rem;
min-height: 2.25rem;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
border: none;
background: transparent;
color: var(--text-secondary);
box-shadow: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
line-height: 0;
flex: 0 0 auto;
transition: color 0.12s ease, opacity 0.12s ease;
}
/* Dark: hover / expanded go lighter (easier to see on navy) */
.home-chevron-btn:hover,
.home-chevron-btn:focus-visible,
.home-chat-minimize-btn:hover,
.home-chat-minimize-btn:focus-visible {
background: transparent;
border: none;
box-shadow: none;
color: #fff;
outline: none;
}
/* Expanded / "selected" (minimise affordance): same lighter emphasis as hover */
.home-chevron-btn.is-minimize,
.home-chat-minimize-btn.is-minimize {
color: #f1f5f9;
}
/* Light: hover / selected go darker (white sticky-hover was invisible on light bg) */
html[data-theme="light"] .home-chevron-btn:hover,
html[data-theme="light"] .home-chevron-btn:focus-visible,
html[data-theme="light"] .home-chat-minimize-btn:hover,
html[data-theme="light"] .home-chat-minimize-btn:focus-visible,
html[data-theme="light"] .home-chevron-btn.is-minimize,
html[data-theme="light"] .home-chat-minimize-btn.is-minimize {
color: #0f172a;
}
.home-chevron-btn:active,
.home-chat-minimize-btn:active {
opacity: 0.75;
}
.home-chevron-svg {
width: 1.5rem; /* ~30% up from 1.15rem */
height: 1.5rem;
display: block;
transition: transform 0.18s ease;
transform-origin: 50% 50%;
}
/* Expanded → point up (collapse); collapsed → point down (expand) */
.home-chevron-btn.is-minimize .home-chevron-svg,
.home-chat-minimize-btn.is-minimize .home-chevron-svg {
transform: rotate(180deg);
}
.home-chevron-btn.is-expand .home-chevron-svg,
.home-chat-minimize-btn.is-expand .home-chevron-svg {
transform: rotate(0deg);
}
/* Watchlist header chevron — same size as chat max/min chevrons */
.home-watchlist-chevron {
min-width: 2.25rem;
min-height: 2.25rem;
width: auto;
height: auto;
}
.home-watchlist-chevron .home-chevron-svg {
width: 1.5rem;
height: 1.5rem;
}
/* Desktop: hide narrow-only chat expand/minimise row (watchlist chevron stays) */
@media (min-width: 701px) {
.home-chat-toggle-row {
display: none !important;
}
}
/* ---------- Stock page expandable advisor card (unchanged expand UX) ---------- */
.home-advisor-chat {
max-width: 1600px;
margin: 0 auto 28px; /* no top margin — sits flush under content above */
overflow: visible;
min-height: 280px;
}
.home-advisor-inner {
position: relative;
padding-top: 0.25rem;
padding-bottom: 0.5rem;
}
.home-advisor-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
min-height: 2.5rem;
}
.home-advisor-header h2 {
margin: 0;
flex: 1 1 auto;
}
.home-chat-expand-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(168, 85, 247, 0.18);
border: 1px solid rgba(168, 85, 247, 0.55);
border-radius: 10px;
color: #f3e8ff;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
padding: 0.55rem 0.85rem;
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 2px 10px rgba(0, 0, 0, 0.25);
}
.home-chat-expand-icon {
font-size: 1.25rem;
line-height: 1;
}
.home-chat-expand-label {
font-size: 0.9rem;
letter-spacing: 0.01em;
}
.home-chat-expand-btn:hover {
color: #fff;
background: rgba(168, 85, 247, 0.32);
border-color: #c084fc;
}
.home-chat-collapsed {
min-height: 220px;
}
.home-chat-collapsed-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
}
.home-chat-avatar {
color: var(--text-secondary);
font-size: 1.25rem;
flex: 0 0 auto;
}
.home-chat-input {
flex: 1 1 180px;
min-width: 140px;
background: var(--bg-secondary);
border: 1px solid var(--card-borders);
border-radius: 999px;
color: var(--text-primary);
font-size: 0.95rem;
padding: 0.65rem 1.1rem;
}
.home-chat-input:focus {
outline: none;
border-color: #a855f7;
}
.home-chat-input:disabled {
opacity: 0.6;
}
/*
* Home example wall: true full-viewport width (sibling of chat layout, not
* nested in the offset ~800px column). One unified flex-wrap stream scrolls
* upward at a single rate. Edge chips may clip for an endless feel.
* Fades at top + bottom; freezes on hover / touch / focus (.is-paused).
*/
.home-chat-examples-wrap {
position: relative;
display: block;
width: 100%;
max-width: none;
margin: 0.65rem 0 0;
/* true left/right page edge — parent .home-chat-zone has no horizontal pad */
height: min(22vh, 15.5rem);
max-height: none;
overflow: hidden;
overscroll-behavior: none;
z-index: 2;
box-sizing: border-box;
/* 3D stage for mouse-tilt parallax on the inner layer */
perspective: 920px;
perspective-origin: 50% 45%;
/* dissolve into page at top and bottom (toward Discover band) */
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 12%,
#000 84%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 12%,
#000 84%,
transparent 100%
);
background:
radial-gradient(ellipse 80% 100% at 50% 45%, rgba(168, 85, 247, 0.07), transparent 72%);
pointer-events: auto;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
html[data-theme="light"] .home-chat-examples-wrap {
background:
radial-gradient(ellipse 80% 100% at 50% 45%, rgba(124, 58, 237, 0.06), transparent 72%);
}
/* Mouse-driven 3D tilt layer (scroll transform lives on .home-chat-examples-track) */
.home-chat-examples-parallax {
width: 100%;
height: 100%;
transform-style: preserve-3d;
will-change: transform;
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
/* rAF smooths the chase — avoid CSS transition fighting the frame loop */
transition: none;
}
/* Single scrolling track: two identical flex-wrap stacks stacked vertically */
.home-chat-examples-track {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
will-change: transform;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
}
.home-chat-examples-stack {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
/* Center each row so there is no “started from far left” pattern */
justify-content: center;
gap: 0.45rem 0.55rem;
/*
* Much wider than the viewport + centered, with extra right bias so shards
* clip hard on both edges (especially the right — kills empty end-of-row gaps).
* left overhang ≈ 10rem | right overhang ≈ 14rem
*/
width: calc(100% + 24rem);
margin-left: -10rem;
padding: 0.4rem 0 0.55rem;
box-sizing: border-box;
}
/* CSS keyframe fallback if JS marquee is unavailable */
.home-chat-examples-wrap:not(.is-js-marquee) .home-chat-examples-track {
animation-name: home-examples-marquee;
animation-duration: 28s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
.home-chat-examples-wrap:not(.is-js-marquee).is-paused .home-chat-examples-track,
.home-chat-examples-wrap:not(.is-js-marquee):hover .home-chat-examples-track,
.home-chat-examples-wrap:not(.is-js-marquee):focus-within .home-chat-examples-track {
animation-play-state: paused;
}
@keyframes home-examples-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, -50%, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.home-chat-examples-track {
animation: none !important;
transform: none !important;
}
.home-chat-examples-wrap {
overflow-y: auto;
height: auto;
max-height: min(22vh, 15.5rem);
}
.home-chat-examples-stack[aria-hidden="true"] {
display: none;
}
.home-chat-examples-stack {
width: 100%;
margin-left: 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
justify-content: center;
}
.home-chat-examples-parallax {
transition: none !important;
transform: none !important;
}
}
/* Edgy / suave glass chips — natural width, full sentence visible */
.home-chat-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: none;
box-sizing: border-box;
background: linear-gradient(
145deg,
rgba(51, 65, 85, 0.72) 0%,
rgba(30, 41, 59, 0.78) 100%
);
border: 1px solid rgba(168, 85, 247, 0.28);
border-radius: 999px;
color: var(--text-primary);
cursor: pointer;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.012em;
padding: 0.42rem 0.9rem;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
text-align: center;
line-height: 1.3;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 6px 18px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Rest pose — room to drift on hover without layout jump */
transform: translate3d(0, 0, 0) scale(1);
transition:
transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.18s ease,
box-shadow 0.22s ease,
background 0.18s ease,
color 0.18s ease;
}
html[data-theme="light"] .home-chat-chip {
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.92) 0%,
rgba(226, 232, 240, 0.95) 100%
);
border-color: rgba(109, 40, 217, 0.28);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 4px 14px rgba(15, 23, 42, 0.08);
}
/* Cursor over: lift + slide — each chip has a slight directional bias via nth-child */
.home-chat-chip:hover,
.home-chat-chip:focus-visible {
background: linear-gradient(
145deg,
rgba(88, 28, 135, 0.55) 0%,
rgba(51, 65, 85, 0.9) 100%
);
color: #f5f3ff;
border-color: rgba(192, 132, 252, 0.75);
outline: none;
transform: translate3d(5px, -5px, 0) scale(1.045);
box-shadow:
0 0 0 1px rgba(233, 213, 255, 0.12) inset,
0 0 22px rgba(168, 85, 247, 0.35),
0 10px 24px rgba(0, 0, 0, 0.3);
z-index: 2;
}
/* Alternate drift directions so the wall feels alive, not uniform */
.home-chat-chip:nth-child(3n):hover,
.home-chat-chip:nth-child(3n):focus-visible {
transform: translate3d(-4px, -6px, 0) scale(1.045);
}
.home-chat-chip:nth-child(3n + 1):hover,
.home-chat-chip:nth-child(3n + 1):focus-visible {
transform: translate3d(6px, -4px, 0) scale(1.04);
}
.home-chat-chip:nth-child(3n + 2):hover,
.home-chat-chip:nth-child(3n + 2):focus-visible {
transform: translate3d(3px, -7px, 0) scale(1.05);
}
html[data-theme="light"] .home-chat-chip:hover,
html[data-theme="light"] .home-chat-chip:focus-visible {
background: linear-gradient(
145deg,
rgba(237, 233, 254, 0.98) 0%,
rgba(221, 214, 254, 0.95) 100%
);
color: #4c1d95;
border-color: rgba(124, 58, 237, 0.55);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.85) inset,
0 0 18px rgba(124, 58, 237, 0.22),
0 8px 18px rgba(15, 23, 42, 0.12);
}
.home-chat-chip:active {
transform: translate3d(0, -1px, 0) scale(0.99);
transition-duration: 0.08s;
}
@media (prefers-reduced-motion: reduce) {
.home-chat-chip,
.home-chat-chip:hover,
.home-chat-chip:focus-visible,
.home-chat-chip:nth-child(3n):hover,
.home-chat-chip:nth-child(3n + 1):hover,
.home-chat-chip:nth-child(3n + 2):hover {
transform: none;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
}
.home-chat-send-btn {
flex: 0 0 auto;
background: var(--chip-bg);
border: 1px solid var(--chip-border);
border-radius: 999px;
color: var(--text-primary);
cursor: pointer;
font-size: 1.05rem;
font-weight: 600;
min-width: 2.5rem;
padding: 0.5rem 0.75rem;
}
.home-chat-send-btn:hover:not(:disabled) {
background: var(--purple-bg-strong);
border-color: #a855f7;
}
.home-chat-send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.home-chat-send-btn-wide {
border-radius: 10px;
padding: 0.55rem 1.1rem;
}
.home-chat-status {
color: var(--text-muted);
font-size: 12px;
min-height: 1.2em;
margin: 0.5rem 0 0;
}
/* Expanded panel */
.home-advisor-chat.is-expanded {
min-height: 480px;
}
.home-advisor-chat.is-expanded .home-chat-examples-wrap {
height: min(22vh, 15.5rem);
max-height: none;
}
.home-chat-expanded {
margin-top: 0.25rem;
}
.home-chat-messages {
max-height: 420px;
min-height: 280px;
overflow-y: auto;
border: 1px solid var(--card-borders);
border-radius: 10px;
padding: 0.85rem 1rem;
background: var(--bg-secondary);
margin-bottom: 0.5rem;
}
.home-advisor-chat.is-expanded .home-chat-messages {
max-height: min(65vh, 680px);
min-height: 360px;
}
.home-chat-compose {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.35rem;
}
.home-chat-compose .home-chat-input {
flex: 1 1 auto;
border-radius: 10px;
}
/* ---- Day/night theme toggle (temporary debug control in top nav) ---- */
.theme-toggle {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
margin: 0;
padding: 0;
border: 1px solid var(--card-borders);
border-radius: 999px;
background: var(--bg-primary-big-items);
color: var(--text-primary);
cursor: pointer;
flex-shrink: 0;
line-height: 1;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover {
border-color: var(--accent-soft);
color: var(--accent-soft);
}
.theme-toggle:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
.theme-toggle svg {
width: 0.95rem;
height: 0.95rem;
display: block;
}
.theme-toggle .theme-icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
/* Login page top-block may lack .horizontal-buttons — keep toggle right-aligned */
.top-block > .theme-toggle {
margin-left: auto;
}
/* ==========================================================================
Stock page sheet (Home / Portfolio): full-viewport overlay, iframe of
/stock/TICKER?embed=1 (stock page minus Discover / top nav).
========================================================================== */
.stock-sheet[hidden] {
display: none !important;
}
.stock-sheet {
position: fixed;
inset: 0;
z-index: 400;
display: flex;
align-items: center;
justify-content: center;
}
.stock-sheet-scrim {
position: absolute;
inset: 0;
background: rgba(6, 10, 18, 0.62);
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
}
html[data-theme="light"] .stock-sheet-scrim {
background: rgba(15, 23, 42, 0.45);
}
body.stock-sheet-open {
overflow: hidden;
}
.stock-sheet-panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(1100px, calc(100vw - 48px));
height: min(92vh, calc(100dvh - 32px));
max-height: calc(100dvh - 32px);
background: var(--bg-primary);
border: 1px solid var(--card-borders);
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
overflow: hidden;
min-width: 0;
}
.stock-sheet-chrome {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.75rem 0.55rem 1rem;
background: var(--nav-bg);
border-bottom: 1px solid var(--card-borders);
min-height: 3.15rem;
box-sizing: border-box;
}
.stock-sheet-title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stock-sheet-open-full {
flex: 0 0 auto;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
white-space: nowrap;
padding: 0.25rem 0.35rem;
}
.stock-sheet-open-full:hover {
color: var(--text-primary);
}
.stock-sheet-close {
all: unset;
box-sizing: border-box;
flex: 0 0 auto;
width: 3.1rem;
height: 3.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
cursor: pointer;
color: #ef4444;
background: rgba(239, 68, 68, 0.14);
font-size: 2.45rem;
line-height: 1;
font-weight: 700;
}
.stock-sheet-close:hover {
color: #fff;
background: #dc2626;
}
.stock-sheet-close:focus-visible {
outline: 2px solid rgba(168, 85, 247, 0.65);
outline-offset: 2px;
}
.stock-sheet-stage {
position: relative;
flex: 1 1 auto;
min-height: 0;
background: var(--bg-primary);
}
.stock-sheet-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
background: var(--bg-primary);
}
.stock-sheet-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
color: var(--text-muted);
font-size: 0.88rem;
background: var(--bg-primary);
}
.stock-sheet.is-ready .stock-sheet-loading {
display: none;
}
/* Embed mode: stock.php?embed=1 inside the sheet iframe */
html.stock-embed,
html.stock-embed body {
min-height: 0;
background: var(--bg-primary);
}
html.stock-embed body {
overflow-x: hidden;
}
html.stock-embed .stock-page-content {
padding-top: 12px;
}
/* Overlay iframe is ~92vh; a 600px empty messages pane scrolls the seeded
Chat-about blurb off-screen when the input is focused. Keep the opening
bubble and compose in view together. */
html.stock-embed .portfolio-chat-messages,
html.stock-embed #messages.portfolio-chat-messages {
min-height: 0;
}
/* ==========================================================================
Responsive overrides — ALL @media live here (after base styles)
so later base rules never accidentally override phone padding, etc.
Order: theme component tweaks → min-width → max-width (wide → narrow).
Within the same breakpoint, later rules still win if specificity ties.
========================================================================== */
/* Light theme: selected/default metric sticky cells */
html[data-theme="light"] .stock-statement-table tbody tr.is-default-metric td.stock-statement-metric-col {
background: #e8eef8;
}
html[data-theme="light"] .stock-statement-table tbody tr.is-selected td.stock-statement-metric-col {
background: #ede9fe;
}
html[data-theme="light"] .stock-statement-table tbody tr.is-selected:hover td.stock-statement-metric-col {
background: #ddd6fe;
}
html[data-theme="light"] .stock-statement-table {
color: var(--text-primary);
}
html[data-theme="light"] .div-calendar-card {
background: var(--bg-elevated);
}
/* ---- Light theme component tweaks (tokens live on html[data-theme="light"]) ---- */
html[data-theme="light"] .portfolio-lower-band {
background: color-mix(in srgb, var(--bg-secondary) 70%, #dbe4f0 30%);
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
html[data-theme="light"] .portfolio-lower-band {
background: #dfe7f2;
}
}
html[data-theme="light"] .portfolio-chat-bubble--user {
background: rgba(148, 163, 184, 0.22);
border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .portfolio-chat-new-btn {
color: #5b21b6;
}
html[data-theme="light"] .privacy-tri-track {
background: var(--surface-inset);
border-color: var(--card-borders);
box-shadow: inset 0 1px 2px var(--shadow-color);
}
html[data-theme="light"] .privacy-tri-btn {
color: rgba(15, 23, 42, 0.45);
}
html[data-theme="light"] .privacy-tri-btn:hover {
color: rgba(15, 23, 42, 0.85);
}
html[data-theme="light"] .privacy-tri-btn[aria-checked="true"] {
color: #fff;
}
html[data-theme="light"] .home-chart-val-tag--start {
box-shadow: 0 1px 4px var(--shadow-color);
}
/* Sankey year/quarter chips: light fill stays pale; text a touch stronger for contrast */
html[data-theme="light"] .stock-sankey-period-chip {
color: #475569;
background: #e8eef6;
border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .stock-sankey-period-chip:hover,
html[data-theme="light"] .stock-sankey-period-chip:focus-visible {
color: #0f172a;
background: #dce6f2;
border-color: var(--purple-border);
}
html[data-theme="light"] .stock-sankey-period-chip.is-active {
color: #0f172a;
background: var(--purple-bg);
border-color: var(--purple-border);
}
/* ---- Desktop: keep sticky topnav always visible ---- */
@media (min-width: 901px) {
.top-block.nav-hidden {
transform: none;
}
}
/* ---- ≤1299: tighten home top column ---- */
@media (max-width: 1299px) {
.home-page-top-content {
max-width: 1100px;
}
}
/* ---- ≤1024: shorter profile portfolio chart cards (home uses mini strip heights) ---- */
@media (max-width: 1024px) {
.profile-grid-charts {
height: 33vh;
min-height: 180px;
max-height: 320px;
}
/* Home strip cards (override profile-grid-charts above); full 144 on ≥701 */
.home-page-top-content .profile-grid-charts {
height: 144px;
min-height: 0;
max-height: none;
}
}
/* ---- ≤900: profile portfolios grid stacks ---- */
@media (max-width: 900px) {
.portfolios-div {
grid-column: span 1;
}
.portfolios-grid {
grid-template-columns: 1fr;
}
}
/* ---- ≤800: main display grids single column ---- */
@media (max-width: 800px) {
.central-display-grid {
grid-template-columns: 1fr;
}
}
/* ---- ≤980: stack previous-insights above chat ---- */
@media (max-width: 980px) {
.portfolio-chat-zone-layout {
flex-direction: column;
align-items: stretch;
max-width: 800px;
}
.portfolio-chat-history-card {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
position: relative;
top: auto;
max-height: 220px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.portfolio-chat-main {
flex: 1 1 auto;
max-width: 100%;
}
.portfolio-chat-messages,
#messages.portfolio-chat-messages {
min-height: 480px;
}
}
/* ---- ≤700: medium — horizontal mini cards + compact/collapsible home chat ---- */
@media (max-width: 700px) {
:root {
--gap-section: 12px; /* vertical space between stacked cards (medium) */
}
.home-page-top-content {
padding: 12px 0 12px;
}
.home-portfolios-header {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.home-portfolios-range-switcher .lwc-range-btn {
font-size: 11px;
line-height: 14px;
padding: 3px 8px;
}
/* Squish tiles horizontally toward square (Yahoo Finance Android feel) */
.home-page-top-content .portfolio-grid,
.home-page-top-content .portfolio-grid.home-portfolio-scroll {
gap: 8px;
padding: 6px 0 12px; /* horizontal inset via edge spacers, not padding */
scroll-padding-inline: 12px;
overscroll-behavior-x: none;
}
.home-page-top-content .portfolio-grid.home-portfolio-scroll::before,
.home-page-top-content .portfolio-grid.home-portfolio-scroll::after {
flex-basis: 12px;
width: 12px;
min-width: 12px;
}
/* ~40% wider than the previous 112px square tiles */
.home-page-top-content .portfolio-card,
.home-page-top-content .portfolio-card.portfolio-card-with-chart {
width: 157px;
min-width: 157px;
max-width: 157px;
padding: 6px 6px 5px;
}
.home-page-top-content .portfolio-card-with-chart .lwc-chart-header {
padding-left: 0;
padding-right: 0;
margin-bottom: 4px;
}
.home-page-top-content .portfolio-card-title,
.home-page-top-content .portfolio-card-title.lwc-chart-title {
font-size: 0.72rem;
max-height: 2.2em;
}
.home-page-top-content .profile-grid-charts {
/* Nearly square tile; x-axis labels hidden in JS on narrow */
height: 78px;
min-height: 0;
max-height: none;
}
.home-page-top-content .home-chart-tv-credit,
.home-portfolios-tv-credit {
font-size: 0.55rem;
margin-top: 8px;
/* Keep credit clear of the rounded card corner on narrow tiles */
padding-right: 12px;
}
.home-page-top-content .home-chart-val-tag {
font-size: 0.58rem;
padding: 1px 3px;
}
.home-page-top-content a.portfolio-card-create .placeholder {
font-size: 1.15rem;
}
.home-page-top-content a.portfolio-card-create p {
font-size: 0.65rem;
}
.central-item-text {
padding: 12px 10px 12px;
}
/* Watchlist tile → Discover title → range → sort → 1-col tiles */
.home-discover-layout {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.home-watchlist-panel {
position: static;
width: 100%;
order: 1;
padding: 0 10px;
box-sizing: border-box;
}
.home-watchlist-title {
font-size: 1.5rem; /* match Your Portfolios / Discover */
}
.watchlist-div {
padding: 0;
border-radius: 0;
}
.mini-cards-container {
gap: 6px;
}
.mini-stock-card {
padding: 0.65rem 0.75rem;
border-radius: 10px;
min-height: 2.75rem;
}
.home-discover-main,
.home-discover-layout:has(> .home-watchlist-panel.is-collapsed) > .home-discover-main {
display: block;
order: 2;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
/* Discover heading just under watchlist — large, then range, sort, then tiles */
.home-discover-header,
.discovery-header {
margin: 0.15rem 0 0.55rem;
gap: 0.45rem;
}
.home-discover-title {
margin: 0;
padding: 0 2px;
font-size: 1.5rem;
}
.discovery-title-row {
gap: 0.5rem;
}
.discovery-mode-btn {
width: 32px;
height: 32px;
}
.discovery-chart-canvas {
aspect-ratio: auto;
height: min(62vh, 520px);
min-height: 320px;
max-height: none;
}
.discovery-globe-canvas {
aspect-ratio: auto;
height: min(64vh, 560px);
min-height: 340px;
max-height: none;
}
.discovery-chart-field select,
.discovery-chart-field input[type="search"],
.discovery-chart-field .mpick,
.discovery-chart-field .mpick-pill {
min-width: 0;
}
.discovery-chart-toolbar {
gap: 0.45rem 0.65rem;
}
.discovery-find-filter,
.discovery-filter-facets .home-filter {
flex: 1 1 100%;
max-width: none;
}
.discovery-facet-kicker {
flex: 1 1 100%;
}
.home-discover-range-switcher,
.discovery-range-switcher {
gap: 5px;
}
.home-discover-range-switcher .lwc-range-btn,
.discovery-range-switcher .lwc-range-btn {
font-size: 11px;
line-height: 15px;
padding: 4px 9px;
}
.home-discover-filters {
margin: 0 0 0.75rem;
}
.home-discover-filters .home-filter {
max-width: none;
}
/* Discovery gallery: single column on narrow phones */
.home-grid-container {
grid-template-columns: 1fr;
gap: 12px;
}
.discovery-layout.is-list-mode .home-grid-container,
.discovery-layout.is-list-mode .discovery-grid-container {
gap: 6px;
}
.discovery-list-card {
padding: 0;
border-radius: 10px;
min-height: 2.65rem;
}
.discovery-list-card .discovery-list-face {
gap: 0.3rem;
padding: 4px 8px 4px 6px;
min-height: 2.65rem;
}
.discovery-list-still {
min-height: 44px;
}
.discovery-list-card .mini-price {
font-size: 0.92rem;
}
.discovery-list-card .mini-change {
font-size: 0.72rem;
}
.discovery-list-card .mini-stock-spark,
.discovery-list-spark {
height: 30px;
min-width: 2.5rem;
}
.stock-card {
padding: 0;
min-height: 200px;
}
.stock-card-face {
min-height: 200px;
}
.stock-card-face-top {
padding: 10px 12px 4px;
}
.corner-logo--card {
--corner-logo-size: 4.4rem;
}
.stock-card-face-top.has-corner-logo {
padding-left: 2.45rem;
min-height: 3.6rem;
}
.corner-logo--chart {
--corner-logo-size: 2.75rem;
}
.lwc-chart-title.has-corner-logo {
padding-left: 1.55rem;
min-height: 2.15rem;
}
.stock-card-name {
font-size: 0.98rem;
}
.stock-card-meta {
font-size: 0.7rem;
}
.stock-card-blurb {
font-size: 0.74rem;
margin-top: 4px;
-webkit-line-clamp: 1;
}
.stock-card-face-chart {
min-height: 100px;
}
.stock-card-face-chart.has-card-bg.is-without-chart {
min-height: 100px;
}
.stock-card-face-sparkline {
height: 96px;
min-height: 90px;
}
.stock-card-price-badge {
top: 4px;
left: 10px;
}
.stock-card-price {
font-size: 1.12rem;
margin: 0;
}
.stock-card-change {
font-size: 0.8rem;
}
.stock-card-overlay {
padding: 10px 10px;
gap: 0;
}
.stock-card-overlay-pages {
padding: 0;
gap: 0;
}
.stock-card-overlay-page {
gap: 5px;
padding: 0 18px 0 18px;
}
.stock-card-overlay-metric-kicker,
.stock-card-overlay-insight-label {
font-size: 0.62rem;
margin-bottom: 2px;
}
.stock-card-overlay-metric-label,
.stock-card-overlay-metric-value,
.stock-card-overlay-insight-text,
.stock-card-overlay-continued-text {
font-size: 0.76rem;
}
.stock-card-metric-bars {
height: 58px;
}
.home-watchlist-toolbar {
gap: 0.25rem;
flex-wrap: nowrap;
}
.home-watchlist-title {
font-size: 1.25rem;
flex: 0 1 auto;
}
.home-watchlist-range-switcher {
gap: 2px;
}
.home-watchlist-range-switcher .lwc-range-btn {
font-size: 9px;
line-height: 12px;
padding: 2px 4px;
}
.mini-stock-spark {
left: 26%;
right: 4.4rem;
height: 26px;
}
.stock-card-overlay-fav,
.stock-card-overlay-dismiss {
width: 1.7rem;
height: 1.7rem;
min-width: 1.7rem;
min-height: 1.7rem;
border-width: 1.25px;
top: 8px;
}
.stock-card-overlay-fav {
right: 40px;
}
.stock-card-overlay-dismiss {
right: 8px;
}
.stock-card-overlay-fav-svg,
.stock-card-overlay-dismiss-svg {
width: 1rem;
height: 1rem;
}
.stock-card-overlay-news-headline {
font-size: 0.88rem;
-webkit-line-clamp: 3;
}
.stock-card-overlay-news-body {
font-size: 0.76rem;
-webkit-line-clamp: 6;
}
.stock-card-overlay-emoji {
font-size: 2.15rem;
}
.home-chat-chip {
font-size: 0.72rem;
padding: 0.38rem 0.75rem;
}
/* ---- Narrow collapsible chat (home + portfolio + stock): hide status; model stays ---- */
.home-chat-zone .portfolio-chat-status,
#portfolio-advisor-chat .portfolio-chat-status,
#stock-advisor-chat .portfolio-chat-status {
display: none !important;
}
/* Example wall: only when chat is expanded and empty (not minimised / not mid-thread) */
.home-chat-zone.is-collapsed .home-chat-examples-wrap {
display: none !important;
}
.home-chat-zone:not(.is-collapsed):not(.has-messages) .home-chat-examples-wrap {
height: min(26vh, 13.5rem);
}
.home-chat-zone .portfolio-chat-zone-layout {
padding-left: 0.65rem;
padding-right: 0.65rem;
}
/* ---- Compact strip: title + model + input + ↓ bar ---- */
.home-chat-zone {
/* Keep L/R at 0 so the example wall still hits the page edges */
padding: 0.35rem 0 0.85rem;
}
/* Portfolio: same strip pattern, slightly more vertical breathing room */
#portfolio-advisor-chat {
padding: 0.55rem 0.65rem 1.65rem;
}
#stock-advisor-chat {
padding: 0.45rem 0.65rem 1.45rem;
}
/*
* Narrow: never keep sticky compose — the expand/minimise chevron sits in the
* row under the input. Sticky + gradient was covering that chevron on portfolio
* so max/min appeared to do nothing.
*/
.home-chat-zone .portfolio-chat-compose,
#portfolio-advisor-chat .portfolio-chat-compose,
#stock-advisor-chat .portfolio-chat-compose {
position: relative;
bottom: auto;
background: transparent;
padding-bottom: 0;
z-index: auto;
}
.home-chat-zone .home-chat-toggle-row,
#portfolio-advisor-chat .home-chat-toggle-row,
#stock-advisor-chat .home-chat-toggle-row {
position: relative;
z-index: 3;
}
.home-chat-zone .portfolio-chat-zone-layout,
#portfolio-advisor-chat .portfolio-chat-zone-layout,
#stock-advisor-chat .portfolio-chat-zone-layout {
max-width: 100%;
}
.home-chat-zone.is-collapsed {
padding-top: 0.25rem;
padding-bottom: 0.45rem;
}
#portfolio-advisor-chat.is-collapsed {
padding-top: 0.4rem;
padding-bottom: 0.7rem;
}
#stock-advisor-chat.is-collapsed {
padding-top: 0.3rem;
padding-bottom: 0.55rem;
}
.home-chat-zone.is-collapsed .portfolio-chat-history-card,
.home-chat-zone.is-collapsed .main-page-chat-messages,
.home-chat-zone.is-collapsed .portfolio-chat-thread,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-history-card,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-messages,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-thread,
#stock-advisor-chat.is-collapsed .portfolio-chat-history-card,
#stock-advisor-chat.is-collapsed .portfolio-chat-messages,
#stock-advisor-chat.is-collapsed .portfolio-chat-thread {
display: none !important;
}
.home-chat-zone.is-collapsed .portfolio-chat-main {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
min-height: 64px;
max-height: none; /* title + model + input + short wide ↓ bar */
padding-bottom: 0;
}
#portfolio-advisor-chat.is-collapsed .portfolio-chat-main,
#stock-advisor-chat.is-collapsed .portfolio-chat-main {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.32rem;
min-height: 76px;
max-height: none;
padding-bottom: 0;
}
.home-chat-zone.is-collapsed .portfolio-chat-header,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-header,
#stock-advisor-chat.is-collapsed .portfolio-chat-header {
margin: 0;
gap: 0.25rem 0.5rem;
flex-wrap: nowrap;
align-items: center;
min-height: 0;
}
.home-chat-zone.is-collapsed .portfolio-chat-header h2,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-header h2,
#stock-advisor-chat.is-collapsed .portfolio-chat-header h2 {
font-size: 0.78rem;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
/* Compact model picker in the collapsed strip */
.home-chat-zone.is-collapsed .portfolio-chat-model-label,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-model-label,
#stock-advisor-chat.is-collapsed .portfolio-chat-model-label {
display: inline-flex;
flex: 0 1 auto;
min-width: 0;
gap: 0.25rem;
}
.home-chat-zone.is-collapsed .portfolio-chat-model-caption,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-model-caption,
#stock-advisor-chat.is-collapsed .portfolio-chat-model-caption {
display: none; /* select has aria-label */
}
.home-chat-zone.is-collapsed .portfolio-chat-model-select,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-model-select,
#stock-advisor-chat.is-collapsed .portfolio-chat-model-select {
min-width: 0;
max-width: 7.75rem;
font-size: 0.7rem;
padding: 0.2rem 1.35rem 0.2rem 0.4rem;
border-radius: 7px;
background-position: calc(100% - 10px) 55%, calc(100% - 6px) 55%;
}
/* Expanded narrow: larger model control next to the title */
.home-chat-zone:not(.is-collapsed) .portfolio-chat-model-label,
#portfolio-advisor-chat:not(.is-collapsed) .portfolio-chat-model-label,
#stock-advisor-chat:not(.is-collapsed) .portfolio-chat-model-label {
display: inline-flex;
flex: 0 1 auto;
}
.home-chat-zone:not(.is-collapsed) .portfolio-chat-model-caption,
#portfolio-advisor-chat:not(.is-collapsed) .portfolio-chat-model-caption,
#stock-advisor-chat:not(.is-collapsed) .portfolio-chat-model-caption {
display: inline;
font-size: 0.72rem;
}
.home-chat-zone:not(.is-collapsed) .portfolio-chat-model-select,
#portfolio-advisor-chat:not(.is-collapsed) .portfolio-chat-model-select,
#stock-advisor-chat:not(.is-collapsed) .portfolio-chat-model-select {
min-width: 10.5rem;
max-width: min(100%, 14rem);
font-size: 0.85rem;
padding: 0.4rem 1.7rem 0.4rem 0.65rem;
border-radius: 10px;
}
.home-chat-zone.is-collapsed .portfolio-chat-compose,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-compose,
#stock-advisor-chat.is-collapsed .portfolio-chat-compose {
margin: 0;
padding: 0;
gap: 0.35rem;
/* No sticky gradient on the compact strip — chevron sits cleanly under input */
position: relative;
bottom: auto;
background: transparent;
}
.home-chat-zone.is-collapsed .chat-nfa-blurb,
#portfolio-advisor-chat.is-collapsed .chat-nfa-blurb,
#stock-advisor-chat.is-collapsed .chat-nfa-blurb {
display: none;
}
.home-chat-zone.is-collapsed .chat-input-shell,
#portfolio-advisor-chat.is-collapsed .chat-input-shell,
#stock-advisor-chat.is-collapsed .chat-input-shell {
border-radius: 999px;
}
.home-chat-zone.is-collapsed .portfolio-chat-compose .home-chat-input,
.home-chat-zone.is-collapsed .portfolio-chat-compose .portfolio-chat-input,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-compose .home-chat-input,
#portfolio-advisor-chat.is-collapsed .portfolio-chat-compose .portfolio-chat-input,
#stock-advisor-chat.is-collapsed .portfolio-chat-compose .home-chat-input,
#stock-advisor-chat.is-collapsed .portfolio-chat-compose .portfolio-chat-input {
font-size: 0.8rem;
padding: 0.32rem 0.7rem;
border-radius: 0;
min-height: 0;
max-height: 2.2rem;
overflow: hidden;
line-height: 1.2;
}
.home-chat-zone.is-collapsed .home-chat-send-btn,
#portfolio-advisor-chat.is-collapsed .home-chat-send-btn,
#stock-advisor-chat.is-collapsed .home-chat-send-btn {
font-size: 0.75rem;
padding: 0.32rem 0.65rem;
border-radius: 8px;
}
/* Collapsed: short wide ↓ bar under the input (left-aligned, page load) */
.home-chat-zone.is-collapsed .home-chat-toggle-row:not([hidden]) {
margin-top: 0.3rem;
}
#portfolio-advisor-chat.is-collapsed .home-chat-toggle-row:not([hidden]),
#stock-advisor-chat.is-collapsed .home-chat-toggle-row:not([hidden]) {
margin-top: 0.45rem;
}
/* Expanded narrow: still allow a tall thread; no forced blank min-height */
.home-chat-zone:not(.is-collapsed) .main-page-chat-messages,
.home-chat-zone:not(.is-collapsed) #home-chat-messages.main-page-chat-messages {
min-height: 0;
max-height: none;
}
#portfolio-advisor-chat:not(.is-collapsed) .portfolio-chat-messages,
#portfolio-advisor-chat:not(.is-collapsed) #messages.portfolio-chat-messages,
#stock-advisor-chat:not(.is-collapsed) .portfolio-chat-messages,
#stock-advisor-chat:not(.is-collapsed) #messages.portfolio-chat-messages {
min-height: 0;
max-height: none;
}
.home-chat-zone:not(.is-collapsed) .portfolio-chat-header h2,
#portfolio-advisor-chat:not(.is-collapsed) .portfolio-chat-header h2,
#stock-advisor-chat:not(.is-collapsed) .portfolio-chat-header h2 {
font-size: 1.15rem;
}
}
/* ---- ≤600: phones — full-bleed page shells, denser UI ---- */
@media (max-width: 600px) {
:root {
--gap-section: 9px; /* keep previous stacked-card spacing on super-small */
}
.stock-sheet-panel {
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
border: none;
}
.stock-sheet-chrome {
padding-left: 0.75rem;
}
/* Bottom holdings tabs — tight, keep single-row horizontal scroll */
.portfolio-insight-tabs {
gap: 0.85rem;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start !important;
padding-inline: 0.5rem;
scroll-padding-inline: 0.5rem;
/* Edge spacers so first/last tab labels are fully tappable */
mask-image: none;
}
.portfolio-holdings-section .portfolio-insight-tabs {
justify-content: flex-start !important;
}
.portfolio-insight-tab {
font-size: 0.92rem;
padding: 0.45rem 0.35rem 0.5rem;
}
.portfolio-insight-tab:first-child {
margin-left: 0.15rem;
}
.portfolio-insight-tab:last-child {
margin-right: 0.5rem;
padding-right: 0.55rem;
}
/*
* Transactions on super-narrow screens: single-line rows, slightly squished
* columns, sticky date+ticker, horizontal scroll for price/action buttons.
*/
.transactions-table-wrap {
max-width: 100%;
}
#transactions-table.stock-statement-table {
--tx-sticky-date-w: 5.7rem;
--tx-sticky-ticker-w: 5.45rem;
}
#transactions-table.stock-statement-table th,
#transactions-table.stock-statement-table td {
padding: 0.22rem 0.28rem;
font-size: 0.8rem;
}
#transactions-table.stock-statement-table th {
font-size: 0.72rem;
}
#transactions-table .tx-input,
#dividends-table .tx-input {
font-size: 0.76rem;
padding: 0.16rem 0.28rem;
}
#transactions-table .tx-btn {
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
}
#transactions-table .tx-side-badge {
font-size: 0.68rem;
padding: 0.1rem 0.3rem;
}
#transactions-table .tx-ticker-filter-wrap,
#transactions-table .tx-ticker-filter-btn,
#dividends-table .tx-ticker-filter-wrap,
#dividends-table .tx-ticker-filter-btn {
max-width: 4.75rem;
}
.tx-ticker-filter-menu {
max-width: min(12rem, calc(100vw - 1.5rem));
}
/* Page shells: no side padding (overrides desktop 0 16px …) */
.portfolio-page-content,
.stock-page-content,
.home-page-top-content,
.discovery-content,
.home-page-discovery-content {
padding: 0 0 32px;
}
.discovery-lower-band .discovery-content,
.discovery-lower-band .home-page-discovery-content,
.home-lower-band .discovery-content,
.home-lower-band .home-page-discovery-content {
padding: 0 0 16px;
}
.portfolio-chat-zone {
padding: 0.85rem 0.65rem 8rem;
}
/* Home + portfolio + stock collapsible chat: compact / expanded padding on phones.
Home keeps L/R pad 0 so the example wall still hits the page edges. */
.home-chat-zone.is-collapsed {
padding: 0.25rem 0 0.45rem;
}
.home-chat-zone:not(.is-collapsed) {
padding: 0.35rem 0 0.85rem;
}
/* Portfolio: slightly more vertical space than home */
#portfolio-advisor-chat.is-collapsed {
padding: 0.4rem 0.65rem 0.7rem;
}
#portfolio-advisor-chat:not(.is-collapsed) {
padding: 0.55rem 0.65rem 5rem;
}
#stock-advisor-chat.is-collapsed {
padding: 0.3rem 0.65rem 0.55rem;
}
#stock-advisor-chat:not(.is-collapsed) {
padding: 0.45rem 0.65rem 4.5rem;
}
/* Portfolio/stock page chat only — main page keeps min-height: 0.
Narrow expanded strip clears this via #portfolio-advisor-chat / #stock-advisor-chat rules. */
.portfolio-chat-messages,
#messages.portfolio-chat-messages {
min-height: 420px;
}
#portfolio-advisor-chat:not(.is-collapsed) .portfolio-chat-messages,
#portfolio-advisor-chat:not(.is-collapsed) #messages.portfolio-chat-messages,
#stock-advisor-chat:not(.is-collapsed) .portfolio-chat-messages,
#stock-advisor-chat:not(.is-collapsed) #messages.portfolio-chat-messages {
min-height: 0;
}
.portfolio-chat-bubble {
max-width: 95%;
}
.portfolio-lower-band-inner {
padding: 0 0 1.25rem;
}
.portfolio-lower-band {
padding-top: 1.25rem;
}
/* Non-home portfolio grids still stack; home keeps horizontal mini strip */
.portfolio-grid {
grid-template-columns: minmax(0, 1fr);
padding: 16px 0 18px;
gap: 10px;
}
.home-page-top-content .portfolio-grid,
.home-page-top-content .portfolio-grid.home-portfolio-scroll {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
grid-template-columns: none;
padding: 6px 0 12px;
gap: 8px;
scroll-padding-inline: 10px;
overscroll-behavior-x: none;
}
.home-page-top-content .portfolio-grid.home-portfolio-scroll::before,
.home-page-top-content .portfolio-grid.home-portfolio-scroll::after {
flex-basis: 10px;
width: 10px;
min-width: 10px;
}
/* Phones: ~40% wider than previous 104px tiles */
.home-page-top-content .portfolio-card,
.home-page-top-content .portfolio-card.portfolio-card-with-chart {
width: 146px;
min-width: 146px;
max-width: 146px;
padding: 5px 5px 4px;
}
.home-page-top-content .profile-grid-charts {
height: 72px;
}
.home-page-top-content .portfolio-card-title,
.home-page-top-content .portfolio-card-title.lwc-chart-title {
font-size: 0.68rem;
}
.central-item-financials {
padding-left: 0;
padding-right: 0;
}
.stock-statement-card {
padding-left: 0;
padding-right: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
/* Stock statement chart + table density */
.stock-statement-echart {
height: 220px;
}
.stock-sankey-chart {
height: 340px;
min-height: 260px;
}
.stock-sankey-period-chip {
min-width: 1.9rem;
max-width: 2.55rem;
height: 5rem;
}
.stock-sankey-period-chip-label {
font-size: 0.66rem;
}
.stock-statement-range-switcher .lwc-range-btn {
font-size: 13px;
line-height: 18px;
padding: 6px 12px;
}
.stock-statement-history-hint {
width: 100%;
white-space: normal;
}
.stock-statement-table {
font-size: 0.82rem;
}
.stock-statement-table th,
.stock-statement-table td {
padding: 0.55rem 0.4rem;
}
.stock-statement-table td.stock-statement-metric-col,
.stock-statement-table th.stock-statement-metric-col {
min-width: 3.5rem;
max-width: 8.5rem;
padding-left: 0.4rem;
}
/* Holdings AI table columns (spark + % change need a bit more width) */
#holdings-insights-table .holdings-insights-col-symbol,
.holdings-insights-table .holdings-insights-col-symbol {
width: 4.3rem;
max-width: 4.9rem;
}
#holdings-insights-table .holdings-insights-col-today,
.holdings-insights-table .holdings-insights-col-today {
width: 6.25rem;
max-width: 7.25rem;
padding-right: 0.3rem;
}
.holdings-insight-spark {
left: -2.85rem;
right: 2.95rem;
height: 12px;
}
.holdings-insights-range-switcher .lwc-range-btn {
font-size: 9px;
padding: 2px 5px;
}
/* Nav / cards / LWC chrome */
.home-controls-sep {
display: none;
}
.top-block {
padding: 0.35rem 0.65rem;
min-height: 2.4rem;
gap: 0.3rem 0.65rem;
}
.top-block > h1,
.top-block h1 {
font-size: 1.05rem;
}
.horizontal-buttons {
gap: 0.85rem 1rem;
}
.portfolio-card {
padding: 2px;
}
.portfolio-card.portfolio-card-with-chart {
/* Chart body full-bleed; header (title + ranges) keeps side inset */
padding: 12px 0 10px;
text-align: left;
}
/* Portfolio detail page chart cards (not home mini strip) keep prior chrome */
.portfolio-card-with-chart .lwc-chart-header {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.portfolio-card .lwc-chart-title,
.portfolio-card-title.lwc-chart-title {
font-size: 1.35rem;
}
.home-page-top-content .portfolio-card .lwc-chart-title,
.home-page-top-content .portfolio-card-title.lwc-chart-title {
font-size: 0.68rem;
}
.portfolio-card .lwc-range-btn {
font-size: 13px;
padding: 6px 12px;
}
.lwc-chart-panel {
padding: 16px 14px 3px;
}
/* Stock price chart: full-bleed canvas, padded title/ranges only */
.stock-page-content .lwc-chart-panel {
padding-left: 0;
padding-right: 0;
}
.stock-page-content .lwc-chart-header {
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
}
.lwc-chart-title {
font-size: 1.5rem;
}
/* Keep chat section title in step with the main chart title on phones */
.portfolio-chat-header h2 {
font-size: 1.5rem;
}
.lwc-range-btn {
font-size: 14px;
padding: 6px 14px;
}
}
/* Shared tx-btn look outside #transactions-table (tax Apply / Add interest / Remove) */
.portfolio-tax-panel .tx-btn,
.tax-settings-form .tx-btn,
.tax-interest-form .tx-btn {
appearance: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
padding: 0.28rem 0.55rem;
border-radius: 6px;
transition: background 0.12s ease, color 0.12s ease;
}
.portfolio-tax-panel .tx-btn-save,
.tax-settings-form .tx-btn-save,
.tax-interest-form .tx-btn-save {
background: rgba(16, 185, 129, 0.85);
color: #fff;
padding: 0.28rem 0.65rem;
}
.portfolio-tax-panel .tx-btn-save:hover,
.tax-settings-form .tx-btn-save:hover,
.tax-interest-form .tx-btn-save:hover {
background: rgba(52, 211, 153, 0.95);
}
/* Primary tax recompute action — slightly larger than compact table buttons */
.tax-settings-form .tax-apply-recompute-btn {
font-size: 0.84rem;
font-weight: 650;
line-height: 1.25;
padding: 0.42rem 0.85rem;
border-radius: 7px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.portfolio-tax-panel .tx-btn-remove {
background: transparent;
color: var(--text-secondary);
border: 1px solid rgba(148, 163, 184, 0.28);
padding: 0.18rem 0.45rem;
}
.portfolio-tax-panel .tx-btn-remove:hover {
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.45);
background: rgba(248, 113, 113, 0.08);
}
/* ---------- Portfolio tax tab ---------- */
.portfolio-tax-panel {
max-height: none;
overflow: visible;
}
.tax-panel-intro {
margin-bottom: 0.85rem;
}
.tax-panel-lead {
margin: 0 0 0.75rem;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
max-width: 52rem;
}
.tax-settings-form,
.tax-interest-form {
margin: 0 0 0.5rem;
}
.tax-settings-row,
.tax-interest-add-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.65rem 0.85rem;
}
.tax-field {
display: flex;
flex-direction: column;
gap: 0.22rem;
min-width: 0;
}
.tax-field-grow {
flex: 1 1 12rem;
min-width: 10rem;
}
.tax-field-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-muted);
}
.tax-input.tx-input,
.tax-settings-form .tx-input,
.tax-interest-form .tx-input {
box-sizing: border-box;
min-height: 1.85rem;
padding: 0.22rem 0.45rem;
font: inherit;
font-size: 0.86rem;
line-height: 1.2;
color: var(--text-primary);
background: var(--surface-inset);
border: 1px solid var(--chip-border);
border-radius: 6px;
color-scheme: inherit;
}
html[data-theme="dark"] .tax-input.tx-input,
html[data-theme="dark"] .tax-settings-form .tx-input,
html[data-theme="dark"] .tax-interest-form .tx-input {
background: #0f172a;
border-color: rgba(148, 163, 184, 0.28);
}
html[data-theme="light"] .tax-input.tx-input,
html[data-theme="light"] .tax-settings-form .tx-input,
html[data-theme="light"] .tax-interest-form .tx-input {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.16);
color: var(--text-primary);
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tax-input.tx-input:focus,
.tax-settings-form .tx-input:focus,
.tax-interest-form .tx-input:focus {
outline: none;
border-color: rgba(168, 85, 247, 0.55);
box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}
.tax-year-range {
display: inline-flex;
align-items: center;
min-height: 1.85rem;
font-size: 0.86rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.tax-settings-hint {
margin: 0.45rem 0 0;
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.4;
}
.tax-section-title {
margin: 1.25rem 0 0.35rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
}
.tax-section-blurb {
margin: 0 0 0.55rem;
font-size: 0.84rem;
color: var(--text-secondary);
line-height: 1.45;
max-width: 48rem;
}
.tax-table-wrap {
max-width: 960px;
}
#tax-tally-table.stock-statement-table,
#tax-disposals-table.stock-statement-table,
#tax-buys-table.stock-statement-table,
#tax-dividends-table.stock-statement-table,
#tax-interest-table.stock-statement-table {
--tx-sticky-date-w: 5.6rem;
--tx-sticky-ticker-w: 5.1rem;
font-variant-numeric: tabular-nums;
width: max-content;
min-width: 100%;
max-width: none;
table-layout: auto;
}
#tax-tally-table.stock-statement-table th,
#tax-tally-table.stock-statement-table td,
#tax-disposals-table.stock-statement-table th,
#tax-disposals-table.stock-statement-table td,
#tax-buys-table.stock-statement-table th,
#tax-buys-table.stock-statement-table td,
#tax-dividends-table.stock-statement-table th,
#tax-dividends-table.stock-statement-table td,
#tax-interest-table.stock-statement-table th,
#tax-interest-table.stock-statement-table td {
padding: 0.28rem 0.4rem;
font-size: 0.86rem;
line-height: 1.25;
white-space: nowrap;
vertical-align: middle;
}
#tax-tally-table.stock-statement-table th,
#tax-disposals-table.stock-statement-table th,
#tax-buys-table.stock-statement-table th,
#tax-dividends-table.stock-statement-table th,
#tax-interest-table.stock-statement-table th {
font-size: 0.78rem;
padding-bottom: 0.4rem;
}
#tax-tally-table td.stock-statement-metric-col,
#tax-tally-table th.stock-statement-metric-col {
min-width: 14rem;
white-space: normal;
position: sticky;
left: 0;
z-index: 3;
background: var(--bg-primary-big-items);
}
#tax-tally-table th.stock-statement-metric-col {
z-index: 5;
}
#tax-tally-table .tax-note-cell {
white-space: normal;
max-width: 28rem;
color: var(--text-secondary);
font-size: 0.8rem;
}
#tax-tally-table tbody tr.tax-tally-emphasis td {
font-weight: 600;
color: #f1f5f9;
}
#tax-disposals-table td.stock-statement-metric-col,
#tax-disposals-table th.stock-statement-metric-col,
#tax-buys-table td.stock-statement-metric-col,
#tax-buys-table th.stock-statement-metric-col,
#tax-dividends-table td.stock-statement-metric-col,
#tax-dividends-table th.stock-statement-metric-col,
#tax-interest-table td.stock-statement-metric-col,
#tax-interest-table th.stock-statement-metric-col {
min-width: var(--tx-sticky-date-w);
max-width: var(--tx-sticky-date-w);
width: var(--tx-sticky-date-w);
position: sticky;
left: 0;
z-index: 3;
background: var(--bg-primary-big-items);
}
#tax-disposals-table .transactions-col-ticker,
#tax-buys-table .transactions-col-ticker,
#tax-dividends-table .transactions-col-ticker {
position: sticky;
left: var(--tx-sticky-date-w);
z-index: 2;
background: var(--bg-primary-big-items);
box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);
min-width: var(--tx-sticky-ticker-w);
}
#tax-disposals-table th.transactions-col-ticker,
#tax-buys-table th.transactions-col-ticker,
#tax-dividends-table th.transactions-col-ticker {
z-index: 4;
}
#tax-disposals-table .transactions-ticker,
#tax-buys-table .transactions-ticker,
#tax-dividends-table .transactions-ticker {
color: var(--purple-text);
font-weight: 500;
}
#tax-disposals-table .transactions-ticker a,
#tax-buys-table .transactions-ticker a,
#tax-dividends-table .transactions-ticker a {
color: inherit;
text-decoration: none;
}
#tax-disposals-table .transactions-ticker a:hover,
#tax-buys-table .transactions-ticker a:hover,
#tax-dividends-table .transactions-ticker a:hover {
text-decoration: underline;
}
.tax-pl-gain { color: #6ee7b7; }
.tax-pl-loss { color: #fca5a5; }
.tax-pl-flat { color: var(--text-secondary); }
.tax-row-out-of-year td {
opacity: 0.55;
}
.tax-field-check .tax-check-wrap {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 1.85rem;
color: var(--text-secondary);
font-size: 0.84rem;
}
.tax-taxable-check {
width: 1rem;
height: 1rem;
accent-color: #a855f7;
}
.tax-check-hint {
color: var(--text-secondary);
font-size: 0.8rem;
}
.tax-method-notes {
margin: 0.35rem 0 0.5rem;
padding-left: 1.2rem;
color: var(--text-muted);
font-size: 0.82rem;
line-height: 1.55;
max-width: 48rem;
}
.tax-method-notes li {
margin-bottom: 0.25rem;
}
/* Side badges outside transactions table (tax buys/sells) */
.tx-side-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.12rem 0.4rem;
border-radius: 999px;
line-height: 1.2;
}
.tx-side-buy {
color: #6ee7b7;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.28);
}
.tx-side-sell {
color: #fca5a5;
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.28);
}
@media (max-width: 720px) {
.tax-settings-row,
.tax-interest-add-row {
flex-direction: column;
align-items: stretch;
}
.tax-field-actions .tx-btn {
width: 100%;
}
}
/* ---------- Dividends tab: chart + calendar + table filters ---------- */
.portfolio-dividends-panel {
max-height: none;
overflow: visible;
}
.div-chart-hint {
margin: 0 0 0.45rem;
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.4;
max-width: 48rem;
}
.div-chart-card,
.div-calendar-card {
margin: 0 0 1rem;
padding: 0.5rem 0.35rem 0.25rem;
border-radius: 10px;
background: var(--surface-inset);
border: 1px solid rgba(148, 163, 184, 0.12);
max-width: 960px;
}
/*
* Narrow screens: keep calendar bands readable with a min width + horizontal
* scroll instead of squishing year cells into unreadable columns.
*/
.div-calendar-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.div-calendar-scroll {
min-width: 800px;
width: 100%;
box-sizing: border-box;
}
/* External bar legend — same chip language as main portfolio timeseries legend */
.div-bar-legend {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
padding: 0.15rem 0.45rem 0.55rem;
margin-top: 0.15rem;
}
.div-legend-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.16rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--card-borders);
background: var(--surface-inset);
color: var(--text-primary);
font: inherit;
font-size: 0.78rem;
cursor: pointer;
user-select: none;
transition: opacity 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.div-legend-item:hover {
border-color: rgba(168, 85, 247, 0.45);
}
.div-legend-item.is-off {
opacity: 0.42;
text-decoration: line-through;
text-decoration-color: rgba(148, 163, 184, 0.55);
}
.div-legend-item.is-focused {
border-color: rgba(168, 85, 247, 0.55);
background: rgba(168, 85, 247, 0.14);
font-weight: 600;
}
.div-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.div-legend-label {
line-height: 1.2;
}
@media (max-width: 600px) {
.div-legend-item {
font-size: 0.68rem;
padding: 0.12rem 0.4rem;
}
}
.div-calendar-header {
padding: 0.35rem 0.55rem 0.15rem;
}
.div-section-title {
margin: 0 0 0.2rem;
font-size: 0.92rem;
font-weight: 600;
color: var(--text-primary);
}
.div-section-blurb {
margin: 0 0 0.35rem;
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.4;
}
.div-echart {
width: 100%;
height: 280px;
min-height: 220px;
}
.div-calendar-echart {
/* JS sets exact height for 3 spaced year bands; keep a tall min so first paint fits */
height: 500px;
min-height: 460px;
}
@media (max-width: 720px) {
.div-echart {
height: 240px;
}
.div-calendar-echart {
height: 520px;
min-height: 480px;
}
}
/* Profile identity + portfolio URL names */
.profile-identity-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem 1rem;
margin-top: 0.85rem;
}
@media (max-width: 720px) {
.profile-identity-grid { grid-template-columns: 1fr; }
}
.profile-identity-field label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.3rem;
}
.profile-identity-field input[type="text"] {
width: 100%;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid var(--card-borders);
background: var(--surface-inset);
color: var(--text-primary);
font: inherit;
font-size: 0.95rem;
padding: 0.45rem 0.65rem;
}
.profile-identity-field input[readonly],
.profile-identity-field input[disabled] {
opacity: 0.78;
cursor: default;
}
.profile-identity-help {
margin: 0.3rem 0 0;
font-size: 0.78rem;
color: var(--text-secondary);
}
.profile-identity-handle {
display: flex;
align-items: center;
gap: 0.35rem;
}
.profile-identity-handle > span {
color: var(--text-secondary);
font-weight: 700;
}
.profile-identity-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.9rem;
}
.profile-save-btn {
appearance: none;
background: rgba(124, 58, 237, 0.18);
border: 1px solid rgba(167, 139, 250, 0.45);
border-radius: 8px;
color: var(--text-primary);
cursor: pointer;
font: inherit;
font-size: 0.88rem;
font-weight: 700;
padding: 0.4rem 0.85rem;
}
.profile-save-btn:hover,
.profile-save-btn:focus-visible {
background: rgba(124, 58, 237, 0.28);
outline: none;
}
.profile-inline-input {
width: 100%;
max-width: 14rem;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid var(--card-borders);
background: var(--surface-inset);
color: var(--text-primary);
font: inherit;
font-size: 0.88rem;
padding: 0.32rem 0.5rem;
}
.profile-portfolio-open {
display: inline-block;
margin-left: 0.45rem;
font-size: 0.8rem;
font-weight: 600;
}
.profile-portfolio-idline {
margin-top: 0.28rem;
font-size: 0.75rem;
color: var(--text-secondary);
}
.profile-portfolio-idline code {
font-size: 0.75rem;
}
.profile-public-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
}
.portfolio-card-create-form {
display: contents;
}
.portfolio-card-create-form .portfolio-card-create {
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
}
/* Discover chart mode (US scatter) */
.discovery-chart-pane {
min-width: 0;
margin: 0 0 0.5rem;
}
.discovery-chart-blurb {
margin: 0 0 0.65rem;
font-size: 0.92rem;
line-height: 1.45;
color: var(--text-secondary);
max-width: 52rem;
}
.discovery-chart-lenses {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 0 0.75rem;
padding: 2px 0;
}
.discovery-chart-lenses::-webkit-scrollbar {
display: none;
}
.discovery-chart-lens {
flex: 0 0 auto;
font-size: 12px;
line-height: 16px;
padding: 5px 12px;
border-radius: 8px;
}
.discovery-chart-toolbar,
.discovery-chart-toggles {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.55rem 0.85rem;
margin: 0 0 0.65rem;
}
.discovery-chart-toggles {
align-items: center;
}
.discovery-chart-hists {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem 1.25rem;
width: 100%;
margin: 0 0 0.75rem;
}
.discovery-chart-hists .discovery-hist-plot {
height: 40px;
}
.discovery-chart-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.72rem;
color: var(--text-secondary);
min-width: 0;
}
.discovery-chart-axis-row {
display: flex;
align-items: center;
gap: 0.45rem;
}
.discovery-chart-axis-row select {
flex: 1 1 auto;
}
.discovery-chart-field select,
.discovery-chart-field input[type="search"] {
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: 6px;
padding: 7px 10px;
font-size: 0.88rem;
font-family: inherit;
min-width: 132px;
}
.discovery-chart-find-field {
flex: 1 1 160px;
}
.discovery-chart-find-field input[type="search"] {
min-width: 160px;
width: 100%;
}
.discovery-chart-field select:focus,
.discovery-chart-field input[type="search"]:focus {
border-color: var(--accent);
outline: none;
}
/* Discover sector / size: Assignees-style multi-pick (vanilla, no React) */
.mpick {
position: relative;
min-width: 168px;
}
.mpick-pill {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--card-borders);
border-radius: 6px;
padding: 5px 8px 5px 10px;
font-size: 0.88rem;
font-family: inherit;
line-height: 1.2;
min-height: 36px;
min-width: 168px;
cursor: pointer;
text-align: left;
}
.mpick-pill:hover {
border-color: color-mix(in srgb, var(--accent) 45%, var(--card-borders));
}
.mpick.is-open .mpick-pill,
.mpick-pill:focus {
border-color: var(--accent);
outline: none;
}
.mpick-stack {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.mpick-chip {
box-sizing: border-box;
width: 22px;
height: 22px;
margin-left: -8px;
border-radius: 50%;
border: 2px solid var(--bg-secondary);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
letter-spacing: 0;
}
.mpick-stack .mpick-chip:first-child {
margin-left: 0;
}
.mpick-chip-more {
background: var(--bg-elevated, var(--bg-secondary));
color: var(--text-secondary);
font-size: 9px;
}
.mpick-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
}
.mpick.is-filtered .mpick-text {
font-weight: 600;
}
.mpick-chev {
flex: 0 0 auto;
display: inline-flex;
color: var(--text-secondary);
transition: transform 0.16s ease;
}
.mpick.is-open .mpick-chev {
transform: rotate(180deg);
}
.mpick-list {
position: absolute;
z-index: 40;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
width: max-content;
max-width: min(22rem, 86vw);
max-height: 16.5rem;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.22rem;
box-sizing: border-box;
background: var(--surface-overlay, var(--bg-elevated, var(--bg-secondary)));
border: 1px solid var(--chip-border, var(--card-borders));
border-radius: 8px;
box-shadow: 0 10px 28px var(--shadow-color, rgba(0, 0, 0, 0.45));
color: var(--text-primary);
scrollbar-width: thin;
}
html[data-theme="light"] .mpick-list {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.14);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.mpick-opt,
.mpick-clear {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
margin: 0;
border: 0;
border-radius: 6px;
padding: 7px 8px;
background: transparent;
color: inherit;
font: inherit;
font-size: 0.86rem;
text-align: left;
cursor: pointer;
}
.mpick-clear {
justify-content: center;
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 600;
padding: 6px 8px 8px;
}
.mpick-opt:hover,
.mpick-opt:focus,
.mpick-clear:hover,
.mpick-clear:focus {
background: color-mix(in srgb, var(--text-primary) 6%, transparent);
outline: none;
}
.mpick-opt.is-on {
background: color-mix(in srgb, var(--accent-soft, #a855f7) 14%, transparent);
}
.mpick-mark {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 50%;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 22px;
text-align: center;
}
.mpick-who {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.mpick-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mpick-hint {
font-size: 0.72rem;
color: var(--text-secondary);
}
.mpick-tickwrap {
flex: 0 0 auto;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mpick-tick {
display: inline-flex;
opacity: 0;
transform: scale(0.4);
color: var(--accent-soft, #a855f7);
transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.mpick-opt.is-on .mpick-tick {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.mpick-chev,
.mpick-tick {
transition: none;
}
}
.discovery-chart-check {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.discovery-chart-check input {
margin: 0;
accent-color: var(--accent-soft, #a855f7);
}
.discovery-chart-dotsize {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
color: var(--text-secondary);
white-space: nowrap;
user-select: none;
}
.discovery-chart-dotsize input[type="range"] {
width: 88px;
height: 4px;
margin: 0;
accent-color: var(--accent-soft, #a855f7);
cursor: pointer;
}
.discovery-chart-canvas {
position: relative;
width: 100%;
/* 3:2 landscape (2:3 photo ratio). Grows with a wide/4K page instead of
* capping at 640px, so the plot stays closer to square as the pane widens. */
aspect-ratio: 3 / 2;
height: auto;
min-height: 380px;
max-height: min(78vh, 1600px);
background: var(--bg-primary-big-items);
border: 1px solid var(--card-borders);
border-radius: var(--radius-card, 12px);
box-sizing: border-box;
touch-action: none;
}
.discovery-chart-canvas canvas {
display: block;
touch-action: none;
}
.discovery-globe-canvas {
aspect-ratio: 3 / 2;
height: auto;
min-height: 420px;
max-height: min(80vh, 1600px);
overflow: hidden;
touch-action: none;
position: relative;
}
.discovery-globe-canvas canvas {
display: block;
touch-action: none;
}
.discovery-globe-canvas .maplibregl-map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.discovery-globe-canvas .maplibregl-ctrl-attrib {
font-size: 10px;
line-height: 1.3;
background: rgba(0, 0, 0, 0.38);
color: #e2e8f0;
}
.discovery-globe-canvas .maplibregl-ctrl-attrib a {
color: #e2e8f0;
}
.discovery-globe-canvas .maplibregl-popup {
z-index: 3;
}
.discovery-globe-canvas .maplibregl-popup-content {
background: var(--bg-secondary, #121a2b);
color: var(--text-primary, #e8eef8);
border: 1px solid var(--card-borders, #243049);
border-radius: 10px;
padding: 10px 2.85rem 10px 12px; /* room for the enlarged close X */
max-width: 260px;
box-shadow: none;
font-size: 12px;
}
.discovery-globe-canvas .maplibregl-popup-close-button {
box-sizing: border-box;
width: 2.75rem;
height: 2.75rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.1rem;
line-height: 1;
font-weight: 650;
color: var(--text-primary, #e8eef8);
border-radius: 0 10px 0 0;
-webkit-tap-highlight-color: transparent;
}
.discovery-globe-canvas .maplibregl-popup-close-button:hover,
.discovery-globe-canvas .maplibregl-popup-close-button:focus-visible {
background: rgba(148, 163, 184, 0.2);
color: var(--text-primary, #e8eef8);
}
@media (hover: none) {
.discovery-globe-canvas .maplibregl-popup-close-button {
width: 3.4rem;
height: 3.4rem;
font-size: 2.55rem;
}
.discovery-globe-canvas .maplibregl-popup-content {
padding-right: 3.5rem;
}
}
.discovery-globe-canvas .maplibregl-popup-tip {
border-top-color: var(--bg-secondary, #121a2b);
}
/* iOS can paint transformed MapLibre popups above position:fixed overlays. */
body.stock-sheet-open .discovery-globe-canvas .maplibregl-popup {
display: none !important;
}
/* ECharts item tips append to body at a huge z-index; a tap that opens the
* stock sheet otherwise leaves the tip sitting on top of the overlay. */
body.stock-sheet-open .echarts-tooltip {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.discovery-chart-zoom-mask {
position: absolute;
z-index: 5;
cursor: crosshair;
user-select: none;
touch-action: none;
}
.discovery-chart-zoom-rect {
position: absolute;
display: none;
box-sizing: border-box;
border: 1px solid var(--accent-soft, #a855f7);
background: rgba(168, 85, 247, 0.14);
pointer-events: none;
}
.discovery-chart-footer {
margin: 0.55rem 0 0;
font-size: 0.8rem;
line-height: 1.4;
color: var(--text-muted, var(--text-secondary));
}
.discovery-chart-tip-name {
font-weight: 650;
margin-bottom: 2px;
}
.discovery-chart-tip-sub {
opacity: 0.75;
font-size: 11px;
margin-bottom: 8px;
}
.discovery-chart-tip-row {
display: flex;
justify-content: space-between;
gap: 1.25rem;
font-size: 12px;
margin: 3px 0;
}
.discovery-chart-tip-row span {
opacity: 0.75;
}
.discovery-chart-tip-hint {
margin-top: 8px;
font-size: 11px;
opacity: 0.65;
}