:root {
    --brand: #1f3a5f;
    --brand-light: #3a6ea5;
    --accent: #d97706;
    --success-soft: #d1fae5;
    --warning-soft: #fef3c7;
    --danger-soft: #fee2e2;
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-700: #374151;
}

body {
    background: var(--neutral-50);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--neutral-700);
}

.navbar-brand { color: #fff !important; }

.navbar-nav .nav-link.active {
    color: #fff !important;
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
}

.stat-card {
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    padding: 1.25rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.stat-card .stat-number { font-size: 2.2rem; font-weight: 600; color: var(--brand); line-height: 1.2; }
.stat-card .stat-label { color: #6b7280; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

.competitor-card {
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    padding: 1.25rem;
    height: 100%;
    transition: border-color 0.15s ease;
}
.competitor-card:hover { border-color: var(--brand-light); }
.competitor-card h5 { margin-bottom: 0.25rem; }

.locked-card { background: var(--neutral-50); opacity: 0.7; }
.locked-card:hover { border-color: var(--neutral-200); }
.locked-card h5::after, .locked-card h6::after {
    content: "\F3E6"; /* bi-lock-fill */
    font-family: "bootstrap-icons", sans-serif;
    font-size: 0.8rem;
    color: var(--neutral-700);
    margin-left: 0.4rem;
    opacity: 0.6;
}
.locked-note { color: var(--neutral-700); }
.locked-note a { font-weight: 600; }
.competitor-card .locked-note, .gtm-card .locked-note {
    display: block;
    border-top: 1px dashed var(--neutral-200);
    padding-top: 0.5rem;
}

.score-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #eff6ff;
    color: #1e40af;
}
.score-pill.high { background: #fef3c7; color: #92400e; }
.score-pill.mid { background: #e0f2fe; color: #075985; }
.score-pill.low { background: #ede9fe; color: #5b21b6; }

/* A section being re-fetched by the pager. Theme-agnostic on purpose — it dims whatever is
   underneath rather than painting a colour, so it needs no dark-mode override. */
.section-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.12s ease-in;
}

.new-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #dcfce7;
    color: #166534;
}

/* Marks a news item that was pulled from a company's RSS/Atom feed (vs. AI-researched news),
   so the two are distinguishable at a glance. RSS orange, readable in both themes. */
.rss-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #fef3e2;
    color: #b45309;
}

/* CompanyChangeEvent pills on the competitor detail page's Changes section — see ChangeKind.
   .change-added deliberately shares .new-badge's green rather than inventing a second "this is new"
   color; .change-updated gets its own amber, distinct from .rss-badge's meaning even though the hue
   is similar. */
.change-added {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #dcfce7;
    color: #166534;
}
.change-updated {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: #ffedd5;
    color: #9a3412;
}
.change-diff {
    font-size: 0.82rem;
    margin-top: 0.25rem;
}
.change-diff .old-val {
    text-decoration: line-through;
    color: var(--neutral-400, #9ca3af);
}
.change-diff .arrow {
    margin: 0 0.35rem;
    color: var(--neutral-400, #9ca3af);
}
.change-diff .new-val {
    font-weight: 600;
}

.cat-badge {
    font-size: 0.7rem;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}
.cat-platform { background: #dbeafe; color: #1e3a8a; }
.cat-payment { background: #d1fae5; color: #065f46; }
.cat-ai { background: #ede9fe; color: #5b21b6; }
.cat-other { background: #f3f4f6; color: #374151; }

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--neutral-200);
}

.section-title.section-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.section-toggle .toggle-icon {
    font-size: 0.95rem;
    color: var(--neutral-400, #9ca3af);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.section-toggle.collapsed .toggle-icon { transform: rotate(-90deg); }

/* ══════════════════════════════════════════════════════════════════════
   Head-to-head matrix — heatmap page (compare/matrix.html)
   Ported from the standalone heatmap mockup design so the real page
   matches it exactly. Fully scoped under .hm-page — its own surface/ink/
   sequential/diverging tokens live there, not on :root, so they can't
   bleed into the rest of the app's (different) palette. Dark mode keys
   off the app's own [data-bs-theme="dark"] toggle rather than
   prefers-color-scheme, since the app already resolves that into an
   explicit attribute — unlike a standalone artifact, there's no third
   "unset" state to account for here.
   ══════════════════════════════════════════════════════════════════════ */
.hm-page {
    --hm-surface: #fcfcfb;
    --hm-surface-2: #f2f1ee;
    --hm-plane: #f9f9f7;
    --hm-ink: #0b0b0b;
    --hm-ink-2: #52514e;
    --hm-ink-muted: #898781;
    --hm-grid-line: #e1e0d9;
    --hm-baseline: #c3c2b7;
    --hm-ring: rgba(11, 11, 11, 0.10);
    --hm-focus-ring: rgba(11, 11, 11, 0.55);
    --hm-accent: #2a78d6;

    --hm-seq-0: #cde2fb; --hm-seq-0-ink: #0b0b0b;
    --hm-seq-1: #9ec5f4; --hm-seq-1-ink: #0b0b0b;
    --hm-seq-2: #6da7ec; --hm-seq-2-ink: #0b0b0b;
    --hm-seq-3: #2a78d6; --hm-seq-3-ink: #0b0b0b;
    --hm-seq-4: #1c5cab; --hm-seq-4-ink: #ffffff;
    --hm-seq-5: #0d366b; --hm-seq-5-ink: #ffffff;

    --hm-div-strong-blue: #2a78d6; --hm-div-strong-blue-ink: #0b0b0b;
    --hm-div-weak-blue: #9ec5f4;   --hm-div-weak-blue-ink: #0b0b0b;
    --hm-div-tie: #f0efec;         --hm-div-tie-ink: #0b0b0b;
    --hm-div-weak-red: #f6cccb;    --hm-div-weak-red-ink: #0b0b0b;
    --hm-div-strong-red: #e34948;  --hm-div-strong-red-ink: #0b0b0b;

    background: var(--hm-plane);
    color: var(--hm-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    padding: 28px;
    border-radius: 12px;
}
[data-bs-theme="dark"] .hm-page {
    --hm-surface: #1a1a19;
    --hm-surface-2: #232322;
    --hm-plane: #0d0d0d;
    --hm-ink: #ffffff;
    --hm-ink-2: #c3c2b7;
    --hm-ink-muted: #898781;
    --hm-grid-line: #2c2c2a;
    --hm-baseline: #383835;
    --hm-ring: rgba(255, 255, 255, 0.10);
    --hm-focus-ring: rgba(255, 255, 255, 0.65);
    --hm-accent: #3987e5;

    --hm-seq-0: #0d366b; --hm-seq-0-ink: #ffffff;
    --hm-seq-1: #184f95; --hm-seq-1-ink: #ffffff;
    --hm-seq-2: #256abf; --hm-seq-2-ink: #ffffff;
    --hm-seq-3: #3987e5; --hm-seq-3-ink: #0b0b0b;
    --hm-seq-4: #86b6ef; --hm-seq-4-ink: #0b0b0b;
    --hm-seq-5: #cde2fb; --hm-seq-5-ink: #0b0b0b;

    --hm-div-strong-blue: #3987e5; --hm-div-strong-blue-ink: #0b0b0b;
    --hm-div-weak-blue: #184f95;   --hm-div-weak-blue-ink: #ffffff;
    --hm-div-tie: #383835;         --hm-div-tie-ink: #ffffff;
    --hm-div-weak-red: #6b2f2e;    --hm-div-weak-red-ink: #ffffff;
    --hm-div-strong-red: #e66767;  --hm-div-strong-red-ink: #0b0b0b;
}

.hm-page * { box-sizing: border-box; }
.hm-eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hm-accent); font-weight: 700; margin: 0 0 10px; }
.hm-h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 8px; font-weight: 700; color: var(--hm-ink); text-wrap: balance; }
.hm-lede { font-size: 0.98rem; color: var(--hm-ink-2); max-width: 70ch; margin: 0; }
.hm-lede code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; background: var(--hm-surface-2); padding: 1px 5px; border-radius: 4px; }

.hm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 24px; }
.hm-stat { background: var(--hm-surface); border: 1px solid var(--hm-ring); border-radius: 10px; padding: 14px 16px; }
.hm-stat .k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hm-ink-muted); margin-bottom: 6px; }
.hm-stat .v { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; color: var(--hm-ink); }
.hm-stat .v small { font-size: 0.6em; font-weight: 600; color: var(--hm-ink-muted); margin-left: 2px; }
.hm-stat .sub { font-size: 0.78rem; color: var(--hm-ink-2); margin-top: 3px; }
@media (max-width: 820px) { .hm-stats { grid-template-columns: repeat(2, 1fr); } }

.hm-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hm-grid-line); }
.hm-control-group { display: flex; flex-direction: column; gap: 6px; }
.hm-control-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hm-ink-muted); }
.hm-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hm-chip { font-size: 0.8rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hm-baseline); background: transparent; color: var(--hm-ink-2); cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s; }
.hm-chip[aria-pressed="true"] { background: var(--hm-ink); color: var(--hm-surface); border-color: var(--hm-ink); font-weight: 600; }
.hm-chip:focus-visible { outline: 2px solid var(--hm-focus-ring); outline-offset: 2px; }
.hm-seg { display: inline-flex; border: 1px solid var(--hm-baseline); border-radius: 8px; overflow: hidden; }
.hm-seg button { font-family: inherit; font-size: 0.82rem; padding: 6px 14px; border: none; background: var(--hm-surface); color: var(--hm-ink-2); cursor: pointer; }
.hm-seg button + button { border-left: 1px solid var(--hm-baseline); }
.hm-seg button[aria-pressed="true"] { background: var(--hm-ink); color: var(--hm-surface); font-weight: 600; }
.hm-seg button:focus-visible { outline: 2px solid var(--hm-focus-ring); outline-offset: -2px; }
.hm-view-toggle-btn { font-family: inherit; font-size: 0.82rem; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--hm-baseline); background: var(--hm-surface); color: var(--hm-ink-2); cursor: pointer; }
.hm-view-toggle-btn:hover { color: var(--hm-ink); }
.hm-view-toggle-btn:focus-visible { outline: 2px solid var(--hm-focus-ring); outline-offset: 2px; }

/* Top scroll buttons — a visible, clickable way to pan a wide matrix that doesn't depend on a
   viewer noticing the browser's own horizontal scrollbar, which sits below however tall the table
   happens to be and is easy to miss. Disabled state (via updateScrollButtons() in the page script)
   is the only indicator of scroll position, so it has to read clearly at a glance. */
.hm-scroll-controls { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.hm-scroll-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--hm-baseline); background: var(--hm-surface); color: var(--hm-ink-2);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: background .12s, color .12s;
}
.hm-scroll-btn:hover:not(:disabled) { background: var(--hm-surface-2); color: var(--hm-ink); }
.hm-scroll-btn:focus-visible { outline: 2px solid var(--hm-focus-ring); outline-offset: 2px; }
.hm-scroll-btn:disabled { opacity: 0.35; cursor: default; }

.hm-grid-wrap { overflow-x: auto; border: 1px solid var(--hm-grid-line); border-radius: 10px; background: var(--hm-surface); position: relative; }
.hm-grid { display: grid; width: max-content; }
.hm-corner { position: sticky; left: 0; top: 0; z-index: 3; background: var(--hm-surface); border-bottom: 1px solid var(--hm-grid-line); border-right: 1px solid var(--hm-grid-line); display: flex; align-items: flex-end; padding: 8px 10px 8px; font-size: 0.68rem; color: var(--hm-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hm-colhead { position: sticky; top: 0; z-index: 2; background: var(--hm-surface); border-bottom: 1px solid var(--hm-grid-line); padding: 6px 4px 8px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 118px; min-width: 58px; }
.hm-colhead.ours { background: var(--hm-surface-2); }
.hm-colhead .name-wrap { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; overflow: visible; }
.hm-colhead .name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.76rem; font-weight: 600; white-space: nowrap; color: var(--hm-ink); max-height: 92px; overflow: hidden; text-overflow: ellipsis; }
.hm-colhead.ours .name { color: var(--hm-accent); }
.hm-rowgroup { grid-column: 1 / -1; position: sticky; left: 0; background: var(--hm-plane); border-top: 1px solid var(--hm-grid-line); border-bottom: 1px solid var(--hm-grid-line); padding: 5px 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-ink-muted); width: max-content; min-width: 100%; }
.hm-featcell { position: sticky; left: 0; z-index: 1; background: var(--hm-surface); border-bottom: 1px solid var(--hm-grid-line); border-right: 1px solid var(--hm-grid-line); padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; min-width: 190px; max-width: 190px; }
.hm-featcell .fname { font-size: 0.83rem; font-weight: 600; color: var(--hm-ink); line-height: 1.25; }
.hm-cell { border-bottom: 1px solid var(--hm-grid-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; padding: 4px 3px; cursor: default; position: relative; }
.hm-cell .lvl { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 0.92rem; font-weight: 700; }
.hm-cell:focus-visible { outline: 2px solid var(--hm-focus-ring); outline-offset: -2px; z-index: 2; }
.hm-cell.hovered { outline: 2px solid var(--hm-ink); outline-offset: -2px; z-index: 2; }
/* "Always shown" notes mode — the note stays out of flow (and the grid's rows stay their normal
   compact height) unless #hmGrid carries .notes-always, matching the "On hover" toggle default. Rows
   grow to fit whichever cell in that row has the longest note (grid auto-sizing), which is the whole
   point of this being an opt-in mode rather than the default. */
.hm-cell .note { display: none; font-size: 0.62rem; line-height: 1.2; text-align: center; color: inherit; opacity: 0.8; word-break: break-word; }
.hm-grid.notes-always .hm-cell .note { display: block; }

.hm-scorehead { display: flex; align-items: center; justify-content: center; min-width: 58px; border-bottom: 2px solid var(--hm-grid-line); background: var(--hm-surface-2); padding: 6px 4px; }
.hm-scorehead-label { position: sticky; left: 0; z-index: 1; background: var(--hm-surface-2); border-right: 1px solid var(--hm-grid-line); border-bottom: 2px solid var(--hm-grid-line); padding: 8px 10px; font-size: 0.68rem; color: var(--hm-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; min-width: 190px; max-width: 190px; }
.hm-scoretile { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.hm-scoretile .n { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 0.86rem; font-weight: 700; }
.hm-scoretile .bar { width: 70%; height: 4px; border-radius: 2px; background: var(--hm-grid-line); overflow: hidden; }
.hm-scoretile .bar > span { display: block; height: 100%; background: var(--hm-seq-5); border-radius: 2px; }

.hm-legend { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--hm-ink-2); }
.hm-legend .ramp { display: flex; border-radius: 5px; overflow: hidden; border: 1px solid var(--hm-ring); }
.hm-legend .ramp span { width: 26px; height: 18px; }
.hm-legend .end { font-size: 0.74rem; color: var(--hm-ink-muted); }

/* #hmTooltip sits outside .hm-page in the DOM (it's a position:fixed overlay, appended once at the
   end of body rather than nested where it's used), so it can't reach the --hm-* custom properties
   that only exist on .hm-page and its descendants — var(--hm-ink) etc. would resolve to nothing there
   and leave the background transparent. Fixed dark-bubble colors instead, independent of page theme
   (a floating tooltip reading as a dark chip regardless of light/dark host theme is the same choice
   the app's other floating popovers already make, not a special case for this one). */
#hmTooltip { position: fixed; pointer-events: none; background: #1f2937; color: #f9fafb; border-radius: 8px; padding: 10px 12px; font-size: 0.8rem; max-width: 260px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4); z-index: 1055; opacity: 0; transition: opacity .08s; }
#hmTooltip.show { opacity: 1; }
#hmTooltip .tt-val { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 700; }
#hmTooltip .tt-sub { color: #f9fafb; opacity: 0.72; font-size: 0.76rem; margin-top: 2px; }
#hmTooltip .tt-note { margin-top: 6px; opacity: 0.85; font-size: 0.76rem; line-height: 1.4; }

.hm-table-wrap { overflow-x: auto; border: 1px solid var(--hm-grid-line); border-radius: 10px; background: var(--hm-surface); }
.hm-data-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.hm-data-table caption { text-align: left; padding: 10px 14px; font-size: 0.78rem; color: var(--hm-ink-muted); }
.hm-data-table th, .hm-data-table td { padding: 7px 10px; border-bottom: 1px solid var(--hm-grid-line); text-align: right; white-space: nowrap; }
.hm-data-table th:first-child, .hm-data-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--hm-surface); }
.hm-data-table thead th { background: var(--hm-surface-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hm-ink-muted); font-weight: 600; }
.hm-data-table td { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.hm-data-table td .val { display: inline-block; }
/* Same "On hover" / "Always shown" split as the heatmap grid's .hm-cell .note — hidden and out of
   flow by default so hovering a value cell pops the shared #hmTooltip instead (see showTooltip's
   own state.notes === "always" guard, which suppresses that tooltip once notes are inline here). */
.hm-data-table td .note { display: none; font-size: 0.72rem; line-height: 1.3; color: var(--hm-ink-muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: normal; margin-top: 2px; }
.hm-data-table.notes-always td:not(:first-child) { white-space: normal; text-align: left; min-width: 160px; }
.hm-data-table.notes-always td .note { display: block; }

.hm-hidden { display: none !important; }
.hm-foot { margin-top: 16px; font-size: 0.78rem; color: var(--hm-ink-muted); }
.hm-advanced { margin-top: 22px; }
.hm-advanced summary { cursor: pointer; font-size: 0.85rem; color: var(--hm-ink-2); }

.advantage { background: var(--success-soft); border-left: 3px solid #10b981; padding: 0.6rem 0.8rem; border-radius: 4px; margin-bottom: 0.5rem; }
.disadvantage { background: var(--danger-soft); border-left: 3px solid #ef4444; padding: 0.6rem 0.8rem; border-radius: 4px; margin-bottom: 0.5rem; }
.parity { background: var(--warning-soft); border-left: 3px solid #f59e0b; padding: 0.6rem 0.8rem; border-radius: 4px; margin-bottom: 0.5rem; }

.exec-row, .investor-row, .roadmap-row { padding: 0.6rem 0; border-bottom: 1px solid var(--neutral-100); }
.exec-row:last-child, .investor-row:last-child, .roadmap-row:last-child { border-bottom: none; }

/* Positioning statement mad-libs — the inline inputs sit inline with the sentence like Feature.name
   would in the report's read-only version, so they're sized to their content, not a fixed column. */
.pos-statement { font-size: 1.05rem; }
.pos-blank {
    display: inline-block;
    width: 14em;
    max-width: 100%;
    border: none;
    border-bottom: 2px dashed var(--brand-light);
    background: transparent;
    color: var(--brand);
    font-weight: 600;
    padding: 0 0.2rem;
}
.pos-blank:focus { outline: none; border-bottom-color: var(--accent); }
.pos-blank::placeholder { color: #9ca3af; font-weight: 400; }

/* Research assistant chat — user turns right-aligned/brand-tinted, assistant turns left-aligned on
   the neutral card background, following the same left/right convention as any chat UI. */
.chat-msg { max-width: 80%; margin-bottom: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 10px; }
.chat-who { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; margin-bottom: 0.15rem; }
.chat-body { white-space: pre-wrap; }
.chat-user { margin-left: auto; background: var(--brand); color: #fff; }
.chat-assistant { margin-right: auto; background: white; border: 1px solid var(--neutral-200); }

/* Research readiness bars on the project dashboard. */
.readiness-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.readiness-label { width: 140px; flex-shrink: 0; color: #6b7280; }
.readiness-row .progress { height: 8px; }
.readiness-pct { width: 40px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280; }

.gtm-card {
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
/* News summary text — FeedParser preserves paragraph/line breaks from the source HTML as blank-line-
   separated text (see FeedParser.htmlToPlainText), so this needs `pre-line` wherever a summary is
   rendered or the breaks collapse right back into one run-on paragraph. */
.news-summary-text {
    white-space: pre-line;
}
/* News card description — capped so one long feed article summary can't blow a card out to several
   times its neighbors' height in the grid. */
.news-summary-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}
.news-summary-clamp.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.news-summary-toggle { font-size: 0.8rem; }
.gtm-type {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: var(--brand);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

/* ── Dark theme ──────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --neutral-50:  #0f172a;
    --neutral-100: #1e293b;
    --neutral-200: #334155;
    --neutral-700: #e2e8f0;
    --success-soft: #064e3b;
    --warning-soft: #78350f;
    --danger-soft:  #7f1d1d;
}

[data-bs-theme="dark"] body {
    background: var(--neutral-50);
    color: var(--neutral-700);
}

[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .competitor-card,
[data-bs-theme="dark"] .gtm-card {
    background: var(--neutral-100);
    border-color: var(--neutral-200);
}
[data-bs-theme="dark"] .locked-card { background: var(--neutral-50); }

[data-bs-theme="dark"] .stat-card .stat-number { color: #93c5fd; }
[data-bs-theme="dark"] .stat-card .stat-label  { color: #94a3b8; }

[data-bs-theme="dark"] .section-title {
    color: #93c5fd;
    border-bottom-color: var(--neutral-200);
}

[data-bs-theme="dark"] .score-pill            { background: #1e3a8a; color: #93c5fd; }
[data-bs-theme="dark"] .score-pill.high       { background: #78350f; color: #fcd34d; }
[data-bs-theme="dark"] .score-pill.mid        { background: #0c4a6e; color: #7dd3fc; }
[data-bs-theme="dark"] .score-pill.low        { background: #3b0764; color: #c4b5fd; }
[data-bs-theme="dark"] .new-badge             { background: #14532d; color: #86efac; }
[data-bs-theme="dark"] .rss-badge             { background: #451a03; color: #fdba74; }
[data-bs-theme="dark"] .change-added          { background: #14532d; color: #86efac; }
[data-bs-theme="dark"] .change-updated        { background: #7c2d12; color: #fdba74; }

[data-bs-theme="dark"] .cat-platform { background: #1e3a8a; color: #93c5fd; }
[data-bs-theme="dark"] .cat-payment  { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .cat-ai       { background: #3b0764; color: #c4b5fd; }
[data-bs-theme="dark"] .cat-other    { background: #374151; color: #d1d5db; }

[data-bs-theme="dark"] .advantage    { background: #064e3b; border-left-color: #10b981; }
[data-bs-theme="dark"] .disadvantage { background: #7f1d1d; border-left-color: #ef4444; }
[data-bs-theme="dark"] .parity       { background: #78350f; border-left-color: #f59e0b; }

[data-bs-theme="dark"] .exec-row,
[data-bs-theme="dark"] .investor-row,
[data-bs-theme="dark"] .roadmap-row  { border-bottom-color: var(--neutral-200); }

[data-bs-theme="dark"] .gtm-type { background: var(--brand-light); }

[data-bs-theme="dark"] .pos-blank { color: #93c5fd; border-bottom-color: #3a6ea5; }
[data-bs-theme="dark"] .pos-blank::placeholder { color: #6b7280; }

[data-bs-theme="dark"] .chat-assistant { background: var(--neutral-100); border-color: var(--neutral-200); }