/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* PR M1 — mobile foundation: prevent horizontal scroll & iOS auto-resize */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* PR M1 — mobile foundation: clip stray horizontal overflow + respect iOS home bar */
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* === PR M1 — MOBILE FOUNDATION ===
 * Global mobile baseline (2026-06-25). Layered ON TOP of the existing
 * desktop layout; does not change any desktop behavior.
 *   1. Horizontal-scroll containers (main content, tab panes, table
 *      wrapper, drilldown body) get iOS momentum scrolling.
 *   2. Below 900px, every primary tappable affordance is forced to a
 *      44x44px hit area (WCAG / Apple HIG minimum).
 *   3. Inputs are bumped to >= 16px font-size on mobile to defeat iOS
 *      Safari's auto-zoom on focus.
 */
.main-content,
.tab-content,
.tab-pane,
.watchlist-table-container,
.table-wrapper,
.drilldown-body {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  /* Touch targets — minimum 44x44px hit area on mobile. We use min-height
     + min-width so densely-packed inline buttons still get a tappable hit
     area without blowing up their visual size on desktop. */
  button,
  a.btn,
  a.btn-sm,
  a.btn-primary,
  a.btn-ghost,
  [role="button"],
  .nav-item,
  .tab-btn,
  .btn-sm,
  .btn-primary,
  .btn-ghost {
    min-height: 44px;
    min-width: 44px;
  }
  /* Inputs >= 16px to suppress iOS auto-zoom on focus. Scoped to text-ish
     inputs only so number-spinner styling is untouched. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }
}
/* === /PR M1 === */

/* === PR M2 — MOBILE BOTTOM TAB BAR ===
 * Fixed bottom 5-tab nav (Watchlist | News | Industry | Briefing | More).
 * Hidden on desktop. Below 900px, replaces the horizontal-scroll
 * `.surface-nav` strip in the topbar so mobile users get a thumb-reach
 * destination picker instead of having to scroll an 8-button list.
 *
 * Routing: each button has `data-nav-surface="<surface>"` and is picked up
 * automatically by:
 *   - shell.js initNav() click handler (existing, iterates all such buttons)
 *   - router.js _activate() which toggles `.active` on every
 *     [data-nav-surface] element when the surface changes.
 * No new JS wiring is required.
 */
.mobile-bottom-nav {
  display: none; /* desktop: hidden. Shown by @media block below. */
}

@media (max-width: 900px) {
  /* 2026-06-27: mobile-bottom-nav retired — the swipeable top .surface-nav is
     now the primary nav surface on phones. Keep .mobile-bottom-nav hidden at
     all widths (markup still in DOM for router/[data-nav-surface] handlers).
     The .surface-nav itself is shown + styled for mobile in redesign.css. */
  .mobile-bottom-nav { display: none !important; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}
/* === /PR M2 === */

/* === PR M3 — MOBILE LAYOUT: TABLES, CHARTS, CARD GRIDS, TOPBAR ===
 * Below 900px:
 *   1. Tables inside .table-wrapper / .table-scroll-wrapper keep a 600px
 *      min-width and scroll horizontally with iOS momentum scrolling.
 *      Cells get tighter padding + nowrap so the watchlist stays legible.
 *   2. Canvases and chart SVGs are constrained to 100% of their container
 *      and let height scale automatically (defeats the fixed-pixel <canvas
 *      width=900 height=400> overflow that ships from most chart libs).
 *   3. Common card grids (.notes-grid, .si-cards, .ei-scorecard-grid,
 *      .quant-factors-grid, .earnings-panels, .macro-pillars, .summary-strip
 *      down to 2-col already exists) collapse to a single column so cards
 *      reach edge-to-edge instead of getting squeezed to ~140px wide.
 *   4. .global-topbar tightens its padding and lets the global search
 *      input flex to fill the row instead of staying at its desktop
 *      fixed width.
 */
@media (max-width: 900px) {
  /* --- Tables ------------------------------------------------------- */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border-color);
  }
  /* 2026-06-27 FIX: the desktop .table-wrapper rule pins max-height to
     calc(100vh - var(--table-top-offset)) for sticky-thead. On mobile the
     offset (rect.top + scrollY, set by app.js setTableTopOffset) sits at
     ~600–800px because the stat strip + ribbon + watchlist pillbar stack
     vertically, which makes max-height collapse to ~0 and the entire
     watchlist disappears. Release the cap on phones — let the page own
     vertical scroll and the inner overflow-x own horizontal. */
  .table-wrapper {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 2026-06-27 FIX: do NOT crush the watchlist-table to 600px on mobile —
     it has 18 columns and was rendering as "$..." / "G..." truncated cells.
     Let it keep its desktop min-width and rely on horizontal scroll (the
     ticker column is sticky-pinned so users always see what's selected).
     The 600px override is preserved for OTHER tables (drilldown, comp
     tables, etc.) that fit the narrower frame fine. */
  .table-wrapper table:not(.watchlist-table),
  .table-scroll-wrapper table:not(.watchlist-table) {
    min-width: 600px;
    font-size: 12px;
  }
  .table-wrapper .watchlist-table {
    font-size: 12px;
    min-width: 1360px; /* keep desktop layout; wrapper scrolls horizontally */
  }
  .table-wrapper th,
  .table-wrapper td,
  .table-scroll-wrapper th,
  .table-scroll-wrapper td {
    padding: 8px 10px;
    white-space: nowrap;
  }
  /* Tighter padding on the watchlist-table specifically — it's the densest
     of all tables and every pixel of horizontal space matters on mobile. */
  .table-wrapper .watchlist-table th,
  .table-wrapper .watchlist-table td {
    padding: 6px 8px;
  }

  /* --- Charts / Canvases ------------------------------------------- */
  canvas,
  .chart-container canvas,
  .chart-container svg,
  .popup-chart-container canvas,
  .popup-chart-container svg,
  .outperf-chart-container canvas,
  .outperf-chart-container svg,
  .cmp-sparklines svg,
  svg.signal-chart {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
  }

  /* --- Card grids stack to single column --------------------------- */
  .watchlist-grid,
  .card-grid,
  .notes-grid,
  .si-cards,
  .ei-scorecard-grid,
  .quant-factors-grid,
  .earnings-panels,
  .macro-pillars {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .stock-card,
  .news-card {
    padding: 12px;
  }

  /* --- Topbar polish ------------------------------------------------ */
  .global-topbar {
    padding: 8px 12px;
    gap: 8px;
  }
  /* Let the search input expand to fill the row on mobile. */
  .topbar-search {
    flex: 1 1 auto;
    width: auto;
    margin: 0 8px;
    min-width: 0;
  }
  /* Hide the inline last-updated / refresh-timer pills if any reappear
     below the existing 1560px hide-rule — belt-and-braces. */
  .topbar-meta { display: none !important; }
}
/* === /PR M3 === */

/* === PR M4 — DRILLDOWN / INDUSTRY REPORT MOBILE ===
 * Below 900px:
 *   1. .drilldown-root tightens padding so content reaches edge-to-edge.
 *   2. .dd-mast (masthead) stacks vertically: left block (ticker/name +
 *      stats) above the right block (search input + actions).
 *      .dd-mast-stats wraps at small viewports already; we additionally
 *      reduce the gap so the row fits without forcing horizontal scroll.
 *   3. .drilldown-root h2 (section headers) become sticky to the top of
 *      the scroll container so the user always knows which section they
 *      are in while scrolling a long drilldown.
 *   4. .dd-mast-right loses its desktop min-width: 280px (which forces
 *      horizontal overflow on a 390px phone) so the search input fills
 *      the row width instead.
 */
@media (max-width: 900px) {
  .drilldown-root {
    padding: 12px 14px 24px;
    gap: 14px;
  }
  .dd-mast {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 14px;
    gap: 14px;
  }
  .dd-mast-right {
    min-width: 0;
    width: 100%;
    align-items: stretch;
  }
  .dd-mast-stats {
    gap: 14px;
  }
  .dd-mast-ticker {
    font-size: 22px;
  }
  /* Sticky section headers inside the drilldown body. The drilldown
     content is rendered into .drilldown-root (and any nested
     .drilldown-body wrapper); both selectors are covered. */
  .drilldown-root h2,
  .drilldown-body h2 {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-surface);
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
  }
}
/* === /PR M4 === */

/* === COLORS ===
 * Theme tokens — R2 (theme system, 2026-06-23).
 * Universal tokens (brand accent, signal colors, fonts) live in :root.
 * Surface/text/border tokens are scoped to :root[data-theme="dark"] and
 * :root[data-theme="light"]. The boot script in index.html sets the
 * data-theme attribute on <html> before stylesheets load to avoid FOUC.
 * Defaults to dark when no attribute is set (back-compat).
 */
:root {
  /* Verra brand accent — locked by user for the R1 rebrand (2026-06-23). */
  --accent: #1E7BFF;
  --accent-dim: #0E5BD0;
  --green: #22c55e;
  --green-dim: rgba(34,197,94,0.12);
  --red: #ef4444;
  --red-dim: rgba(239,68,68,0.12);
  --yellow: #eab308;
  --yellow-dim: rgba(234,179,8,0.12);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Mono', monospace;
  --font-sans: 'Inter', -apple-system, sans-serif;

  /* Dark theme defaults — used when no data-theme attribute is present
   * on <html>. This preserves the pre-R2 look for anyone whose boot
   * script hasn't run (e.g., during a stale-cache load). */
  --bg-primary: #0a0e17;
  --bg-surface: #111827;
  --bg-surface-alt: #151b2b;
  --bg-hover: #1a2035;
  --bg-header: #0d1220;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #1e293b;
  --border-light: #374151;
}

:root[data-theme="dark"] {
  --bg-primary: #0a0e17;
  --bg-surface: #111827;
  --bg-surface-alt: #151b2b;
  --bg-hover: #1a2035;
  --bg-header: #0d1220;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #1e293b;
  --border-light: #374151;
}

/* ===== GLOBAL SCROLLBARS =====================================================
   ONE scrollbar treatment for the whole app. Before this block, sleekness was
   opt-in: seven surfaces carried hand-copied ::-webkit-scrollbar rules
   (coverage table, macro rails, comps, calendar feed, note frame, discover
   rail, two 4px minis) and every other scrollable container fell back to the
   browser default — the fat white bar the user filed a bug about on
   2026-08-19. Opt-in styling drifts by construction (same shape as the
   DEFAULT_TICKERS mirror): every new overflow container arrives ugly until
   someone notices.

   So the default is now the sleek one, globally: 6px, pill thumb in
   theme-neutral slate (the values the macro rails shipped in both themes),
   transparent track, no buttons. Per-element rules can still override
   (element selectors outrank *), and the nav strips that HIDE their bars
   (.tab-bar, .popup-tabs, .surface-nav, .ribbon-row) keep doing so — their
   `scrollbar-width: none` and display:none rules are untouched.

   Firefox gets the thin native equivalent via the @supports guard. Do NOT
   set `scrollbar-width`/`scrollbar-color` unguarded on elements: in Chrome
   121+ those properties DISABLE ::-webkit-scrollbar styling for the element,
   silently reverting it to a native bar. That is why the old per-element
   pairs are removed rather than kept alongside. */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  }
}

:root[data-theme="light"] {
  /* Editorial parchment palette — user reference 2026-07-09.
   * Warm cream body, deep warm-charcoal text, olive/brick signal accents.
   * All signal colors verified WCAG AA (>= 4.5:1) against the cream body. */
  --bg-primary:     #F4EFE4;  /* warm parchment body */
  --bg-surface:     #FAF6EC;  /* card / table row */
  --bg-surface-alt: #EAE3D2;  /* group header rows, tab rail */
  --bg-hover:       #E6DFCE;  /* row hover, chip idle */
  --bg-header:      #F4EFE4;  /* top nav blends with body */
  --text-primary:   #1A1613;  /* deep warm near-black */
  --text-secondary: #5C5347;  /* mid warm gray for column labels */
  --text-muted:     #8F8577;  /* small caps / TICKER-row labels */
  --border:         #D9D2C2;  /* subtle warm divider */
  --border-light:   #C6BEA9;  /* stronger divider / focus outline */
  /* Signal colors — shifted from bright emerald/red to olive/brick to match
   * the editorial palette. Contrast on #F4EFE4:  #5B7325 = 5.1:1,
   * #A34A2A = 5.5:1 (both WCAG AA). */
  --green:     #5B7325;
  --green-dim: rgba(91, 115, 37, 0.14);
  --red:       #A34A2A;
  --red-dim:   rgba(163, 74, 42, 0.14);
  --yellow:    #B98A1A;
  --yellow-dim: rgba(185, 138, 26, 0.14);
}

/* === HEADER === */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 16px;
  flex-shrink: 0;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logo-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.5px;
}
.add-ticker-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.add-ticker-group input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.add-ticker-group input:focus { border-color: var(--accent); }
.add-ticker-group input::placeholder { color: var(--text-muted); }
.btn-sm {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-sm:hover { background: var(--accent-dim); }

/* === SEARCH AUTOCOMPLETE === */
.search-wrapper {
  position: relative;
}
.search-wrapper input {
  width: 220px;
}
.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  /* 360, not 320: private rows carry a company name plus subsector/valuation
     where a ticker row carried a 4-character symbol and a 3-letter exchange.
     max-width keeps the panel on screen regardless. */
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.search-dropdown.active {
  display: block;
}
.search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.search-dropdown-item:last-child {
  border-bottom: none;
}
.search-dropdown-item:hover,
.search-dropdown-item.active {
  background: var(--bg-hover);
}
.search-dropdown-symbol {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 52px;
}
.search-dropdown-name {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.search-dropdown-exchange {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.search-dropdown-action {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}
.search-dropdown-action-add {
  color: var(--text-muted);
}
/* Private rows in the unified dropdown. There is no ticker, so the symbol slot
   carries a kind badge instead — sized down to fit the same 52px column the
   mono symbols use. */
.search-dropdown-symbol-private {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 3px;
  padding: 2px 4px;
  text-align: center;
  line-height: 1.2;
  flex-shrink: 0;
}
.search-dropdown-item-private .search-dropdown-name {
  font-style: italic;
  /* .search-dropdown-name is flex:1 (basis 0) and the trailing slots are
     flex-shrink:0. Exchange codes are 3 characters so publics never notice;
     a private's "Aerospace & Defense · $30.5B" took the whole row and
     squeezed the company name to zero width. Floor the name, let the meta
     ellipsize instead. */
  min-width: 84px;
}
.search-dropdown-item-private .search-dropdown-exchange {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search-dropdown-empty {
  padding: 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.search-dropdown-loading {
  padding: 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.header-right { flex-shrink: 0; }
.header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.total-mcap { color: var(--text-secondary); font-weight: 500; }
.refresh-timer { color: var(--accent); }

/* === TAB BAR === */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 41px; /* header height */
  z-index: 90;
  padding: 0 12px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}
.tab-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.tab-btn:hover {
  color: var(--text-secondary);
}
.tab-btn:hover svg { opacity: 0.8; }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-btn.active svg { opacity: 1; }

/* === TAB PANES === */
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* === MAIN CONTENT === */
.main-content {
  flex: 1;
  padding: 0;
  position: relative;
}
.table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Fill remaining viewport height so thead sticks inside this container */
  max-height: calc(100vh - var(--table-top-offset, 130px));
  max-height: calc(100dvh - var(--table-top-offset, 130px));
}

/* === TABLE === */
.watchlist-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  table-layout: fixed;
  min-width: 1360px;
}
.watchlist-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-header);
  border-bottom: 2px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  z-index: 10;
}
/* Item 4 (2026-07-07): stack the main header row BELOW col-group-row
   so both rows are pinned simultaneously when the body scrolls. The
   :not(.col-group-row) constraint keeps row 1 pinned at top:0 (its
   own rule above). Values chosen empirically: col-group-row content
   is 10px font + 6px top padding + 0 bottom = ~22px. */
.watchlist-table thead tr:not(.col-group-row) > th {
  top: var(--col-group-row-h, 22px);
}
.watchlist-table thead th.num { text-align: right; }
.watchlist-table thead th.sortable { cursor: pointer; }
.watchlist-table thead th.sortable:hover { color: var(--accent); }
.watchlist-table thead th .sort-arrow {
  font-size: 9px;
  margin-left: 2px;
  opacity: 0.6;
}
.watchlist-table thead th.sort-active { color: var(--accent); }
.watchlist-table thead th.sort-active .sort-arrow { opacity: 1; }

/* Column widths */
.col-ticker { width: 72px; min-width: 72px; }
.col-name { width: 150px; }
.col-subsector { width: 130px; }
.col-price { width: 68px; }
.col-mcap { width: 74px; }
.col-ev { width: 68px; }
.col-ev-sales { width: 76px; }
.col-ev-fcf { width: 76px; }
.col-perf { width: 66px; }
.col-remove { width: 24px; }

/* Pinned first column (Ticker) */
.watchlist-table:not(.private-table) thead th.col-ticker,
.watchlist-table:not(.private-table) tbody td.cell-ticker {
  position: sticky;
  left: 0;
  z-index: 5;
}
.watchlist-table:not(.private-table) thead th.col-ticker {
  z-index: 15; /* above both sticky-top headers and sticky-left cells */
  background: var(--bg-header);
}
.watchlist-table:not(.private-table) tbody td.cell-ticker {
  background: var(--bg-primary);
}
.watchlist-table:not(.private-table) tbody tr:nth-child(even) td.cell-ticker {
  background: var(--bg-surface-alt); /* theme-aware even-row tint for sticky ticker cell */
}
.watchlist-table:not(.private-table) tbody tr:hover td.cell-ticker {
  background: var(--bg-hover);
}
/* Subtle right border on pinned column to show separation when scrolled */
.watchlist-table:not(.private-table) thead th.col-ticker,
.watchlist-table:not(.private-table) tbody td.cell-ticker {
  border-right: 1px solid var(--border);
}
/* Pinned first column (Company Name) — private table */
.private-table thead th.col-company,
.private-table tbody td.private-name-cell {
  position: sticky;
  left: 0;
  z-index: 5;
}
.private-table thead th.col-company {
  z-index: 15;
  background: var(--bg-header);
}
.private-table tbody td.private-name-cell {
  background: var(--bg-primary);
}
.private-table tbody tr:nth-child(even) td.private-name-cell {
  background: var(--bg-surface-alt);
}
.private-table tbody tr:hover td.private-name-cell {
  background: var(--bg-hover);
}
.private-table thead th.col-company,
.private-table tbody td.private-name-cell {
  border-right: 1px solid var(--border);
}
/* Private subsector header — pin label cell */
.private-table .subsector-header td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--bg-surface-alt);
}

/* Subsector header row — label cell pinned to left */
.watchlist-table:not(.private-table) .subsector-header .subsector-label-cell {
  position: sticky;
  left: 0;
  z-index: 6;
  white-space: nowrap;
  overflow: visible;
}
.watchlist-table:not(.private-table) .subsector-header .subsector-fill-cell {
  /* inherits background from .subsector-header td rule */
}

/* Body rows */
.watchlist-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.watchlist-table tbody tr:nth-child(even) { background: var(--bg-surface-alt); }
.watchlist-table tbody tr:hover { background: var(--bg-hover); }
.watchlist-table tbody td {
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.watchlist-table tbody td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 11.5px;
  letter-spacing: -0.2px;
}

/* Ticker cell */
td.cell-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
}
td.cell-ticker:hover { text-decoration: underline; }

/* Company name */
td.cell-name {
  color: var(--text-secondary);
  font-size: 11px;
  vertical-align: middle;
}
.cell-name-text {
  display: block;
  line-height: 1.3;
}
.public-hq {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
  letter-spacing: 0.2px;
}

/* Subsector badge */
.subsector-badge {
  display: inline-block;
  background: rgba(59,130,246,0.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(59,130,246,0.2);
  transition: background 0.15s;
}
.subsector-badge:hover {
  background: rgba(59,130,246,0.2);
}

/* Performance colors */
.val-pos { color: var(--green); }
.val-neg { color: var(--red); }
.val-neutral { color: var(--text-muted); }

/* Remove button */
.remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  padding: 0 4px;
  line-height: 1;
}
tr:hover .remove-btn { opacity: 1; }
.remove-btn:hover { color: var(--red); }

/* === SUBSECTOR GROUP HEADER === */
.subsector-header td {
  padding: 7px 8px 5px;
  background: var(--bg-surface-alt) !important;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.subsector-header:hover td { background: var(--bg-surface-alt) !important; }
.subsector-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
}
.subsector-toggle .chevron {
  display: inline-block;
  font-size: 9px;
  transition: transform 0.2s;
  color: var(--text-muted);
  width: 10px;
}
.subsector-toggle .chevron.collapsed { transform: rotate(-90deg); }
.subsector-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 10px;
  margin-left: 4px;
}

/* Hidden rows in collapsed groups */
.row-hidden { display: none; }

/* === CONTEXT MENU (long-press) === */
.context-menu {
  position: fixed;
  z-index: 2000;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 4px 0;
  min-width: 180px;
  font-family: var(--font-sans);
  font-size: 12px;
  animation: ctxFadeIn 0.12s ease-out;
}
@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  user-select: none;
}
.context-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.context-menu-item.danger { color: var(--red); }
.context-menu-item.danger:hover { background: rgba(239,68,68,0.12); color: var(--red); }
.context-menu-item .ctx-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.context-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Subsector picker dropdown */
.subsector-picker {
  position: fixed;
  z-index: 2001;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 4px 0;
  min-width: 190px;
  max-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  animation: ctxFadeIn 0.12s ease-out;
}
.subsector-picker-header {
  padding: 6px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.subsector-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  user-select: none;
}
.subsector-picker-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.subsector-picker-item.active {
  color: var(--accent);
  font-weight: 500;
}
.subsector-picker-check {
  width: 14px;
  font-size: 11px;
  text-align: center;
  flex-shrink: 0;
  color: var(--accent);
}
.subsector-picker-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.subsector-picker-custom {
  color: var(--text-muted);
  font-style: italic;
}
.subsector-picker-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
}
.subsector-picker-input {
  flex: 1;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  color: var(--text-primary);
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  font-family: var(--font-sans);
}
.subsector-picker-input:focus {
  border-color: var(--accent);
}
.subsector-picker-confirm {
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
}
.subsector-picker-confirm:hover {
  opacity: 0.85;
}

/* Long-press visual feedback */
tr.long-pressing {
  background: var(--bg-hover) !important;
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* === LOADING === */
.loading-overlay {
  padding: 12px 16px;
  display: none;
}
.loading-overlay.active { display: block; }
.skeleton-row {
  height: 28px;
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-alt) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  border-radius: 3px;
  margin-bottom: 4px;
  animation: shimmer 1.5s infinite;
  animation-delay: calc(var(--i) * 0.08s);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === PUBLIC COMPANIES SECTION === */
.public-section {
  border-bottom: none;
}

/* === PRIVATE COMPANIES INLINE ADD === */
/* 2026-06-27: .add-private-group is no longer rendered as a separate header
   block — its input + button moved into .coverage-add-group beside the public
   ticker add, and on 2026-08-13 both were removed when that pair collapsed
   into one universal search input. This rule still styles any legacy/embedded
   uses (e.g. settings modals) where the wrapper survives. */
.add-private-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 2026-06-27: combined Coverage add group — public + private add inputs side
   by side in one toolbar.
   2026-08-13: collapsed to ONE universal search input; the .private-input-wrap
   rules that sat here went with the element. flex-wrap stays so the Compare /
   Discover buttons wrap under the search on narrow viewports. */
.coverage-add-group {
  flex-wrap: wrap;
  gap: 6px 8px;
}
.coverage-add-group .search-wrapper input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* One input now, so let it take the width the pair used to share. */
.coverage-add-group .search-wrapper,
.coverage-add-group .search-wrapper input {
  width: 300px;
  max-width: 100%;
}
@media (max-width: 700px) {
  /* Stack the add group under the "Coverage" heading rather than beside it.
     Two reasons: the search box gets the full width instead of whatever the
     heading leaves, and the dropdown — absolutely positioned at the wrapper's
     left edge — starts at the left margin, so a 300px panel stays on screen
     instead of hanging off the right edge. */
  .coverage-header-bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .coverage-header-bar > .coverage-add-group {
    flex: 1 0 100%;
  }
  .coverage-add-group .search-wrapper input {
    width: 100%;
    min-width: 160px;
  }
  .coverage-add-group .search-wrapper {
    flex: 1 1 200px;
    min-width: 0;
    width: auto;
  }
}
.add-private-group input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.add-private-group input:focus { border-color: var(--accent); }
.add-private-group input::placeholder { color: var(--text-muted); }
.add-private-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === PRIVATE COMPANIES === */
.private-section {
  margin-top: 12px;
  padding: 0 0 8px;
  border-top: 2px solid var(--border);
}
.section-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
}
.section-header-bar h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.private-table { min-width: 1050px; }
.private-table thead th { top: 0; position: relative; }

/* Private company name cell with HQ */
.private-name-cell { vertical-align: middle; }
.private-name-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.private-hq {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
  letter-spacing: 0.2px;
}

/* Status badges for public/IPO companies */
.private-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.status-public {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.status-ipo {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
/* Stage 1 PR-D — Private Companies section folded into Coverage tab.
 * Adds vertical breathing room below the public watchlist. */
.coverage-private-section {
  margin-top: 28px;
}
/* 2026-06-25 — private companies are now interleaved into the main
 * watchlist table by subsector, so the standalone <table> below the public
 * grid is hidden. (The "+ Add Private" input + button that used to sit in
 * this section's header were removed on 2026-08-13; the add-private flow
 * runs through the one universal search box in the Coverage header.) */
.private-table-legacy-hidden {
  display: none !important;
}
.private-inline-hint {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary, #9ca3af);
  letter-spacing: 0.01em;
}
/* Private rows inlined into the main #watchlist-body. They share the same
 * subsector header as their public peers but render a compact colspan
 * summary cell instead of the public price / market-cap / EV columns. */
.watchlist-table tbody tr.private-row {
  background: rgba(148, 163, 184, 0.045);
  border-left: 2px solid rgba(148, 163, 184, 0.35);
}
.watchlist-table tbody tr.private-row:hover {
  background: rgba(148, 163, 184, 0.08);
}
.watchlist-table tbody tr.private-row .cell-name-text {
  font-style: italic;
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}
.watchlist-table tbody tr.private-row .cell-ticker.private-cell-status {
  /* Status pill replaces the ticker text — center it like a real cell. */
  text-align: left;
  padding-left: 12px;
}
.watchlist-table tbody tr.private-row .private-summary-cell {
  font-size: 11px;
  color: var(--text-secondary, #9ca3af);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;          /* lets ellipsis kick in inside the flex/table layout */
  padding-left: 8px;
  padding-right: 8px;
}
.watchlist-table tbody tr.private-row .private-summary-cell strong {
  color: var(--text-primary, #e5e7eb);
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.watchlist-table tbody tr.private-row .private-summary-traj {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin: 0 2px;
}
.watchlist-table tbody tr.private-row .private-summary-traj.pd-tone-up {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}
.watchlist-table tbody tr.private-row .private-summary-traj.pd-tone-down {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}
.watchlist-table tbody tr.private-row .private-summary-traj.pd-tone-flat {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}
/* Buyer lead-in on an acquired / stake-held private row. Sits first in the
 * nowrap summary cell so it survives the ellipsis. */
.watchlist-table tbody tr.private-row .private-summary-acq {
  color: #c084fc;
}
.watchlist-table tbody tr.private-row .private-summary-acq strong {
  color: #d8b4fe;
  font-weight: 600;
}
:root[data-theme="light"] .watchlist-table tbody tr.private-row .private-summary-acq,
:root[data-theme="light"] .watchlist-table tbody tr.private-row .private-summary-acq strong {
  color: #6B21A8;
}
.watchlist-table tbody tr.private-row .private-name-cell {
  cursor: pointer;
}
.watchlist-table tbody tr.private-row .private-name-cell:hover .cell-name-text {
  color: var(--accent, #60a5fa);
  text-decoration: underline;
}
/* Inline private-count badge in the subsector header (e.g. "· 3 private"). */
.subsector-private-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
  margin-left: 4px;
  letter-spacing: 0.02em;
}
/* Stage 1 PR-D — full 4-state pill set for the unified Coverage tab. */
.status-private {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.30);
}
.status-s1 {
  background: rgba(59, 130, 246, 0.16);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.status-public {
  cursor: pointer;
}
.status-public:hover {
  background: rgba(34, 197, 94, 0.28);
}
/* M&A status pills — ACQ (closed/pending/announced), BID (unsolicited), RUMOR
 * (4-gate verified). Reuses .private-status-badge sizing rules. */
.status-acq {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.status-bid {
  background: rgba(244, 114, 182, 0.16);
  color: #f472b6;
  border: 1px solid rgba(244, 114, 182, 0.35);
}
.status-rumor {
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.35);
  /* Subtle pulse so the user notices rumor flags — fades in 1.4s loop */
  animation: maRumorPulse 2.6s ease-in-out infinite;
}
/* STAKE — a strategic bought a large but MINORITY position (Meta/Scale AI).
 * Deliberately not .status-acq: the target is still independent. Teal keeps
 * it adjacent to, but distinguishable from, the purple ACQ pill. */
.status-stake {
  background: rgba(45, 212, 191, 0.16);
  color: #5eead4;
  border: 1px solid rgba(45, 212, 191, 0.35);
}
/* A funding round reported but not closed. Amber reads as "provisional"
 * and keeps it clearly outside the ACQ/STAKE change-of-control family —
 * this pill is about a raise, not a buyer. */
.status-reported {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.35);
}
/* BUYER / BIDDER — this row's ticker is the one doing the buying. Deliberately
 * NOT the ACQ blue-green: an ACQ pill is read as "this company is being taken
 * out", which is the opposite of what an acquirer-side row means. Indigo keeps
 * it visibly in the M&A family while reading as its own thing. */
.status-buyer {
  background: rgba(129, 140, 248, 0.16);
  color: #a5b4fc;
  border: 1px solid rgba(129, 140, 248, 0.35);
}
:root[data-theme="light"] .status-buyer {
  background: rgba(67, 56, 202, 0.10);
  color: #4338CA;
  border-color: rgba(67, 56, 202, 0.35);
}
/* UNWOUND — a previously bid/announced/pending/closed deal that has since
 * been terminated, called off, or reversed. Deliberately a neutral slate,
 * not purple/pink/orange/teal — this pill signals "dead," not an active or
 * pending change of control. */
.status-unwound {
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
@keyframes maRumorPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18); }
}
.ma-status-pill {
  margin-left: 6px;
  cursor: help;
}
.ma-status-pill--compact {
  font-size: 8px;
  padding: 0 4px;
}
/* STALE modifier — layered on top of a bid/announced/pending pill (never on
 * closed/unwound/rumor/stake/reported, see _isDealStale in ma-status.js) once
 * the deal has sat unresolved for STALE_AFTER_DAYS with no follow-up. Keeps
 * the underlying status color so the pill still reads as ACQ/BID/PENDING,
 * but a dashed border + reduced opacity signals "this may no longer be
 * current" without inventing an unwound status we can't source. */
.ma-status-pill--stale {
  opacity: 0.72;
  border-style: dashed !important;
}

/* Parchment (light) theme. The pill colors above are tuned for the dark
 * surface and wash out to near-invisible on #F4EFE4 — which matters more now
 * that these pills also carry private rows, where the deal flag replaces the
 * lifecycle badge and is the only signal in the column. Text colors verified
 * WCAG AA against the parchment body (ACQ 7.6:1, BID 6.9:1, RUMOR 6.4:1,
 * STAKE 6.6:1), matching the contrast bar the theme tokens hold themselves to. */
:root[data-theme="light"] .status-acq {
  background: rgba(107, 33, 168, 0.10);
  color: #6B21A8;
  border-color: rgba(107, 33, 168, 0.35);
}
:root[data-theme="light"] .status-bid {
  background: rgba(157, 23, 77, 0.10);
  color: #9D174D;
  border-color: rgba(157, 23, 77, 0.35);
}
:root[data-theme="light"] .status-rumor {
  background: rgba(154, 52, 18, 0.10);
  color: #9A3412;
  border-color: rgba(154, 52, 18, 0.35);
}
:root[data-theme="light"] .status-stake {
  background: rgba(17, 94, 89, 0.10);
  color: #115E59;
  border-color: rgba(17, 94, 89, 0.35);
}
:root[data-theme="light"] .status-reported {
  background: rgba(146, 64, 14, 0.10);
  color: #92400E;
  border-color: rgba(146, 64, 14, 0.35);
}
:root[data-theme="light"] .status-unwound {
  background: rgba(51, 65, 85, 0.10);
  color: #334155;
  border-color: rgba(51, 65, 85, 0.35);
}
@keyframes maRumorPulseLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(154, 52, 18, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.18); }
}
:root[data-theme="light"] .status-rumor {
  animation-name: maRumorPulseLight;
}

/* Deal blurb panel — replaces earnings note slot for ACQ-status tickers. */
.ma-deal-blurb {
  padding: 16px 20px 20px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}
/* Buyer-ticker link on acquired-company blurbs (xAI -> SPCX etc.) */
.ma-blurb-ticker-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.ma-blurb-ticker-link:hover { text-decoration-style: solid; }

.ma-blurb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ma-blurb-headline {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.ma-blurb-status-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.ma-blurb-status-closed,
.ma-blurb-status-pending,
.ma-blurb-status-announced {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.ma-blurb-status-bid {
  background: rgba(244, 114, 182, 0.16);
  color: #f472b6;
  border: 1px solid rgba(244, 114, 182, 0.35);
}
.ma-blurb-status-rumor {
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.35);
}
.ma-blurb-status-stake {
  background: rgba(45, 212, 191, 0.16);
  color: #5eead4;
  border: 1px solid rgba(45, 212, 191, 0.35);
}
.ma-blurb-status-unwound {
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
:root[data-theme="light"] .ma-blurb-status-closed,
:root[data-theme="light"] .ma-blurb-status-pending,
:root[data-theme="light"] .ma-blurb-status-announced {
  background: rgba(107, 33, 168, 0.10);
  color: #6B21A8;
  border-color: rgba(107, 33, 168, 0.35);
}
:root[data-theme="light"] .ma-blurb-status-bid {
  background: rgba(157, 23, 77, 0.10);
  color: #9D174D;
  border-color: rgba(157, 23, 77, 0.35);
}
:root[data-theme="light"] .ma-blurb-status-rumor {
  background: rgba(154, 52, 18, 0.10);
  color: #9A3412;
  border-color: rgba(154, 52, 18, 0.35);
}
:root[data-theme="light"] .ma-blurb-status-stake {
  background: rgba(17, 94, 89, 0.10);
  color: #115E59;
  border-color: rgba(17, 94, 89, 0.35);
}
:root[data-theme="light"] .ma-blurb-status-unwound {
  background: rgba(51, 65, 85, 0.10);
  color: #334155;
  border-color: rgba(51, 65, 85, 0.35);
}
.ma-blurb-line {
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}
.ma-blurb-line strong {
  color: var(--text-primary);
}
.ma-blurb-timeline {
  font-family: var(--font-mono);
  font-size: 12px;
}
.ma-blurb-section {
  margin-top: 14px;
}
.ma-blurb-section h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted, #888);
}
.ma-blurb-list {
  margin: 0;
  padding-left: 18px;
}
.ma-blurb-list li {
  margin-bottom: 4px;
}
.ma-blurb-pros li::marker { color: #4ade80; }
.ma-blurb-cons li::marker { color: #f87171; }
.ma-blurb-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ma-blurb-comp-table td {
  padding: 4px 8px 4px 0;
  vertical-align: top;
}
.ma-blurb-comp-ticker {
  font-family: var(--font-mono);
  font-weight: 600;
  width: 60px;
  color: var(--text-primary);
}
.ma-blurb-sources {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}
.ma-blurb-sources li {
  margin-bottom: 3px;
}
.ma-blurb-sources a {
  color: var(--accent, #60a5fa);
  text-decoration: none;
}
.ma-blurb-sources a:hover {
  text-decoration: underline;
}
.ma-blurb-tier {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 4px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  letter-spacing: 0.4px;
}
.ma-blurb-footer {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  font-size: 11px;
  color: var(--text-muted, #888);
  font-style: italic;
}

/* Lead investors column */
.private-investors {
  color: var(--text-secondary);
  font-size: 11px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === POPUP / MODAL === */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  /* Top and side padding kept at 24px/16px on desktop. Bottom padding uses
     safe-area-inset-bottom so iOS home-indicator devices never clip the last
     section of a long drilldown (2026-07-07 mobile cutoff fix). max() makes
     sure browsers that don't understand env() fall back to 24px cleanly. */
  padding: 24px 16px max(24px, env(safe-area-inset-bottom, 24px)) 16px;
  overflow-y: auto;
  /* iOS Safari address-bar collapse: 100vh includes the bar and creates a
     phantom cutoff. -webkit-overflow-scrolling gives momentum scrolling and
     overscroll-behavior contains any bounce so background body never scrolls
     underneath. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.popup-overlay.active {
  display: flex;
}
.popup-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 1100px;
  width: 100%;
  position: relative;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  /* Belt-and-suspenders: an extra bottom margin so scroll-to-bottom always
     shows the final section clearly above the home indicator, even if the
     overlay padding is somehow overridden by a child rule. */
  margin-bottom: 8px;
}
.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  transition: color 0.15s;
  line-height: 1;
}
.popup-close:hover { color: var(--text-primary); }
.popup-content { min-height: 200px; }

/* -----------------------------------------------------------------
   Mobile modal — 2026-07-07 fix for drilldowns being cut off at the
   bottom on iPhone/iPad in portrait. The two issues before this rule:
     1. Overlay used a static 24px bottom padding, so on devices with a
        home indicator (safe-area-inset-bottom = 34px) the last section
        of a long drilldown sat under the indicator.
     2. Modal had a full 24px inner padding, which combined with the
        overlay's side padding wasted ~64px of horizontal room on a
        375px screen and pushed table content off the right edge.
   The base rule above solves #1 with env(safe-area-inset-bottom).
   This media query solves #2 by tightening padding and forcing the
   modal to fill available width. min-height is intentionally NOT set
   to 100dvh — the modal should be tall enough to fit content and
   scroll within the overlay, not pinned to viewport height (that
   pattern caused iOS scroll-jank in the prior implementation).
   ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .popup-overlay {
    padding: 12px 8px max(20px, env(safe-area-inset-bottom, 20px)) 8px;
  }
  .popup-modal {
    padding: 16px 14px;
    border-radius: 4px;
    /* Extra scroll headroom below the last section so momentum scroll
       past the bottom always reveals it clearly. */
    margin-bottom: 16px;
  }
  .popup-close {
    top: 8px;
    right: 10px;
    font-size: 26px;
    /* Larger tap target — 44x44 min per Apple HIG. */
    padding: 4px 8px;
  }
}

/* Popup sections */
.popup-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.popup-ticker {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}
.popup-company {
  font-size: 14px;
  color: var(--text-secondary);
}
.popup-price-group {
  margin-left: auto;
  text-align: right;
}
.popup-price {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.popup-change {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-left: 8px;
}
.popup-change-tf {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted, #9ca3af);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}
.popup-section {
  margin-bottom: 24px;
}
.popup-section-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.popup-chart-container {
  background: var(--bg-primary);
  border-radius: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.chart-period-btns {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.chart-period-btn {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.chart-period-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.chart-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Metrics grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.metric-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.metric-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.metric-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* 4-column metrics grid */
.metrics-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
  .metrics-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.metric-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  font-family: var(--font-mono);
}

/* Guidance table */
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
}
.guide-table th {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: right;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.guide-table th:first-child {
  text-align: left;
}
.guide-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.guide-table .guide-metric {
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

/* Signal badges */
.signal-above { color: var(--green); font-weight: 600; font-size: 11px; }
.signal-below { color: var(--red); font-weight: 600; font-size: 11px; }
.signal-high { color: var(--green); font-size: 11px; opacity: 0.85; }
.signal-low { color: var(--yellow); font-size: 11px; opacity: 0.85; }
.signal-mid { color: var(--text-muted); font-size: 11px; }

/* Revision momentum */
.revision-section {
  margin-top: 4px;
}
.revision-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.revision-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  font-weight: 500;
}
.revision-direction {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.revision-track {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.revision-point {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.revision-current {
  border-color: var(--accent);
  background: rgba(0, 200, 255, 0.05);
}
.revision-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.revision-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.revision-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.revision-up { color: var(--green); font-weight: 600; }
.revision-down { color: var(--red); font-weight: 600; }
.revision-period { color: var(--text-muted); font-size: 10px; margin-left: auto; }
.revision-bar {
  flex: 1;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
  overflow: hidden;
  max-width: 120px;
}
.revision-bar-fill {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 2px;
}

/* Revenue estimate range table */
.rev-range-table td strong {
  color: var(--accent);
}

/* Spread dispersion badges */
.spread-tight {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.spread-tight small {
  font-weight: 400;
  opacity: 0.8;
}
.spread-normal {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}
.spread-wide {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.spread-wide small {
  font-weight: 400;
  opacity: 0.8;
}

/* Narrative text */
.narrative-text {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 8px 0;
}

/* Events list */
.events-list {
  list-style: none;
}
.events-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.event-date {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 11px;
  min-width: 90px;
}
.event-type {
  color: var(--text-secondary);
}

/* Popup loading */
.popup-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}
.popup-loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-left: 10px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Private modal form */
.private-modal { max-width: 500px; }
.private-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.private-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.private-form input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  outline: none;
}
.private-form input:focus { border-color: var(--accent); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-dim); }
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary:disabled:hover { background: var(--accent); }
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}
.private-form-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  padding: 2px 0 4px;
}
.lookup-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
}
.lookup-status.status-loading {
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.3);
  color: var(--accent);
}
.lookup-status.status-success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--green);
}
.lookup-status.status-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--red);
}

/* === FOOTER === */
/* === NEWS (lean 3-section redesign) === */
.surface-news .surface-header {
  position: relative;
}
.news-status {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 4px;
}
.news-loading {
  padding: 18px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}
.news-empty {
  padding: 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.news-section {
  padding: 4px 0 8px;
}
.news-section + .news-section {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.news-section-title {
  margin: 0;
  padding: 10px 16px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.news-list {
  display: flex;
  flex-direction: column;
}

/* --- Subsector filter chip bar (PR C) ---
   Wrapping row of filter chips above Watchlist Headlines (All / Macro /
   per-subsector). The bar is hidden when only one chip ("All") would render
   — see news.js renderFilterBar(). */
.news-filter-bar {
  /* PR (2026-06-18): wrap chips onto multiple rows instead of forcing the
     user to scroll horizontally. row-gap is a touch larger than column-gap so
     the rows feel visually distinct without looking sparse. */
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 7px;
  padding: 8px 16px 12px;
}
.news-filter-bar:empty { display: none; }
.news-filter-chip {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.news-filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
.news-filter-chip--active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.news-filter-chip-count {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
}

/* --- Cards (shared) --- */
.news-card {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.news-card:last-child { border-bottom: none; }
.news-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.news-card-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.news-card-headline {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}
a.news-card-link {
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.12s;
}
a.news-card-link:hover { color: var(--accent); text-decoration: underline; }
.news-card-foot {
  margin-top: 6px;
  font-size: 11px;
}
.news-source {
  color: var(--text-muted);
  text-decoration: none;
}
a.news-source:hover { color: var(--accent); text-decoration: underline; }

/* --- Ticker chips --- */
.news-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.news-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.12);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.12s;
}
.news-chip:hover { background: rgba(59, 130, 246, 0.25); }
.news-chip--macro {
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.14);
  cursor: default;
}
.news-chip--macro:hover { background: rgba(148, 163, 184, 0.14); }
/* Private-company origin chip — the tickerless counterpart to MACRO, on rows
 * emitted by private_company_feed. Blue so it reads as a coverage class of
 * its own rather than a muted "no ticker" fallback. */
.news-chip--private {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.16);
  cursor: default;
}
.news-chip--private:hover { background: rgba(59, 130, 246, 0.16); }
:root[data-theme="light"] .news-chip--private {
  color: #1D4ED8;
  background: rgba(29, 78, 216, 0.10);
}
:root[data-theme="light"] .news-chip--private:hover { background: rgba(29, 78, 216, 0.10); }

/* --- Earnings cards using news-headline layout (post-2026-06-18) --- */
/* When an earnings card adopts the news-card layout, suppress the news-card
   default padding + bottom border (the .earnings-card wrapper already owns
   its own padding, border, border-radius and color-coded left edge). */
.earnings-card.news-card {
  padding: 12px;
}
.earnings-card.news-card:not(:last-child) {
  border-bottom: 1px solid #1e293b;
}
.news-card-headline--empty {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}
.news-source--muted {
  color: var(--text-muted);
  opacity: 0.75;
}
/* Earnings-note-derived card source label (distinct from raw news source). */
.news-source--note {
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.2px;
}
/* Direction-coded post-earnings card headline. Mirrors the reaction_pct
   color logic from screener / earnings.js so a 0% / +0.x% / -0.x% / +5%+ /
   -5%+ move is visually obvious at a glance. */
.earnings-card-headline {
  /* Slightly heavier than the default news headline to emphasize that this
     is a structured, deterministic summary rather than a raw news title. */
  font-weight: 600;
}
.earnings-card-headline--up {
  color: #34d399; /* emerald-400 */
}
.earnings-card-headline--up-strong {
  color: #10b981; /* emerald-500 */
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.18);
}
.earnings-card-headline--down {
  color: #f87171; /* red-400 */
}
.earnings-card-headline--down-strong {
  color: #ef4444; /* red-500 */
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.18);
}
.earnings-card-headline--flat {
  color: var(--text-primary);
}
/* Inline reaction-prefix coloring for post-earnings cards (PR #64).
   Renders the ``Stock +X.X%.`` prefix in the same direction-coded palette
   as the prior whole-headline tint, but keeps the qualitative blurb in the
   default body color so the thesis sentence reads naturally. */
.earnings-card-reaction {
  font-weight: 700;
  letter-spacing: 0.1px;
  margin-right: 4px;
}
.earnings-card-reaction--up {
  color: #34d399;
}
.earnings-card-reaction--up-strong {
  color: #10b981;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.18);
}
.earnings-card-reaction--down {
  color: #f87171;
}
.earnings-card-reaction--down-strong {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.18);
}
.earnings-card-reaction--flat {
  color: var(--text-muted);
}
.earnings-context-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.10);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
/* Suppress the old metric/header/reaction blocks if any stale markup slips
   through (defensive — current code path no longer emits these inside
   .earnings-card.news-card, but a cached client may briefly). */
.earnings-card.news-card .earnings-card-header,
.earnings-card.news-card .earnings-card-metrics,
.earnings-card.news-card .earnings-card-reaction-row,
.earnings-card.news-card .earnings-card-countdown,
.earnings-card.news-card .earnings-card-fq {
  display: none;
}

/* --- M&A cards --- */
.news-ma-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 3px;
}
.news-ma-status-rumor     { color: #fdba74; background: rgba(249, 115, 22, 0.18); }
.news-ma-status-confirmed { color: #86efac; background: rgba(34, 197, 94, 0.16); }
.news-ma-conf {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.news-ma-buyer {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.news-ma-label { color: var(--text-muted); }
.news-ma-sep { color: var(--text-muted); margin: 0 2px; }

/* --- Earnings note cards (grid) --- */
.news-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 4px 16px 8px;
}
.news-note-card {
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.news-note-card:hover {
  border-color: var(--border-light);
  background: var(--bg-hover);
}
.news-note-type {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
}
.news-note-type-post { color: #93c5fd; background: rgba(59, 130, 246, 0.16); }
.news-note-type-pre  { color: #c4b5fd; background: rgba(139, 92, 246, 0.16); }
.news-note-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
}
.news-note-name {
  font-size: 12px;
  margin-bottom: 4px;
}
.news-note-company {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Headline line — earnings context summary */
.news-note-headline {
  font-size: 11.5px;
  color: #94a3b8; /* slate-400 — neutral default */
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}
/* Significant positive move: |pct| >= 5 and positive */
.news-note-headline--up {
  color: #34d399; /* emerald-400 */
  font-weight: 600;
}
/* Significant negative move: |pct| >= 5 and negative */
.news-note-headline--down {
  color: #fb7185; /* rose-400 */
  font-weight: 600;
}
.news-note-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.news-note-open {
  color: var(--accent);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* === SEE MORE / DEEP DIVE === */
.see-more-wrapper {
  text-align: center;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.see-more-btn {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 28px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}
.see-more-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--text-primary);
}
.see-more-arrow {
  font-size: 10px;
  transition: transform 0.25s ease;
}
.see-more-arrow.rotated {
  transform: rotate(180deg);
}
.deep-dive-container {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 16px;
}
.deep-dive-section {
  margin-bottom: 28px;
}
.deep-dive-loading {
  min-height: 200px;
}

/* Quant Factor Scorecard */
.quant-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.quant-composite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.composite-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.composite-score {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
}
.quant-factors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}
.factor-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(30,41,59,0.4);
}
.factor-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
.factor-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.factor-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.factor-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease-out;
  min-width: 2px;
}
.factor-score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}
.factor-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* Short Interest */
.short-interest-metrics {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.si-big-number {
  min-width: 140px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}
.si-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.si-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.si-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
}
.short-interest-chart-area {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  height: 200px;
}
.si-context {
  margin-top: 4px;
}

/* S&P 500 Outperformance */
.outperf-chart-block {
  margin-bottom: 4px;
}
.outperf-header {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.outperf-big-number {
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: inline-block;
}
.outperf-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}
.outperf-unit {
  font-size: 16px;
  opacity: 0.7;
}
.outperf-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.outperf-approx {
  font-size: 9px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}
.outperf-chart-container {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  height: 310px;
}

/* Lookback toggle buttons */
.outperf-lookback-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
  margin-top: 4px;
}
.lookback-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
}
.lookback-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}
.lookback-btn.active {
  background: rgba(59,130,246,0.2);
  color: #60a5fa;
}

/* Cross-Sector Comps Table */
.comps-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}
.comps-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
}
.comps-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  min-width: 900px;
}
.comps-table thead th {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.comps-table thead th.num {
  text-align: right;
}
.comps-table tbody td {
  padding: 7px 10px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.comps-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.comps-table tbody tr:hover {
  background: rgba(255,255,255,0.02);
}
.comps-table tbody tr:last-child td {
  border-bottom: none;
}

/* Target row highlight */
.comps-target-row {
  background: rgba(34,211,238,0.04);
}
.comps-target-row td {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom: 1px solid rgba(34,211,238,0.15);
}

/* Sticky company column */
.comps-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  min-width: 160px;
}
thead .comps-sticky-col {
  z-index: 3;
  background: var(--bg-surface-alt);
}
.comps-target-row .comps-sticky-col {
  background: rgba(10, 14, 23, 0.97);
}
tbody tr:hover .comps-sticky-col {
  background: rgba(10, 14, 23, 0.97);
}

/* Ticker + name layout in first column */
.comps-ticker {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  margin-right: 6px;
}
.comps-name {
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--font-sans);
}
.comps-sector-cell {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-muted);
}

/* Match badges */
.comps-target-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(34,211,238,0.12);
  color: var(--accent);
  border: 1px solid rgba(34,211,238,0.25);
}
.comps-sim-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}

/* Narrative under comps table */
.comps-narrative {
  margin-top: 10px;
}

/* ===== EARNINGS SECTION ===== */
.earnings-section {
  margin-top: 24px;
}
.earnings-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.earnings-status {
  font-size: 11px;
  color: #6b7280;
  font-family: 'JetBrains Mono', monospace;
}
.btn-ghost {
  background: transparent;
  border: 1px solid #1e293b;
  color: #94a3b8;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover {
  border-color: #3b82f6;
  color: #e5e7eb;
}
.earnings-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.earnings-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.earnings-panel-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}
.earnings-empty {
  font-size: 12px;
  color: #4b5563;
  padding: 16px 0;
  text-align: center;
}

/* --- Earnings Cards --- */
.earnings-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.earnings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  transition: border-color 0.15s;
}
.earnings-card:hover {
  border-color: #374151;
}
.earnings-card.reported {
  border-left: 3px solid #3b82f6;
}
.earnings-card.upcoming {
  border-left: 3px solid #f59e0b;
}
.earnings-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.earnings-card-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: #e5e7eb;
}
.earnings-card-name {
  font-size: 12px;
  color: #9ca3af;
}
.earnings-card-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6b7280;
  margin-left: auto;
}
.earnings-card-metrics {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
}
.earnings-metric {
  display: flex;
  align-items: center;
  gap: 6px;
}
.metric-label {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #e5e7eb;
  font-weight: 500;
}
.metric-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-tag.beat {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.metric-tag.miss {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.metric-tag.inline {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}
/* --- Beat/miss surprise % on post-earnings REV / EPS rows --- */
.metric-surprise {
  font-size: 10px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.metric-surprise.beat { color: #22c55e; }
.metric-surprise.miss { color: #ef4444; }
.metric-surprise.inline { color: #9ca3af; }
.metric-surprise.neutral { color: #4b5563; }
/* --- FY / Next Q guide row on post-earnings cards --- */
/* Split FY guidance: revenue + profitability metric-specific pills. The row
   must wrap cleanly on narrow screens (mobile Safari) so two pills never
   overflow the card. */
.earnings-guide-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.guide-label {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  min-width: 62px;
}
.guide-metric {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.guide-metric .guide-metric-label {
  color: #9ca3af;
  font-weight: 500;
}
.guide-metric .guide-metric-direction {
  font-size: 10px;
  text-transform: lowercase;
  opacity: 0.8;
}
.guide-metric .guide-basis-hint {
  font-size: 9px;
  color: #6b7280;
  font-weight: 400;
  font-style: italic;
}
.guide-metric.guide-positive {
  color: #22c55e;
}
.guide-metric.guide-positive .guide-metric-label { color: #4ade80; }
.guide-metric.guide-negative {
  color: #ef4444;
}
.guide-metric.guide-negative .guide-metric-label { color: #f87171; }
.guide-metric.guide-neutral {
  color: #9ca3af;
}
.guide-sep {
  color: #4b5563;
  margin: 0 2px;
}
@media (max-width: 480px) {
  /* On narrow screens let the label sit on its own line and pills wrap below
     so neither guidance pill overflows the card. */
  .earnings-guide-row {
    gap: 4px 8px;
  }
  .guide-label {
    flex: 0 0 100%;
    min-width: 0;
  }
}
.earnings-card-fq {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 4px;
}
/* --- Stock reaction row (pct + narrative) on post-earnings cards --- */
.earnings-card-reaction-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.reaction-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.reaction-pct.positive { color: #22c55e; }
.reaction-pct.negative { color: #ef4444; }
.reaction-pct.neutral { color: #4b5563; }
.reaction-text {
  font-size: 11px;
  color: #9ca3af;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.4;
}
.reaction-text.muted {
  color: #4b5563;
}
.earnings-card-countdown {
  font-size: 12px;
  color: #f59e0b;
  margin-bottom: 8px;
}
.earnings-note-btn {
  background: transparent;
  border: 1px solid #1e293b;
  color: #60a5fa;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.earnings-note-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

/* --- Next Up (15-45 day preview) --- */
.earnings-next-up {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1e293b;
}
.earnings-next-up-title {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  margin: 0 0 8px 0;
}
.earnings-next-up-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.earnings-next-up-item {
  display: grid;
  grid-template-columns: 56px 1fr 90px 40px;
  gap: 8px;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 3px;
  align-items: center;
}
.earnings-next-up-item:hover {
  background: var(--bg-hover);
}
.nui-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: #e5e7eb;
}
.nui-name {
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nui-date {
  font-family: 'JetBrains Mono', monospace;
  color: #6b7280;
  text-align: right;
}
.nui-days {
  font-family: 'JetBrains Mono', monospace;
  color: #f59e0b;
  text-align: right;
}

/* --- Earnings Note Modal --- */
.earnings-note-modal {
  max-width: 720px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.earnings-note-content {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: #d1d5db;
}
.earnings-note-content h2 {
  font-size: 18px;
  color: #f3f4f6;
  margin: 0 0 12px 0;
  font-weight: 700;
}
.earnings-note-content h3 {
  font-size: 14px;
  color: #e5e7eb;
  margin: 20px 0 8px 0;
  font-weight: 600;
}
.earnings-note-content h4 {
  font-size: 12px;
  color: #9ca3af;
  margin: 16px 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.earnings-note-content p {
  margin: 0 0 8px 0;
}
.earnings-note-content strong {
  color: #e5e7eb;
}
.earnings-note-content ul {
  margin: 4px 0 12px 0;
  padding-left: 18px;
}
.earnings-note-content li {
  margin-bottom: 4px;
}
.earnings-note-content hr {
  border: none;
  border-top: 1px solid #1e293b;
  margin: 16px 0;
}
.earnings-note-content a {
  color: #60a5fa;
  text-decoration: none;
}
.earnings-note-content a:hover {
  text-decoration: underline;
}
.earnings-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px 0;
  font-size: 12px;
}
.earnings-md-table th,
.earnings-md-table td {
  padding: 6px 10px;
  border: 1px solid #1e293b;
  text-align: left;
}
.earnings-md-table th {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 600;
}
.earnings-md-table td {
  color: #d1d5db;
}
.earnings-note-loading,
.earnings-note-error {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
  font-size: 13px;
}

/* --- Earnings Archive Modal --- */
.earnings-archive-modal {
  max-width: 800px;
  width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
}
.archive-section {
  margin-bottom: 24px;
}
.archive-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.archive-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.archive-note-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.archive-note-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.archive-note-card.archived {
  opacity: 0.7;
}
.archive-note-card.archived:hover {
  opacity: 1;
}
.archive-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.archive-card-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
.archive-card-name {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-card-type {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
}
.archive-card-type.post {
  color: var(--green);
  background: var(--green-dim);
}
.archive-card-type.pre {
  color: var(--accent);
  background: rgba(59,130,246,0.1);
}
.archive-card-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.archive-card-headline {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.archive-card-metrics {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.archive-metric {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
}
.archive-metric.positive { color: var(--green); }
.archive-metric.negative { color: var(--red); }
.archive-card-cta {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

/* === WEEKLY BRIEFING === */
.weekly-briefing-section {
  margin-top: 32px;
}
.weekly-briefing-content {
  padding: 0 4px;
}
.wb-empty {
  color: #6b7280;
  font-size: 0.875rem;
  padding: 24px 0;
  text-align: center;
}
.wb-status {
  color: #6b7280;
  font-size: 0.75rem;
}
.wb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 8px;
  border-bottom: 1px solid #1e2433;
  flex-wrap: wrap;
  gap: 8px;
}
.wb-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
}
.wb-indices {
  display: flex;
  gap: 16px;
}
.wb-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
}
.wb-index.positive { color: #22c55e; }
.wb-index.negative { color: #ef4444; }
.wb-narrative {
  color: #9ca3af;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 12px 0 16px;
}
.wb-section {
  margin: 20px 0;
}
.wb-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wb-section-title .wb-icon {
  color: #3b82f6;
  font-size: 1.1rem;
}
.wb-section-title .wb-subtitle {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.8rem;
  margin-left: 4px;
}
.wb-sub-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}

/* --- Cards grid --- */
.wb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.wb-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
  transition: border-color 0.15s;
}
.wb-card:hover {
  border-color: #2d3748;
}
.wb-value-card {
  border-left: 3px solid #3b82f6;
}
.wb-momentum-card {
  border-left: 3px solid #22c55e;
}
.wb-card-rank {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4b5563;
}
.wb-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wb-card-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1rem;
  color: #e5e7eb;
}
.wb-card-name {
  font-size: 0.8rem;
  color: #9ca3af;
}
.wb-card-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: #d1d5db;
  margin-left: auto;
}
.wb-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.wb-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: #9ca3af;
}
.wb-stat.positive { color: #22c55e; background: rgba(34,197,94,0.08); }
.wb-stat.negative { color: #ef4444; background: rgba(239,68,68,0.08); }
.wb-card-thesis, .wb-card-bull {
  font-size: 0.8rem;
  color: #d1d5db;
  line-height: 1.45;
  margin-bottom: 6px;
}

/* --- Per-stock primer expander on each value/momentum card --- */
.wb-card-primer {
  margin-top: 10px;
  border-top: 1px solid #1e2433;
  padding-top: 10px;
}
.wb-card-primer > summary.wb-primer-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  transition: color 0.12s ease, background 0.12s ease;
  user-select: none;
}
.wb-card-primer > summary.wb-primer-toggle::-webkit-details-marker {
  display: none;
}
.wb-card-primer > summary.wb-primer-toggle:hover,
.wb-card-primer > summary.wb-primer-toggle:focus-visible {
  color: #e5e7eb;
  background: rgba(255,255,255,0.07);
  outline: none;
}
.wb-card-primer > summary.wb-primer-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(59,130,246,0.6);
}
.wb-primer-toggle-caret {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 0.7rem;
  line-height: 1;
}
.wb-card-primer[open] > summary.wb-primer-toggle .wb-primer-toggle-caret {
  transform: rotate(90deg);
}
.wb-primer-body {
  margin-top: 10px;
  padding-top: 4px;
  animation: wb-primer-fade 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wb-primer-part {
  padding: 8px 10px;
  background: rgba(255,255,255,0.015);
  border-left: 2px solid #1e2a3a;
  border-radius: 3px;
}
.wb-primer-part-head { margin-bottom: 4px; }
.wb-primer-headline {
  margin: 0 0 6px 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #e5e7eb;
  font-weight: 500;
}
.wb-primer-bullets {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.wb-primer-bullets li {
  font-size: 0.76rem;
  line-height: 1.5;
  color: #9ca3af;
  margin-bottom: 3px;
}
.wb-value-card .wb-primer-part { border-left-color: #22c55e; }
.wb-momentum-card .wb-primer-part { border-left-color: #3b82f6; }
/* Bear-case "Why it could go lower": orange/red accent to contrast bull-case green. */
.wb-value-card .wb-primer-part--bear,
.wb-primer-part--bear { border-left-color: #f97316; }
.wb-primer-part--bear .wb-label { color: #f97316; }
.wb-primer-placeholder { color: #6b7280; font-style: italic; font-weight: 400; }
.wb-drawer-section--bear .wb-drawer-sectionhead { color: #f97316; }
.wb-primer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #1e2433;
}
.wb-primer-openfull {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.35);
  color: #93c5fd;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.wb-primer-openfull:hover {
  background: rgba(59,130,246,0.22);
  color: #dbeafe;
}
.wb-primer-share {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: #6b7280;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wb-primer-share:hover { color: #9ca3af; }

/* Expand-all section toggle */
.wb-expand-all {
  margin-left: auto;
  background: transparent;
  border: 1px solid #2a3444;
  color: #9ca3af;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.wb-expand-all:hover {
  color: #e5e7eb;
  border-color: #3b82f6;
  background: rgba(59,130,246,0.08);
}

/* --- Primer drawer (side panel for full narrative) --- */
.wb-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9998;
  pointer-events: none;
}
.wb-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.wb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(560px, 100vw);
  height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(0,0,0,0.6);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wb-drawer.active { transform: translateX(0); }

body.wb-drawer-open { overflow: hidden; }

.wb-drawer-header {
  padding: 20px 22px 14px;
  border-bottom: 1px solid #1e2433;
  background: linear-gradient(180deg, #111827 0%, #0b1019 100%);
}
.wb-drawer-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wb-drawer-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-drawer-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: #e5e7eb;
  letter-spacing: 0.03em;
}
.wb-drawer-name {
  font-size: 0.85rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 440px;
}
.wb-drawer-close {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 1.6rem;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.12s ease, background 0.12s ease;
}
.wb-drawer-close:hover { color: #e5e7eb; background: rgba(255,255,255,0.06); }
.wb-drawer-kind {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: #6b7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wb-drawer-stats {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wb-drawer-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.wb-drawer-share {
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a3444;
  color: #9ca3af;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.wb-drawer-share:hover { color: #e5e7eb; border-color: #3b82f6; }

.wb-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 32px;
}
.wb-drawer-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed #1e2433;
}
.wb-drawer-section:last-child { border-bottom: none; }
.wb-drawer-sectionhead {
  margin: 0 0 10px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3b82f6;
}
.wb-value-card ~ .wb-drawer .wb-drawer-sectionhead,
.wb-drawer[aria-label*="value"] .wb-drawer-sectionhead { color: #22c55e; }
.wb-drawer-subsection {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid #1e2a3a;
  border-radius: 3px;
}
.wb-drawer-subhead {
  font-size: 0.78rem;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 6px;
}
.wb-drawer-body p {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #d1d5db;
}
.wb-drawer-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .wb-drawer { width: 100vw; }
  .wb-drawer-name { max-width: 60vw; }
}

@keyframes wb-primer-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-primer-body { animation: none; }
  .wb-primer-toggle-caret { transition: none; }
  .wb-drawer { transition: none; }
  .wb-drawer-overlay { transition: none; }
}
.wb-label {
  font-weight: 600;
  font-size: 0.72rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

/* --- Trends & Risks lists --- */
.wb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wb-list-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.wb-list-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #e5e7eb;
  margin-bottom: 4px;
}
.wb-list-detail {
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.45;
}
.wb-risk-item {
  border-left: 3px solid #f59e0b;
}
.wb-risk-lead {
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.45;
  margin-bottom: 8px;
}
.wb-risk-bullets {
  margin: 4px 0 0 0;
  padding-left: 20px;
  font-size: 0.8rem;
  color: #9ca3af;
  line-height: 1.45;
}
.wb-risk-bullets li {
  margin-bottom: 4px;
}
.wb-risk-bullets li:last-child {
  margin-bottom: 0;
}

/* --- Watchlist updates --- */
.wb-updates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.wb-update-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.wb-update-card.wb-up { border-left: 3px solid #22c55e; }
.wb-update-card.wb-down { border-left: 3px solid #ef4444; }
.wb-update-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.wb-update-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.9rem;
  color: #e5e7eb;
}
.wb-update-perfs {
  display: flex;
  gap: 8px;
}
.wb-perf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 3px;
}
.wb-perf.positive { color: #22c55e; background: rgba(34,197,94,0.08); }
.wb-perf.negative { color: #ef4444; background: rgba(239,68,68,0.08); }
.wb-perf.neutral  { color: #9ca3af; background: rgba(156,163,175,0.08); }
.wb-update-card.wb-neutral { border-left-color: #4b5563; }
.wb-update-headline {
  font-weight: 600;
  font-size: 0.8rem;
  color: #d1d5db;
  margin-bottom: 4px;
}
.wb-update-detail {
  font-size: 0.78rem;
  color: #9ca3af;
  line-height: 1.4;
}
.wb-updates-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wb-compact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #111827;
  border: 1px solid #1e2433;
  border-radius: 4px;
  font-size: 0.78rem;
}
.wb-compact-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: #e5e7eb;
  min-width: 48px;
}
.wb-compact-headline {
  color: #9ca3af;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-headline-missing {
  color: #6b7280;
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-news-positive {
  color: #34d399;
  text-decoration: none;
  border-bottom: 1px dotted rgba(52, 211, 153, 0.35);
  transition: color 0.15s ease;
}
.wb-news-positive:hover {
  color: #6ee7b7;
  border-bottom-color: rgba(110, 231, 183, 0.65);
}
.wb-news-negative {
  color: #f87171;
  text-decoration: none;
  border-bottom: 1px dotted rgba(248, 113, 113, 0.35);
  transition: color 0.15s ease;
}
.wb-news-negative:hover {
  color: #fca5a5;
  border-bottom-color: rgba(252, 165, 165, 0.65);
}
.wb-news-neutral {
  color: #cbd5e1;
  text-decoration: none;
  border-bottom: 1px dotted rgba(203, 213, 225, 0.35);
}
.wb-30d-pill {
  display: inline-flex;
  align-items: baseline;
  padding: 1px 6px;
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}
.wb-30d-pill.up { color: #34d399; background: rgba(52, 211, 153, 0.10); }
.wb-30d-pill.down { color: #f87171; background: rgba(248, 113, 113, 0.10); }
.wb-perf-caret {
  display: inline-block;
  margin-right: 2px;
  font-size: 0.65rem;
  line-height: 1;
  transform: translateY(-1px);
}
.wb-archive-link {
  margin-top: 20px;
  text-align: center;
}

/* === EARNINGS CALENDAR === */
.earnings-calendar-section { padding: 0 16px 16px; }
.earnings-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.ecal-day-header {
  background: var(--bg-header);
  padding: 6px 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.ecal-cell {
  background: var(--bg-primary);
  min-height: 72px;
  padding: 4px;
  position: relative;
}
.ecal-cell.ecal-today {
  background: rgba(59,130,246,0.06);
}
.ecal-cell.ecal-other-month {
  opacity: 0.35;
}
.ecal-date {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 2px;
  padding: 0 2px;
}
.ecal-today .ecal-date {
  color: var(--accent);
  font-weight: 700;
}
.ecal-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.ecal-ticker-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s;
}
.ecal-ticker-chip.ecal-pre {
  color: var(--accent);
  background: rgba(59,130,246,0.1);
}
.ecal-ticker-chip.ecal-pre:hover {
  background: rgba(59,130,246,0.2);
}
.ecal-ticker-chip.ecal-post {
  color: var(--green);
  background: var(--green-dim);
}
.ecal-ticker-chip.ecal-post:hover {
  background: rgba(34,197,94,0.2);
}
.ecal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ecal-nav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ecal-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ecal-month-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 120px;
  text-align: center;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .header-meta { flex-direction: column; gap: 2px; align-items: flex-end; }
  .search-wrapper input { width: 140px; }
  /* 300, not 260: private rows carry a company name AND an action verb where
     ticker rows carried a 4-character symbol. max-width keeps it on screen. */
  .search-dropdown { width: 300px; }
  /* No room for subsector · valuation next to the name here — it ellipsized
     down to a single letter, which told the user nothing. */
  .search-dropdown-item-private .search-dropdown-exchange { display: none; }
  /* Last-resort truncation so a long action verb clips cleanly inside the
     dropdown instead of spilling past its right edge. */
  .search-dropdown-item-private .search-dropdown-action {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .quant-factors-grid { grid-template-columns: 1fr; }
  .short-interest-metrics { flex-direction: column; }
  .si-cards { grid-template-columns: 1fr; }
  .comps-table { min-width: 700px; }
  .earnings-panels { grid-template-columns: 1fr; }
  .tab-btn { padding: 8px 12px; font-size: 11px; }
  .tab-btn svg { width: 12px; height: 12px; }
  .earnings-calendar-grid { grid-template-columns: repeat(7, 1fr); }
  .ecal-cell { min-height: 56px; }
  .ecal-ticker-chip { font-size: 8px; }
}

/* ===== MACRO TAB ===== */
.macro-content { padding: 0; }
.macro-loading, .macro-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Regime Banner */
.macro-regime-banner {
  background: var(--bg-surface);
  padding: 14px 18px;
  margin: 12px 16px;
  border-radius: 6px;
}
.regime-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.regime-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.regime-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.regime-label {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.regime-updated {
  font-size: 11px;
  color: var(--text-muted);
}
.regime-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.regime-tilts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tilt-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.tilt-favor { background: var(--green-dim); color: var(--green); }
.tilt-avoid { background: var(--red-dim); color: var(--red); }

/* Leaning regime variant — dashed left border + amber LEANING badge */
.macro-regime-banner-leaning {
  border-left-style: dashed !important;
}
.regime-label-leaning {
  font-style: normal;
  letter-spacing: 0.2px;
}
.regime-tier-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.35);
  margin-left: 4px;
}

/* Today's tactical tilt line (under regime banner) */
.macro-todays-tilt {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-family: var(--font-mono);
}
.tilt-line-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 10px;
  margin-right: 6px;
  color: var(--text-muted);
}
.tilt-line-risk-on .tilt-line-label { color: var(--green); }
.tilt-line-risk-off .tilt-line-label { color: var(--red); }
.tilt-line-mixed .tilt-line-label { color: #eab308; }
.tilt-line-body { color: var(--text-primary); }

/* Recent rotation alert chips (under banner, above pillars) */
.macro-recent-rotations-placeholder { padding: 0 16px; }
.macro-recent-rotations {
  margin: -4px 0 12px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
}
.recent-rotations-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.recent-rotations-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rotation-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  white-space: nowrap;
}
.rotation-chip-up { background: var(--green-dim); color: var(--green); border-color: rgba(34,197,94,0.25); }
.rotation-chip-down { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.25); }

/* Pillar Tiles */
.macro-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 16px 12px;
}
.macro-pillar-tile {
  background: var(--bg-surface);
  border-radius: 6px;
  padding: 12px 14px;
  min-width: 0;
}
.pillar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.pillar-icon { font-size: 14px; }
.pillar-header h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.pillar-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.pillar-na {
  font-size: 11px;
  color: var(--text-muted);
}

/* Score bar */
.pillar-score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.score-track {
  flex: 1;
  height: 4px;
  background: var(--bg-primary);
  border-radius: 2px;
  position: relative;
}
.score-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.score-center {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 1px;
}
.score-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  min-width: 34px;
  text-align: right;
}

/* Pillar signals */
.pillar-signals {
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.pillar-signal {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  font-size: 10px;
  white-space: nowrap;
}
.pillar-signal-header {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.signal-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 80px;
  min-width: 80px;
}
.signal-price {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--text-primary);
  min-width: 46px;
  flex-shrink: 0;
}
.signal-dir {
  text-align: center;
  font-size: 11px;
  min-width: 20px;
  flex-shrink: 0;
}
.signal-chg {
  font-family: var(--font-mono);
  text-align: right;
  font-size: 10px;
  min-width: 40px;
  flex-shrink: 0;
}

/* Indices Bar */
.macro-indices-bar {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}
.index-chip {
  background: var(--bg-surface);
  padding: 6px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  flex: 1;
  min-width: 140px;
}
.index-name {
  color: var(--text-secondary);
  font-weight: 500;
}
.index-price {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 600;
}
.index-chg {
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: auto;
}
.vix-high { border-left: 3px solid var(--red); }
.vix-elevated { border-left: 3px solid var(--yellow); }
.vix-low { border-left: 3px solid var(--green); }

/* Two-column layout */
.macro-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 16px;
}
.macro-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Macro card */
.macro-card {
  background: var(--bg-surface);
  border-radius: 6px;
  padding: 14px;
}
.macro-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Heatmap rows */
.hm-header, .hm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hm-header {
  padding: 0 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hm-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(30,41,59,0.4);
  font-size: 11px;
}
.hm-row:last-child { border-bottom: none; }
.hm-ticker {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 10px;
  min-width: 36px;
  flex-shrink: 0;
}
.hm-name {
  color: var(--text-secondary);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 70px;
  flex: 1 1 70px;
}
.hm-tag {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.hm-favor { background: var(--green-dim); color: var(--green); }
.hm-avoid { background: var(--red-dim); color: var(--red); }
/* Diverging momentum bar — centered at 0, extends left (red) or right (green) */
.hm-diverge-wrap {
  position: relative;
  height: 22px;
  background: rgba(17,24,39,0.6);
  border-radius: 3px;
  min-width: 120px;
  flex: 1 1 120px;
  overflow: hidden;
}
.hm-diverge-center {
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--border-light);
}
.hm-diverge-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 2px;
  transition: width 0.4s ease;
  opacity: 0.75;
}
.hm-diverge-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
  z-index: 1;
}
.hm-header .hm-diverge-wrap {
  background: none;
  height: auto;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-val {
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
  min-width: 42px;
  flex-shrink: 0;
}

/* Stock Ideas */
.ideas-regime-copy {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 2px 0 10px;
}
.ideas-section { margin-bottom: 12px; }
.ideas-section:last-child { margin-bottom: 0; }
.ideas-heading {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ideas-own-heading { color: var(--green); }
.ideas-avoid-heading { color: var(--red); }
.idea-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 6px;
  padding: 5px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(30,41,59,0.3);
}
.idea-row:last-child { border-bottom: none; }
.idea-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
}
.idea-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idea-subsector {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.idea-reason {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
.idea-own { border-left: 2px solid var(--green); padding-left: 8px; }
.idea-avoid { border-left: 2px solid var(--red); padding-left: 8px; }

/* Rich idea rows (idea engine output) */
.idea-row-rich {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 0 8px;
  font-size: 11px;
  border-bottom: 1px solid rgba(30,41,59,0.3);
}
.idea-row-rich:last-child { border-bottom: none; }
.idea-row-rich.idea-own { border-left: 2px solid var(--green); padding-left: 8px; }
.idea-row-rich.idea-avoid { border-left: 2px solid var(--red); padding-left: 8px; }
.idea-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.idea-row-head .idea-ticker { font-size: 12px; }
.idea-row-head .idea-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
}
.idea-row-head .idea-subsector { white-space: nowrap; }
.idea-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(100,116,139,0.15);
  color: var(--text-secondary);
  border: 1px solid rgba(100,116,139,0.3);
}
.idea-score-pill.val-pos {
  background: rgba(34,197,94,0.12);
  color: var(--green);
  border-color: rgba(34,197,94,0.35);
}
.idea-score-pill.val-neg {
  background: rgba(239,68,68,0.12);
  color: var(--red);
  border-color: rgba(239,68,68,0.35);
}
.idea-score-pill.val-neutral {
  background: rgba(100,116,139,0.12);
  color: var(--text-secondary);
  border-color: rgba(100,116,139,0.3);
}
.idea-row-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.idea-reason-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.idea-reason-bullets li {
  position: relative;
  padding-left: 12px;
}
.idea-reason-bullets li::before {
  content: '•';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--text-muted);
}
.idea-reason-bullets li.val-pos { color: var(--green); }
.idea-reason-bullets li.val-pos::before { color: var(--green); }
.idea-reason-bullets li.val-neg { color: var(--red); }
.idea-reason-bullets li.val-neg::before { color: var(--red); }
.idea-reason-bullets li.val-neutral { color: var(--text-secondary); }
.idea-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.idea-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 500;
  background: rgba(56,189,248,0.10);
  color: var(--text-secondary);
  border: 1px solid rgba(56,189,248,0.25);
  white-space: nowrap;
}

/* Commodities & Rates */
.commodity-header, .commodity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.commodity-header {
  padding: 0 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.commodity-row {
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(30,41,59,0.3);
}
.commodity-row:last-child { border-bottom: none; }
.commodity-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 80px;
  flex: 1 1 80px;
}
.commodity-price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  min-width: 56px;
  flex-shrink: 0;
}
.commodity-chg {
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
  min-width: 42px;
  flex-shrink: 0;
}

/* Horizontal scroll wrappers — each section scrolls its own content */
.pillar-signals {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pillar-signals .pillar-signal {
  min-width: 480px;
}
.hm-scroll-wrap, .commodity-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* Mobile responsive */
@media (max-width: 900px) {
  .macro-pillars { grid-template-columns: 1fr 1fr; }
  .macro-grid-2col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .macro-pillars { grid-template-columns: 1fr; }
  .macro-indices-bar { flex-direction: column; }
  .index-chip { min-width: unset; }
}

/* ===================================================================
   NOTE ENHANCEMENT STYLES
   1. Confidence / quality header
   2. Note tab bar (Note | Comps | Transcript)
   3. Peer comps panel
   4. Transcript panel
   5. Note search modal
   6. Utility: .pos / .neg / .neutral
   =================================================================== */

/* --- Utility color classes --- */
.pos  { color: var(--green);  }
.neg  { color: var(--red);    }
.neutral { color: var(--text-muted); }

/* ===================================================================
   1. CONFIDENCE HEADER
   =================================================================== */
.note-confidence-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  border: 1px solid;
}
.note-confidence-header.conf-tier-high {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}
.note-confidence-header.conf-tier-medium {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.25);
}
.note-confidence-header.conf-tier-low {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.22);
}

.conf-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.conf-tier-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.conf-tier-badge.conf-tier-high   { background: rgba(34, 197, 94, 0.18);  color: var(--green); }
.conf-tier-badge.conf-tier-medium { background: rgba(234, 179, 8, 0.18);  color: var(--yellow); }
.conf-tier-badge.conf-tier-low    { background: rgba(239, 68, 68, 0.15);  color: var(--red); }

.conf-freshness {
  color: var(--text-muted);
  font-size: 11px;
}

.conf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.conf-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.conf-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.conf-flag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(234, 179, 8, 0.12);
  color: var(--yellow);
  border: 1px solid rgba(234, 179, 8, 0.25);
}

/* ===================================================================
   2. NOTE TAB BAR
   =================================================================== */
.note-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  padding-bottom: 0;
}

.note-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 14px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.note-tab:hover {
  color: var(--text-primary);
}
.note-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.note-panel {
  display: none;
}
.note-panel.active {
  display: block;
}
.note-panel-loading {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}
.note-panel-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

/* ===================================================================
   3. PEER COMPS PANEL
   =================================================================== */
.note-comps-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.note-comps-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.note-comps-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.note-comps-subsector {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* Narrative paragraphs */
.comps-narrative {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.55;
}
.comps-para {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.comps-para-label {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comps-para-standout {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  background: rgba(59, 130, 246, 0.04);
  border-radius: 0 4px 4px 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Bar charts section */
.comps-bars-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comps-bars-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: -4px;
}

.comp-metric-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.comp-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comp-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}
.comp-bar-row-target {
  /* slightly highlighted */
}
.comp-bar-ticker {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  min-width: 36px;
  flex-shrink: 0;
}
.comp-bar-row-target .comp-bar-ticker {
  color: var(--accent);
  font-weight: 700;
}
.comp-bar-track {
  flex: 1;
  height: 7px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.comp-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.comp-bar.bar-target  { background: var(--accent); }
.comp-bar.bar-good    { background: var(--green); }
.comp-bar.bar-neutral { background: var(--text-muted); opacity: 0.5; }

.comp-bar-val {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  min-width: 42px;
  text-align: right;
  flex-shrink: 0;
}
.comp-bar-val.target-val {
  color: var(--accent);
  font-weight: 700;
}

/* Comps reference table */
.comps-table-details {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.comps-table-summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  background: var(--bg-secondary);
  list-style: none;
}
.comps-table-summary::-webkit-details-marker { display: none; }
.comps-table-summary::before {
  content: '▶ ';
  font-size: 9px;
  margin-right: 4px;
  display: inline-block;
  transition: transform 0.2s;
}
.comps-table-details[open] .comps-table-summary::before {
  transform: rotate(90deg);
}
.comps-table-summary:hover { color: var(--text-primary); }

.note-comps-table-wrapper {
  max-height: 260px;
  overflow-y: auto;
}

.comps-unavailable {
  font-size: 13px;
  color: var(--text-muted);
  padding: 16px 0;
  text-align: center;
}

/* ===================================================================
   4. TRANSCRIPT PANEL
   =================================================================== */
.note-transcript-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.transcript-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.transcript-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.transcript-period {
  font-size: 11px;
  color: var(--text-muted);
}

.transcript-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.transcript-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.transcript-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-secondary);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s;
}
.transcript-link:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}
.transcript-link-icon {
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}
.transcript-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.transcript-link-name {
  font-size: 13px;
  font-weight: 600;
}
.transcript-link-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.transcript-link-arrow {
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
}

.transcript-qa-hint {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: 5px;
  padding: 8px 12px;
  line-height: 1.5;
  border: 1px solid var(--border);
}
.transcript-qa-hint strong {
  color: var(--text-secondary);
}

/* ===================================================================
   5. NOTE SEARCH MODAL
   =================================================================== */
.note-search-modal {
  width: min(680px, 94vw);
  max-height: min(600px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.note-search-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.note-search-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}
.note-search-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.note-search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px 10px 2px 4px;
  transition: border-color 0.15s;
}
.note-search-input-row:focus-within {
  border-color: var(--accent);
}
.note-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary);
  padding: 8px 6px;
  font-family: var(--font-sans);
}
.note-search-input::placeholder { color: var(--text-muted); }
.note-search-kbd {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 5px;
  flex-shrink: 0;
}

.note-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
}

.note-search-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 24px 0;
  text-align: center;
}

.note-search-result {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.note-search-result:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}
.search-result-header {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.search-result-ticker {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.search-result-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
}
.search-result-type.pre  { background: rgba(59, 130, 246, 0.15); color: var(--accent); }
.search-result-type.post { background: rgba(34, 197, 94, 0.13);  color: var(--green); }
.search-result-date {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.search-result-archived {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.search-result-excerpt {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
mark.search-highlight {
  background: rgba(234, 179, 8, 0.25);
  color: var(--yellow);
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* ===================================================================
   NOTE BODY WRAPPER (preserves existing note content styles)
   =================================================================== */
.note-body-content {
  /* Inherits whatever styles are on the note content container */
}

/* Mobile adjustments for note tabs */
@media (max-width: 600px) {
  .note-tab { padding: 6px 10px 7px; font-size: 11px; }
  .comp-bar-ticker { min-width: 28px; }
  .note-search-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
  .transcript-link { padding: 10px 12px; }
}

/* ===================================================================
   PRIVATE COMPANY DETAIL POPUP
   =================================================================== */

/* --- Modal sizing --- */
.private-detail-modal {
  width: min(820px, 96vw);
  max-height: min(700px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* --- Header --- */
.private-detail-header {
  padding: 20px 24px 0;
  flex-shrink: 0;
}

.pd-header-top {
  margin-bottom: 14px;
}

.pd-header-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pd-company-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.pd-status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.pd-status-private { background: rgba(59, 130, 246, 0.15); color: var(--accent); border: 1px solid rgba(59, 130, 246, 0.3); }
.pd-status-public  { background: rgba(34, 197, 94, 0.13);  color: var(--green);  border: 1px solid rgba(34, 197, 94, 0.3); }
.pd-status-ipo     { background: rgba(234, 179, 8, 0.15);  color: var(--yellow); border: 1px solid rgba(234, 179, 8, 0.3); }
/* Terminal lifecycle state: change of control has closed. Matches the purple
 * of the ACQ pill that sits beside it in the header. */
.pd-status-acquired { background: rgba(168, 85, 247, 0.16); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
:root[data-theme="light"] .pd-status-acquired { background: rgba(107, 33, 168, 0.10); color: #6B21A8; border-color: rgba(107, 33, 168, 0.35); }

.pd-stage-tag {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
}

.pd-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-subsector-tag {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: 3px;
  padding: 2px 7px;
  border: 1px solid var(--border);
}

.pd-hq {
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Header stats bar --- */
.pd-header-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 -24px;
  padding: 0 24px;
  background: var(--bg-secondary);
  flex-wrap: wrap;
}

.pd-stat {
  display: flex;
  flex-direction: column;
  padding: 10px 16px 10px 0;
  min-width: 120px;
  flex: 1;
}

.pd-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.pd-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.pd-stat-funding,
.pd-stat-investors {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 11px;
}

/* --- Tab bar --- */
.private-detail-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  flex-shrink: 0;
  background: var(--bg-primary);
  /* Eight tabs no longer fit a phone. Scroll the strip rather than shrinking
     it — shrunken tabs fold their labels onto two lines and collide. Same
     treatment as .popup-tabs. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.private-detail-tab-bar::-webkit-scrollbar { display: none; }

.pd-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pd-tab:hover { color: var(--text-primary); }
.pd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Body / scroll area --- */
.private-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
  min-height: 0;
}

/* --- Sections --- */
.pd-section {
  margin-bottom: 24px;
}

/* Deal blurb hosted inside the private popup's Overview tab. .ma-deal-blurb
 * was built for the earnings-note slot, which supplies its own frame — give
 * it one here so it reads as a panel rather than loose text. */
.pd-section-deal {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  overflow: hidden;
}

.pd-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pd-bull-title { color: var(--green); }
.pd-bear-title { color: var(--red); }

/* Subheading inside a long drilldown section (>300 words). Bold, a notch
   smaller than .section-title, with top margin to break up walls of prose. */
.subsection-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-top: 24px;
  margin-bottom: 8px;
}

.pd-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* --- KV grid for context fields --- */
.pd-kv-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-kv-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.pd-kv-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 110px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pd-kv-value {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Metric cards --- */
.pd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.pd-metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pd-metric-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.pd-metric-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Research links --- */
.pd-links-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-link-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.pd-link-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Comps table --- */
.pd-comps-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: -6px 0 12px;
}

.pd-comps-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 20px;
}
.pd-comps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pd-comps-table thead th {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pd-comps-table thead th.num { text-align: right; }
.pd-comps-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.pd-comps-table tbody tr:last-child td { border-bottom: none; }
.pd-comps-table tbody td.num { text-align: right; font-family: var(--font-mono); font-size: 11px; }
.pd-comp-row { cursor: pointer; transition: background 0.12s; }
.pd-comp-row:hover { background: var(--bg-tertiary); }
.pd-comp-median-row { background: rgba(148, 163, 184, 0.08); border-top: 1px solid rgba(148, 163, 184, 0.25); font-weight: 600; }
.pd-comp-median-row td { color: var(--text-primary); }
.pd-fund-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 3px; vertical-align: middle; }

.pd-comp-name-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pd-comp-ticker {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.pd-comp-name {
  font-size: 10px;
  color: var(--text-muted);
}

/* Recommendation badge */
.pd-rec {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border-radius: 3px;
}
.pd-rec-buy, .pd-rec-strong-buy { background: rgba(34,197,94,.15); color: var(--green); }
.pd-rec-hold, .pd-rec-neutral   { background: rgba(234,179,8,.12); color: var(--yellow); }
.pd-rec-sell, .pd-rec-underperform { background: rgba(239,68,68,.12); color: var(--red); }

/* Comps narrative */
.pd-narrative { display: flex; flex-direction: column; gap: 10px; }
.pd-narrative-para {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.pd-narrative-label {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Landscape tab --- */
.pd-landscape-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.pd-competitor-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--bg-secondary);
}
.pd-comp-private { border-left: 3px solid var(--accent); }
.pd-comp-public  { border-left: 3px solid var(--green); }

.pd-competitor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pd-competitor-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.pd-comp-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
}
.pd-comp-type-private { background: rgba(59,130,246,.12); color: var(--accent); }
.pd-comp-type-public  { background: rgba(34,197,94,.12);  color: var(--green); }

.pd-comp-ticker-btn {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.pd-comp-ticker-btn:hover { background: rgba(59,130,246,.2); }

.pd-competitor-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Differentiator grid */
.pd-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pd-diff-card {
  border-radius: 7px;
  padding: 12px 14px;
  border: 1px solid;
}
.pd-diff-moat {
  background: rgba(34,197,94,.05);
  border-color: rgba(34,197,94,.2);
}
.pd-diff-threat {
  background: rgba(239,68,68,.05);
  border-color: rgba(239,68,68,.2);
}
.pd-diff-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.pd-diff-moat .pd-diff-label   { color: var(--green); }
.pd-diff-threat .pd-diff-label { color: var(--red); }
.pd-diff-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Thesis tab --- */
.pd-thesis-para {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  padding: 12px 14px;
  border-radius: 7px;
  border: 1px solid;
}
.pd-bull-para {
  background: rgba(34,197,94,.05);
  border-color: rgba(34,197,94,.18);
  color: var(--text-secondary);
}
.pd-bear-para {
  background: rgba(239,68,68,.05);
  border-color: rgba(239,68,68,.18);
  color: var(--text-secondary);
}

.pd-catalysts-risks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-list li {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.pd-list li::before {
  position: absolute;
  left: 0;
  font-size: 10px;
}
.pd-list-catalyst li::before { content: '↑'; color: var(--green); }
.pd-list-risk li::before     { content: '⚠'; color: var(--yellow); font-size: 9px; }

/* IPO callout */
.pd-ipo-callout {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(59,130,246,.07);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 7px;
  flex-wrap: wrap;
}
.pd-ipo-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  flex-shrink: 0;
}
.pd-ipo-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Loading / empty states --- */
.pd-loading, .pd-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 32px 0;
  text-align: center;
}

/* --- Mobile --- */
@media (max-width: 680px) {
  .private-detail-modal { max-height: 100vh; border-radius: 0; width: 100vw; }
  .pd-header-stats { flex-wrap: wrap; }
  .pd-stat { min-width: 50%; }
  .pd-diff-grid, .pd-catalysts-risks-grid { grid-template-columns: 1fr; }
  .pd-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-tab { padding: 8px 10px 9px; font-size: 11px; }
}

/* ===== SCREENER ===== */
.screener-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.screener-filter-row:last-child { border-bottom: none; }
.screener-filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 140px;
  flex-shrink: 0;
}
.screener-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.screener-input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  width: 100px;
  outline: none;
}
.screener-input:focus { border-color: var(--accent); }
.screener-range-to { color: var(--text-muted); font-size: 11px; }
.screener-remove-filter {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.screener-remove-filter:hover { color: var(--red); background: var(--red-dim); }
.screener-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-height: 120px;
  overflow-y: auto;
}
.screener-checkbox-label {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.screener-checkbox { accent-color: var(--accent); }
.screener-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(59,130,246,0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.pill-close {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.pill-close:hover { opacity: 1; }

/* ===== ALERTS ===== */
.alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 4px;
}
.alerts-section { padding: 16px; }
.alerts-description {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 16px;
  line-height: 1.5;
}
.alerts-active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.alerts-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 12px;
}
.alert-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
.alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.alert-card-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}
.alert-card-current {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.alert-card-condition {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.alert-card-condition strong { color: var(--text-primary); }
.alert-card-actions { display: flex; justify-content: flex-end; }
.alert-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.alert-delete-btn:hover { color: var(--red); background: var(--red-dim); }

.alert-modal .alert-form { display: flex; flex-direction: column; gap: 12px; }
.alert-modal .alert-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.alert-input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 4px;
  outline: none;
  width: 100%;
}
.alert-input:focus { border-color: var(--accent); }
.alert-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.alert-value-unit {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  width: 16px;
  flex-shrink: 0;
}
.alert-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.alert-submit:hover { background: var(--accent-dim); }

.alerts-history-section { margin-top: 24px; }
.alerts-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.alert-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.alert-unseen { background: rgba(59,130,246,0.05); }
.alert-history-ticker {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  min-width: 50px;
}
.alert-history-msg { color: var(--text-secondary); flex: 1; }
.alert-history-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

.alert-toast {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 260px;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transform: translateX(120%);
  transition: transform 0.3s ease;
}
.alert-toast.show { transform: translateX(0); }
.alert-toast-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 4px;
}
.alert-toast-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ===== EXPORT ===== */
.export-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}
.export-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 200px;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
}
.export-dropdown-item {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.export-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.export-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

/* ===== PERFORMANCE VIZ ===== */
/* 2026-08-20: reined in as a compact card at the BOTTOM of the Coverage
   surface (perf-map.js appends after .coverage-layout, so the watchlist
   table is the primary top element). Capped height + internal scroll keeps a
   large universe from pushing a wall of tiles that swamps the page. */
.perfviz-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin-top: 18px;
}

/* Collapsible header — collapsed by default so the watchlist table stays the
   page focus; preference persists via localStorage (verra:perfmap:collapsed). */
.perfviz-collapse-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}
.perfviz-collapse-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.perfviz-chevron {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.15s ease;
}
.perfviz-section[data-collapsed="true"] .perfviz-chevron { transform: rotate(-90deg); }
.perfviz-section[data-collapsed="true"] .perfviz-container,
.perfviz-section[data-collapsed="true"] .perfviz-controls { display: none; }
/* 2026-08-23: an EXPANDED map owns the layer it is drawn in.
   .coverage-context is position:sticky with no z-index, so it paints in the
   positioned-descendants layer and the map — an ordinary static block after
   .coverage-layout — paints underneath it. Wherever the two boxes met, the
   snapshot rail was drawn over the tiles AND won the hit test, so those tiles
   could not be clicked open. z-index:1 is the smallest escalation that clears
   a z-index:auto sticky; it stays below the sticky table head (12), the
   search dropdown (60), the modal overlays (1000) and the mobile Discover
   drawer (1200), so nothing that should sit above the map loses its place.
   Only when expanded: collapsed, the section is a header strip with nothing
   to defend, and an unpositioned box is one less stacking context.
   Side effect worth keeping: .heatmap-tile:hover's z-index is now scoped to
   this stacking context, so a hovered tile lifts within the map instead of
   punching through the page chrome. */
.perfviz-section[data-collapsed="false"] {
  position: relative;
  z-index: 1;
}
.perfviz-controls {
  display: flex;
  gap: 8px;
}
.perfviz-select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.perfviz-select:focus { border-color: var(--accent); }
/* The axis pickers only mean something in scatter view, so renderViz sets
   [hidden] on them for the heatmap. Stated explicitly because a UA `hidden`
   loses to any later `display` rule, and these live in a flex row. */
.perfviz-select[hidden] { display: none; }
.perfviz-metric-select {
  max-width: 190px;
  text-overflow: ellipsis;
}
.perfviz-container {
  margin-top: 10px;
  min-height: 160px;
  /* 420px canvas + a legend that can wrap to two lines. At 460 the legend's
     growth (from 2 fixed items to as many as 7 disclosure counts) pushed the
     x-axis title under a scrollbar, because the legend is appended above the
     canvas and eats the slack. */
  max-height: 540px;
  overflow-y: auto;
}
.perfviz-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Heatmap */
.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.heatmap-group { }
.heatmap-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  padding-left: 2px;
}
.heatmap-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.heatmap-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 50px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  padding: 2px 6px;
  flex: 0 0 auto;
}
.heatmap-tile:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 2;
}
.heatmap-ticker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.heatmap-perf {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  opacity: 0.9;
}
.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0;
}
.heatmap-legend-label {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.heatmap-legend-bar {
  width: 200px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, rgb(180,40,40), rgb(80,30,30), rgb(30,30,30), rgb(20,80,40), rgb(34,197,94));
}

/* Scatter */
.scatter-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 6px 0;
  /* The legend now also carries the counts the chart chose not to draw
     (off-scale points, suppressed labels, names missing a metric). On a narrow
     card that is more than one line's worth, so it wraps instead of pushing
     the canvas into a horizontal scroll. */
  flex-wrap: wrap;
  row-gap: 2px;
}
.scatter-legend-item {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Cap the scatter canvas to the card width so it never forces horizontal
   scroll on the coverage surface. */
.perfviz-container canvas {
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Ghost button variant */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* Mobile responsive adjustments for new features */
@media (max-width: 768px) {
  .screener-filter-label { min-width: 100px; font-size: 11px; }
  .screener-input { width: 75px; }
  .heatmap-tile { min-width: 50px; height: 42px; }
  .heatmap-ticker { font-size: 9px; }
  .heatmap-perf { font-size: 9px; }
  .alerts-active { grid-template-columns: 1fr; }
  .export-dropdown { right: -8px; }
}

/* ================================================================
   POPUP TABS — Overview · Earnings Intel · Filings & Calls ·
                Research · News
   ================================================================ */
.popup-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  padding-bottom: 0;
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 5;
  /* Five tabs no longer fit a phone. Scroll the strip rather than wrapping it:
     a wrapped second row pushes the panel down and breaks the sticky header. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.popup-tabs::-webkit-scrollbar { display: none; }
.popup-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.popup-tab:hover { color: var(--text-primary); }
.popup-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.popup-tab-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.popup-tab-pill-pre {
  background: rgba(59,130,246,0.18);
  color: var(--accent);
}
.popup-tab-pill-post {
  background: rgba(34,197,94,0.18);
  color: var(--green);
}
/* Research tab: how many notes the tab lists, shown only when more than one. */
.popup-tab-count {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(30,123,255,0.14);
  color: var(--accent);
}
.popup-tab-panel {
  display: none;
  animation: popup-fade-in 0.18s ease-out;
}
.popup-tab-panel.active { display: block; }
@keyframes popup-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* ================================================================
   SOURCE-DOCUMENT TABS (popup-tabs.js)
   Filings & Calls · Research · News. One `pt-` namespace shared by
   all three so the tabs read as one surface.
   ================================================================ */
.pt-root {
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
}
.pt-loading, .pt-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.pt-empty-title {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.pt-empty-body { font-size: 12.5px; line-height: 1.5; max-width: 46ch; margin: 0 auto; }

.pt-section { margin-bottom: 22px; }
.pt-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pt-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pt-section-sub { font-size: 11px; color: var(--text-muted); }

.pt-meta-line { font-size: 13px; margin-bottom: 4px; }
.pt-dim { color: var(--text-muted); }
.pt-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}
.pt-footnote {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* --- Link rows (transcript providers, EDGAR, newsrooms) --- */
.pt-linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
}
.pt-linkrow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.pt-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pt-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}
.pt-link-out { font-size: 10px; opacity: 0.6; margin-left: 4px; }

/* --- Document rows (distilled calls, wire releases) --- */
.pt-doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pt-doc {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--bg-surface-alt);
}
.pt-doc-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.pt-doc-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}
a.pt-doc-title:hover { color: var(--accent); }
.pt-doc-meta { font-size: 11px; color: var(--text-muted); }
.pt-doc-src { font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.pt-doc-src:hover { text-decoration: underline; }
.pt-doc-body {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.pt-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.pt-chip-tone { background: rgba(30,123,255,0.14); color: var(--accent); }
.pt-chip-wire { background: var(--green-dim); color: var(--green); }

/* --- Research tab --- */
.pt-fallback-banner {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-surface-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.pt-note-head { margin-bottom: 12px; }
.pt-note-headline {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.pt-note-takeaway {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.pt-note-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pt-btn:hover { background: var(--accent); color: #fff; }
/* The note is a standalone HTML document in a sandboxed frame. The WRAPPER
   owns the height and the scroll — iOS Safari expands an iframe to its content
   height and ignores the one you set, which would spill a 3,500-word note down
   the popup. Slim scrollbar mirrors .pillar-signals / .hm-scroll-wrap; the same
   rules are injected into the frame document by popup-tabs.js for the browsers
   where the frame scrolls itself, since app CSS cannot reach inside it. */
.pt-note-frame-wrap {
  height: 560px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
}
.pt-note-frame {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* --- Research tab: notes list + split preview (2026-09-23) ---
   Every note for the name -- the current drilldown per part and every version
   it superseded -- as cards on the left, the selected one previewed on the
   right. The list collapses to a 28px rail. List and rail are both in the DOM
   and share column 1; `.is-collapsed` picks which one shows, so the narrow
   layout below can override the choice without the renderer knowing. */
.pt-research {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.pt-research.is-collapsed { grid-template-columns: 28px minmax(0, 1fr); }
.pt-rlist, .pt-rrail { grid-column: 1; grid-row: 1; min-width: 0; }
.pt-rlist { display: flex; flex-direction: column; }
.pt-rrail { display: none; flex-direction: column; align-items: center; gap: 8px; }
.pt-research.is-collapsed .pt-rlist { display: none; }
.pt-research.is-collapsed .pt-rrail { display: flex; }
.pt-rpreview {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pt-rlist-head { align-items: center; }

/* Small square controls: collapse / expand, newer / older. */
.pt-ibtn {
  width: 26px;
  height: 24px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pt-ibtn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-light); }
.pt-ibtn:disabled { opacity: 0.4; cursor: default; }
.pt-rcollapse { margin-left: auto; }
.pt-rexpand { width: 28px; }

.pt-rcards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 2px;
}
.pt-rcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px 13px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg-surface-alt);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pt-rcard:hover { border-color: var(--border-light); }
.pt-rcard.is-active,
.pt-rrail-btn.is-active {
  background: var(--bg-hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(30,123,255,0.35);
}
.pt-rcard-top { display: flex; align-items: center; gap: 8px; }
.pt-rcard-date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.pt-rcard-headline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-primary) 75%, var(--text-secondary));
  text-wrap: pretty;
}
.pt-rcard.is-active .pt-rcard-headline { font-weight: 600; color: var(--text-primary); }
.pt-rcard:focus-visible,
.pt-rrail-btn:focus-visible,
.pt-ibtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Inside the card: .pt-rcards scrolls, so an outline drawn outside the card
   is clipped by it -- entirely, for a one-card list. */
.pt-rcard:focus-visible { outline-offset: -2px; }

/* Note type. Update and any trigger nobody has mapped keep the neutral
   .pt-chip base. The rail's square takes the chip's text colour. */
.pt-rchip { white-space: nowrap; flex-shrink: 0; }
.pt-chip.pt-ntype-deep { background: rgba(30,123,255,0.14); color: var(--accent); }
.pt-chip.pt-ntype-earnings { background: var(--green-dim); color: var(--green); }
.pt-chip.pt-ntype-deal { background: var(--red-dim); color: var(--red); }
.pt-chip.pt-ntype-init { background: var(--yellow-dim); color: var(--yellow); }

.pt-rrail-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bg-surface-alt);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pt-rrail-btn:hover { border-color: var(--border-light); }
.pt-rrail-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--text-secondary); }
.pt-rrail-dot.pt-ntype-deep { background: var(--accent); }
.pt-rrail-dot.pt-ntype-earnings { background: var(--green); }
.pt-rrail-dot.pt-ntype-deal { background: var(--red); }
.pt-rrail-dot.pt-ntype-init { background: var(--yellow); }

.pt-rpreview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pt-rpreview-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.pt-rnav { margin-left: auto; display: flex; gap: 2px; flex-shrink: 0; }
.pt-rpreview .pt-note-head { margin-bottom: 0; }
.pt-rpreview .pt-note-headline,
.pt-rpreview .pt-note-takeaway { text-wrap: pretty; }
.pt-rframe { margin-top: 12px; }
.pt-research .pt-note-frame-wrap { height: 300px; }
.pt-note-frame-pending { display: flex; align-items: center; justify-content: center; }
/* The global touch-target rule makes every button at least 44x44 up to 900px.
   Between 769 and 900px the split layout still applies, so widen the rail
   to hold its buttons instead of letting them hang over the track. */
@media (max-width: 900px) {
  .pt-research.is-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
}

/* --- News tab --- */
.pt-news-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.pt-news-list { display: flex; flex-direction: column; gap: 8px; }
.pt-news-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--bg-surface-alt);
}
.pt-news-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}
.pt-news-source {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pt-news-time { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.pt-news-title {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.45;
  color: var(--text-primary);
  text-decoration: none;
}
a.pt-news-title:hover { color: var(--accent); }
.pt-news-body {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .pt-linkrow-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pt-note-frame-wrap { height: 420px; }
  .popup-tab { padding: 10px 12px; font-size: 12.5px; }
  /* Research: the list stacks above the preview as one swipeable row of
     cards. There is no width to give a rail here, so the collapse control
     goes and the collapsed preference waits for a wider screen. */
  .pt-research,
  .pt-research.is-collapsed { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pt-rpreview { grid-column: 1; grid-row: 2; }
  .pt-research.is-collapsed .pt-rlist { display: flex; }
  .pt-research.is-collapsed .pt-rrail { display: none; }
  .pt-rcollapse { display: none; }
  .pt-rcards {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .pt-rcard { flex: 0 0 min(240px, 78%); scroll-snap-align: start; }
  .pt-rcard:only-child { flex-basis: 100%; }
  .pt-research .pt-note-frame-wrap { height: 420px; }
}

/* ================================================================
   EARNINGS INTEL MODULE
   ================================================================ */
.ei-root {
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
}
.ei-loading, .ei-error, .ei-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-muted);
}
.ei-empty-icon {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--text-muted);
}
.ei-empty-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}
.ei-empty-body {
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Markdown-note fallback (when structured earnings_intel.json has no entry
   but a generated note exists on disk). The fallback hydrates async after
   the placeholder renders. */
.ei-empty-loading {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.ei-note-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 0 16px 0;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-radius: 8px;
  font-size: 12px;
}
.ei-note-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ei-note-banner-meta {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}
.ei-note-body {
  padding: 0 4px;
  line-height: 1.6;
  color: var(--text-primary);
}
.ei-note-body h2 { font-size: 18px; margin: 22px 0 8px; }
.ei-note-body h3 { font-size: 15px; margin: 18px 0 6px; color: var(--text-primary); }
.ei-note-body h4 { font-size: 13px; margin: 14px 0 4px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.ei-note-body ul { margin: 6px 0 12px; padding-left: 22px; }
.ei-note-body li { margin: 4px 0; font-size: 13px; }
.ei-note-body p { font-size: 13px; margin: 6px 0; }
.ei-note-body strong { color: var(--text-primary); }
.ei-note-body hr { border: 0; border-top: 1px solid var(--border-light, rgba(255,255,255,0.08)); margin: 16px 0; }

/* Header strip */
.ei-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
}
.ei-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.ei-header-meta { min-width: 0; }
.ei-company-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin-bottom: 4px;
}
.ei-company-line strong { color: var(--text-primary); font-weight: 600; }
.ei-state-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-header);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.ei-state-pre_earnings { color: var(--accent); border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.08); }
.ei-state-post_earnings { color: var(--green); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); }
.ei-header-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ei-header-sub strong { color: var(--text-primary); font-weight: 600; }
.ei-header-right {
  text-align: right;
  flex-shrink: 0;
}
.ei-updated-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ei-updated-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2px 0;
}
.ei-refresh-reason {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: capitalize;
  font-family: var(--font-mono);
}

/* Inflection badge */
.ei-inflection {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 5px;
  min-width: 48px;
  text-align: center;
  border: 1px solid transparent;
}
.inflection-pre { background: rgba(59,130,246,0.18); color: var(--accent); border-color: rgba(59,130,246,0.4); }
.inflection-mid { background: rgba(234,179,8,0.18); color: var(--yellow); border-color: rgba(234,179,8,0.4); }
.inflection-post { background: rgba(34,197,94,0.18); color: var(--green); border-color: rgba(34,197,94,0.4); }
.inflection-none { background: var(--bg-header); color: var(--text-muted); border-color: var(--border); }

/* Post-earnings review module */
.ei-review {
  background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.02) 100%);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.ei-review-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(34,197,94,0.15);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
}
.ei-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 720px) {
  .ei-review-grid { grid-template-columns: 1fr; gap: 18px; }
  .ei-header { flex-direction: column; align-items: flex-start; }
  .ei-header-right { text-align: left; }
}
.ei-review-col .ei-subhead,
.ei-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ei-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}
.ei-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ei-bullets li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ei-bullets li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.ei-stock-reaction {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}
.ei-prev-bl {
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--bg-header);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.ei-prev-bl summary {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.ei-prev-bl-body {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ei-signal-changes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.ei-changes {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.ei-changes li { margin: 4px 0; }
.ei-change-signal {
  color: var(--text-primary);
  font-weight: 600;
  text-transform: capitalize;
}
.ei-arrow { color: var(--text-muted); margin: 0 4px; }

/* Sections */
.ei-section {
  padding: 16px 18px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 18px;
}
.ei-bottom-line .ei-bl-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* Bull / Base / Bear cases */
.ei-cases {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .ei-cases { grid-template-columns: 1fr; }
}
.ei-case {
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface-alt);
  border-top-width: 3px;
}
.ei-case-bull { border-top-color: var(--green); }
.ei-case-base { border-top-color: var(--accent); }
.ei-case-bear { border-top-color: var(--red); }
.ei-case-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ei-case-bull .ei-case-title { color: var(--green); }
.ei-case-base .ei-case-title { color: var(--accent); }
.ei-case-bear .ei-case-title { color: var(--red); }
.ei-case-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}
.ei-case-pattern {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ei-push-block {
  margin-top: 10px;
}
.ei-push-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ei-push-higher { color: var(--green); }
.ei-push-lower { color: var(--red); }
.ei-push-block .ei-bullets li { font-size: 12px; }

/* Signal Scorecard */
.ei-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.ei-signal {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-left-width: 3px;
}
.ei-signal-watching { border-left-color: var(--accent); }
.ei-signal-confirmed { border-left-color: var(--green); }
.ei-signal-failed { border-left-color: var(--red); }
.ei-signal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ei-signal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}
.ei-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
.ei-status-watching { background: rgba(59,130,246,0.18); color: var(--accent); }
.ei-status-confirmed { background: rgba(34,197,94,0.18); color: var(--green); }
.ei-status-failed { background: rgba(239,68,68,0.18); color: var(--red); }
.ei-signal-note {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.ei-signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.ei-signal-meta strong { color: var(--text-secondary); }
.ei-threshold { font-size: 11px; }

/* Split: Guidance + Tone */
.ei-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .ei-split { grid-template-columns: 1fr; }
}
.ei-split-col {
  padding: 16px 18px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ei-guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 12px;
}
.ei-guide-grid > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.ei-guide-grid > div:last-child { border-bottom: none; }
.ei-guide-k { color: var(--text-secondary); }
.ei-guide-v { color: var(--text-primary); font-weight: 600; font-family: var(--font-mono); font-size: 11px; }
.ei-tone-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ei-tone-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  border: 1px solid var(--border);
}
.ei-tone-prior { background: var(--bg-header); color: var(--text-muted); }
.ei-tone-current { background: rgba(59,130,246,0.12); color: var(--accent); border-color: rgba(59,130,246,0.35); }
.ei-tone-arrow { color: var(--text-muted); font-size: 14px; }
.ei-tone-notes {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Tone drift direction. The tone axis is directional -- an improving read is
   good news and a deteriorating one is a warning -- so the arrow and the
   current chip carry the same semantic colors the rest of the app uses for
   positive/negative, rather than a single accent blue for every outcome. */
.ei-tone-arrow.ei-tone-up   { color: var(--pos, #22c55e); }
.ei-tone-arrow.ei-tone-down { color: var(--neg, #ef4444); }
.ei-tone-arrow.ei-tone-flat { color: var(--text-muted); }
.ei-tone-chip.ei-tone-up {
  background: rgba(34,197,94,0.12);
  color: var(--pos, #22c55e);
  border-color: rgba(34,197,94,0.35);
}
.ei-tone-chip.ei-tone-down {
  background: rgba(239,68,68,0.12);
  color: var(--neg, #ef4444);
  border-color: rgba(239,68,68,0.35);
}
.ei-tone-magnitude {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
/* One call on file is a LEVEL, not a drift. Rendered muted and explicitly
   labelled so it never reads as a measured change -- the previous markup
   showed "— → bullish" for exactly this state. */
.ei-tone-unmeasured {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.ei-tone-asof {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}

/* Theme lifecycle */
.ei-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ei-theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.ei-theme-name { color: var(--text-primary); font-weight: 500; }
.ei-theme-stage {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-header);
  color: var(--text-muted);
}
.ei-theme-emerging .ei-theme-stage { color: var(--accent); background: rgba(59,130,246,0.15); }
.ei-theme-active .ei-theme-stage { color: var(--yellow); background: rgba(234,179,8,0.15); }
.ei-theme-chronic .ei-theme-stage { color: var(--red); background: rgba(239,68,68,0.12); }
.ei-theme-fading .ei-theme-stage { color: var(--text-muted); }
.ei-theme-since { font-size: 11px; color: var(--text-muted); }

/* Inflection library */
.ei-inflections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ei-inflection-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ei-inflection-date {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.ei-inflection-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.ei-inflection-headline {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}
.ei-inflection-react {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Sources */
.ei-sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ei-sources-list li {
  padding: 4px 0;
  font-size: 12px;
}
.ei-sources-list a {
  color: var(--accent);
  text-decoration: none;
}
.ei-sources-list a:hover { text-decoration: underline; }
.ei-legacy-link { color: var(--text-muted); font-style: italic; font-size: 11px; }

/* Earnings card upgrades (inflection badges in card footer) */
.earnings-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.earnings-card-inflection-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.earnings-card-signals {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.earnings-card-updated {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: rgba(34,197,94,0.1);
  color: var(--green);
  border-radius: 3px;
}
.earnings-intel-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.earnings-intel-btn:hover { background: var(--accent-dim); }


/* ===== April 22 UX batch additions ===== */

/* ─── Briefing header: skeleton pill, date picker ─── */
.wb-header-left { display: flex; align-items: center; gap: 8px; }
.wb-date-row { display: flex; align-items: center; gap: 6px; }
.wb-date-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border, #1e2433);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.wb-date-prefix {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wb-week-input {
  background: transparent;
  color: #e5e7eb;
  border: none;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  color-scheme: dark;
}
.wb-week-prev, .wb-week-next {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #1e2433);
  color: #9ca3af;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.wb-week-prev:hover, .wb-week-next:hover { background: rgba(255,255,255,0.07); color: #e5e7eb; }
.wb-week-prev:disabled, .wb-week-next:disabled { opacity: 0.35; cursor: not-allowed; }

.wb-index-label { color: #9ca3af; margin-right: 4px; }
.wb-skeleton-pill {
  display: inline-block;
  width: 64px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  animation: wb-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}
.wb-index-skeleton { display: inline-flex; align-items: center; gap: 4px; }
/* Terminal "no print this week" state for an index badge. Distinct from
   .wb-index-skeleton: that one pulses to say "still fetching", this one is
   static to say "there is nothing to fetch". See indexBadge() in
   weekly-briefing.js. */
.wb-index-unavailable { display: inline-flex; align-items: center; gap: 4px; color: #6b7280; }
@keyframes wb-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.9; } }
.wb-loading { opacity: 0.6; transition: opacity 0.2s; }

/* ─── Briefing TL;DR block ─── */
.wb-tldr {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: rgba(59, 130, 246, 0.05);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 4px;
}
.wb-tldr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.wb-tldr-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent, #3b82f6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wb-tldr-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wb-tldr-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent, #3b82f6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wb-tldr-headline {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent, #3b82f6);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}
.wb-tldr-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  color: #d1d5db;
  font-size: 0.85rem;
  line-height: 1.55;
}
.wb-tldr-list li { margin: 4px 0; }
@media (max-width: 640px) {
  .wb-header { flex-direction: column; align-items: flex-start; }
  .wb-indices { width: 100%; flex-wrap: wrap; gap: 8px; }
}

/* ─── Watchlist scroll-shadow on sticky ticker column ─── */
.table-wrapper, #table-wrapper { position: relative; }
#table-wrapper.has-scroll-shadow .watchlist-table:not(.private-table) thead th.col-ticker,
#table-wrapper.has-scroll-shadow .watchlist-table:not(.private-table) tbody td.cell-ticker {
  box-shadow: inset -8px 0 8px -8px rgba(0,0,0,0.55);
}

/* ─── Macro Stock Ideas — rationale info button + popover ─── */
.idea-reason { position: relative; padding-right: 20px; }
.idea-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background: transparent;
  border: none;
  color: var(--accent, #3b82f6);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  opacity: 0.7;
  vertical-align: middle;
}
.idea-info-btn:hover { opacity: 1; }
.idea-pop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 240px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--bg-surface, #1a1f2e);
  border: 1px solid var(--border, #1e2433);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  color: #d1d5db;
  font-size: 0.78rem;
  line-height: 1.4;
  font-family: var(--font-sans);
}
.idea-pop.open { display: block; }
.idea-pop-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 8px;
}
.idea-pop-note {
  font-size: 0.66rem;
  color: #6b7280;
  margin-top: 8px;
  font-style: italic;
}
.idea-pop-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.idea-pop-k { color: #9ca3af; }
.idea-pop-bar {
  display: inline-block;
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.idea-pop-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
}
.idea-pop-fill.val-pos { background: var(--green, #22c55e); }
.idea-pop-fill.val-neg { background: var(--red, #ef4444); }
.idea-pop-fill.val-neutral { background: var(--yellow, #eab308); }
.idea-pop-v { text-align: right; color: #d1d5db; }

/* ─── Earnings Intel: skeleton body ─── */
.ei-skeleton-block { opacity: 0.85; }
.ei-skeleton-lines { display: flex; flex-direction: column; gap: 6px; }
.ei-skeleton-line {
  height: 12px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: ei-shimmer 1.4s ease-in-out infinite;
}
.ei-skeleton-line-short { width: 60%; }
@keyframes ei-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ei-section-error {
  padding: 16px;
  text-align: center;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  margin: 12px 0;
}
.ei-section-error .btn-sm { margin-top: 8px; }

/* ─── Alerts tab ─── */
.alerts-section { padding: 8px 0; }
.alerts-empty {
  padding: 48px 24px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.alerts-empty-head {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 8px;
}
.alerts-empty-sub {
  color: #9ca3af;
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.alerts-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.alerts-template-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, #1e2433);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font-sans);
}
.alerts-template-btn:hover {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}
.alerts-template-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e5e7eb;
}
.alerts-template-sub {
  font-size: 0.75rem;
  color: #6b7280;
}
.alerts-footer {
  color: #6b7280;
  font-size: 0.78rem;
  text-align: center;
  margin-top: 16px;
}
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
  margin: 16px auto 0;
}
.alert-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border, #1e2433);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.alert-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
}
.alert-remove:hover { color: var(--red); }

/* ─── Alerts page redesign (Subscriptions + Triggered + Activity) ───
 * Built on the shared R2 theme tokens so the panel renders in both the dark
 * and parchment (light) themes. Accent-blue elements keep their dark-surface
 * values here; the :root[data-theme="light"] overrides at the end of this
 * section swap them for parchment-readable equivalents. */
.alerts-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  padding: 4px 0 32px;
}
.alerts-section-block {
  background: var(--bg-surface);
  border: 1px solid var(--border, #1e2433);
  border-radius: 8px;
  padding: 18px 20px 16px;
}
.alerts-block-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #1e2433);
  flex-wrap: wrap;
}
.alerts-block-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.alerts-block-sub {
  color: var(--text-muted);
  font-size: 0.78rem;
  flex: 1;
}
.alerts-empty-inline {
  padding: 18px 4px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Feed Subscriptions */
.alerts-sub-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border, #1e2433);
  border-radius: 6px;
}
.alerts-sub-account-label {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.alerts-sub-account-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  outline: none;
  padding: 2px 4px;
}
.alerts-sub-account-input:focus {
  background: rgba(30, 123, 255, 0.08);
  border-radius: 3px;
}
.alerts-sub-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.alerts-sub-reset-btn {
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #93c5fd;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.alerts-sub-reset-btn:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
}
.alerts-sub-reset-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}
.alerts-sub-group {
  margin-bottom: 14px;
}
.alerts-sub-group:last-child { margin-bottom: 0; }
.alerts-sub-group-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 2px;
}
.alerts-sub-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.alerts-sub-row:hover { background: var(--bg-hover); }
.alerts-sub-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.alerts-sub-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.alerts-sub-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 0.15s;
}
.alerts-sub-toggle-track::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.alerts-sub-toggle input:checked + .alerts-sub-toggle-track {
  background: rgba(59, 130, 246, 0.5);
}
.alerts-sub-toggle input:checked + .alerts-sub-toggle-track::after {
  transform: translateX(16px);
  background: #60a5fa;
}
.alerts-sub-body {
  min-width: 0;
}
.alerts-sub-title {
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
}
.alerts-sub-detail {
  color: var(--text-muted);
  font-size: 0.76rem;
  margin-top: 2px;
  line-height: 1.4;
}
.alerts-sub-channels {
  display: flex;
  gap: 4px;
}
.alerts-channel-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border, #1e2433);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.alerts-channel-chip:hover:not(:disabled) {
  color: var(--text-secondary);
  border-color: rgba(59, 130, 246, 0.3);
}
.alerts-channel-chip.on {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}
.alerts-channel-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Activity feed */
.alerts-activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alerts-activity-clear {
  margin-left: auto;
}
.alerts-activity-row {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border, #1e2433);
  border-left-width: 3px;
}
.alerts-activity-row.sev-warn   { border-left-color: var(--yellow); }
.alerts-activity-row.sev-alert  { border-left-color: var(--red); }
.alerts-activity-row.sev-info   { border-left-color: var(--accent); }
.alerts-activity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.alerts-activity-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 3px;
}
.alerts-activity-ticker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.alerts-activity-when {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-left: auto;
}
.alerts-activity-summary {
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.45;
}
.alerts-activity-link {
  color: #60a5fa;
  font-size: 0.78rem;
  margin-left: 6px;
}
.alerts-activity-link:hover { text-decoration: underline; }

/* New Alert modal */
.alert-modal { max-width: 440px; }
.alert-form { display: flex; flex-direction: column; gap: 12px; }
.alert-form label { display: flex; flex-direction: column; gap: 4px; }
.alert-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.alert-form input, .alert-form select {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border, #1e2433);
  color: var(--text-primary);
  padding: 7px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  outline: none;
}
.alert-form input:focus, .alert-form select:focus {
  border-color: var(--accent, #3b82f6);
}
.alert-thresh-row, .alert-days-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.alert-modal-footer {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Light (parchment) theme overrides for the alerts panel's accent-blue
 * elements. The base rules above keep the pale blues tuned for dark
 * surfaces (#93c5fd text, blue-400 knobs/links); on cream those wash out
 * to near-invisible, so swap them for the darker brand accent (--accent-dim
 * #0E5BD0 is 5.7:1 on the parchment body — WCAG AA). Neutral text, borders,
 * and surfaces need no overrides: they follow the shared tokens. */
:root[data-theme="light"] .alerts-sub-reset-btn {
  background: rgba(30, 123, 255, 0.08);
  border-color: rgba(30, 123, 255, 0.45);
  color: var(--accent-dim);
}
:root[data-theme="light"] .alerts-sub-reset-btn:hover:not(:disabled) {
  background: rgba(30, 123, 255, 0.14);
  border-color: rgba(30, 123, 255, 0.65);
  color: var(--accent-dim);
}
:root[data-theme="light"] .alerts-channel-chip.on {
  background: rgba(30, 123, 255, 0.10);
  border-color: rgba(30, 123, 255, 0.45);
  color: var(--accent-dim);
}
:root[data-theme="light"] .alerts-sub-toggle input:checked + .alerts-sub-toggle-track {
  background: rgba(30, 123, 255, 0.55);
  border-color: rgba(30, 123, 255, 0.35);
}
:root[data-theme="light"] .alerts-sub-toggle input:checked + .alerts-sub-toggle-track::after {
  background: var(--bg-surface);
}
:root[data-theme="light"] .alerts-activity-link {
  color: var(--accent-dim);
}

/* ===== Weekly Briefing - Export PDF controls & toast (April 22, 2026) ===== */
.wb-header-controls { display:flex; align-items:center; gap:12px; }
.wb-export-pdf { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(34,197,94,0.1); border:1px solid var(--green,#22c55e); color:var(--green,#22c55e); border-radius:4px; font-size:0.8rem; cursor:pointer; font-family:var(--font-sans); transition:background 0.15s; }
.wb-export-pdf:hover { background:rgba(34,197,94,0.18); }
.wb-export-pdf:disabled { opacity:0.6; cursor:wait; }
.wb-export-pdf svg { width:14px; height:14px; }
.wb-toast { position:fixed; bottom:24px; right:24px; padding:10px 18px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary); font-size:0.85rem; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.4); z-index:10000; opacity:0; transform:translateY(10px); transition:opacity 0.25s, transform 0.25s; pointer-events:none; }
.wb-toast.visible { opacity:1; transform:translateY(0); }
.wb-toast-success { border-color:var(--green,#22c55e); }
.wb-toast-error { border-color:var(--red,#ef4444); }

/* ===== One-click Daily Briefing subscribe strip (briefing-subscribe.js) ===== */
.wb-daily-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 16px 10px; padding:10px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; font-family:var(--font-sans); font-size:0.8rem; color:var(--text-secondary); }
.wb-daily-cta[hidden] { display:none; }
.wb-daily-cta-text { flex:1 1 320px; line-height:1.45; }
.wb-daily-cta-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--accent); border:1px solid var(--accent); color:#fff; border-radius:4px; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:var(--font-sans); transition:background 0.15s; white-space:nowrap; }
.wb-daily-cta-btn:hover { background:var(--accent-dim); }
.wb-daily-cta-btn:disabled { opacity:0.6; cursor:wait; }
.wb-daily-cta-on { border-color:var(--green,#22c55e); color:var(--text-primary); }
.wb-daily-cta-manage { color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; }
.wb-daily-cta-manage:hover { text-decoration:underline; }
.wb-daily-cta-error { border-color:var(--red,#ef4444); }
@media (max-width: 640px) {
  .wb-daily-cta { margin:0 0 10px; }
  .wb-daily-cta-text { flex-basis:100%; }
}

/* ========================================================================= */
/* =====  SignalStack AI — Major Upgrade CSS (April 22, 2026)           ===== */
/* =====  Snapshot banner · Pin-cols · Heat cells · Compare ·           ===== */
/* =====  Private trajectory · Earnings urgency                         ===== */
/* ========================================================================= */

/* ===== Snapshot source banner (shown when R2/local fetch degraded) ===== */
.snapshot-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06));
  border-bottom: 1px solid rgba(239,68,68,0.35);
  color: #fecaca;
  font-size: 12px;
  font-family: var(--font-sans);
  position: sticky;
  top: 0;
  z-index: 500;
}
.snapshot-banner[hidden] { display: none !important; }
.snapshot-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: snapshot-banner-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
@keyframes snapshot-banner-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
#snapshot-banner-text { flex: 1 1 auto; }
.snapshot-banner-retry,
.snapshot-banner-dismiss {
  background: transparent;
  border: 1px solid rgba(252,165,165,0.4);
  color: #fecaca;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s;
}
.snapshot-banner-retry:hover { background: rgba(239,68,68,0.2); color: #fff; }
.snapshot-banner-dismiss {
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
}
.snapshot-banner-dismiss:hover { color: #fff; }

/* ===== Pin-col system for public watchlist rows =====
   .pin-col-1 (ticker), .pin-col-2 (company), .pin-col-3 (price)
   Mounted via JS in app.js row render. Sticky left; backgrounds preserve
   striped+hover states. z-index < subsector-header (which is 6). */
.watchlist-table:not(.private-table) tbody td.pin-col {
  position: sticky;
  z-index: 3;
  background: var(--bg-primary);
}
.watchlist-table:not(.private-table) tbody tr:nth-child(even) td.pin-col {
  background: var(--bg-surface-alt);
}
.watchlist-table:not(.private-table) tbody tr:hover td.pin-col {
  background: var(--bg-hover);
}
.watchlist-table:not(.private-table) tbody td.pin-col-1 { left: 0; }
.watchlist-table:not(.private-table) tbody td.pin-col-2 { left: 72px; }
.watchlist-table:not(.private-table) tbody td.pin-col-3 {
  left: 222px;
  border-right: 1px solid var(--border);
}
/* Subsector header must sit above pin-col rows */
.watchlist-table:not(.private-table) .subsector-header td {
  z-index: 4;
}
.watchlist-table:not(.private-table) .subsector-header .subsector-label-cell {
  z-index: 7;
}

/* ===== Heat cells — magnitude encoding on return columns =====
   Background gradient driven by inline style; foreground must stay legible. */
.heat-cell {
  position: relative;
}
.heat-cell.val-pos,
.heat-cell.val-neg {
  /* slight text shadow helps legibility over saturated backgrounds */
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

/* ===== Compare module ===== */

/* Toolbar button state */
#compare-toggle-btn { white-space: nowrap; }
#compare-toggle-btn.active {
  background: rgba(59,130,246,0.18);
  border-color: var(--accent);
  color: var(--accent);
}

/* Compare checkbox column (toggled on/off dynamically) */
.col-compare { width: 32px; min-width: 32px; }
.watchlist-table thead th.col-compare,
.watchlist-table tbody td.col-compare {
  padding: 4px 6px;
  text-align: center;
  vertical-align: middle;
}
.compare-th-label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.compare-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

/* Compare tray — floating bottom bar */
.compare-tray {
  position: fixed;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  min-width: 540px;
  max-width: calc(100vw - 32px);
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.15);
  padding: 10px 14px;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: bottom 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
  font-family: var(--font-sans);
}
.compare-tray.visible {
  bottom: 20px;
  opacity: 1;
  pointer-events: auto;
}
.compare-tray-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.compare-tray-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.compare-tray-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.compare-tray-label {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.compare-tray-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.compare-tray-hint {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.35);
  border-radius: 4px;
  color: var(--accent);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
}
.compare-chip-x {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1;
}
.compare-chip-x:hover { color: var(--red); }

/* Shake animation when user tries to pick a 5th (max 4) */
@keyframes compare-shake {
  0%,100% { transform: translateX(-50%) translateY(0); }
  15%,45%,75% { transform: translateX(calc(-50% - 6px)) translateY(0); }
  30%,60%,90% { transform: translateX(calc(-50% + 6px)) translateY(0); }
}
.compare-tray.shake { animation: compare-shake 0.4s ease; }

/* Compare popup overlay (uses .popup-overlay base, wider modal) */
.compare-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 1050;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.compare-popup-overlay.active { display: flex; }
.compare-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 1300px;
  width: 100%;
  position: relative;
  padding: 22px 28px 28px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.compare-header { margin-bottom: 14px; }
.compare-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.compare-subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
  font-family: var(--font-mono);
}
.compare-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.compare-tab {
  background: transparent;
  border: none;
  padding: 9px 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  transition: color 0.15s, border-color 0.15s;
}
.compare-tab:hover { color: var(--text-primary); }
.compare-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.compare-body { min-height: 360px; }

/* Compare sections */
.cmp-section { margin-bottom: 26px; }
.cmp-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 10px;
  font-family: var(--font-sans);
}
.cmp-subtle { color: var(--text-muted); font-size: 11px; }

/* Overview chart + range/benchmark controls */
.cmp-chart-wrap {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  height: 340px;
}
.cmp-chart-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmp-range-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.cmp-range-btn {
  background: var(--bg-primary);
  border: none;
  color: var(--text-secondary);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-mono);
  border-right: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.cmp-range-btn:last-child { border-right: none; }
.cmp-range-btn:hover { color: var(--text-primary); }
.cmp-range-btn.active {
  background: rgba(59,130,246,0.2);
  color: var(--accent);
}
.cmp-benchmark-select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  font-family: var(--font-sans);
}
.cmp-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  background: rgba(10,14,23,0.7);
}

/* Overview fundamentals table */
.cmp-fund-wrap { overflow-x: auto; }
.cmp-fund-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-family: var(--font-mono);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.cmp-fund-table th,
.cmp-fund-table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cmp-fund-table th:first-child,
.cmp-fund-table td:first-child {
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.cmp-fund-table thead th {
  background: var(--bg-header);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.cmp-fund-table tbody tr:last-child td { border-bottom: none; }
.cmp-fund-table tbody tr:hover { background: var(--bg-hover); }
.cmp-fund-metric { color: var(--text-secondary); }
.cmp-winner {
  color: var(--green) !important;
  font-weight: 600;
  background: rgba(34,197,94,0.08);
}
/* North-star metric chip in the Forward-estimates rows. Reuses the dark
   terminal tokens — no new color invention. */
.cmp-metric-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 5px;
  vertical-align: middle;
}
.cmp-ns-val {
  font-family: var(--font-mono);
  vertical-align: middle;
}
.cmp-winner .cmp-metric-chip {
  color: var(--green);
  border-color: rgba(34,197,94,0.4);
}
.cmp-pct-flagged {
  color: var(--amber, #f59e0b);
  cursor: help;
  border-bottom: 1px dotted rgba(245, 158, 11, 0.6);
}
.cmp-pct-flagged sup {
  font-size: 9px;
  margin-left: 2px;
  color: var(--amber, #f59e0b);
}

/* AI Diff */
.cmp-aidiff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.cmp-aidiff-block {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.cmp-aidiff-block h4 {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.cmp-aidiff-prose {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 8px;
}
.cmp-aidiff-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.cmp-aidiff-list li { margin-bottom: 4px; }
.cmp-aidiff-risks li { color: #fca5a5; }
.cmp-aidiff-footer {
  color: var(--text-muted);
  font-size: 10.5px;
  font-style: italic;
  margin-top: 14px;
  grid-column: 1 / -1;
}
.cmp-winner-tag {
  display: inline-block;
  background: rgba(34,197,94,0.15);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Scorecard */
.cmp-scorecard { width: 100%; }
.cmp-scorecard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cmp-scorecard-table th,
.cmp-scorecard-table td {
  padding: 9px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.cmp-scorecard-table thead th {
  background: var(--bg-header);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.cmp-scorecard-table th:first-child,
.cmp-scorecard-table td:first-child { text-align: left; }
.cmp-pillar-name { color: var(--text-primary); font-weight: 500; }
.cmp-pillar-weight,
.cmp-weight {
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--font-mono);
}
.cmp-weight-note {
  color: var(--text-muted);
  font-size: 10.5px;
  font-style: italic;
  margin-bottom: 8px;
}
.cmp-score-cell {
  min-width: 120px;
  padding: 6px 10px !important;
}
.cmp-score-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12px;
  display: block;
  margin-bottom: 3px;
}
.cmp-score-reason {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
  margin-top: 2px;
}
.cmp-score-bar {
  display: block;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}
.cmp-score-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.35s ease;
}
.cmp-score-1 { width: 20%; background: #ef4444; }
.cmp-score-2 { width: 40%; background: #f59e0b; }
.cmp-score-3 { width: 60%; background: #eab308; }
.cmp-score-4 { width: 80%; background: #84cc16; }
.cmp-score-5 { width: 100%; background: var(--green); }
.cmp-score-total-row {
  background: rgba(59,130,246,0.06);
  font-weight: 600;
}
.cmp-score-total-row td { border-top: 2px solid var(--border); }
.cmp-score-total {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.cmp-scorecard-legend {
  color: var(--text-muted);
  font-size: 10.5px;
  margin-top: 8px;
  font-style: italic;
}

/* Radar */
.cmp-radar-wrap {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  height: 480px;
}
.cmp-radar-note {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}

/* ===== Private trajectory cell in main private table ===== */
.pd-trajectory-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}
.pd-tone-up { color: var(--green); }
.pd-tone-down { color: var(--red); }
.pd-tone-flat { color: var(--text-muted); }

/* ===== Private popup: new tabs (Funding History / Peer Trajectory / Returns) ===== */
.pd-funding-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.pd-funding-table th,
.pd-funding-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.pd-funding-table th:first-child,
.pd-funding-table td:first-child {
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.pd-funding-table thead th {
  background: var(--bg-header);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.pd-funding-table tbody tr:last-child td { border-bottom: none; }
.pd-funding-table tbody tr:hover { background: var(--bg-hover); }

.pd-peer-chart-wrap {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  height: 360px;
}
.pd-peer-chart-wrap-large { height: 460px; }
.pd-peer-mode-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pd-peer-summary {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  margin: 10px 0 0;
}
.pd-peer-hint {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  margin-top: 6px;
}

.pd-return-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pd-return-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
}
.pd-return-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.pd-return-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.pd-return-value.val-pos { color: var(--green); }
.pd-return-value.val-neg { color: var(--red); }
.pd-return-value.val-neutral { color: var(--text-secondary); }
.pd-return-note {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.4;
}
.pd-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
  padding: 24px;
  text-align: center;
  background: var(--bg-primary);
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* ===== Earnings: watchlist star + implied/historical urgency badge ===== */
.earnings-card.is-watchlist {
  border-left: 2px solid var(--accent);
}
.earnings-watch-star {
  color: #fbbf24;
  font-size: 13px;
  margin-right: 4px;
  text-shadow: 0 0 6px rgba(251,191,36,0.4);
}
.earnings-urgency-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.3px;
  font-family: var(--font-mono);
  vertical-align: middle;
}
.earnings-urgency-badge.urg-hot {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.35);
}
.earnings-urgency-badge.urg-cold {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.3);
}
.earnings-urgency-badge.urg-flat {
  background: rgba(107,114,128,0.12);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

/* ===== Screener regime preset packs ===== */
.screener-regime-packs {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.regime-packs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.regime-packs-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.regime-packs-current {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.regime-packs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.regime-pack-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 6px 10px;
  min-width: 160px;
  max-width: 220px;
  text-align: left;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  font-family: var(--font-sans);
}
.regime-pack-blurb {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  white-space: normal;
  line-height: 1.3;
}
.regime-pack-btn:hover {
  background: var(--bg-surface);
  border-color: var(--text-muted);
  transform: translateY(-1px);
}
.regime-pack-btn.suggested {
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.25) inset;
}
.regime-pack-btn.suggested:hover {
  background: rgba(34,197,94,0.08);
}
.regime-pack-badge {
  display: inline-block;
  padding: 1px 5px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(34,197,94,0.18);
  color: var(--green);
  border-radius: 3px;
}
.regime-pack-name {
  white-space: nowrap;
  font-weight: 600;
}

/* ===== Screener macro-signal cells / earnings-momentum pills ===== */
.screener-mvp-table .screener-sig-cell {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
/* VG% ranked against the sector because the subsector was too thin to field
   3 comparable peers. Same number, weaker claim — marked, not hidden. */
.screener-mvp-table .screener-vg-sector {
  opacity: 0.78;
}
.screener-vg-mark {
  margin-left: 1px;
  font-size: 9px;
  vertical-align: super;
  color: var(--text-tertiary, var(--text-secondary));
}
.earn-mom-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.earn-mom-tailwind   { background: rgba(34,197,94,0.16);  color: var(--green); }
.earn-mom-inflecting { background: rgba(59,130,246,0.16); color: #3b82f6; }
.earn-mom-watching   { background: rgba(234,179,8,0.16);  color: #ca8a04; }
.earn-mom-neutral    { background: rgba(107,114,128,0.16); color: var(--text-muted); }
.earn-mom-headwind   { background: rgba(249,115,22,0.16); color: #ea580c; }
.earn-mom-breaking   { background: rgba(239,68,68,0.16);  color: var(--red); }


/* ===== Minor utility: btn-ghost (used by Compare toggle & tray) ===== */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  background: var(--bg-hover);
}
.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background 0.15s;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-dim); }
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== PRIVATE COMPANY — FUNDING ROUNDS FORM (modal) ===== */
.private-modal { max-width: 720px; }
.private-rounds-fieldset {
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0 10px;
  background: var(--bg-surface-alt, rgba(15, 23, 42, 0.4));
}
.private-rounds-fieldset legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0 6px;
}
.private-rounds-hint {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 12px;
  line-height: 1.5;
}
.private-rounds-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.private-round-row {
  position: relative;
  background: var(--bg-surface, rgba(30, 41, 59, 0.5));
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  padding: 12px 38px 12px 12px;
}
.private-round-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}
.private-round-grid .pr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.private-round-grid .pr-field input {
  background: var(--bg-page, #0f172a);
  color: var(--text-primary, #e5e7eb);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.private-round-grid .pr-field input:focus {
  border-color: var(--accent, #3b82f6);
  outline: none;
}
.pr-field-round, .pr-field-source { grid-column: span 1; }
.pr-field-lead { grid-column: span 2; }
.pr-field-co { grid-column: span 2; }
@media (max-width: 540px) {
  .private-round-grid { grid-template-columns: 1fr; }
  .pr-field-lead, .pr-field-co { grid-column: span 1; }
}
.pr-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border, #334155);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}
.private-add-round-btn {
  margin-top: 12px;
  background: transparent;
  border: 1px dashed var(--border, #334155);
  color: var(--text-secondary, #cbd5e1);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.private-add-round-btn:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

/* ===== PRIVATE POPUP — FUNDING SUMMARY CARD ===== */
.pd-fund-summary-card {
  background: var(--bg-surface, rgba(30, 41, 59, 0.5));
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.pd-fund-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 22px;
}
.pd-fund-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-fund-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}
.pd-fund-summary-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
}

/* ========================================================================
   Quality Score + Debate Intensity badges
   Tier colors derive from existing palette:
     Quality:  Elite=teal-deep, High=teal, Moderate=gold, Low=orange, Weak=red
     Debate:   High=amber, Active=gold, Moderate=neutral, Low=muted
   ======================================================================== */

.ss-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
  cursor: default;
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
}
.ss-score-badge .ss-score-num {
  font-size: 12px;
  font-weight: 700;
}
.ss-score-badge .ss-score-sep {
  color: var(--text-muted);
  margin: 0 1px;
}
.ss-score-compact { padding: 1px 6px; gap: 2px; font-size: 10px; }
.ss-score-compact .ss-score-num { font-size: 11px; }

/* Quality tiers */
.ss-score-quality.ss-score-elite {
  background: rgba(13, 148, 136, 0.18);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.40);
}
.ss-score-quality.ss-score-high {
  background: rgba(20, 184, 166, 0.12);
  color: #2dd4bf;
  border-color: rgba(20, 184, 166, 0.30);
}
.ss-score-quality.ss-score-moderate {
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  border-color: rgba(234, 179, 8, 0.30);
}
.ss-score-quality.ss-score-low {
  background: rgba(249, 115, 22, 0.14);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.30);
}
.ss-score-quality.ss-score-weak {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.28);
}

/* Debate tiers */
.ss-score-debate.ss-score-high {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.40);
}
.ss-score-debate.ss-score-active {
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  border-color: rgba(234, 179, 8, 0.28);
}
.ss-score-debate.ss-score-moderate {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.28);
}
.ss-score-debate.ss-score-low {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-secondary);
  border-color: rgba(107, 114, 128, 0.24);
}

/* N/A */
.ss-score-na, .ss-score-badge.ss-score-na {
  background: transparent;
  color: var(--text-muted);
  border-color: rgba(107, 114, 128, 0.20);
}

/* Rich (non-compact) badge with hover tooltip card */
.ss-score-rich {
  cursor: help;
  outline: none;
}
.ss-score-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: none;
  pointer-events: none;
}
.ss-score-rich:hover .ss-score-tip,
.ss-score-rich:focus .ss-score-tip,
.ss-score-rich:focus-within .ss-score-tip {
  display: block;
}

.ss-bd-card {
  width: 320px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40);
  padding: 12px;
  text-align: left;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.ss-bd-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.ss-bd-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}
.ss-bd-headline {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.ss-bd-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.ss-bd-row:last-child { border-bottom: none; }
.ss-bd-row-skip { opacity: 0.55; }
.ss-bd-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ss-bd-meta {
  grid-column: 1 / 2;
  font-size: 11px;
  color: var(--text-muted);
}
.ss-bd-score {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.ss-bd-skip {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.ss-bd-foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- PR D: Debate-metric v2 BETA tooltip (gated behind ?v2=1) --- */
/* Host wraps the existing v1 badge + a small BETA chip + a hidden rich
   cluster tooltip. Users must opt in via ?v2=1 URL param, so this CSS is
   only visually consequential when the flag is on. */
.debate-v2-tooltip-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
  outline: none;
}
.debate-v2-beta {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(234, 179, 8, 0.18);
  color: rgb(234, 179, 8);
  border: 1px solid rgba(234, 179, 8, 0.35);
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
}
.debate-v2-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: none;
  pointer-events: none;
}
.debate-v2-tooltip-host:hover .debate-v2-tooltip,
.debate-v2-tooltip-host:focus .debate-v2-tooltip,
.debate-v2-tooltip-host:focus-within .debate-v2-tooltip {
  display: block;
}
/* v2 tooltip inherits .ss-bd-card layout; only override the title chip
   spacing so the inline BETA badge doesn't crowd the headline. */
.debate-v2-tooltip .ss-bd-title .debate-v2-beta {
  margin-left: 6px;
  vertical-align: baseline;
}
.debate-v2-tooltip .ss-bd-foot em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: rgb(234, 179, 8);
}

/* Watchlist row score cells */
.watchlist-table td.cell-quality,
.watchlist-table td.cell-debate {
  padding: 4px 6px;
}
.watchlist-table th.col-quality,
.watchlist-table th.col-debate {
  white-space: nowrap;
}

/* Popup header score row */
.popup-header { flex-wrap: wrap; }
.popup-score-row {
  display: flex;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  align-items: center;
}

/* Drilldown masthead score stat \u2014 align badge next to the label */
.dd-mast-stat-score {
  align-items: flex-start;
}
.dd-mast-stat-score .ss-score-badge {
  margin-top: 2px;
}


/* ── Watchlist column-group header row ──────────────────────────────────
   Lightweight super-header above the main thead row. Visually labels
   the Performance and AI Signals column ranges without affecting any
   sort or filter logic on the row below it.

   Sticky stacking (item 4 — 2026-07-07):
     Row 1 (col-group-row) sticks at top:0 with an opaque background so
     it never lets scrolling body content bleed through.
     Row 2 (main headers) is offset by --col-group-row-h (default 22px)
     so both rows sit stacked at the top of the scroll container.
     See the tr:not(.col-group-row) rule further below for row 2.
*/
.watchlist-table thead tr.col-group-row > th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: none;
  padding-bottom: 0;
  font-weight: 600;
  /* Opaque background so scrolled rows can't bleed through when this
     row is pinned by sticky. */
  background: var(--bg-header);
  text-align: center;
  cursor: default;
  /* Explicit sticky positioning so we can layer this above the main
     header row (z-index 12 vs 10) and the sticky-left ticker column
     (z-index 5/15). */
  position: sticky;
  top: 0;
  z-index: 12;
}
.watchlist-table thead tr.col-group-row > th.col-group-signals {
  color: var(--accent);
  font-weight: 700;
}
.watchlist-table thead tr.col-group-row > th.col-group-perf {
  color: var(--text-secondary);
}
.watchlist-table thead tr.col-group-row > th.col-group-valuation {
  color: var(--text-secondary);
}
.watchlist-table thead tr.col-group-row > th.col-group-positioning {
  color: var(--text-secondary);
}
.watchlist-table th.col-positioning { white-space: nowrap; }

/* ===== Compare redesign — v20260512a ===== */

/* --- Flash + header --- */
.cmp-flash-note,
.cmp-flash-error {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.cmp-flash-error {
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
  background: rgba(239,68,68,0.08);
}
.compare-header-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.compare-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.compare-header-actions .btn-link {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.compare-header-actions .btn-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* --- Overview hero --- */
.cmp-hero { margin-bottom: 18px; }
.cmp-hero-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.cmp-hero-ticker {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.cmp-hero-name {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-hero-price {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.cmp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.cmp-hero-k {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cmp-hero-v {
  font-size: 12px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cmp-up { color: var(--green); }
.cmp-down { color: var(--red); }

/* --- Benchmark legend --- */
.cmp-benchmark-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.cmp-bench-bit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cmp-bench-bit::before {
  content: "";
  width: 10px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

/* --- Trends tab --- */
.cmp-trends-section { margin-bottom: 26px; }
.cmp-perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cmp-perf-table th,
.cmp-perf-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.cmp-perf-table th:first-child,
.cmp-perf-table td:first-child {
  text-align: left;
}
.cmp-perf-table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-elevated);
}
.cmp-perf-ticker { font-weight: 600; color: var(--text-primary); }
.cmp-perf-cell { position: relative; min-width: 80px; }
.cmp-perf-bar {
  position: relative;
  height: 4px;
  background: var(--bg-hover);
  border-radius: 2px;
  margin-top: 4px;
}
.cmp-perf-fill {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.cmp-perf-fill.neg { background: var(--red); }
.cmp-perf-fill.pos { background: var(--green); }
.cmp-perf-val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.cmp-reactions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.cmp-react-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.cmp-react-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text-primary);
}
.cmp-react-body {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.cmp-react-cadence {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.cmp-react-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cmp-react-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 14px;
  position: relative;
  font-size: 10px;
}
.cmp-react-bar.up { color: var(--green); }
.cmp-react-bar.down { color: var(--red); }
.cmp-react-bar-label {
  flex: 0 0 64px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cmp-react-bar::after {
  content: "";
  position: absolute;
  left: 70px;
  right: 50px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.4;
  width: var(--bar, 0%);
}
.cmp-react-empty {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

.cmp-snap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cmp-snap-table th,
.cmp-snap-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.cmp-snap-table th:first-child,
.cmp-snap-table td:first-child { text-align: left; }
.cmp-snap-metric { color: var(--text-secondary); font-weight: 500; }
.cmp-snap-cell { position: relative; }
.cmp-snap-bar {
  height: 4px;
  background: var(--bg-hover);
  border-radius: 2px;
  margin-top: 4px;
  position: relative;
}
.cmp-snap-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.cmp-snap-val { font-variant-numeric: tabular-nums; }

/* --- Fundamentals groups --- */
.cmp-fund-group td {
  background: var(--bg-elevated);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
}

/* --- Scorecard abs tier chips --- */
.cmp-abs-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.cmp-abs-1 { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.cmp-abs-2 { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.35); }
.cmp-abs-3 { background: rgba(234,179,8,0.12); color: #fde68a; border-color: rgba(234,179,8,0.3); }
.cmp-abs-4 { background: rgba(132,204,22,0.15); color: #bef264; border-color: rgba(132,204,22,0.35); }
.cmp-abs-5 { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.4); }
.cmp-abs-na {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.cmp-score-chips {
  display: flex;
  gap: 4px;
  margin: 4px 0;
  flex-wrap: wrap;
}
.cmp-score-abs-total {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Radar toolbar + winner strip --- */
.cmp-radar-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cmp-radar-mode {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cmp-radar-mode-btn {
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.cmp-radar-mode-btn:last-child { border-right: none; }
.cmp-radar-mode-btn.active {
  background: rgba(59,130,246,0.18);
  color: var(--accent);
}
.cmp-radar-mode-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.cmp-winner-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin: 12px 0;
}
.cmp-winner-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.cmp-winner-pillar {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cmp-winner-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  margin-top: 2px;
}
.cmp-winner-score {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cmp-radar-detail {
  margin-top: 12px;
}
.cmp-radar-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cmp-radar-detail-table th,
.cmp-radar-detail-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cmp-radar-detail-table th:first-child,
.cmp-radar-detail-table td:first-child { text-align: left; }
.cmp-radar-cell { vertical-align: top; }
.cmp-radar-score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cmp-radar-plain {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- Earnings Intel tab --- */
.cmp-intel-shell { display: flex; flex-direction: column; gap: 22px; }
.cmp-intel-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.cmp-intel-strip-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.cmp-intel-strip-tick {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cmp-intel-strip-state {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.cmp-intel-state-pre {
  background: rgba(245,158,11,0.15);
  color: #fcd34d;
}
.cmp-intel-state-post {
  background: rgba(59,130,246,0.15);
  color: var(--accent);
}
.cmp-intel-state-idle {
  background: var(--bg-hover);
  color: var(--text-muted);
}
.cmp-intel-strip-detail {
  font-size: 11px;
  color: var(--text-secondary);
}

.cmp-intel-reactions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.cmp-intel-react-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}
.cmp-intel-react-tick {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cmp-intel-react-move {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
}
.cmp-intel-react-headline {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 6px 0 6px;
  line-height: 1.4;
}
.cmp-intel-bullets {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.cmp-intel-bullets li { margin-bottom: 6px; }

/* Long-token overflow hardening: intel text can contain long URLs, ticker
   tokens, or unbroken phrases that, in narrow 4-column cards, refuse to wrap
   and overflow/overlap. Allow wrapping anywhere on the text-bearing elements.
   word-break stays 'normal' so normal words still break at spaces. */
.cmp-intel-react-headline,
.cmp-intel-bullets,
.cmp-intel-bullets li,
.cmp-intel-bl-text,
.cmp-intel-case-head,
.cmp-intel-case-list li {
  overflow-wrap: anywhere;
  word-break: normal;
}
.cmp-intel-bullets,
.cmp-intel-bullets li {
  line-height: 1.45;
}

.cmp-intel-bottomline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.cmp-intel-bl-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}
.cmp-intel-bl-tick {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cmp-intel-bl-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 6px;
}
.cmp-intel-bl-tone {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cmp-intel-cases {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px 0;
}
.cmp-intel-cases th,
.cmp-intel-cases td {
  vertical-align: top;
  text-align: left;
}
.cmp-intel-cases thead th {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  font-weight: 600;
}
.cmp-intel-cases thead th:first-child {
  width: 52px;
}
.cmp-intel-cases tbody td {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.cmp-intel-cases td.cmp-fund-metric {
  background: transparent;
  border: 0;
  width: 52px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.cmp-intel-case-head {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: 12px;
}
.cmp-intel-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-intel-case-list li {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.cmp-intel-empty {
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.cmp-intel-empty-msg {
  color: var(--text-muted);
  font-size: 12px;
}

/* --- AI Read tab --- */
.cmp-ai-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cmp-ai-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cmp-ai-toolbar .btn-link {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.cmp-ai-toolbar .btn-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.cmp-ai-status {
  font-size: 11px;
  color: var(--text-muted);
}
.cmp-ai-status-ok { color: var(--green); }
.cmp-ai-status-error { color: #fca5a5; }

.cmp-ai-paste-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
}
.cmp-ai-paste-details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  list-style: none;
}
.cmp-ai-paste-details > summary::-webkit-details-marker { display: none; }
.cmp-ai-paste-details[open] > summary { margin-bottom: 8px; }
.cmp-ai-paste {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.cmp-ai-paste-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cmp-ai-paste-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.cmp-ai-paste-hint.ok { color: var(--green); }
.cmp-ai-paste-hint.error { color: #fca5a5; }
.cmp-ai-paste-hint.warn { color: #fcd34d; }

.cmp-ai-content { min-height: 120px; }
.cmp-ai-empty {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  padding: 20px;
  text-align: center;
}
.cmp-ai-saved-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cmp-ai-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cmp-ai-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.cmp-ai-block h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.cmp-ai-strongest {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}
.cmp-ai-risk {
  font-size: 13px;
  color: var(--text-secondary);
}
.cmp-ai-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--bg-hover);
  color: var(--text-primary);
  margin-right: 6px;
}
.cmp-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.cmp-ai-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.cmp-ai-card-head {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.cmp-ai-bull { border-left: 3px solid var(--green); }
.cmp-ai-bear { border-left: 3px solid var(--red); }
.cmp-ai-watch { border-left: 3px solid #f59e0b; }
.cmp-ai-raw {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
}
.cmp-ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 13px;
}
.cmp-ai-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent, #60a5fa);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.cmp-ai-error-block {
  border: 1px solid #fca5a5;
  background: rgba(248, 113, 113, 0.08);
  border-radius: 6px;
  padding: 12px;
  color: #fca5a5;
  font-size: 13px;
}
.cmp-ai-error-block p {
  margin: 0 0 10px 0;
}
.cmp-ai-citations ol {
  margin: 6px 0 0 0;
  padding-left: 20px;
}
.cmp-ai-citations li {
  font-size: 12px;
  margin-bottom: 4px;
  word-break: break-all;
}
.cmp-ai-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-link {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.btn-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ===== Compare v3 enhancements ===== */
/* Enhancement 1 — Beat-rate strip (Earnings Intel) */
.cmp-beat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.cmp-beat-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.cmp-beat-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.cmp-beat-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-hover);
  overflow: hidden;
}
.cmp-beat-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--text-muted);
  transition: width 0.3s ease;
}
.cmp-beat-fill.positive { background: var(--green); }
.cmp-beat-fill.negative { background: var(--red); }
.cmp-beat-fill.cmp-beat-mid { background: #f59e0b; }
.cmp-beat-fill.cmp-na { background: var(--text-muted); }
.cmp-beat-count {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Enhancement 2 — AI Read per-ticker accordion */
.cmp-ai-per-ticker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-ai-ticker-details {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 12px;
}
.cmp-ai-ticker-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.cmp-ai-ticker-details > summary::-webkit-details-marker { display: none; }
.cmp-ai-summary-tick {
  font-weight: 600;
  color: var(--text-primary);
}
.cmp-ai-row {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 8px;
  margin: 4px 0;
  border-radius: 4px;
  background: var(--bg-primary);
}
.cmp-ai-row.cmp-ai-bull { border-left: 3px solid var(--green); }
.cmp-ai-row.cmp-ai-bear { border-left: 3px solid var(--red); }
.cmp-ai-row.cmp-ai-watch { border-left: 3px solid #f59e0b; }
.cmp-ai-per-ticker-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cmp-ai-summary-snip {
  color: var(--text-secondary);
  font-weight: 400;
}
.cmp-ai-summary-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  vertical-align: middle;
  margin: 0 4px;
  transition: transform 0.15s ease;
}
.cmp-ai-ticker-details[open] > summary .cmp-ai-summary-arrow {
  transform: rotate(180deg);
}

/* Enhancement 3 — Alpha badge on hero cards */
.cmp-hero-alpha {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.cmp-hero-alpha.cmp-up { color: var(--green); }
.cmp-hero-alpha.cmp-down { color: var(--red); }
.cmp-hero-alpha:empty { display: none; }

/* Enhancement 5 — "+ Compare" button in ticker popup */
.popup-add-compare { margin-left: auto; }
.popup-add-compare-on {
  border-color: var(--green);
  color: var(--green);
}

/* Enhancement 6 — Quarterly sparklines (Trends) */
.cmp-sparklines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.cmp-spark-col {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.cmp-spark-tick {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.cmp-spark-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.cmp-spark-label {
  flex: 1;
  font-size: 11px;
  color: var(--text-secondary);
}
.cmp-spark-svg {
  width: 120px;
  height: 60px;
  flex: 0 0 auto;
}
.cmp-spark-last {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 48px;
  text-align: right;
}
.cmp-spark-na {
  font-size: 11px;
  color: var(--text-muted);
}

/* ===== API Settings modal — v20260512c ===== */
.api-settings-btn {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  cursor: pointer;
  margin-left: 8px;
}
.api-settings-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.api-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.api-settings-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px 22px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
}
.api-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.api-settings-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}
.api-settings-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.api-settings-close:hover { color: var(--text-primary); }
.api-settings-intro {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  line-height: 1.45;
}
.api-settings-intro a {
  color: var(--accent);
}
.api-settings-row {
  margin-bottom: 14px;
}
.api-settings-row label,
.api-settings-col label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.api-settings-row input,
.api-settings-col select {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.api-settings-row input:focus,
.api-settings-col select:focus {
  outline: none;
  border-color: var(--accent);
}
.api-settings-hint {
  font-size: 11px;
  margin-top: 4px;
}
.api-status-ok { color: var(--green); }
.api-status-warn { color: #fcd34d; }
.api-status-error { color: #fca5a5; }
.api-status-info { color: var(--text-secondary); }
.api-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .api-settings-grid { grid-template-columns: 1fr; }
}
.api-settings-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.api-settings-actions-right { display: flex; gap: 8px; }
.api-settings-actions .btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.api-settings-actions .btn-primary:hover { filter: brightness(1.1); }
.api-settings-test-out {
  font-size: 12px;
  margin-top: 10px;
  min-height: 18px;
}
.api-settings-cost {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.api-settings-cost summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.api-settings-cost ul {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 18px;
  margin: 8px 0;
}
.api-settings-cost li { margin-bottom: 3px; }
.api-settings-cost-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

/* ============================================================
   M&A Rumor Pending Review (News tab)
   ============================================================ */
.ma-pending-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid rgba(255, 165, 0, 0.25);
  border-radius: 12px;
  background: rgba(255, 165, 0, 0.04);
}
.ma-pending-section .section-header-bar h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.badge.badge-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #ff8c00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ma-pending-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
.ma-pending-card {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: var(--surface, rgba(255, 255, 255, 0.02));
  padding: 14px 16px;
}
.ma-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ma-pending-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ma-pending-title strong {
  font-size: 17px;
  letter-spacing: 0.4px;
}
.ma-pending-company {
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}
.ma-pending-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.ma-pending-conf {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.ma-pending-conf.high { background: rgba(46, 160, 67, 0.18); color: #4ac26b; }
.ma-pending-conf.mid  { background: rgba(255, 165, 0, 0.18); color: #ff9d2b; }
.ma-pending-conf.low  { background: rgba(255, 80, 80, 0.18); color: #ff7676; }
.ma-pending-conf.stage { background: rgba(140, 150, 170, 0.18); color: #aab3c5; }
.ma-pending-odds {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(88, 166, 255, 0.16);
  color: #79b8ff;
}
.ma-pending-move {
  font-variant-numeric: tabular-nums;
  color: var(--muted, rgba(255, 255, 255, 0.7));
}
.ma-pending-when {
  color: var(--muted, rgba(255, 255, 255, 0.55));
}
.ma-pending-body { font-size: 13px; line-height: 1.5; }
.ma-pending-headline { font-weight: 600; margin-bottom: 4px; }
.ma-pending-rationale {
  color: var(--muted, rgba(255, 255, 255, 0.75));
  margin-bottom: 8px;
}
.ma-pending-buyer { margin-bottom: 8px; }
.ma-pending-label { color: var(--muted, rgba(255, 255, 255, 0.55)); margin-right: 4px; }
.ma-pending-sep { margin: 0 8px; color: var(--muted, rgba(255, 255, 255, 0.35)); }
.ma-pending-gates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ma-gate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ma-gate.pass { background: rgba(46, 160, 67, 0.16); color: #4ac26b; }
.ma-gate.fail { background: rgba(255, 80, 80, 0.16); color: #ff7676; }
.ma-pending-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.ma-pending-source {
  font-size: 12px;
  text-decoration: none;
  color: var(--accent, #6ea8ff);
  background: rgba(110, 168, 255, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}
.ma-pending-source:hover { background: rgba(110, 168, 255, 0.2); }
.ma-pending-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.ma-pending-actions .btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ma-pending-actions .btn:disabled { opacity: 0.6; cursor: progress; }
.btn-approve {
  background: rgba(255, 165, 0, 0.18);
  color: #ff9d2b;
  border-color: rgba(255, 165, 0, 0.35);
}
.btn-approve:hover { background: rgba(255, 165, 0, 0.28); }
.btn-reject {
  background: transparent;
  color: var(--muted, rgba(255, 255, 255, 0.7));
  border-color: var(--border, rgba(255, 255, 255, 0.15));
}
.btn-reject:hover { background: rgba(255, 255, 255, 0.05); }

/* --- Peer ticker links in earnings-intel drilldown --- */
.peer-ticker-link {
  color: #60a5fa;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.peer-ticker-link:hover {
  text-decoration: underline;
  color: #93bbfc;
}

/* --- Inline citation links in earnings-intel bullets / headlines --- */
.ei-cite-link {
  color: #94a3b8;
  text-decoration: none;
  border-bottom: 1px dotted #64748b;
  font-size: 0.92em;
  padding: 0 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.ei-cite-link:hover {
  color: #cbd5f5;
  border-bottom-color: #cbd5f5;
  text-decoration: none;
}
.ei-cite-link:visited {
  color: #94a3b8;
}

/* Live-quotes row update flash */
@keyframes row-flash-anim {
  0%   { background-color: rgba(110, 168, 255, 0.18); }
  100% { background-color: transparent; }
}
.row-flash {
  animation: row-flash-anim 0.6s ease-out 1;
}

/* Search "Open overview" jump: longer, more prominent flash than the
 * live-quotes update so the user can locate the row they searched for. */
@keyframes row-flash-search-anim {
  0%   { background-color: rgba(110, 168, 255, 0.32); }
  60%  { background-color: rgba(110, 168, 255, 0.20); }
  100% { background-color: transparent; }
}
.row-flash-search {
  animation: row-flash-search-anim 1.2s ease-out 1;
}

/* "n/a" placeholder for cells where a metric is not meaningful for the row's
 * subsector (e.g. Enterprise Value for banks). Subdued styling so it reads as
 * "intentionally not applicable" rather than "missing data". */
.cell-na {
  color: var(--text-muted, #6b7280);
  font-style: italic;
  opacity: 0.75;
}

/* ==== Non-GAAP source badge (B3) ============================================
 * A tiny 'G' or 'C' next to a valuation cell that tells the user this value
 * is a GAAP fallback (or a computed non-GAAP estimate) rather than the
 * default reported non-GAAP figure. Signal-Pro's contract: non-GAAP is what
 * a buy-side user thinks in, so the DEFAULT (adjusted) case has NO badge —
 * silence is intentional. The badge appears only when something falls back.
 * Sized to occupy visual weight comparable to the cell it annotates,
 * without stealing the eye. */
.metric-badge {
  display: inline-block;
  margin-left: 3px;
  padding: 0 3px;
  font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: 3px;
  vertical-align: super;
  cursor: help;
  user-select: none;
}
.metric-badge-gaap {
  color: #B5851A;                       /* Signal-Pro amber (parchment scheme) */
  background: rgba(181, 133, 26, 0.10);
  border: 1px solid rgba(181, 133, 26, 0.25);
}
.metric-badge-computed {
  color: #6B7280;                       /* muted neutral — quieter than GAAP */
  background: rgba(107, 114, 128, 0.08);
  border: 1px solid rgba(107, 114, 128, 0.20);
}

/* ===== Weekly Briefing: Upcoming Catalysts ===== */
.wb-catalysts-list { display: flex; flex-direction: column; gap: 10px; }
.wb-catalyst-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border, #1e2433); border-radius: 6px; padding: 12px; }
.wb-catalyst-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.wb-catalyst-date { font-size: 0.8rem; color: var(--text-muted, #6b7280); font-family: var(--font-mono, monospace); }
.wb-catalyst-ticker { font-size: 0.85rem; font-weight: 600; color: var(--accent, #6366f1); }
.wb-catalyst-type { font-size: 0.75rem; background: rgba(99,102,241,0.12); color: #a5b4fc; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.wb-catalyst-importance { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.05em; }
.wb-catalyst-high { background: rgba(239,68,68,0.15); color: #f87171; }
.wb-catalyst-medium { background: rgba(245,158,11,0.15); color: #fbbf24; }
.wb-catalyst-low { background: rgba(107,114,128,0.15); color: #9ca3af; }
.wb-catalyst-event { font-size: 0.85rem; color: var(--text, #e5e7eb); font-weight: 500; margin-bottom: 4px; }
.wb-catalyst-context { font-size: 0.8rem; color: var(--text-muted, #6b7280); line-height: 1.5; }

/* ===== Weekly Briefing: Sector Summary ===== */
.wb-sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.wb-sector-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border, #1e2433); border-radius: 6px; padding: 12px; }
.wb-sector-name { font-size: 0.8rem; font-weight: 700; color: var(--accent, #6366f1); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.wb-sector-detail { font-size: 0.8rem; color: var(--text-muted, #9ca3af); line-height: 1.55; }

/* ===== Weekly Briefing: Market Intel (Workstream D) ===== */
.wb-mi-block { display: flex; flex-direction: column; gap: 6px; }
.wb-mi-row { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted, #9ca3af); }
.wb-mi-label { font-weight: 600; color: var(--text, #e5e7eb); margin-right: 4px; }
.wb-mi-val { color: var(--text, #e5e7eb); }
.wb-mi-source { font-size: 0.72rem; color: var(--accent, #6366f1); margin-left: 4px; opacity: 0.75; text-decoration: none; }
.wb-mi-source:hover { opacity: 1; text-decoration: underline; }
.wb-mi-callout {
  font-size: 0.8rem;
  background: rgba(99,102,241,0.08);
  border-left: 3px solid var(--accent, #6366f1);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 12px;
  line-height: 1.55;
}
.wb-mi-callout a { color: var(--accent, #6366f1); text-decoration: none; }
.wb-mi-callout a:hover { text-decoration: underline; }
.wb-mi-cagr-tag {
  font-size: 0.72rem;
  background: rgba(99,102,241,0.12);
  color: #a5b4fc;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
}
.wb-mi-cagr-tag a { color: #a5b4fc; text-decoration: none; }
.wb-mi-cagr-tag a:hover { text-decoration: underline; }
.wb-drawer-section--industry { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; }

/* ============================================================
   WATCHLIST PILL BAR — PR VIII (Multi-watchlist UI)
   Secondary bar that slots below the global topbar. Lets the user
   switch the active watchlist, star one as featured, or promote one
   to default. Hidden when WatchlistSync has no lists (signed out /
   pre-bootstrap).
   ============================================================ */
.watchlist-pillbar {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px;
}
.watchlist-pillbar[hidden] { display: none; }
.wl-pillbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-pillbar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.wl-pillbar-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wl-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wl-pill:hover { background: var(--bg-hover); }
.wl-pill-active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
}
.wl-pill-active:hover { background: var(--accent); }
.wl-pill-switch {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wl-pill-name {
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-pill-visibility {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
}
.wl-pill-visibility-public  { background: rgba(34,197,94,0.18);  color: #86efac; }
.wl-pill-visibility-friends { background: rgba(234,179,8,0.18);  color: #fde68a; }
.wl-pill-star {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.wl-pill-star[aria-pressed="true"] { color: #fbbf24; }
.wl-pill-star:hover { color: var(--text-primary); }
.wl-pill-active .wl-pill-star { color: rgba(255,255,255,0.7); }
.wl-pill-active .wl-pill-star[aria-pressed="true"] { color: #fbbf24; }
.wl-pill-make-default,
.wl-pill-default-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.wl-pill-make-default:hover { color: var(--text-primary); background: rgba(255,255,255,0.12); }
.wl-pill-default-badge {
  background: rgba(59,130,246,0.18);
  color: var(--accent);
  cursor: default;
}
.wl-pill-active .wl-pill-default-badge {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Create form */
.wl-pill-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}
.wl-pill-create-btn {
  background: var(--bg-surface);
  border: 1px dashed var(--border-light);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.wl-pill-create-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
.wl-pill-create-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wl-pill-create-form[hidden] { display: none; }
.wl-pill-create-input {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  width: 180px;
}
.wl-pill-create-input:focus { outline: none; border-color: var(--accent); }
.wl-pill-create-submit,
.wl-pill-create-cancel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.wl-pill-create-submit:hover { color: var(--accent); border-color: var(--accent); }
.wl-pill-create-submit:disabled { opacity: 0.5; cursor: progress; }
.wl-pill-create-error {
  font-size: 11px;
  color: var(--red);
}
.wl-pill-create-error[hidden] { display: none; }

/* ============================================================
   CSV IMPORT MODAL — PR IX (Import CSV for watchlists)
   ============================================================ */
.csv-import-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.csv-import-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 23, 0.78);
  backdrop-filter: blur(2px);
}
.csv-import-dialog {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6);
}
.csv-import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.csv-import-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.csv-import-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.csv-import-close:hover { color: var(--text-primary); }
.csv-import-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.csv-import-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.csv-import-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.csv-import-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.csv-import-file {
  color: var(--text-secondary);
  font-size: 12px;
}
.csv-import-or {
  color: var(--text-muted);
  font-size: 11px;
}
.csv-import-textarea {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 100px;
}
.csv-import-textarea:focus { outline: none; border-color: var(--accent); }
.csv-import-target {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.csv-import-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  min-width: 140px;
}
.csv-import-name,
.csv-import-select {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 4px;
}
.csv-import-name:focus,
.csv-import-select:focus { outline: none; border-color: var(--accent); }
.csv-import-name:disabled,
.csv-import-select:disabled { opacity: 0.5; cursor: not-allowed; }
.csv-import-preview {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.csv-import-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.csv-import-preview-empty {
  color: var(--text-muted);
  font-size: 12px;
  align-self: center;
}
.csv-import-counts {
  font-size: 11px;
  color: var(--text-muted);
}
.csv-import-counts[hidden] { display: none; }
.csv-import-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  color: #fecaca;
}
.csv-import-error[hidden] { display: none; }
.csv-import-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.csv-import-cancel,
.csv-import-submit {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.csv-import-cancel {
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.csv-import-cancel:hover { color: var(--text-primary); }
.csv-import-submit {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.csv-import-submit:hover { background: var(--accent-dim); }
.csv-import-submit:disabled { opacity: 0.5; cursor: not-allowed; background: var(--accent-dim); }

/* Pill bar Import button */
.wl-pill-import-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 4px;
}
.wl-pill-import-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

/* ============================================================
 * PR X — coverage-tier chip styling for csv-import preview
 * ============================================================ */
.csv-import-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.csv-import-chip-quotes {
  background: rgba(180, 140, 60, 0.10);
  border-color: rgba(180, 140, 60, 0.40);
  color: var(--text-secondary, #c9c9c9);
}
.csv-import-chip-tier {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(220, 180, 100, 0.90);
  background: rgba(180, 140, 60, 0.18);
  padding: 1px 6px;
  border-radius: 3px;
}
.csv-import-coverage-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(180, 140, 60, 0.35);
  background: rgba(180, 140, 60, 0.08);
  border-radius: 4px;
  color: var(--text-secondary, #c9c9c9);
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================================
 * PR X — Onboarding wizard
 * ============================================================ */
.onb-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.onb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
}
.onb-dialog {
  position: relative;
  width: min(720px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-surface, #16181d);
  border: 1px solid var(--border, #2a2d34);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
}
.onb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 0;
}
.onb-progress {
  display: flex;
  gap: 8px;
}
.onb-progress-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.onb-progress-dot.done {
  background: var(--accent, #4f8cff);
}
.onb-progress-dot.active {
  background: var(--accent, #4f8cff);
  box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.18);
}
.onb-skip {
  background: transparent;
  border: none;
  color: var(--text-secondary, #9aa0a8);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
}
.onb-skip:hover {
  color: var(--text-primary, #e7e8ea);
  text-decoration: underline;
}
.onb-body {
  padding: 22px 26px 24px;
}
.onb-title {
  font-size: 22px;
  font-weight: 600;
  margin: 4px 0 8px;
  color: var(--text-primary, #e7e8ea);
}
.onb-lede {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #b1b6bd);
  margin: 0 0 18px;
}
.onb-roadmap {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onb-roadmap li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-primary, #e7e8ea);
}
.onb-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(79, 140, 255, 0.15);
  color: var(--accent, #4f8cff);
  font-size: 11px;
  font-weight: 600;
}
.onb-edit-row {
  margin-bottom: 22px;
}
.onb-edit-profile {
  background: transparent;
  border: 1px dashed var(--border, #2a2d34);
  color: var(--text-secondary, #b1b6bd);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.onb-edit-profile:hover {
  border-color: var(--accent, #4f8cff);
  color: var(--text-primary, #e7e8ea);
}
.onb-radio-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.onb-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #2a2d34);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.onb-radio:hover {
  border-color: var(--accent, #4f8cff);
}
.onb-radio input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--accent, #4f8cff);
}
.onb-radio-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onb-radio-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e7e8ea);
}
.onb-radio-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, #9aa0a8);
}
.onb-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #2a2d34);
  margin-bottom: 16px;
}
.onb-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary, #9aa0a8);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.onb-tab.active {
  color: var(--text-primary, #e7e8ea);
  border-bottom-color: var(--accent, #4f8cff);
}
.onb-tab:hover {
  color: var(--text-primary, #e7e8ea);
}
.onb-pane {
  min-height: 200px;
  margin-bottom: 12px;
}
/* 13a desktop: the template grid scrolls inside the pane, so five cards
   never push the name field and action bar off the dialog. (Mobile instead
   collapses cards to rows and sticks the action bar — see the 640px block.) */
@media (min-width: 641px) {
  .onb-pane {
    max-height: 46vh;
    overflow-y: auto;
  }
}
.onb-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.onb-template {
  background: transparent;
  border: 1px solid var(--border, #2a2d34);
  border-radius: 5px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  color: var(--text-primary, #e7e8ea);
}
.onb-template:hover {
  border-color: var(--accent, #4f8cff);
}
.onb-template.active {
  border-color: var(--accent, #4f8cff);
  background: rgba(79, 140, 255, 0.06);
}
.onb-template-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.onb-template-name {
  font-size: 13px;
  font-weight: 600;
}
.onb-template-count {
  font-size: 11px;
  color: var(--text-secondary, #9aa0a8);
}
.onb-template-desc {
  font-size: 12px;
  color: var(--text-secondary, #b1b6bd);
  margin-bottom: 8px;
  line-height: 1.45;
}
.onb-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.onb-tmpl-chip {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border, #2a2d34);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-secondary, #c9c9c9);
}
/* Private-company chips inside a template card: distinguished from public
   tickers with an accent tint and a non-mono face (they are company names). */
.onb-tmpl-chip-private {
  font-family: inherit;
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.40);
  color: var(--text-secondary, #c9c9c9);
}
/* Multi-select affordance: a small checkbox glyph that fills in when active. */
.onb-template-hint {
  font-size: 12px;
  color: var(--text-secondary, #9aa0a8);
  margin: 0 0 10px;
  line-height: 1.45;
}
.onb-template-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.onb-template-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border, #5a5d64);
  border-radius: 3px;
  flex: 0 0 auto;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.onb-template.active .onb-template-check {
  background: var(--accent, #4f8cff);
  border-color: var(--accent, #4f8cff);
}
.onb-template.active .onb-template-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.onb-paste-textarea {
  width: 100%;
  background: var(--bg-input, rgba(0, 0, 0, 0.20));
  border: 1px solid var(--border, #2a2d34);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--text-primary, #e7e8ea);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
}
.onb-paste-textarea:focus {
  outline: none;
  border-color: var(--accent, #4f8cff);
}
.onb-paste-counts {
  font-size: 11px;
  color: var(--text-secondary, #9aa0a8);
  margin-top: 6px;
}
.onb-paste-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  min-height: 28px;
}
.onb-paste-chip {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  background: rgba(79, 140, 255, 0.10);
  border: 1px solid rgba(79, 140, 255, 0.30);
  color: var(--text-primary, #e7e8ea);
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.onb-paste-chip.quotes-only {
  background: rgba(180, 140, 60, 0.10);
  border-color: rgba(180, 140, 60, 0.40);
}
.onb-chip-tier {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(220, 180, 100, 0.90);
}
.onb-paste-empty {
  font-size: 12px;
  color: var(--text-secondary, #9aa0a8);
}
.onb-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.onb-search-input {
  flex: 1;
  background: var(--bg-input, rgba(0, 0, 0, 0.20));
  border: 1px solid var(--border, #2a2d34);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--text-primary, #e7e8ea);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  text-transform: uppercase;
}
.onb-search-input:focus {
  outline: none;
  border-color: var(--accent, #4f8cff);
}
.onb-search-add {
  background: var(--accent, #4f8cff);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.onb-search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  min-height: 28px;
}
.onb-search-result {
  background: transparent;
  border: 1px solid var(--border, #2a2d34);
  color: var(--text-secondary, #b1b6bd);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.onb-search-result:hover {
  border-color: var(--accent, #4f8cff);
  color: var(--text-primary, #e7e8ea);
}
.onb-search-result-none {
  font-size: 11px;
  color: var(--text-secondary, #9aa0a8);
  padding: 4px 0;
}
.onb-search-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  padding-top: 6px;
  border-top: 1px dashed var(--border, #2a2d34);
}
.onb-search-chip {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  background: rgba(79, 140, 255, 0.12);
  border: 1px solid rgba(79, 140, 255, 0.35);
  color: var(--text-primary, #e7e8ea);
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.onb-search-chip-x {
  background: transparent;
  border: none;
  color: var(--text-secondary, #9aa0a8);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.onb-search-chip-x:hover { color: var(--text-primary, #e7e8ea); }
.onb-search-empty {
  font-size: 12px;
  color: var(--text-secondary, #9aa0a8);
}
.onb-coverage-banner {
  margin: 12px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(180, 140, 60, 0.40);
  background: rgba(180, 140, 60, 0.08);
  border-radius: 4px;
  color: var(--text-secondary, #c9c9c9);
  font-size: 12px;
  line-height: 1.5;
}
.onb-name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.onb-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #9aa0a8);
}
.onb-name-input {
  background: var(--bg-input, rgba(0, 0, 0, 0.20));
  border: 1px solid var(--border, #2a2d34);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--text-primary, #e7e8ea);
  font-size: 13px;
}
.onb-name-input:focus {
  outline: none;
  border-color: var(--accent, #4f8cff);
}
.onb-done-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.onb-done-tip {
  font-size: 12px;
  color: var(--text-secondary, #b1b6bd);
  padding: 8px 12px;
  border-left: 2px solid var(--accent, #4f8cff);
  background: rgba(79, 140, 255, 0.05);
}
.onb-done-tip strong {
  color: var(--text-primary, #e7e8ea);
  font-weight: 600;
}
.onb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px dashed var(--border, #2a2d34);
  margin-top: 6px;
  padding-top: 14px;
}
.onb-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.onb-back {
  background: transparent;
  border: 1px solid var(--border, #2a2d34);
  color: var(--text-secondary, #b1b6bd);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.onb-back:hover {
  border-color: var(--accent, #4f8cff);
  color: var(--text-primary, #e7e8ea);
}
.onb-skip-step {
  background: transparent;
  border: none;
  color: var(--text-secondary, #9aa0a8);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.onb-skip-step:hover { color: var(--text-primary, #e7e8ea); }
.onb-next {
  background: var(--accent, #4f8cff);
  border: none;
  color: white;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.onb-next:hover { filter: brightness(1.1); }
.onb-next:disabled {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-secondary, #6c7079);
  cursor: not-allowed;
}
.onb-error {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 90, 90, 0.10);
  border: 1px solid rgba(255, 90, 90, 0.40);
  color: #ff9696;
  border-radius: 4px;
  font-size: 12px;
}

/* --- Step 1: welcome + profile (username claim), screen 14a ------------- */
.onb-uname-block { margin-bottom: 18px; }
.onb-uname-wrap {
  display: flex;
  align-items: center;
  margin-top: 6px;
  background: var(--bg-input, rgba(0, 0, 0, 0.20));
  border: 1px solid var(--border, #2a2d34);
  border-radius: 4px;
}
.onb-uname-wrap:focus-within { border-color: var(--accent, #4f8cff); }
/* The @ lives in the field, not the value: it says what kind of string this
   is before you type, and stops people typing it themselves. */
.onb-uname-prefix {
  padding: 0 2px 0 12px;
  color: var(--text-secondary, #9aa0a8);
  font-size: 14px;
  user-select: none;
}
.onb-uname-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 12px 10px 4px;
  color: var(--text-primary, #e7e8ea);
  font-size: 14px;
  min-width: 0;
}
.onb-uname-input:focus { outline: none; }
.onb-display-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  background: var(--bg-input, rgba(0, 0, 0, 0.20));
  border: 1px solid var(--border, #2a2d34);
  border-radius: 4px;
  padding: 10px 12px;
}
.onb-display-input:focus { outline: none; border-color: var(--accent, #4f8cff); }
.onb-label-optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary, #6c7079);
}
.onb-uname-status {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  min-height: 15px;
  color: var(--text-secondary, #9aa0a8);
}
.onb-uname-status.is-ok { color: var(--green, #10b981); }
.onb-uname-status.is-error { color: #ff9696; }
.onb-uname-tick { font-weight: 700; }
.onb-uname-help {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-secondary, #6c7079);
  line-height: 1.4;
}
.onb-uname-suggest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.onb-uname-suggest-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #9aa0a8);
}
.onb-uname-chip {
  background: rgba(79, 140, 255, 0.10);
  border: 1px solid rgba(79, 140, 255, 0.45);
  color: var(--accent, #4f8cff);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.onb-uname-chip:hover { background: rgba(79, 140, 255, 0.18); }
.onb-uname-error[hidden] { display: none; }

/* --- Step 4: the tour offer, screen 14a --------------------------------- */
.onb-tour-offer {
  border: 1px solid var(--border, #2a2d34);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(79, 140, 255, 0.04);
}
.onb-tour-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e7e8ea);
  margin-bottom: 6px;
}
.onb-tour-body {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary, #b1b6bd);
}
.onb-tour-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-secondary, #9aa0a8);
}
.onb-tour-meta-dot { color: var(--text-secondary, #6c7079); }

/* Coverage note reads as information, not an error, at the moment someone is
   being generous with their time (13a). */
.onb-coverage-banner {
  border-color: var(--border, #2a2d34) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

@media (max-width: 640px) {
  .onb-template-grid { grid-template-columns: 1fr; }
  .onb-dialog { width: 96vw; max-height: 96vh; }
  .onb-body { padding: 18px 18px 20px; }
  .onb-title { font-size: 18px; }
  /* 13a: the whole row is the target — 52px rows are easier to hit and read
     as selectable. */
  .onb-radio { min-height: 52px; align-items: center; }
  .onb-template { min-height: 52px; }
  /* 13a: template cards lose their ticker chips on a phone — the count
     carries it, so five rows fit on one screen. */
  .onb-template-chips { display: none; }
  .onb-template-desc { display: none; }
}

/* 13a: the action bar sticks to the bottom of the scrolling dialog at EVERY
   width — with five templates, a coverage note and a name field, Create
   otherwise ends below the fold the moment anything is selected (the
   template pane also scrolls internally on desktop, but banners can still
   push the footer past a short viewport). */
.onb-footer--sticky {
  position: sticky;
  bottom: 0;
  background: var(--bg-surface, #16181d);
  padding-bottom: 10px;
  z-index: 2;
}

/* PR X — Settings: Re-run onboarding button row */
.settings-profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}
.settings-profile-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary, #e7e8ea);
}
.settings-profile-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent, #4f8cff);
}
.settings-profile-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.settings-profile-help-secondary {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary, #9aa0a8);
  line-height: 1.5;
}

/* ============================================================
   PR XIII — Settings page build-out
   ============================================================ */
.surface-settings {
  min-height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.settings-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.settings-shell-header {
  margin-bottom: 28px;
}
.settings-shell-title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.settings-shell-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.settings-shell-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar nav */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}
.settings-nav-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.settings-nav-item-active {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-left-color: var(--accent);
}
.settings-nav-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.settings-nav-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.settings-nav-item-active .settings-nav-hint {
  color: var(--text-secondary);
}
/* Billing launch gate: a locked nav entry is visible but not navigable —
   muted, no hover affordance, "Pending" pill in the label. Doubled class
   specificity so these rules also win over the mobile pill-nav overrides
   further down. */
.settings-nav-item.settings-nav-item-locked,
.settings-nav-item.settings-nav-item-locked:hover {
  background: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
}
.settings-nav-item.settings-nav-item-locked .settings-nav-hint {
  color: var(--text-muted);
  opacity: 0.75;
}
.settings-nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.settings-billing-locked-copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 560px;
}

/* Back-compat: the old _renderHeader shim wraps nav in .settings-tabs.
   Make sure it does not break the new sidebar layout. */
.settings-tabs {
  display: contents;
}

/* Panel */
.settings-panel {
  min-width: 0;
}
.settings-loading {
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Section card */
.settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.settings-section-header {
  margin-bottom: 18px;
}
.settings-section-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-section-help {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.settings-section-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  background: var(--bg-surface-alt);
}

/* Banners */
.settings-banner {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.settings-banner-error {
  background: var(--red-dim);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}
.settings-banner-success {
  background: var(--green-dim);
  border-color: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}
.settings-banner-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #bfdbfe;
}

/* Form primitives */
.settings-form,
.settings-form-stacked {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.settings-inline-form .settings-input {
  flex: 1 1 240px;
  min-width: 0;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.settings-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-field-optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}
.settings-field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.settings-field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.settings-field-prefix {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}
.settings-input,
.settings-textarea {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.settings-input:focus,
.settings-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.settings-input-with-prefix {
  padding-left: 28px;
}
.settings-textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-sans);
  line-height: 1.5;
}
.settings-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.settings-section-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.settings-section-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}
.settings-link-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.settings-link-btn:hover:not(:disabled) {
  color: var(--accent);
}
.settings-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Buttons */
.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.settings-btn-primary:hover:not(:disabled) {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}
.settings-btn-secondary {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  border-color: var(--border-light);
}
.settings-btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.settings-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.settings-btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.settings-btn-danger {
  background: transparent;
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
}
.settings-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

/* Avatar */
.settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.settings-avatar-wrap {
  flex-shrink: 0;
}
.settings-avatar-preview {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  object-fit: cover;
}
.settings-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: var(--text-secondary);
}
.settings-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Radio rows */
.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.settings-radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface-alt);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-radio-row:hover {
  border-color: var(--border-light);
}
.settings-radio-row input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
}
.settings-radio-label {
  font-size: 13px;
  color: var(--text-primary);
}

/* Sub-cards (within a section) */
.settings-card {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
}
.settings-card:last-child {
  margin-bottom: 0;
}
.settings-card-danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.04);
}
.settings-card-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-card-help {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Toggle list */
.settings-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.settings-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-toggle-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.settings-toggle input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border-light);
  border-radius: 999px;
  transition: background 0.18s ease;
  cursor: pointer;
}
.settings-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.settings-toggle input[type="checkbox"]:checked + .settings-toggle-track {
  background: var(--accent);
}
.settings-toggle input[type="checkbox"]:checked + .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(16px);
}
.settings-toggle input[type="checkbox"]:disabled + .settings-toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-toggle input[type="checkbox"]:focus-visible + .settings-toggle-track {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* Identities list */
.settings-identity-list,
.settings-identity-available-list,
.settings-discover-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-identity-row,
.settings-identity-available,
.settings-discover-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.settings-identity-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-hover);
  display: inline-block;
}
.settings-identity-text {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-identity-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-identity-email,
.settings-identity-date {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.settings-identity-unlink {
  flex-shrink: 0;
}
.settings-identity-available-header {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Discover */
.settings-discover-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.settings-discover-status {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 0;
}
.settings-discover-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-hover);
  object-fit: cover;
}
.settings-discover-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}
.settings-discover-name:hover {
  color: var(--accent);
}
.settings-discover-username {
  font-size: 12px;
  color: var(--text-secondary);
}
.settings-discover-bio {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* Discover — search input (PR FF-1) */
.settings-discover-search-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.settings-discover-search-input {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
}
.settings-discover-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.settings-discover-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.settings-discover-discoverability {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.settings-subsection-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.settings-discover-connectors {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.settings-discover-connectors-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  line-height: 1.4;
}
.settings-discover-connector-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-discover-connector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
/* Not-yet-live connectors (Apple / X) keep the dimmed teaser look. */
.settings-discover-connector-row-soon {
  opacity: 0.65;
}
.settings-connector-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Text stays on the high-contrast token (WCAG AA at this size); the
     accent lives in the border only. */
  color: var(--text-primary);
  border: 1px solid var(--accent, #1e7bff);
  border-radius: 999px;
  vertical-align: 1px;
}
.settings-discover-connector-status {
  margin-top: 10px;
}
.settings-discover-connector-status:empty {
  margin-top: 0;
}
.settings-discover-connector-matches-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 10px 0 6px;
}
.settings-discover-connector-text {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-discover-connector-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-discover-connector-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.settings-discover-connector-cta {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .settings-shell {
    padding: 20px 16px 64px;
  }
  .settings-shell-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav-item {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 999px;
    padding: 8px 14px;
  }
  .settings-nav-item-active {
    border-left-color: transparent;
    border-bottom-color: transparent;
    background: var(--accent);
    color: #fff;
  }
  .settings-nav-item-active .settings-nav-hint {
    display: none;
  }
  .settings-nav-hint {
    display: none;
  }
  .settings-section {
    padding: 18px 16px;
  }
  .settings-avatar-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .settings-shell-title {
    font-size: 22px;
  }
}

/* ===========================================================================
   PR XIV — Alerts panel inside Settings -> Notifications
   The alerts panel (Feed Subscriptions + Triggered Alerts + Recent Activity)
   is mounted via renderAlertsTab("settings-alerts-content"). Existing
   .alerts-* styles from the old surface still apply because the rendered
   markup is the same; the wrappers below only fix spacing inside the
   settings card and give the card header a + New alert affordance.
   =========================================================================== */
.settings-alerts-card .settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.settings-alerts-card .settings-card-title {
  margin: 0;
}
.settings-alerts-new-btn {
  flex: 0 0 auto;
}
.settings-alerts-content {
  margin-top: 8px;
}
.settings-alerts-content .alerts-section-block {
  margin-top: 16px;
}
.settings-alerts-content .alerts-section-block:first-child {
  margin-top: 4px;
}
.settings-alerts-content .alerts-loading {
  padding: 18px 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .settings-alerts-card .settings-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ===== Verra Research ledger =============================================
 * Merged sector › subsector research ledger. Industry primers render
 * inline as the first row of their subsector group; the Watchlist-only
 * toggle hides covered tickers not on the active watchlist, with
 * per-subsector reveal hints. Built exclusively on the shared tokens so the
 * dark and parchment themes both work without extra rules.
 *
 * 2026-08-03 reskin: a note row leads with its THESIS, not its metadata.
 * The row is a 5-column grid — ticker | copy | date·version | delta | open —
 * whose copy cell stacks the title over a company · takeaway line. Monospace
 * is confined to data (tickers, dates, versions, counts, deltas); everything
 * else is Inter. `align-items: baseline` aligns the right-hand data cells to
 * the title's first line rather than the row's center, which is what keeps a
 * two-line row from reading lopsided.
 *
 * `.research-notes-root` keeps its tight padding on purpose: the shared
 * `.surface` wrapper (redesign.css) already supplies 18px/18px/32px.
 */
.research-notes-root {
  max-width: 1104px;
  margin: 0 auto;
  padding: 6px 6px 22px;
}

/* --- Header row: title left, primer generator right ------------------- */
.rn-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rn-head .surface-header { padding: 0; min-width: 0; }
.rn-head .surface-header h2 {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.rn-head .surface-header .surface-sub {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 60ch;
}
.rn-gen { flex: none; }
.rn-gen-row { display: flex; gap: 8px; }
.rn-gen-input {
  width: 200px;
  padding: 8px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  outline: none;
}
.rn-gen-input:focus { border-color: var(--accent); }
.rn-gen-input::placeholder { color: var(--text-muted); }
.rn-gen-btn {
  padding: 8px 14px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  font-family: var(--font-sans);
}
.rn-gen-btn:hover { background: var(--accent-dim); }
.rn-gen-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 6px;
  text-align: right;
}

/* --- Toolbar: search + segmented chips + watchlist toggle -------------- */
.rn-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.rn-search-wrap {
  flex: 1 1 260px;
  max-width: 520px;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}
/* Inline magnifier. `pointer-events: none` so the whole field stays clickable;
   the input's 31px left padding is what clears it. */
.rn-search-icon {
  position: absolute;
  left: 11px;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  pointer-events: none;
}
.rn-search {
  width: 100%;
  padding: 8px 12px 8px 31px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-sans);
}
.rn-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(30, 123, 255, 0.18);
}
.rn-search::placeholder { color: var(--text-muted); }
.rn-filters {
  display: inline-flex;
  flex: none;
  gap: 4px;
  padding: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.rn-filter {
  padding: 5px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 120ms ease, color 120ms ease;
}
.rn-filter:hover { color: var(--text-primary); }
.rn-filter.active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}
/* `flex: none` + a non-wrapping label: without both, the toggle shrinks below
   its content width in the wrapping toolbar and "only" paints outside the
   pill's rounded border. */
.rn-wl-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.rn-wl-toggle .rn-wl-star { color: var(--text-muted); font-size: 11px; }
.rn-wl-toggle .rn-wl-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.rn-wl-track {
  flex: none;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--border-light);
  position: relative;
  transition: background 0.15s ease;
}
.rn-wl-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: left 0.15s ease, background 0.15s ease;
}
.rn-wl-toggle.on {
  background: rgba(30, 123, 255, 0.12);
  border-color: var(--accent);
}
.rn-wl-toggle.on .rn-wl-star { color: var(--yellow); }
.rn-wl-toggle.on .rn-wl-label { color: var(--text-primary); }
.rn-wl-toggle.on .rn-wl-track { background: var(--accent); }
.rn-wl-toggle.on .rn-wl-knob { left: 13px; background: #ffffff; }

/* --- Sector group ------------------------------------------------------ */
.rn-sector { margin-bottom: 30px; }
.rn-sector-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-light);
}
.rn-sector-name {
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.rn-sector-spacer { flex: 1; }
.rn-sector-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* --- Subsector running head --------------------------------------------- */
.rn-sub { margin-top: 15px; }
.rn-subhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 3px;
}
.rn-subhead-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.rn-subhead-rule { flex: 1; border-bottom: 1px solid var(--border); }
.rn-subhead-count {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* --- The row grid, shared by note and primer rows ------------------------ */
.rn-row,
.rn-primer-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 96px 66px 54px;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px 9px 8px;
  border-bottom: 1px solid var(--bg-surface-alt);
  border-left: 2px solid transparent;
}
.rn-row { cursor: pointer; }
.rn-row:hover { background: var(--bg-surface); }
.rn-cell-ticker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
/* Off-watchlist rows dim as a whole rather than per-cell, so the row reads as
   one de-emphasized unit instead of two greyed words. */
.rn-row-off { opacity: 0.72; }
.rn-row-off .rn-cell-ticker { color: var(--text-muted); }

.rn-cell-copy { min-width: 0; }
.rn-title-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.rn-title {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The primer leads its group, so its title carries more weight than a note's. */
.rn-title-primer {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rn-subline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}
.rn-company {
  flex: none;
  font-size: 11.5px;
  color: var(--text-muted);
}
.rn-sep { flex: none; color: var(--border-light); }
.rn-takeaway {
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rn-tag {
  flex: none;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 5px;
}
.rn-add {
  flex: none;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.rn-add:hover { color: var(--text-primary); border-color: var(--text-muted); }
.rn-cell-meta {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}
.rn-cell-age {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.rn-cell-delta {
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--text-muted);
}
.rn-cell-delta.rn-pos { color: var(--green); }
.rn-cell-delta.rn-neg { color: var(--red); }
.rn-open {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 0;
  text-align: right;
}
.rn-open:hover { color: #4f9eff; }

/* --- Industry primer rows ------------------------------------------------ */
/* A flat tint plus the accent rule reads as structure. The pre-reskin
   left-to-right gradient read as decoration at this row density. */
.rn-primer-row {
  border-left: 2px solid var(--accent);
  background: rgba(30, 123, 255, 0.07);
  cursor: pointer;
}
.rn-chip {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border-radius: 3px;
  padding: 3px 2px;
  text-align: center;
}
.rn-chip-primer {
  color: var(--accent);
  border: 1px solid rgba(30, 123, 255, 0.4);
}
.rn-chip-noprimer {
  color: var(--text-muted);
  border: 1px dashed var(--border-light);
}
/* The empty slot is a passive coverage indicator: two columns, no background,
   no action. */
.rn-primer-row-empty {
  grid-template-columns: 62px minmax(0, 1fr);
  padding: 8px 10px 8px 8px;
  background: none;
  border-left: 2px solid transparent;
  cursor: default;
}
.rn-noprimer-label {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Hidden-row hint -------------------------------------------------------- */
.rn-hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 10px 7px 8px;
  border-bottom: 1px solid var(--bg-surface-alt);
  border-left: 2px solid transparent;
}
.rn-hint-label { font-size: 11px; color: var(--text-muted); }
.rn-hint-show {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 0;
  text-align: left;
}
.rn-hint-show:hover { color: #4f9eff; }

/* --- Orphan industries strip -------------------------------------------------- */
.rn-orphans { margin-top: 4px; }
.rn-orphans-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-light);
}
.rn-orphans-title {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-secondary);
}
.rn-orphans-spacer { flex: 1; }
.rn-orphans-count {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
/* auto-fill rather than a fixed 3-up: the strip reflows to 2 and then 1 column
   instead of crushing its titles at narrow widths. */
.rn-orphans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 26px;
  margin-top: 8px;
}
.rn-orphan {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--bg-surface-alt);
  cursor: pointer;
}
.rn-orphan-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rn-orphan-sector { color: var(--text-muted); font-size: 10.5px; }
.rn-orphan-ago {
  flex: none;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.rn-orphan .rn-open { flex: none; }

/* --- Footer + empty states ------------------------------------------------------ */
.rn-footer {
  margin-top: 20px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.rn-empty {
  padding: 28px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.rn-empty-loading { font-style: italic; }

/* --- Responsive ----------------------------------------------------------------- */
/* The row drops columns rather than letting the title cell collapse. At 720px
   the takeaway goes and the subline falls back to the company name alone; at
   520px the date/version column goes too. */
@media (max-width: 720px) {
  .rn-head {
    flex-direction: column;
    gap: 12px;
  }
  .rn-gen-meta { text-align: left; }
  .rn-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  /* `flex: none` matters: once the toolbar is a column, the `1 1 260px`
     basis is read on the MAIN axis and inflates the search field to 260px
     TALL, leaving a gap above and below it. */
  .rn-search-wrap { flex: none; width: 100%; max-width: none; }
  .rn-filters { width: 100%; justify-content: stretch; }
  .rn-filter { flex: 1; }
  .rn-wl-toggle { justify-content: center; }
  .rn-sep,
  .rn-takeaway { display: none; }
  .rn-orphans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rn-row,
  .rn-primer-row {
    grid-template-columns: 56px minmax(0, 1fr) 62px 50px;
  }
  .rn-primer-row-empty { grid-template-columns: 56px minmax(0, 1fr); }
  .rn-cell-meta { display: none; }
}

/* =========================================================================
   Legal Consent Gate modal (PR legal-1, 2026-06-30)
   - Blurs the app while open (html.legal-gate-active selector).
   - Theme-aware via CSS custom properties shared with the parent app.
   - Locked centered with safe-area mobile insets.
   ========================================================================= */
html.legal-gate-active body > *:not(.legal-gate-modal):not(script) {
  filter: blur(4px);
  pointer-events: none !important;
  user-select: none;
}
html.legal-gate-active { overflow: hidden; }

.legal-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 24px)) 16px 24px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html[data-theme="light"] .legal-gate-modal {
  background: rgba(15, 23, 42, 0.32);
}
.legal-gate-modal.open { display: flex; }

.legal-gate-card {
  width: 100%;
  max-width: 560px;
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-theme="light"] .legal-gate-card {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
  box-shadow: 0 24px 80px rgba(15,23,42,0.18);
}

.legal-gate-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.legal-gate-intro {
  margin: 0 0 16px;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.55;
}
html[data-theme="light"] .legal-gate-intro { color: #4b5563; }

.legal-gate-callout {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.legal-gate-callout strong { color: #fcd34d; }
html[data-theme="light"] .legal-gate-callout {
  background: #fef3c7;
  color: #78350f;
  border-color: #b45309;
}
html[data-theme="light"] .legal-gate-callout strong { color: #92400e; }

.legal-gate-doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 18px;
}

.legal-gate-doc {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #1f2937;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-size: 14px;
}
html[data-theme="light"] .legal-gate-doc {
  border-color: #e5e7eb;
  background: #f9fafb;
}

.legal-gate-doc-title {
  font-weight: 600;
  color: inherit;
}

.legal-gate-doc-version {
  font-size: 12px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .legal-gate-doc-version { color: #6b7280; }

.legal-gate-doc-link {
  font-size: 13px;
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid rgba(96,165,250,0.35);
  border-radius: 6px;
}
.legal-gate-doc-link:hover {
  background: rgba(96,165,250,0.10);
  color: #93c5fd;
}
html[data-theme="light"] .legal-gate-doc-link {
  color: #1d4ed8;
  border-color: rgba(29,78,216,0.30);
}
html[data-theme="light"] .legal-gate-doc-link:hover {
  background: rgba(29,78,216,0.08);
  color: #1e3a8a;
}

.legal-gate-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: inherit;
  margin: 6px 0 10px;
  cursor: pointer;
  line-height: 1.45;
}
.legal-gate-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #3b82f6;
  cursor: pointer;
}

.legal-gate-error {
  min-height: 16px;
  font-size: 13px;
  color: #fca5a5;
  margin-bottom: 8px;
}
html[data-theme="light"] .legal-gate-error { color: #b91c1c; }

.legal-gate-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.legal-gate-submit {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.05s ease;
  min-width: 180px;
}
.legal-gate-submit:hover:not(:disabled) {
  opacity: 0.92;
}
.legal-gate-submit:disabled {
  background: #334155;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.85;
}
html[data-theme="light"] .legal-gate-submit:disabled {
  background: #e5e7eb;
  color: #9ca3af;
}

.legal-gate-footnote {
  margin: 14px 0 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}
html[data-theme="light"] .legal-gate-footnote { color: #9ca3af; }

@media (max-width: 540px) {
  .legal-gate-card { padding: 22px 18px 18px; border-radius: 12px; }
  .legal-gate-card h2 { font-size: 18px; }
  .legal-gate-doc { grid-template-columns: 1fr auto; row-gap: 6px; }
  .legal-gate-doc-link { grid-column: 1 / -1; justify-self: start; }
}

/* ===== Drilldown Banner (PR drilldown-notif, 2026-06-30) ==========================
 *
 * Persistent top-of-app banner shown while a one-step drilldown is running.
 * Lives directly under <body> so it survives view switches. Gradient matches
 * .legal-gate-submit (#3b82f6 → #8b5cf6).
 */
.drilldown-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9500; /* below legal-gate-modal (10000) but above all surface chrome */
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  animation: drilldownBannerSlideIn 0.25s ease-out;
}
.drilldown-banner[hidden] {
  display: none;
}
.drilldown-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
}
.drilldown-banner__text {
  flex: 1 1 auto;
  letter-spacing: 0.005em;
}
.drilldown-banner__text strong {
  font-weight: 700;
  color: #ffffff;
}
.drilldown-banner__spinner {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: drilldownBannerSpin 0.9s linear infinite;
}
.drilldown-banner--retry {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
@keyframes drilldownBannerSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes drilldownBannerSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 540px) {
  .drilldown-banner {
    font-size: 13px;
  }
  .drilldown-banner__inner {
    padding: 10px 14px;
    gap: 10px;
  }
}

/* ===== Billing section (Stripe subscriptions) — 2026-07-16 ===== */
.settings-billing-status { display: flex; flex-direction: column; gap: 8px; }
.settings-billing-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.settings-billing-plan { font-size: 1.05rem; font-weight: 600; }
.settings-billing-badge {
  font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  background: var(--surface-2, #eef0f4); color: var(--text-2, #444); text-transform: none;
}
.settings-billing-badge-active,
.settings-billing-badge-trialing { background: #e6f6ec; color: #1a7f43; }
.settings-billing-badge-past_due,
.settings-billing-badge-unpaid,
.settings-billing-badge-canceled { background: #fdecec; color: #b3261e; }
.settings-billing-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 8px;
}
.settings-billing-plan-card { display: flex; flex-direction: column; gap: 8px; }
.settings-billing-plan-title { margin: 0; font-size: 1rem; font-weight: 600; }
.settings-billing-plan-card .settings-btn { margin-top: auto; }
.settings-billing-refcode { margin-top: 18px; }

/* ===== Verra Tutorial tab (PR tutorial-tab, 2026-07-23) =====
 * Guided 9-chapter product tour: chapter rail, scrim/subject/target
 * spotlight, step card, frozen tab simulations, completion overlay.
 * Token-only colors so the parchment light theme works for free.
 * Rendered entirely by tutorial.js into [data-tutorial-root].
 */
.tut-root { min-height: calc(100vh - 120px); }
.tut-loading {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}
.tut-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: -18px -18px -32px;   /* bleed to the surface edges */
  min-height: calc(100vh - 60px);
}

/* --- Chapter rail ------------------------------------------------------- */
.tut-rail {
  width: 232px;
  flex: none;
  background: var(--bg-header);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tut-eyebrow {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--accent);
  text-transform: uppercase;
}
.tut-rail-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: 5px;
}
.tut-prog {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 9px 0 5px;
  overflow: hidden;
}
.tut-prog-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s ease;
}
.tut-prog-fill--full { background: var(--green); }
/* Rail small text sits on --bg-header; --text-muted lands ~4:1 there, under
   the 4.5:1 minimum for text this size. --text-secondary clears it. */
.tut-rail-caption { font-size: 9.5px; color: var(--text-secondary); }
/* Nine chapters with descriptions plus the expanded chapter need ~670px of
   list; below an ~880px viewport the list scrolls (accepted in the 8a
   design call) with the Restart/Exit foot pinned. */
.tut-rail-list { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.tut-rail-ch {
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}
.tut-rail-ch--active {
  background: rgba(30, 123, 255, 0.08);
  border-color: rgba(30, 123, 255, 0.3);
  padding: 7px 8px;
}
.tut-rail-ch-row { display: flex; align-items: center; gap: 7px; }
.tut-rail-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
}
.tut-rail-ch--active .tut-rail-num { color: var(--accent); }
.tut-rail-ch--full .tut-rail-num { color: var(--green); }
.tut-rail-name { font-size: 11px; color: var(--text-secondary); flex: 1; }
.tut-rail-ch--active .tut-rail-name { font-weight: 600; color: var(--text-primary); }
/* 8a: the chapter description, indented past the number so the numbers still
   read as a column and the rail can be scanned by name alone. */
.tut-rail-desc {
  margin: 2px 0 0 21px;
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tut-rail-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
}
.tut-rail-count.has-done { color: var(--text-primary); }
.tut-rail-ch--full .tut-rail-count { color: var(--green); }
.tut-rail-steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 2px;
  padding-left: 2px;
}
.tut-rail-step {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.tut-ring {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
}
.tut-ring--current { border-color: var(--accent); }
.tut-ring--current span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.tut-ring--done {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.tut-rail-step-label { font-size: 10px; color: var(--text-secondary); }
.tut-rail-step--current .tut-rail-step-label { font-weight: 600; color: var(--text-primary); }
.tut-rail-step--done .tut-rail-step-label { color: var(--text-muted); text-decoration: line-through; }
.tut-rail-foot {
  margin-top: auto;
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.tut-rail-link {
  font-size: 10px;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}
.tut-rail-link:hover { color: var(--text-secondary); }

/* --- Main area / chapter header / stage --------------------------------- */
.tut-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 10px;
  position: relative;
}
.tut-chead { position: relative; z-index: 3; margin-bottom: 12px; }
.tut-chvalue {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 3px;
}
.tut-stage { position: relative; flex: none; }
.tut-scrim {
  position: absolute;
  inset: -6px;
  z-index: 2;
  border-radius: 10px;
  pointer-events: none;
}

/* --- Spotlight slots ----------------------------------------------------- */
.tut-slot { display: block; }
.tut-subject {
  position: relative;
  z-index: 3;
  background: var(--bg-primary);
  border-radius: 8px;
}
.tut-subject--flat { background: transparent; }
.tut-target {
  position: relative;
  z-index: 5;
  background: var(--bg-primary);
  border-radius: 8px;
  outline: 1.5px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(30, 123, 255, 0.18), 0 0 32px rgba(30, 123, 255, 0.35);
  cursor: pointer;
}
.tut-target--row { background: var(--bg-surface); border-radius: 4px; }
.tut-target--chip { border-radius: 6px; }
button.tut-target { cursor: pointer; }
span.tut-slot, button.tut-slot { display: inline-block; }

/* --- Step card ------------------------------------------------------------ */
.tut-card-wrap {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 12px;
  z-index: 10;
  margin-top: 14px;
  pointer-events: none;
}
.tut-card-wrap--bl { justify-content: flex-start; }
/* 'tr' docks the card top-right of the stage (News chapter steps 2-3 point at
   content along the bottom edge). Absolute against .tut-main, below the
   chapter header, so the sticky bottom default never applies. */
.tut-card-wrap--tr {
  position: absolute;
  top: 52px;
  right: 18px;
  left: auto;
  bottom: auto;
  margin-top: 0;
}
.tut-card {
  width: 334px;
  max-width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  padding: 14px 16px;
  pointer-events: auto;
}
.tut-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tut-card-ch {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}
.tut-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.tut-card-body { font-size: 11px; line-height: 1.55; color: var(--text-secondary); }
.tut-card-outcome { font-size: 10px; color: var(--text-muted); margin-top: 7px; }
.tut-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tut-card-hint {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tut-card-back { padding: 5px 11px; font-size: 10.5px; }

/* --- Shared sim primitives ------------------------------------------------ */
.tut-col { display: flex; flex-direction: column; gap: 10px; }
.tut-rowflex { display: flex; align-items: center; gap: 8px; }
.tut-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tut-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tut-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tut-panel, .tut-panel8 {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.tut-panel8 { border-radius: 8px; }
.tut-inner {
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tut-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.tut-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tut-mut { color: var(--text-muted); }
.tut-sub { color: var(--text-muted); font-size: 9px; white-space: nowrap; display: block; }
.tut-pos { color: var(--green); }
.tut-neg { color: var(--red); }
.tut-warn { color: var(--yellow); }
.tut-tick {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.tut-tickbig {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.tut-tickhuge {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.tut-co { display: block; font-size: 11px; color: var(--text-primary); }
.tut-statv {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tut-stat { padding: 7px 10px; }
.tut-numcell {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tut-end { justify-self: end; text-align: right; }
.tut-chip {
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  cursor: default;
}
button.tut-chip { cursor: pointer; }
.tut-chip--on {
  color: var(--accent);
  background: rgba(30, 123, 255, 0.12);
  border-color: rgba(30, 123, 255, 0.45);
}
.tut-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.tut-pillbtn {
  padding: 4px 12px;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
  display: inline-block;
  font-family: var(--font-sans);
}
button.tut-pillbtn { cursor: pointer; }
.tut-pillbtn--active {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.tut-btnp {
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-sans);
}
.tut-btnp:hover { background: var(--accent-dim); }
.tut-btng {
  padding: 4px 10px;
  font-size: 9.5px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  white-space: nowrap;
  display: inline-block;
  font-family: var(--font-sans);
}
button.tut-btng { cursor: pointer; }
.tut-btng--hot { color: var(--text-primary); border-color: var(--accent); }
.tut-tag {
  padding: 3px 8px;
  font-size: 9.5px;
  color: var(--text-secondary);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
  font-family: var(--font-sans);
}
button.tut-tag { cursor: pointer; }
.tut-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-surface-alt);
  flex: none;
}
.tut-seg > span {
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
}
.tut-seg-on { background: var(--accent); color: #ffffff !important; }
.tut-badge {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
}
.tut-badge--pos { color: var(--green); background: var(--green-dim); }
.tut-badge--neg { color: var(--red); background: var(--red-dim); }
.tut-badge--warn { color: var(--yellow); background: var(--yellow-dim); }
.tut-pillinfo {
  padding: 3px 8px;
  font-size: 9.5px;
  color: var(--text-primary);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  display: inline-block;
}
.tut-fakeinput {
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
.tut-toast {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--green-dim);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--text-primary);
}

/* --- Sim tables ----------------------------------------------------------- */
.tut-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-header);
}
.tut-thead {
  display: grid;
  gap: 0 10px;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border);
}
.tut-thead > span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.tut-trow {
  display: grid;
  gap: 0 10px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.tut-trow--total { background: var(--bg-surface-alt); border-bottom: none; }
.tut-tgroup {
  padding: 4px 12px;
  background: var(--bg-surface-alt);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
}
.tut-secchip {
  justify-self: start;
  padding: 1px 6px;
  font-size: 9px;
  color: var(--accent);
  border: 1px solid rgba(30, 123, 255, 0.35);
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}
.tut-score-win {
  color: var(--green);
  background: rgba(34, 197, 94, 0.1);
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.tut-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.tut-kv b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tut-ctx-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 9px;
}

/* --- Charts / gauges / bars ---------------------------------------------- */
.tut-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  padding: 6px 8px;
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tut-chartbar { flex: 1; background: var(--accent); border-radius: 1px; }
.tut-chartbar--dim { background: var(--text-muted); opacity: 0.55; }
.tut-gauge {
  position: relative;
  height: 6px;
  background: linear-gradient(to right, var(--red), var(--yellow), var(--green));
  border-radius: 3px;
  margin: 12px 0 4px;
  opacity: 0.85;
}
.tut-gauge-marker {
  position: absolute;
  top: -3px;
  width: 2.5px;
  height: 12px;
  background: var(--text-primary);
  border-radius: 2px;
}
.tut-tiltbar {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.tut-tiltbar > span { display: block; border-radius: 3px; }
.tut-beat { width: 16px; height: 6px; border-radius: 2px; display: inline-block; }
.tut-beat--y { background: var(--green); }
.tut-beat--n { background: var(--red); }

/* --- Compare tabs ---------------------------------------------------------- */
.tut-cmptabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.tut-cmptab {
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-block;
  border-radius: 6px 6px 0 0;
}
.tut-cmptab--active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-surface-alt);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.tut-cmptab.tut-target { background: var(--bg-surface-alt); color: var(--text-primary); }
.tut-cohort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(30, 123, 255, 0.14);
  border: 1px solid rgba(30, 123, 255, 0.45);
  border-radius: 999px;
}
.tut-cohort > span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg-surface-alt);
  color: var(--text-secondary);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tut-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: var(--text-secondary); }
.tut-swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); display: inline-block; }
.tut-swatch--dim { background: var(--text-muted); }
.tut-airow { display: flex; gap: 8px; margin-bottom: 5px; }
.tut-airow > span:last-child { font-size: 10.5px; color: var(--text-primary); line-height: 1.5; }
.tut-caselbl {
  flex: none;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  width: 38px;
}
.tut-case { font-size: 10.5px; color: var(--text-primary); line-height: 1.55; margin-bottom: 4px; }
.tut-note-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.tut-filter {
  display: inline-block;
  padding: 5px 10px;
  background: var(--bg-header);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.tut-earncard { padding: 10px 12px; }
.tut-reaction {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--red);
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 6px;
  padding: 6px 9px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.tut-modal-foot {
  font-size: 9.5px;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* --- Research ledger sim --------------------------------------------------- */
.tut-subhead { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.tut-subhead > span:first-child {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
}
.tut-subrule { flex: 1; height: 1px; background: var(--border); }
.tut-primerchip {
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--accent);
  background: rgba(30, 123, 255, 0.1);
  border: 1px solid rgba(30, 123, 255, 0.35);
  border-radius: 4px;
  white-space: nowrap;
}
.tut-ledrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px dashed var(--border);
}
.tut-hintrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: rgba(30, 123, 255, 0.04);
  border: 1px dashed rgba(30, 123, 255, 0.2);
  border-radius: 6px;
  margin: 2px 0;
}
.tut-ledfoot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}
.tut-pickrow {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.tut-pickrow > span:last-child { font-size: 10.5px; color: var(--text-primary); line-height: 1.5; }
.tut-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  flex: none;
}
.tut-dive-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 14px 16px;
}

/* --- Overlays (popup / modal / completion) --------------------------------- */
.tut-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 12, 0.5);
  border-radius: 10px;
}
.tut-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  padding: 16px 18px;
  max-width: calc(100% - 32px);
}
.tut-complete {
  position: absolute;
  inset: -6px;
  z-index: 20;
  display: flex;
  background: rgba(10, 14, 23, 0.78);
  border-radius: 10px;
  overflow-y: auto;
  padding: 16px 0;
}
.tut-complete-card {
  /* margin:auto centers on both axes AND degrades to scrollable (not
     clipped) when the card is taller than the stage — the partial screen's
     missed-chapter list can be. */
  margin: auto;
  width: 430px;
  max-width: calc(100% - 32px);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  padding: 28px 30px;
  text-align: center;
}
.tut-complete-logo { display: inline-block; margin-bottom: 16px; }
.tut-complete-logo .logo-wordmark { height: 20px; width: auto; display: inline-block; }
.tut-complete-logo .logo-wordmark--light { display: none; }
:root[data-theme="light"] .tut-complete-logo .logo-wordmark--dark { display: none; }
:root[data-theme="light"] .tut-complete-logo .logo-wordmark--light { display: inline-block; }
.tut-complete-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.tut-complete-line {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}
/* Partial completion (7a): an honest count, and the missed chapters become
   the offer. */
.tut-complete-card--partial { text-align: left; width: 470px; }
.tut-complete-card--partial .tut-complete-logo { display: none; }
.tut-complete-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.tut-complete-still {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 14px 0 6px;
}
.tut-complete-missed-list { display: flex; flex-direction: column; gap: 4px; }
.tut-complete-missed {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.tut-complete-missed:hover { border-color: var(--accent); }
.tut-complete-missed-name {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 62px;
}
.tut-complete-missed-desc {
  flex: 1;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tut-complete-missed-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-secondary);
}
.tut-complete-foot {
  margin-top: 14px;
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
}

/* --- Coverage ribbon -------------------------------------------------------- */
.tut-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* --- Nav badge --------------------------------------------------------------- */
.tut-nav-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: 2px;
}
.tut-nav-dot[hidden] { display: none; }

/* --- Set-a-password offer (auth.js, 12a) -------------------------------------
   Shown after a typed password bounced the user through Google/LinkedIn.
   Dismissible; reappears on every bounce. */
.auth-pw-offer {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
.auth-pw-offer-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.auth-pw-offer-btn {
  flex: none;
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 7px 13px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.auth-pw-offer-btn:hover { filter: brightness(1.1); }
.auth-pw-offer-x {
  flex: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
}
.auth-pw-offer-x:hover { color: var(--text-primary); }
@media (max-width: 640px) {
  .auth-pw-offer { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* --- Nav count (3c) ----------------------------------------------------------- */
.tut-nav-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(30, 123, 255, 0.14);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  vertical-align: 1px;
}
.tut-nav-count[hidden] { display: none; }

/* --- Tour entry strip / resume card / mobile pill (3c, 7a, 8b) ---------------- */
.tour-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}
.tour-strip-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.tour-strip-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent);
}
.tour-strip-lead {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.tour-strip-sub {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-strip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.tour-strip-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
}
.tour-strip-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.tour-strip-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tour-strip-btn--primary:hover { color: #fff; filter: brightness(1.1); }
.tour-strip-x {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}
.tour-strip-x:hover { color: var(--text-primary); }
/* 8b card variant (phones): the copy stacks and the actions wrap under it. */
@media (max-width: 700px) {
  .tour-strip, .tour-strip--resume {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }
  .tour-strip-copy { flex-direction: column; gap: 3px; }
  .tour-strip-sub { white-space: normal; }
  .tour-strip-actions { justify-content: flex-start; }
  .tour-strip-btn { padding: 9px 14px; font-size: 12.5px; }
}
/* The pill: what remains after "Not now" on a phone. Thumb-reach, above the
   content, carrying the same accent dot the desktop nav button uses. */
.tour-pill {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 900;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tour-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 700px) {
  .tour-pill { display: inline-flex; }
}

/* --- Mobile tour chrome (6a) --------------------------------------------------
   The step card becomes a bottom sheet (it always sits at the bottom, so the
   tour never covers the thing it is pointing at) and the chapter rail
   becomes a sheet pulled down from this header. Replaces the old stacked
   rail-above-content rule, which pushed the simulated tab off the first
   screen. Progress is always visible: hairline bar + "Coverage · 1 of 9". */
.tut-mhead { display: none; }
@media (max-width: 900px) {
  .tut-shell { flex-direction: column; margin: -12px -12px -32px; }
  .tut-shell > .tut-rail { display: none; }
  .tut-mhead {
    display: block;
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    margin: 0 -12px 10px;
  }
  .tut-mhead-prog { height: 2px; background: var(--border); }
  .tut-mhead-prog span { display: block; height: 100%; background: var(--accent); transition: width 0.2s ease; }
  .tut-mhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
  }
  .tut-mhead-ch {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    padding: 4px 0;
  }
  .tut-mhead-ch span { color: var(--text-secondary); }
  .tut-mhead-exit {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-family: var(--font-sans);
    cursor: pointer;
    padding: 4px 0;
  }
  .tut-mhead-exit:hover { color: var(--text-primary); }
  /* The rail, pulled down from the header as a sheet. */
  .tut-msheet { position: fixed; inset: 0; z-index: 60; }
  .tut-msheet-backdrop { position: absolute; inset: 0; background: rgba(5, 9, 17, 0.6); }
  .tut-msheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    max-height: 82dvh;
    overflow-y: auto;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-light);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
  .tut-msheet-panel .tut-rail { width: auto; border-right: none; }
  /* The step card as a bottom sheet: full-width, pinned, draggable-looking. */
  .tut-card-wrap,
  .tut-card-wrap--bl,
  .tut-card-wrap--tr {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 40;
    margin: 0;
    justify-content: stretch;
  }
  .tut-card {
    width: 100%;
    max-width: none;
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.5);
  }
  .tut-card::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-light);
    margin: 0 auto 10px;
  }
  /* Keep the sim visible above the pinned sheet. */
  .tut-main { padding-bottom: 190px; }
  .tut-grid3, .tut-grid4 { grid-template-columns: 1fr 1fr; }
}

/* === Calendar export / subscribe (calendar-export.js) ===
 *
 * 2026-08-18 redesign ("Sync to Calendar" handoff): fixed header + footer
 * with a scrollable body between them, grouped whole-row type toggles with
 * a live "N of 6 on" counter, and the live feed promoted above the one-shot
 * download. Colors map to the shared :root tokens; the handful of derived
 * dark values with no token (inset panel, group strip, pale accent text…)
 * are scoped custom properties on .calfeed-modal, remapped in one block for
 * the light (parchment) theme — same policy as the alerts panel overrides
 * (~line 8219): pale blues tuned for dark surfaces swap to --accent-dim on
 * cream. */
.calfeed-open-btn {
  margin-left: 8px;
}
#calfeed-overlay {
  background: radial-gradient(1100px 620px at 50% 28%, rgba(8, 12, 22, 0.82), rgba(5, 8, 15, 0.94));
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
@keyframes calfeedIn {
  from { opacity: 0; transform: translateY(14px) scale(0.984); }
  to { opacity: 1; transform: none; }
}
.calfeed-modal {
  --calfeed-inset: #0d1320;          /* inset panel bg, between --bg-primary and --bg-surface */
  --calfeed-strip: #121927;          /* group strip bg */
  --calfeed-row-hover: #131b2c;
  --calfeed-row-border: rgba(30, 41, 59, 0.55);
  --calfeed-detail: #8b93a7;         /* row detail text, checked */
  --calfeed-detail-off: #636c7c;     /* row detail text, unchecked */
  --calfeed-label-dim: #5b6575;      /* group strip text */
  --calfeed-faint: #4d5768;          /* counter, padlock */
  --calfeed-accent-text: #5CA2FF;    /* accent text on dark: icon strokes, link-chips, hover text */
  --calfeed-live-border: rgba(30, 123, 255, 0.32);
  --calfeed-hint-border: #2a3650;
  --calfeed-btn-primary-hover: #4090FF;

  max-width: 560px;
  max-height: calc(100vh - 48px);
  /* Centers in the overlay when short; auto margins collapse to 0 when the
   * viewport is shorter than the modal, so nothing clips off-screen. */
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 24px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  animation: calfeedIn 0.3s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
:root[data-theme="light"] .calfeed-modal {
  --calfeed-inset: var(--bg-primary);
  --calfeed-strip: var(--bg-surface-alt);
  --calfeed-row-hover: var(--bg-hover);
  --calfeed-row-border: var(--border);
  --calfeed-detail: var(--text-secondary);
  --calfeed-detail-off: var(--text-muted);
  --calfeed-label-dim: var(--text-muted);
  --calfeed-faint: var(--text-muted);
  --calfeed-accent-text: var(--accent-dim);
  --calfeed-live-border: rgba(30, 123, 255, 0.45);
  --calfeed-hint-border: var(--border-light);
  --calfeed-btn-primary-hover: var(--accent-dim);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .calfeed-modal { animation: none; }
}

/* -- header ------------------------------------------------------------ */
.calfeed-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px 24px;
  border-bottom: 1px solid var(--border);
}
.calfeed-head-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 123, 255, 0.12);
  border: 1px solid rgba(30, 123, 255, 0.3);
  color: var(--calfeed-accent-text);
}
.calfeed-head-text {
  flex: 1;
  min-width: 0;
}
.calfeed-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.calfeed-sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.calfeed-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.calfeed-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* -- scrollable body (slim scrollbar mirrors .pt-note-frame-wrap) ------ */
.calfeed-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calfeed-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.calfeed-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.calfeed-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--calfeed-faint);
}

/* -- event-type rows --------------------------------------------------- */
.calfeed-cat-list {
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--calfeed-inset);
}
.calfeed-group-label {
  padding: 7px 14px 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--calfeed-label-dim);
  background: var(--calfeed-strip);
  border-top: 1px solid var(--border);
}
.calfeed-group:first-child .calfeed-group-label {
  border-top: none;
}
.calfeed-cat {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 12px;
  align-items: start;
  padding: 10px 14px;
  cursor: pointer;
  border-top: 1px solid var(--calfeed-row-border);
  transition: background 0.12s;
}
.calfeed-cat:hover {
  background: var(--calfeed-row-hover);
}
/* The real checkbox: visually hidden but still focusable and form-real —
 * calendar-export.js reads #calfeed-type-<key> ids off these inputs. */
.calfeed-cat input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.calfeed-cat-box {
  width: 16px;
  height: 16px;
  border-radius: 4.5px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  transition: background 0.12s, border-color 0.12s;
}
.calfeed-cat-box svg {
  opacity: 0;
  transition: opacity 0.12s;
}
.calfeed-cat input:checked ~ .calfeed-cat-box {
  background: var(--accent);
  border-color: var(--accent);
}
.calfeed-cat input:checked ~ .calfeed-cat-box svg {
  opacity: 1;
}
.calfeed-cat input:focus-visible ~ .calfeed-cat-box {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 123, 255, 0.18);
}
.calfeed-cat-text {
  min-width: 0;
}
.calfeed-cat-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-secondary);
  transition: color 0.12s;
}
.calfeed-cat-detail {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 2px;
  color: var(--calfeed-detail-off);
  transition: color 0.12s;
  text-wrap: pretty;
}
.calfeed-cat input:checked ~ .calfeed-cat-text .calfeed-cat-name {
  color: var(--text-primary);
}
.calfeed-cat input:checked ~ .calfeed-cat-text .calfeed-cat-detail {
  color: var(--calfeed-detail);
}

/* -- watchlist select -------------------------------------------------- */
.calfeed-select-wrap {
  position: relative;
}
.calfeed-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--calfeed-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 34px 9px 12px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.calfeed-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 123, 255, 0.18);
}
.calfeed-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

/* -- delivery cards ---------------------------------------------------- */
.calfeed-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calfeed-card {
  border: 1px solid var(--border);
  background: var(--calfeed-inset);
  border-radius: 9px;
  padding: 13px 16px 14px;
}
.calfeed-card-live {
  border-color: var(--calfeed-live-border);
  background: linear-gradient(180deg, rgba(30, 123, 255, 0.09), rgba(30, 123, 255, 0.03));
}
.calfeed-card-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.calfeed-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.calfeed-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--calfeed-accent-text);
  border: 1px solid rgba(30, 123, 255, 0.4);
  background: rgba(30, 123, 255, 0.1);
  border-radius: 99px;
  padding: 2px 8px;
}
.calfeed-card-desc {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.calfeed-snapshot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.calfeed-snapshot-text {
  flex: 1;
  min-width: 180px;
}

/* -- buttons ----------------------------------------------------------- */
.calfeed-btn-primary {
  margin-top: 12px;
  background: var(--accent);
  border: 1px solid transparent;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.calfeed-btn-primary:hover { background: var(--calfeed-btn-primary-hover); }
.calfeed-btn-primary:active { background: var(--accent-dim); }
.calfeed-btn {
  flex: 0 0 auto;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.calfeed-btn:hover {
  border-color: var(--accent);
  color: var(--calfeed-accent-text);
}

/* -- live feed url + links --------------------------------------------- */
.calfeed-url-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.calfeed-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  text-overflow: ellipsis;
}
.calfeed-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.calfeed-link {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--calfeed-accent-text);
  border: 1px solid rgba(30, 123, 255, 0.3);
  border-radius: 7px;
  padding: 6px 11px;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
}
.calfeed-link:hover {
  background: rgba(30, 123, 255, 0.12);
  color: var(--calfeed-accent-text);
  text-decoration: none;
}
.calfeed-regen {
  margin-left: auto;
  background: none;
  border: none;
  padding: 6px 2px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11.5px;
  cursor: pointer;
  transition: color 0.12s;
}
.calfeed-regen:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}
.calfeed-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 11px;
  padding: 8px 10px;
  border: 1px dashed var(--calfeed-hint-border);
  border-radius: 7px;
}

/* -- per-card statuses ------------------------------------------------- */
.calfeed-card-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  margin-top: 9px;
}
#calfeed-dl-status {
  margin-top: 8px;
}
.calfeed-status-ok { color: var(--green); }
.calfeed-status-err { color: var(--red); }
.calfeed-status-dim { color: var(--text-secondary); }

/* -- footer ------------------------------------------------------------ */
.calfeed-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px 24px 15px;
  border-top: 1px solid var(--border);
}
.calfeed-foot-lock {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--calfeed-faint);
}
.calfeed-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Overlay chips on the earnings month grid */
.ecal-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
}
.ecal-extra-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  cursor: default;
}
.ecal-extra-chip.ecal-catalyst {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.ecal-extra-chip.ecal-industry {
  background: rgba(245, 158, 11, 0.10);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.30);
}
.ecal-extra-more {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  cursor: default;
}
.ecal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}
.ecal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary);
}
.ecal-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.ecal-swatch-pre { background: rgba(59, 130, 246, 0.35); }
.ecal-swatch-post { background: rgba(34, 197, 94, 0.35); }
.ecal-swatch-catalyst { background: rgba(168, 85, 247, 0.35); }
.ecal-swatch-industry { background: rgba(245, 158, 11, 0.30); }

/* ===== Private popup: Research tab ===== */
.pd-research-note {
  max-height: 600px;
  overflow-y: auto;
  padding: 0 4px;
}
.pd-research-note section {
  margin-bottom: 24px;
}
.pd-research-note .section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark, #0d9488);
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pd-research-note table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pd-research-note th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}
.pd-research-note td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pd-research-note .confidence {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}
.pd-research-note .conf-disclosed { background: #d4edda; color: #155724; }
.pd-research-note .conf-estimated { background: #fff3cd; color: #856404; }
.pd-research-note .conf-inferred { background: #cce5ff; color: #004085; }
.pd-research-note .conf-unavailable { background: #f8d7da; color: #721c24; }
.pd-research-note .scenario-bear { color: #ef4444; font-weight: 600; }
.pd-research-note .scenario-base { color: #14b8a6; font-weight: 600; }
.pd-research-note .scenario-bull { color: #10b981; font-weight: 600; }
.pd-research-note .callout {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  font-size: 12px;
}
.pd-research-note .expectations-bar {
  background: linear-gradient(135deg, #fffbeb, #e6f7ff);
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 14px;
  margin: 12px 0;
  font-size: 12px;
}
.pd-research-note .sources-list {
  font-size: 11px;
  color: var(--text-muted);
}
.pd-research-note .sources-list a {
  color: var(--accent, #14b8a6);
  text-decoration: none;
}
.pd-research-note .sources-list a:hover {
  text-decoration: underline;
}
.pd-research-note .disclaimer {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 12px;
  margin-top: 20px;
  font-size: 11px;
  color: #78350f;
}

/* ==========================================================================
   POPUP v2 — period customization, valuation history, deep-dive controls
   --------------------------------------------------------------------------
   Every colour here is a token, never a literal. The design reference was
   dark-only, and its hex values were lifted FROM this file in the first
   place, so mapping them back to the variables is a restoration rather than
   a translation — and it is what keeps :root[data-theme="light"] working.

   The two exceptions are the factor-bar score colours (#3b82f6 / #f59e0b),
   which already live as literals in popup-deep-dive.js::getFactorBarColor
   and are set inline on the element; adding CSS twins for them would create
   a second source of truth for the same four thresholds.
   ========================================================================== */

/* Section header: title left, controls right. Used by Performance
   Comparison, Valuation History, Fundamentals & Valuation and the comps
   table, so a control row sits in the same place in all four. */
.popup-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.popup-section-head .popup-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 0 0 auto;
}
.popup-section-head .chart-period-btns,
.popup-section-head .vp-popover-anchor {
  margin-left: auto;
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* --- Micro-labels ("Metric", "Rolling window", "Chart range") ----------- */
.vh-micro-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Valuation History ------------------------------------------------- */
.vh-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.vh-select {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 9px;
  min-width: 190px;
  cursor: pointer;
}
.vh-select:hover { border-color: var(--border-light); }
.vh-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vh-select option:disabled { color: var(--text-muted); }

.vh-custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  margin-left: auto;
  justify-content: flex-end;
}
.vh-custom-range[hidden] { display: none; }
.vh-date {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
}
.vh-date:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vh-date-sep { color: var(--text-muted); }
/* The native date picker's own chrome follows color-scheme, not our vars. */
:root[data-theme="light"] .vh-date { color-scheme: light; }
:root:not([data-theme="light"]) .vh-date { color-scheme: dark; }

.vh-chart-area { margin-bottom: 0; }

.vh-stat-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.vh-stat-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.vh-stat-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.vh-caption {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.6;
}
.vh-caption[hidden] { display: none; }
.vh-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 16px 0;
  line-height: 1.6;
}

/* --- Checkbox popovers ("Periods ▾", "Columns ▾") ----------------------- */
.vp-popover-anchor { position: relative; }
.vp-trigger {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.vp-trigger:hover { color: var(--text-primary); border-color: var(--border-light); }
.vp-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.vp-popover {
  position: absolute;
  right: 0;
  top: 32px;
  z-index: 30;
  width: 216px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.vp-popover[hidden] { display: none; }
.vp-popover-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.vp-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 5px;
  cursor: pointer;
}
.vp-chip:hover { background: var(--bg-hover); }
.vp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vp-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}
.vp-chip-on .vp-check { background: var(--accent); border-color: var(--accent); }
.vp-chip-label { font-size: 12px; color: var(--text-primary); }
.vp-est-pill {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
}
.vp-popover-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.vp-reset {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}
.vp-reset:hover { text-decoration: underline; }
.vp-saved-hint { font-size: 10px; color: var(--text-muted); }

/* --- Fundamentals & Valuation tables ----------------------------------- */
.vp-table-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.vp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 14px;
}
.vp-table th,
.vp-table td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  font-size: 12px;
}
.vp-table thead th {
  background: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: right;
}
.vp-table .vp-metric-head,
.vp-table .vp-metric {
  width: 26%;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.vp-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* 'NM' and '—' are different facts: not meaningful vs not fetched. Both are
   muted, so neither competes with a real number for attention. */
.vp-table td.vp-cell-nm,
.vp-table td.vp-cell-empty { color: var(--text-muted); }
.vp-est-mark,
.vp-est-mark-inline { color: var(--accent); }
.vp-est-mark { margin-left: 3px; font-size: 9px; }
.vp-footnote {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.6;
}

/* --- Quant factor rows without the proprietary value label -------------- */
.factor-row-nolabel {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
}

/* --- Outperformance: two named control groups, one chart ---------------- */
.outperf-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.outperf-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The rule that stops two pill rows reading as one contradictory multi-select. */
.outperf-control-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex: none;
}
.outperf-headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.outperf-headline .outperf-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.outperf-headline .outperf-label { font-size: 11px; color: var(--text-muted); }
#outperf-note[hidden] { display: none; }

/* A dynamic column set cannot keep the fixed min-width the 11-column table
   needed; let it size to whatever the user chose to show. */
.comps-table-dynamic { min-width: 0; }

/* The period-invariant metric grid restored inside Fundamentals & Valuation:
   market cap, EV, EV/EBITDA, FCF yield, margins, FCF, next-quarter estimates.
   These do not vary by period column, so the Periods picker does not gate
   them -- see buildInvariantMetricsGrid in popup.js. */
.vp-invariant-grid { margin-bottom: 16px; }