/* Shared theme and responsive corrections. This file is loaded last so page-level
   components use the same readable surfaces in both color modes. */
:root {
  --surface: #0d1928;
  --surface-raised: #111f31;
  --surface-subtle: rgba(255, 255, 255, .045);
  --surface-hover: rgba(255, 255, 255, .075);
  --on-accent: #06111f;
  --chart-grid: rgba(255, 255, 255, .12);
}

:root[data-theme="light"] {
  --bg: #f5f8fc;
  --bg-2: #eaf1f7;
  --card: #ffffff;
  --card-2: #f3f7fb;
  --surface: #ffffff;
  --surface-raised: #f3f7fb;
  --surface-subtle: rgba(22, 52, 76, .045);
  --surface-hover: rgba(22, 52, 76, .075);
  --line: rgba(32, 67, 94, .18);
  --line-2: rgba(32, 67, 94, .28);
  --text: #102235;
  --muted: #47637a;
  --muted-2: #627d92;
  --cyan: #087e9d;
  --blue: #2868c7;
  --green: #087a50;
  --yellow: #9a6100;
  --orange: #b64a13;
  --red: #bd3157;
  --purple: #7450c4;
  --on-accent: #ffffff;
  --chart-grid: rgba(32, 67, 94, .16);
  --shadow: 0 12px 32px rgba(34, 65, 92, .10);
}

/* Replace dark-only surfaces throughout shared cards, forms, tables and charts. */
.search, .secondary, .hero, .ticker-hero, .watch-card, .watch-home-table-wrap,
.watch-summary-strip, .performance-strip, .watch-explainer > div, .watch-empty,
.watch-toolbar input, .watch-toolbar select, .earnings-day-tabs button,
.watch-more, .watch-history > summary, .ticker-section-nav {
  background: var(--surface);
  color: var(--text);
}
.company-card, .signal-card, .ticker-score-card, .pill, .chart, .empty-chart,
.poll-row, .vote button, .balance-row, .fin-kpi, .tab-buttons, .hero-poll-card,
.score-explain-card, .volume-event-card.quiet, .hero-poll-card .sentiment-choice-only,
.ui-svg-icon, .vote-mark, .poll-icon, .volume-event-metrics > div {
  background-color: var(--surface-subtle);
}
.company-card:hover { background-color: var(--surface-hover); }
.score-ring-inner, .score-dial::before { background: var(--surface); }
.gridline { stroke: var(--chart-grid); }
td, .watch-table td, .watch-home-table td, .ticker-profile-preview,
.ticker-info-fact strong, .score-explain-card summary > b,
.score-explain-body p, .volume-event-metrics strong { color: var(--text) !important; }
.breadcrumb-current, .brand-icon-strip span { color: var(--text); }
.eyebrow, .card-label { color: var(--cyan); }
.primary, .search button, .tab-buttons button.active, .history-window-tabs button.active { color: var(--on-accent); }

:root[data-theme="light"] .topbar { background: rgba(245, 248, 252, .94); }
:root[data-theme="light"] .public-hero {
  border-color: var(--line);
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(245,249,252,.92) 58%, rgba(232,242,248,.82)), url('/assets/2bb-market-bg.webp') center/cover no-repeat;
}
:root[data-theme="light"] .public-hero-copy > p,
:root[data-theme="light"] .hero-trust,
:root[data-theme="light"] .top-nav a { color: var(--muted); }
:root[data-theme="light"] .public-hero h1 span,
:root[data-theme="light"] .hero-trust .public-icon { color: var(--cyan); }
:root[data-theme="light"] .hero-short-term-rail,
:root[data-theme="light"] .ticker-section-nav { background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
:root[data-theme="light"] .top-short-stage,
:root[data-theme="light"] .top-short-card,
:root[data-theme="light"] .hero-basket-console,
:root[data-theme="light"] .hero-basket-card,
:root[data-theme="light"] .hero-motion-card { color: var(--text); background: var(--surface-raised); box-shadow: none; }
:root[data-theme="light"] .top-short-card b,
:root[data-theme="light"] .top-short-stage header b,
:root[data-theme="light"] .hero-basket-lead > div strong,
:root[data-theme="light"] .hero-basket-card-main strong { color: var(--text); }
:root[data-theme="light"] .ticker-hero { background: linear-gradient(135deg, #fff, #eff7fb); }
:root[data-theme="light"] .score-ring { box-shadow: 0 0 0 1px rgba(40,104,199,.22), 0 8px 20px rgba(34,65,92,.12); }
:root[data-theme="light"] .chart-tooltip { border-color: var(--line-2); background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
:root[data-theme="light"] .fin-income-dot { stroke: var(--surface); }
:root[data-theme="light"] .brand-panel.market-panel { background: var(--surface-raised); }
:root[data-theme="light"] .score-dial {
  background: conic-gradient(var(--dial-color) calc(var(--score) * 1%), rgba(32, 67, 94, .16) 0);
  box-shadow: 0 0 0 1px rgba(40,104,199,.2), 0 6px 16px rgba(34,65,92,.12);
}
:root[data-theme="light"] .score-dial b { color: var(--text); }
:root[data-theme="light"] .score-dial small { color: var(--muted) !important; }
:root[data-theme="light"] .watch-score,
:root[data-theme="light"] .playbook-row .playbook-score,
:root[data-theme="light"] .home-card-pl,
:root[data-theme="light"] .top-short-fact strong.pos,
:root[data-theme="light"] .hero-basket-lead > b,
:root[data-theme="light"] .hero-basket-mini-list a strong,
:root[data-theme="light"] .hero-basket-card-main > b,
:root[data-theme="light"] .change-row em.positive,
:root[data-theme="light"] .earnings-timing strong,
:root[data-theme="light"] .tier-badge.a { color: #087a50 !important; }
:root[data-theme="light"] .top-short-fact strong.neg,
:root[data-theme="light"] .hero-basket-lead > b.neg,
:root[data-theme="light"] .hero-basket-mini-list a strong.neg,
:root[data-theme="light"] .hero-basket-card-main > b.neg,
:root[data-theme="light"] .change-row em.negative { color: #bd3157 !important; }
:root[data-theme="light"] .public-page-shell .home-data-panel,
:root[data-theme="light"] .public-page-shell .home-tracker-panel,
:root[data-theme="light"] .public-page-shell .home-watchlist-panel,
:root[data-theme="light"] .public-page-shell .playbook-card,
:root[data-theme="light"] .public-page-shell .short-flow-stage,
:root[data-theme="light"] .public-page-shell .home-ticker-card,
:root[data-theme="light"] .public-page-shell .earnings-radar-card,
:root[data-theme="light"] .public-page-shell .fresh-candidates-panel,
:root[data-theme="light"] .public-page-shell .info-aside,
:root[data-theme="light"] .public-page-shell .info-content,
:root[data-theme="light"] .public-page-shell .hero-brief {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .public-page-shell .home-data-panel *,
:root[data-theme="light"] .public-page-shell .home-tracker-panel *,
:root[data-theme="light"] .public-page-shell .home-watchlist-panel *,
:root[data-theme="light"] .public-page-shell .playbook-card *,
:root[data-theme="light"] .public-page-shell .short-flow-stage *,
:root[data-theme="light"] .public-page-shell .home-ticker-card *,
:root[data-theme="light"] .public-page-shell .earnings-radar-card *,
:root[data-theme="light"] .public-page-shell .fresh-candidates-panel * { border-color: var(--line); }
:root[data-theme="light"] .public-page-shell .home-data-panel p,
:root[data-theme="light"] .public-page-shell .home-tracker-panel p,
:root[data-theme="light"] .public-page-shell .home-watchlist-panel p,
:root[data-theme="light"] .public-page-shell .playbook-card p,
:root[data-theme="light"] .public-page-shell .short-flow-stage p,
:root[data-theme="light"] .public-page-shell .home-ticker-card p,
:root[data-theme="light"] .public-page-shell small { color: var(--muted); }

/* Homepage tracker sections: their original gradients were explicitly dark. */
:root[data-theme="light"] #homeShortTermSection,
:root[data-theme="light"] #watchlistPreviewSection,
:root[data-theme="light"] #topScoreSection {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow);
}
:root[data-theme="light"] #homeShortTermSection .short-flow-stage,
:root[data-theme="light"] #watchlistPreviewSection .basket-portfolio-list,
:root[data-theme="light"] #topScoreSection .company-card {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  box-shadow: none;
}
:root[data-theme="light"] #homeShortTermSection .short-flow-card,
:root[data-theme="light"] #watchlistPreviewSection .basket-position-row,
:root[data-theme="light"] #topScoreSection .company-card {
  color: var(--text);
}
:root[data-theme="light"] #homeShortTermSection .short-flow-card {
  background: #ffffff !important;
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(34,65,92,.07);
}
:root[data-theme="light"] #homeShortTermSection .short-flow-card > div strong,
:root[data-theme="light"] #watchlistPreviewSection .basket-position-company b,
:root[data-theme="light"] #watchlistPreviewSection .basket-position-path b,
:root[data-theme="light"] #watchlistPreviewSection .basket-position-days b,
:root[data-theme="light"] #topScoreSection .company-top strong { color: var(--text); }
:root[data-theme="light"] #homeShortTermSection .short-flow-card > div b,
:root[data-theme="light"] #homeShortTermSection .short-flow-card.good > div b,
:root[data-theme="light"] #homeShortTermSection .short-flow-card .good,
:root[data-theme="light"] .top-short-card .good,
:root[data-theme="light"] .top-short-card .pos,
:root[data-theme="light"] #watchlistPreviewSection .basket-position-result .good {
  color: #087a50 !important;
}
:root[data-theme="light"] #homeShortTermSection .short-flow-card.bad > div b,
:root[data-theme="light"] #homeShortTermSection .short-flow-card .bad,
:root[data-theme="light"] .top-short-card .bad,
:root[data-theme="light"] .top-short-card .neg,
:root[data-theme="light"] #watchlistPreviewSection .basket-position-result .bad { color: #bd3157 !important; }

/* Compact layouts: make every header control reachable and avoid compressed cards. */
@media (max-width: 700px) {
  body { font-size: 16px; overflow-x: hidden; }
  .topbar { gap: .7rem; padding: .75rem 1rem; }
  .brand { justify-content: space-between; }
  .top-nav { order: 2; width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: .15rem; }
  .top-nav a { flex: 0 0 auto; padding: .5rem .65rem; font-size: .8rem; }
  .search { order: 3; padding-left: .75rem; }
  .theme-toggle { position: absolute; top: .75rem; right: 1rem; }
  .page { width: min(100% - 1rem, 1240px); padding: 1rem 0 2.5rem; }
  .card { border-radius: 14px; padding: 1rem; }
  .section-head, .chart-header, .financial-tab-head, .watch-header { align-items: flex-start; flex-direction: column; }
  .section-head > *, .chart-header > *, .watch-header > * { max-width: 100%; }
  .hero, .ticker-hero { border-radius: 14px; }
  .home-hero, .ticker-hero { padding: 1.25rem; }
  .hero h1, .ticker-hero h1 { font-size: clamp(2rem, 12vw, 3.3rem); letter-spacing: -.065em; }
  .hero p, .ticker-hero p { font-size: .98rem; line-height: 1.55; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions > a { text-align: center; }
  .hero-short-term-rail { width: calc(100% - 1rem); margin-top: .5rem; border-radius: 12px; }
  .ticker-profile-facts, .volume-event-metrics { grid-template-columns: 1fr 1fr; }
  .kpis { gap: .45rem; }
  .pill { max-width: 100%; overflow-wrap: anywhere; }
  .chart, .fin-chart-wrap { overflow-x: auto; }
  .chart svg, .fin-chart-wrap svg { min-width: 420px; }
  .table-wrap, .watch-table-wrap, .watch-home-table-wrap { margin-inline: -.15rem; }
  .watch-summary-strip > div, .performance-strip > div { padding: .75rem; }
  .public-hero { min-height: auto; padding: 2rem 1.25rem; }
  .public-hero h1 { font-size: clamp(2.45rem, 13vw, 3.7rem); }
}

@media (max-width: 420px) {
  .brand-copy b { font-size: 1.05rem; }
  .top-nav { gap: .15rem; }
  .top-nav a { padding: .48rem .55rem; font-size: .76rem; }
  .search button { padding-inline: .7rem; }
  .ticker-profile-facts, .volume-event-metrics, .watch-summary-strip, .performance-strip { grid-template-columns: 1fr; }
  .watch-summary-strip > div, .performance-strip > div { border-right: 0; }
}