/* Stock Dashboard - Dark Theme */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Content protection ──────────────────────────────────────
   Member content: text does not highlight and copy does not fire except
   where typing happens or an explicit copy affordance exists. The copy
   buttons use the clipboard API, which none of this touches; their
   execCommand fallback selects a temporary textarea, which stays
   selectable below. Friction for casual scraping, not a wall.
   dashboard.js cancels copy/cut events under the same rules. */
body {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable="true"], [contenteditable=""],
.allow-select, .allow-select * {
    -webkit-user-select: text;
    user-select: text;
}
/* News in a popped-out window can be highlighted and copied (Kyle,
   2026-10-05): Recent News and the Newsfeed, headlines and story text. Links
   there don't drag, so a drag across a headline selects it; workspace.js
   keeps a click that ends a selection from opening the story. */
.ws-popout-mode .ws-news, .ws-popout-mode .ws-news *,
.ws-popout-mode .ws-bzfeed, .ws-popout-mode .ws-bzfeed * {
    -webkit-user-select: text;
    user-select: text;
}
.ws-popout-mode .ws-news a, .ws-popout-mode .ws-bzfeed a { -webkit-user-drag: none; }

:root {
    /* Catalyst marketing palette */
    --bg-primary: #0c0c0e;
    --bg-secondary: #131316;
    --bg-tertiary: #18181c;
    --border-color: #27272a;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --accent-blue: #4a9eff;
    --accent-green: #4ade80;
    --accent-red: #f87171;
    --accent-yellow: #eab308;
    --accent-purple: #a78bfa;
    --radius: 10px;
    --radius-sm: 8px;
    --accent-soft: rgba(74, 158, 255, 0.14);
    --accent-glow: rgba(74, 158, 255, 0.08);
    --surface-glass: rgba(19, 19, 22, 0.88);
    --font-mono: 'Fira Code', ui-monospace, monospace;
    --chart-grid: rgba(255, 255, 255, 0.04);
    --chart-ma-10: var(--accent-blue);
    --chart-ma-20: var(--accent-purple);
    --chart-ma-50: var(--accent-yellow);
    --chart-ma-200: var(--text-muted);
    /* The command line's accent. Its own token because no existing one means
       "the accent" in every theme: --accent-blue is it almost everywhere, but
       bloomberg maps that to structural panel chrome and carries its accent on
       --text-secondary instead. One indirection here beats the overlay picking
       a colour that is right in four themes and invisible in the fifth. */
    --cmd-accent: var(--accent-blue);
}

/* ── Instrument Theme ─────────────────────────────────────────
   Cool slate grounds with a single teal accent, carried over from the theme
   taxonomy pages so the vault and those reviews read as one system.

   The gain/loss pair is blue/red rather than the conventional green/red:
   green vs red is the worst pair on screen for the ~8% of men with red-green
   colour deficiency, and on a screener the sign of a number is the one thing
   that must never depend on hue alone. Both poles validate clear of the CVD
   floor against this theme's background (ΔE 19.2 protan, target >= 8).       */
[data-theme="instrument"] {
    --bg-primary:    #0c1014;
    --bg-secondary:  #141a20;
    --bg-tertiary:   #1b222a;
    --border-color:  #242d36;
    --text-primary:  #e8edf2;
    --text-secondary:#a6b1bd;
    --text-muted:    #6f7c88;
    --accent-blue:   #57d4ce;
    --accent-green:  #3987e5;
    --accent-red:    #e66767;
    --accent-yellow: #e3b565;
    --accent-purple: #93abe9;
    --accent-soft:   rgba(87, 212, 206, 0.14);
    --accent-glow:   rgba(87, 212, 206, 0.08);
    --surface-glass: rgba(20, 26, 32, 0.9);
    --chart-grid:    rgba(255, 255, 255, 0.05);
}
[data-theme="instrument"] .panel-header h2,
[data-theme="instrument"] h1 {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -0.01em;
}

/* ── Bloomberg Terminal Theme ─────────────────────────────── */
/* ── Bloomberg Theme ──────────────────────────────────────────
   Rebuilt 2026-09-09 against a clean product render rather than a photograph
   of physical screens. The photo misled me twice and both errors are worth
   naming, because they are the difference between this and the article:

   The ground is BLACK. A terminal photographs blue -- ambient light on glass,
   camera white balance -- but it renders #000. An almost-black navy looks
   plausible in isolation and wrong the moment it sits next to the real thing.

   Amber is the DOMINANT colour, not a label accent. Constituent lists, ticker
   names, monitor rows: amber on black is most of the screen. The correction I
   made earlier -- headers to cyan, "a terminal is not monochrome" -- pushed it
   the wrong way. A terminal is mostly amber, with white for the value that
   matters, green and red for sign, and yellow for the field under the cursor.

   The one genuinely blue thing is the CHROME: the toolbar strips above each
   panel, a desaturated slate clearly lighter than the content it caps. That is
   the only place blue belongs, and it is structural, never data. */
[data-theme="bloomberg"] {
    --bg-primary:    #000000;
    --bg-secondary:  #0a0b0d;
    --bg-tertiary:   #14171a;
    --border-color:  #2b333c;
    --text-primary:  #ffffff;
    --text-secondary:#ff9e18;
    --text-muted:    #96703a;

    /* Panel chrome. Structural slate, not a data colour -- the toolbar bars
       in the reference sit here, lighter than the black they cap.
       Neutral grey, not blue-tinted: the strips read as chrome, and a
       blue cast on them is the same photograph error as the navy. */
    --bbg-chrome:    #404244;
    --bbg-chrome-hi: #515355;
    --accent-blue:   var(--bbg-chrome);

    --accent-green:  #2fbf3f;
    --accent-red:    #f5333f;
    --accent-yellow: #ffd400;
    --accent-purple: #c77dff;
    --chart-grid: rgba(255, 255, 255, 0.05);
    /* Not --bbg-chrome: that is structural and would leave the prompt and the
       selected row indistinguishable from the panel edge. */
    --cmd-accent: var(--text-secondary);
}
[data-theme="bloomberg"] body {
    font-family: 'Fira Code', ui-monospace, 'Consolas', monospace;
    /* A terminal has no ligatures: these are tickers and numbers, not code. */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0, "tnum" 1;
}
/* The chrome bar. Slate ground, white label -- the strip that caps a panel. */
[data-theme="bloomberg"] .panel-header {
    background: var(--bbg-chrome);
    border-bottom: 1px solid #223;
}
[data-theme="bloomberg"] .panel-header h2 {
    color: #ffffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Striping on black is a whisper, not a step. The reference separates rows by
   alignment and colour, not by banding. */
[data-theme="bloomberg"] .data-table tbody tr:nth-child(odd):not(.row-highlight-green):not(.row-highlight-blue):not(.row-new):not(.row-pinned) {
    background: #000000;
}
[data-theme="bloomberg"] .data-table tbody tr:nth-child(even):not(.row-highlight-green):not(.row-highlight-blue):not(.row-new):not(.row-pinned) {
    background: #07080a;
}
[data-theme="bloomberg"] .data-table tbody tr:hover:not(.row-highlight-green):not(.row-highlight-blue):not(.row-new):not(.row-pinned) {
    background: #1b2027;
}
/* Column heads are amber, like the terminal's own. Not cyan -- that was the
   overcorrection, and it made every header shout at once. */
[data-theme="bloomberg"] .data-table th {
    color: #ff9e18;
    background: #000000;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
[data-theme="bloomberg"] .data-table td.cell-ticker {
    color: #ff9e18;
    font-weight: 600;
}
[data-theme="bloomberg"] .tab-btn { color: var(--text-muted); }
[data-theme="bloomberg"] .tab-btn.active {
    color: #ffffff;
    border-bottom-color: #ff9e18;
}
[data-theme="bloomberg"] .db-header-row th,
[data-theme="bloomberg"] .db-filter-row th {
    color: #ff9e18;
}
/* The group band is chrome, matching the panel strip above it. */
[data-theme="bloomberg"] .db-group-row th {
    color: #ffffff;
    background: var(--bbg-chrome);
    border-bottom-color: var(--bbg-chrome-hi);
    font-weight: 700;
    letter-spacing: 0.06em;
}
[data-theme="bloomberg"] .db-averages-row td {
    color: #ffd400;
    border-bottom-color: var(--border-color);
}


/* ── Gray Theme ───────────────────────────────────────────── */
[data-theme="gray"] {
    --bg-primary:    #000000;
    --bg-secondary:  #0d0d0d;
    --bg-tertiary:   #1a1a1a;
    --border-color:  #2a2a2a;
    --text-primary:  #e8e8e8;
    --text-secondary:#aaaaaa;
    --text-muted:    #555555;
    --accent-blue:   #4499ff;
    --accent-green:  #00cc00;
    --accent-red:    #ff2200;
    --accent-yellow: #ffcc00;
    --accent-purple: #cc44ff;
}
[data-theme="gray"] body {
    font-family: 'Fira Code', monospace;
}

/* ── Matrix Theme (Black & Green) ────────────────────────── */
[data-theme="matrix"] {
    --bg-primary:    #000000;
    --bg-secondary:  #080808;
    --bg-tertiary:   #111111;
    --border-color:  #1a2a1a;
    --text-primary:  #b0d0b0;
    --text-secondary:#80b080;
    --text-muted:    #3a5a3a;
    --accent-blue:   #50c878;
    --accent-green:  #50c878;
    --accent-red:    #e04040;
    --accent-yellow: #a0c860;
    --accent-purple: #60b090;
}
[data-theme="matrix"] body {
    font-family: 'Courier New', monospace;
}
[data-theme="matrix"] .panel-header {
    background: #0c0c0c;
    border-bottom-color: #1a2a1a;
}
[data-theme="matrix"] .panel-header h2 {
    color: #80b080;
}
[data-theme="matrix"] .data-table tbody tr:nth-child(odd):not(.row-highlight-green):not(.row-highlight-blue):not(.row-new):not(.row-pinned) {
    background: #000000;
}
[data-theme="matrix"] .data-table tbody tr:nth-child(even):not(.row-highlight-green):not(.row-highlight-blue):not(.row-new):not(.row-pinned) {
    background: #060806;
}
[data-theme="matrix"] .data-table tbody tr:hover:not(.row-highlight-green):not(.row-highlight-blue):not(.row-new):not(.row-pinned) {
    background: #121a12;
}
[data-theme="matrix"] .data-table th {
    color: #80b080;
    background: #080808;
}
[data-theme="matrix"] .data-table td.cell-ticker {
    color: #50c878;
}
[data-theme="matrix"] .tab-btn {
    color: #80b080;
}
[data-theme="matrix"] .tab-btn.active {
    color: #000000;
    background: #50c878;
    border-bottom-color: #50c878;
}
[data-theme="matrix"] .db-header-row th,
[data-theme="matrix"] .db-group-row th,
[data-theme="matrix"] .db-filter-row th,
[data-theme="matrix"] .db-averages-row td {
    color: #80b080;
}
[data-theme="matrix"] .db-group-row th {
    border-bottom-color: #50c878;
}
[data-theme="matrix"] .db-averages-row td {
    border-bottom-color: #50c878;
    color: #50c878;
}
[data-theme="matrix"] .header {
    background: #000000;
    border-bottom-color: #1a2a1a;
}
[data-theme="matrix"] .market-pulse {
    background: #000000;
}
[data-theme="matrix"] ::-webkit-scrollbar-thumb {
    background: #1a2a1a;
}
[data-theme="matrix"] ::-webkit-scrollbar-thumb:hover {
    background: #00cc33;
}
[data-theme="matrix"] ::-webkit-scrollbar-track {
    background: #000000;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

/* Catalyst default theme — marketing site polish */
[data-theme=""] body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

[data-theme=""] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
    background-size: 28px 28px;
}

[data-theme=""] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 100% 0%, var(--accent-glow), transparent 55%),
        radial-gradient(ellipse 40% 35% at 0% 100%, rgba(74, 158, 255, 0.04), transparent 50%);
}

.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 12px;
    gap: 12px;
}

[data-theme=""] .dashboard {
    position: relative;
    z-index: 1;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Wrap instead of forcing a minimum page width. The nav and controls
       together need ~1500px, and with nowrap that became the body's width on
       EVERY narrower screen -- 1366x768 laptops overflowed by 134px, an iPad
       in landscape by 476, and a phone in landscape by 550, where the browser
       then shrink-to-fit the whole page to about 60%. Nothing changes at
       1500px and up, because there it already fits on one line. */
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: none;
    border-radius: 6px;
    position: relative;
    z-index: 20;
}

[data-theme=""] .header {
    background: var(--surface-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.header h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Branding */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    height: 36px;
    width: auto;
}

.brand-text {
    font-family: 'Fira Code', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 2px;
    text-transform: lowercase;
}

.header-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    /* min-width:0 so this can actually shrink inside the header's flex row;
       without it the controls keep their content width and push the wrap
       decision out to the page instead of taking it themselves. */
    min-width: 0;
}

.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.refresh-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.3s;
}

.dot.fresh {
    background: var(--accent-green);
    animation: pulse 2s infinite;
}

.dot.aging {
    background: var(--accent-yellow);
    animation: none;
}

.dot.stale {
    background: var(--accent-red);
    animation: pulse 1s infinite;
}

.dot.refreshing {
    background: var(--accent-blue);
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.btn-refresh {
    padding: 8px 16px;
    background: var(--accent-blue);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-refresh:hover {
    background: #3d8ae8;
}

/* ============= Market Pulse Ticker Tape ============= */
.market-pulse {
    overflow: hidden;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-left: -12px;
    margin-right: -12px;
    width: 100vw;
}

.market-pulse::before,
.market-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.market-pulse::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-secondary), transparent);
}

.market-pulse::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-secondary), transparent);
}

.market-pulse-track {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: pulseScroll 30s linear infinite;
    padding: 0 20px;
}

.market-pulse-track:hover {
    animation-play-state: paused;
}

@keyframes pulseScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.pulse-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: default;
}

.pulse-symbol {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.pulse-price {
    color: var(--text-secondary);
}

.pulse-change {
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 3px;
}

.pulse-change.positive {
    color: var(--accent-green);
    background: rgba(34, 197, 94, 0.1);
}

.pulse-change.negative {
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

.pulse-change.neutral {
    color: var(--text-muted);
}

/* Panels Grid */
/* ==================== HOME PAGE ==================== */
.home-page {
    flex: 1;
    overflow-y: auto;
    padding: 32px 15%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: var(--bg-primary);
}
.home-hero { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.home-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.home-welcome {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.home-name {
    color: var(--accent-blue);
    font-weight: 600;
    font-style: italic;
}
.home-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.home-date { font-size: 0.8rem; color: var(--text-muted); }
.home-session-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.04em;
}
.home-session-badge.pre-market  { background: rgba(74,158,255,0.15); color: #4a9eff; }
.home-session-badge.market-open { background: rgba(61,214,140,0.15); color: #3dd68c; }
.home-session-badge.after-hours { background: rgba(245,166,35,0.15);  color: #f5a623; }
.home-session-badge.closed      { background: rgba(255,255,255,0.07); color: var(--text-muted); }

/* Index cards */
.home-index-cards {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.home-index-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 18px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-index-card.loading-card { opacity: 0.4; }
.hic-name  { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; }
.hic-label { font-size: 0.65rem; color: var(--text-muted); opacity: 0.6; }
.hic-price { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-top: 6px; }
.hic-chg   { font-size: 0.8rem; font-weight: 600; }
.hic-chg.pos { color: var(--accent-green); }
.hic-chg.neg { color: var(--accent-red); }
.hic-main { font-size: 1rem; font-weight: 600; margin-top: 6px; display: block; }

/* Access Vault button — pushed to far right in the index cards row */
.home-vault-btn {
    background: transparent;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    align-self: center;
    margin-left: auto;
}
.home-vault-btn:hover { background: var(--accent-blue); color: #fff; }

/* Morning Brief + Recap stacked */
.home-content-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}
.home-watchlist-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.home-watchlist-add {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.home-watchlist-add input {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 4px 8px;
    width: 110px;
    text-transform: uppercase;
}
.home-watchlist-add input:focus { outline: 1px solid var(--accent-blue, #4a9eff); }
.home-watchlist-body { padding: 10px 14px; }
.home-watchlist-empty {
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 4px 2px;
}
/* The watchlist as a table: the theme tracker's Stocks columns, plus the
   price and the day's change (dashboard.js renderHomeWatchlist). */
.wl-horizon {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin: 0 0 8px;
}
.wl-horizon button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font: 600 0.7rem/1 var(--font-mono);
    padding: 4px 8px;
}
.wl-horizon button.on { color: var(--text-primary); border-color: var(--accent-blue); background: var(--accent-soft); }
.wl-table-wrap { overflow-x: auto; }
.wl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
}
.wl-table th {
    color: var(--text-muted);
    font: 600 0.66rem/1.2 var(--font-mono);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
}
.wl-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.wl-table .num { text-align: right; font-family: var(--font-mono); }
.wl-table tbody tr:last-child td { border-bottom: none; }
.wl-table tr.wl-row { cursor: pointer; }
.wl-table tr.wl-row:hover td { background: var(--bg-tertiary); }
.wl-ticker { display: block; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; }
.wl-co {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: 0.7rem;
}
.wl-theme { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.wl-table .wl-pos { color: var(--green, var(--accent-green)); }
.wl-table .wl-neg { color: var(--red, var(--accent-red)); }
.wl-x { width: 1%; }
.wl-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
}
.wl-remove:hover { color: var(--accent-red); }
.home-brief-section,
.home-recap-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.home-brief-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.home-brief-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.home-brief-time { font-size: 0.7rem; color: var(--text-muted); }
.home-brief-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Finviz Daily Digest */
.home-digest-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.home-digest-body {
    padding: 14px 16px 16px;
}
.digest-headline {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.digest-headline.sentiment-good { color: var(--accent-green); }
.digest-headline.sentiment-bad { color: var(--accent-red); }
.digest-bullets {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.digest-bullets li {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.digest-bullets li strong { color: var(--text-primary); font-weight: 600; }
.digest-bullets .digest-ticker,
.digest-bullets a {
    color: var(--accent-blue);
    font-weight: 600;
    cursor: pointer;
}
.digest-bullets a {
    text-decoration: none;
}
.digest-bullets a:hover,
.digest-bullets .digest-ticker:hover {
    text-decoration: underline;
}
.digest-bullets li strong .digest-ticker {
    color: var(--accent-blue);
}

/* ==================== YESTERDAY'S RECAP ==================== */
.home-recap-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.home-recap-stats {
    display: flex;
    gap: 18px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.recap-stat { font-size: 0.72rem; color: var(--text-secondary); }
.recap-stat strong { color: var(--text-primary); font-weight: 600; }
.recap-stat.rs-ran  strong { color: var(--accent-green); }
.recap-stat.rs-fade strong { color: var(--accent-red); }
.recap-stat.rs-flat strong { color: var(--text-muted); }
.recap-stat.rs-avg  strong { color: var(--accent-blue); }

.home-recap-body {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
}
.recap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}
.recap-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.recap-table thead th:first-child { text-align: left; }
.recap-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.1s;
}
.recap-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.recap-table td {
    padding: 5px 10px;
    text-align: right;
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: top;
}
.recap-table td:first-child { text-align: left; white-space: normal; min-width: 220px; max-width: 480px; }
.recap-ticker-cell { display: flex; align-items: center; gap: 0; }
.recap-ticker { font-weight: 700; color: var(--text-primary); font-size: 0.8rem; }
.recap-tab-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}
.recap-tab-gaps     { background: rgba(74,158,255,0.15); color: var(--accent-blue); }
.recap-tab-earnings { background: rgba(167,139,250,0.15); color: var(--accent-purple); }
.recap-summary {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.35;
    padding-top: 2px;
    white-space: normal;
}
.recap-pos { color: var(--accent-green); font-weight: 600; }
.recap-neg { color: var(--accent-red); font-weight: 600; }
.recap-neu { color: var(--text-muted); }

/* ==================== HEATMAP PAGE ==================== */
.heatmap-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}
.heatmap-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.heatmap-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.heatmap-period-btns { display: flex; gap: 4px; }
.heatmap-period-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
}
.heatmap-period-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.heatmap-legend { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 0.68rem; }
.hm-leg { padding: 2px 8px; border-radius: 3px; font-weight: 600; }
.hm-leg-neg     { background: rgba(220,50,50,0.25);  color: #ff6b6b; }
.hm-leg-neutral { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.hm-leg-pos     { background: rgba(50,200,100,0.25);  color: #3dd68c; }

.heatmap-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
}
.hm-tile {
    border-radius: 5px;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 90px;
    flex: 1 1 110px;
    max-width: 200px;
    transition: filter 0.1s;
    border: 1px solid rgba(255,255,255,0.06);
}
.hm-tile:hover { filter: brightness(1.25); border-color: rgba(255,255,255,0.2); }
.hm-tile-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.3;
    word-break: break-word;
}
.hm-tile-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin-top: 6px;
    text-align: right;
}
/* ==================== END HEATMAP PAGE ==================== */
/* ==================== END HOME PAGE ==================== */
.panels-grid {
    display: grid;
    /* Two panels since the Theme Tracker moved to /themes. The width it used to
       take is given to the screener, which is the panel actually worked in. */
    grid-template-columns: 1.5fr 10px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.panels-grid > .panel {
    min-width: 0;
}

/* Resize Handles */
.resize-handle {
    width: 10px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 100;
    transition: background 0.15s;
    touch-action: none;
    flex-shrink: 0;
}

.resize-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    right: -6px;
    cursor: col-resize;
}

.resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    background: var(--border-color);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.15s, height 0.15s;
}

.resize-handle:hover::after {
    opacity: 1;
    height: 60px;
}

.resize-handle:hover {
    background: rgba(74, 158, 255, 0.1);
}

.resize-handle.dragging {
    background: rgba(74, 158, 255, 0.2);
}

.resize-handle.dragging::after {
    opacity: 1;
    height: 80px;
    background: var(--accent-blue);
}

/* Add gap back to panels via margin */
.panels-grid .panel {
    margin: 0 3px;
}

.panels-grid .panel:first-child {
    margin-left: 0;
}

.panels-grid .panel:last-child {
    margin-right: 0;
}

/* Panel */
.panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: none;
    border-radius: 6px;
    overflow: hidden;
}

[data-theme=""] .panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

[data-theme=""] .panel-filters {
    background: rgba(12, 12, 14, 0.55);
}

[data-theme=""] .home-index-card,
[data-theme=""] .home-brief-section,
[data-theme=""] .home-recap-section,
[data-theme=""] .home-digest-section {
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

[data-theme=""] .home-vault-btn {
    border-radius: var(--radius-sm);
}

[data-theme=""] .home-vault-btn:hover {
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.2);
}

[data-theme=""] .market-pulse {
    background: rgba(19, 19, 22, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--border-color);
}

[data-theme=""] .market-pulse::before {
    background: linear-gradient(to right, rgba(19, 19, 22, 0.95), transparent);
}

[data-theme=""] .market-pulse::after {
    background: linear-gradient(to left, rgba(19, 19, 22, 0.95), transparent);
}

[data-theme=""] .nav-tab.active {
    box-shadow: 0 0 16px rgba(74, 158, 255, 0.22);
}

[data-theme=""] .header-nav {
    background: rgba(12, 12, 14, 0.65);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

[data-theme=""] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* The header is space-between, so a third child lands in the middle of the row
   rather than beside the title. Grouping the title with the action it belongs
   to puts the child count back to two and keeps them together. */
.panel-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.panel-header h2 {
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-transform: lowercase;
}

/* Tabs */
.tab-selector {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tab-btn {
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    background: transparent;
}

/* Filters */
.panel-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-primary);
}
/* Theme mode toggle (Themes | Stocks) */
.theme-mode-toggle {
    display: flex;
    align-items: stretch;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}
.tmt-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.tmt-btn.active { background: var(--accent-blue); color: #fff; }
.tmt-btn:not(.active):hover { color: var(--text-primary); }
.tmt-sep {
    width: 1px;
    background: var(--border-color);
    flex-shrink: 0;
}
#themeTrackerPanel .theme-view-toggle .tmt-btn {
    padding: 4px 10px;
    font-size: 0.68rem;
}
#themeTrackerContent .fwd-charts-view {
    min-height: 0;
}

/* Chart list inside charts panel */
.theme-charts-header-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.theme-charts-header-main h2 {
    margin: 0;
    line-height: 1.2;
}
.theme-charts-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
}
.theme-description-box {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.theme-description-meta {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.theme-description-meta .theme-desc-rank {
    color: var(--accent-green);
    margin-left: 8px;
}
.theme-description-text {
    color: var(--text-primary);
}
.theme-description-inline {
    border: none;
    border-radius: 0;
    margin: 0;
}
tr.theme-desc-sub-row td {
    padding: 0 !important;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
#themeChartsDescription {
    border-top: 1px solid var(--border-color);
}
#themeChartsDescription:not(:empty) {
    display: block;
}
#themeChartsDescription:empty {
    display: none;
}
.theme-charts-desc {
    margin: 10px 12px 0;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-primary);
}
.theme-description-inline .theme-description-text {
    color: var(--text-primary);
    font-size: 0.8rem;
}
#themeTrackerContent > .theme-description-box {
    margin-bottom: 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.theme-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
}
.chart-cell {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s;
}
.chart-cell:hover {
    border-color: var(--accent-blue);
}
.chart-cell-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    color: var(--text-primary);
    letter-spacing: 0.06em;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}
/* New structured header + stats rows */
.chart-cell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 9px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}
.chart-cell-ticker {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.chart-cell-price {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.chart-cell-stats {
    display: flex;
    gap: 10px;
    padding: 4px 9px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.chart-stat {
    font-family: var(--font-mono);
    font-size: 10px;
    white-space: nowrap;
    color: var(--text-muted);
}
.cc-perf-pos { color: var(--accent-green); }
.cc-perf-neg { color: var(--accent-red); }
/* Sort controls in overlay header */
.tco-sort-controls {
    display: flex;
    gap: 4px;
    margin: 0 12px;
}
.tco-sort-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 2px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
    transition: color 0.1s, border-color 0.1s;
}
.tco-sort-btn:hover { color: var(--text-primary); }
.tco-sort-btn.active { border-color: var(--accent-blue); color: var(--accent-blue); }
.chart-cell-canvas {
    width: 100%;
    height: 300px;
    min-height: 260px;
    background: var(--bg-primary);
    position: relative;
}

/* Chart overlay toggles (MA, S/R) */
.vault-chart-toggles {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.vault-chart-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 2px 8px;
    font-family: var(--font-mono, 'Fira Code', monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.vault-chart-toggle:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.vault-chart-toggle.active {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: var(--accent-soft, rgba(74, 158, 255, 0.14));
}

/* The EMA/SMA switch writes its current state as its own label, so it changes
   width as it cycles -- MA MIX, EMA, SMA -- and a button that resizes drags
   every control beside it along the row. Pinned to the widest of the three so
   the toolbar stays where it was put. Same reason on the companion's row. */
.vault-chart-toggle[data-vault-ma-method],
.cc-scope .cc-tools #maMethodToggle {
    min-width: 52px;
    text-align: center;
}

/* TC2000-style news headline callouts on Runners charts */
.vault-news-notes {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}
.vault-news-notes-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vault-news-note {
    position: absolute;
    max-width: min(480px, calc(100% - 72px));
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
    color: var(--text-primary);
    font-size: 10.5px;
    line-height: 1.4;
    pointer-events: auto;
    cursor: default;
    display: block;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
}
.vault-news-note-clickable {
    cursor: pointer;
}
.vault-news-note-clickable:hover {
    border-color: color-mix(in srgb, #f59e0b 70%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 82%, #f59e0b 18%);
}

/* Trail % debug overlays on Runners charts */
.vault-ma-legend {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    font-family: var(--font-mono, 'Fira Code', monospace);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    pointer-events: none;
}
.vault-ma-legend-bottom {
    top: auto;
    bottom: 6px;
}
.vault-ma-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.vault-ma-legend-swatch {
    width: 12px;
    height: 2px;
    border-radius: 1px;
}

.vault-trail-debug-legend {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    max-width: calc(100% - 12px);
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    font-size: 10px;
    line-height: 1.35;
    color: var(--text-secondary);
    pointer-events: none;
}
.vault-trail-debug-title {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.vault-trail-debug-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 2px;
}
.vault-trail-debug-swatch {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 2px;
    border-radius: 2px;
}
.vault-trail-debug-trail .vault-trail-debug-swatch {
    background: color-mix(in srgb, var(--accent-green) 55%, transparent);
    border: 1px solid var(--accent-green);
}
.vault-trail-debug-peak .vault-trail-debug-swatch {
    background: color-mix(in srgb, var(--accent-blue) 45%, transparent);
    border: 1px solid var(--accent-blue);
}
.vault-trail-debug-ytd .vault-trail-debug-swatch {
    background: color-mix(in srgb, var(--text-muted) 35%, transparent);
    border: 1px solid var(--text-muted);
}
.vault-trail-debug-dates {
    padding-left: 16px;
    color: var(--text-muted);
    font-family: var(--font-mono, 'Fira Code', monospace);
    font-size: 9px;
}
.vault-trail-debug-note {
    margin-top: 4px;
    font-size: 9px;
    color: var(--text-muted);
    font-style: italic;
}

.search-chart-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.floating-chart-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.floating-chart-header .vault-chart-toggles {
    margin-left: auto;
}
.chart-cell-canvas.vault-chart-add-level {
    cursor: crosshair;
    outline: 1px dashed var(--accent-blue);
    outline-offset: -1px;
}

.search-chart-canvas.vault-chart-add-level,
.floating-chart-canvas.vault-chart-add-level {
    cursor: crosshair;
    outline: 1px dashed var(--accent-blue);
    outline-offset: -2px;
}

.chart-grid-expand-canvas.vault-chart-measure-mode,
.search-chart-canvas.vault-chart-measure-mode,
.floating-chart-canvas.vault-chart-measure-mode,
.fwd-chart-cell-canvas.vault-chart-measure-mode {
    outline: 1px dashed var(--accent-yellow, #eab308);
    outline-offset: -2px;
}

.vault-chart-measure-mode .vault-measure-overlay {
    pointer-events: auto;
    cursor: crosshair;
}

.vault-measure-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.vault-measure-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vault-measure-fill {
    stroke-width: 1;
}

.vault-measure-line {
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.vault-measure-dot {
    stroke: var(--bg-primary);
    stroke-width: 2;
}

.vault-measure-label {
    position: absolute;
    transform: translate(-50%, -100%);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
}

.vault-measure-label.vault-measure-pos {
    color: var(--accent-green);
    border-color: color-mix(in srgb, var(--accent-green) 40%, var(--border-color));
}

.vault-measure-label.vault-measure-neg {
    color: var(--accent-red);
    border-color: color-mix(in srgb, var(--accent-red) 40%, var(--border-color));
}

.chart-grid-expand-toolbar .vault-chart-toggle.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.vault-level-manager {
    display: none;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

.theme-level-manager {
    margin: 0 12px 8px;
    padding-bottom: 8px;
}

.floating-chart-body .vault-level-manager {
    padding: 6px 10px 4px;
    margin: 0;
    flex-shrink: 0;
}

.vault-level-manager-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.vault-level-manager-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.85;
}

.vault-level-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vault-level-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vault-level-chip:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-red);
}

.vault-level-chip.pl-support { border-color: rgba(74, 222, 128, 0.35); }
.vault-level-chip.pl-resist { border-color: rgba(248, 113, 113, 0.35); }
.vault-level-chip.pl-custom { border-color: rgba(74, 158, 255, 0.35); }

.vault-level-chip-del {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
}

.vault-level-chip:hover .vault-level-chip-del {
    color: var(--accent-red);
}

/* Add level dialog */
.add-level-dialog {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.add-level-dialog-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 18px 20px;
    width: min(360px, 100%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.add-level-dialog-title {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.add-level-kind-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.add-level-kind {
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.add-level-label-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.add-level-alert-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    cursor: pointer;
}

.add-level-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.add-level-btn {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
}

.add-level-btn-primary {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.add-level-btn-primary:hover {
    filter: brightness(1.08);
}

.chart-cell-canvas.vault-chart-loading::after {
    content: 'Loading…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.vault-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.chart-cell-img {
    width: 100%;
    height: auto;
    display: block;
    filter: invert(1) hue-rotate(180deg);
}
.chart-cell-error .chart-cell-img { display: none; }
.chart-cell-error::after {
    content: 'No chart';
    display: block;
    padding: 12px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
}

.theme-refresh-time {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.theme-refresh-interval {
    font-size: 0.65rem;
    opacity: 0.6;
}
.mom-badge {
    display: inline-block;
    width: 22px;           /* fixed width so all cells align identically */
    font-size: 0.58rem;
    font-weight: 600;
    margin-left: 3px;
    vertical-align: middle;
    font-family: monospace;
    opacity: 0.55;
    letter-spacing: -0.02em;
    text-align: left;
}
.mom-badge:hover { opacity: 1; }
.mom-up { color: var(--accent-green); }
.mom-dn { color: var(--accent-red); }
.mom-cell { white-space: nowrap; }

.filter-input, .filter-select {
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.filter-input:focus, .filter-select:focus {
    border-color: var(--accent-blue);
}

.filter-input {
    flex: 1;
}

.filter-input::placeholder {
    color: var(--text-muted);
}

.filter-select {
    min-width: 120px;
}

/* Panel Content */
.panel-content {
    flex: 1;
    overflow: auto;
    padding: 0;
}

/* Table */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

/* Headers scroll away with the table.
 *
 * They were pinned to the top from the first commit, which read as a floating
 * header stuck to the screen rather than a header belonging to its table --
 * with rows visible above it, because what it pins to is the panel's scroll
 * box and not the page the reader is actually scrolling.
 *
 * The ticker column keeps its own `position: sticky; left: 0` further down and
 * is unaffected: that one is horizontal, so the ticker stays in view when the
 * screener is scrolled sideways, which is a different thing and still wanted.
 * With no `top` set here, it now sticks on that axis alone.
 */
.data-table th {
    background: var(--bg-secondary);
    padding: 10px 12px;
    text-align: left;
    font-family: 'Fira Code', monospace;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    box-shadow: 0 1px 0 var(--border-color);
    white-space: nowrap;
    z-index: 10;
}

.data-table th.sortable {
    cursor: grab;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.data-table th.sortable:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.data-table th.sorted {
    color: var(--accent-blue);
    background: #111a24;
}

/* Column drag-and-drop reordering */
.data-table th.column-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.data-table th.drag-over-left {
    box-shadow: inset 3px 0 0 var(--accent-blue);
}

.data-table th.drag-over-right {
    box-shadow: inset -3px 0 0 var(--accent-blue);
}

.sort-secondary {
    color: var(--accent-purple);
    font-size: 0.65rem;
}

.sort-secondary sup {
    font-size: 0.55rem;
    vertical-align: super;
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}

/* Screener: sticky ticker column on horizontal scroll */
#screenersContent .data-table-screener th.col-sticky-ticker,
#screenersContent .data-table-screener td.col-sticky-ticker {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-tertiary);
    box-shadow: 1px 0 0 var(--border-color);
}
#screenersContent .data-table-screener th.col-sticky-ticker {
    z-index: 12;
}
#screenersContent .data-table-screener th.col-sticky-ticker.sorted {
    background: #111a24;
}
#screenersContent .data-table-screener th.col-sticky-ticker.sortable:hover {
    background: var(--border-color);
}
#screenersContent .data-table-screener tbody tr:hover td.col-sticky-ticker {
    background: var(--bg-tertiary);
}
#screenersContent .data-table-screener tbody tr.row-highlight-green td.col-sticky-ticker {
    background: #121f17;
}
#screenersContent .data-table-screener tbody tr.row-highlight-green:hover td.col-sticky-ticker {
    background: #152a1c;
}
#screenersContent .data-table-screener tbody tr.row-highlight-blue td.col-sticky-ticker {
    background: #121a26;
}
#screenersContent .data-table-screener tbody tr.row-highlight-blue:hover td.col-sticky-ticker {
    background: #152030;
}
#screenersContent .data-table-screener tbody tr.row-pinned td.col-sticky-ticker {
    background: #141822;
}
#screenersContent .data-table-screener tbody tr.row-pinned:hover td.col-sticky-ticker {
    background: #181e2c;
}
#screenersContent .data-table-screener tbody tr.row-new td.col-sticky-ticker {
    background: #131820;
}

.data-table tr {
    cursor: pointer;
    transition: background 0.15s;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.data-table tbody tr.clickable-theme {
    cursor: pointer;
}

.data-table tbody tr.clickable-theme:hover {
    background: rgba(88, 166, 255, 0.15);
}

.data-table tbody tr.clickable-theme .cell-ticker {
    text-decoration: none;
}

/* Theme expand/collapse chevron */
.data-table tbody tr.clickable-theme td.col-theme::before {
    content: '▸ ';
    color: var(--text-muted);
    font-size: 10px;
}

.data-table tbody tr.clickable-theme.theme-expanded td.col-theme::before {
    content: '▾ ';
}

.data-table tbody tr.clickable-theme.theme-expanded {
    background: rgba(88, 166, 255, 0.08);
    border-bottom: 1px solid rgba(88, 166, 255, 0.2);
}

/* Theme hover tooltip — lists tickers in the theme */
.theme-ticker-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 320px;
    background: var(--bg-secondary, #161b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-primary, #e6edf3);
    pointer-events: none;
}

.theme-ticker-tooltip .theme-tooltip-header {
    font-weight: 600;
    color: var(--accent-blue, #58a6ff);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #30363d);
}

.theme-ticker-tooltip .theme-tooltip-count {
    color: var(--text-muted, #8b949e);
    font-weight: 400;
    font-size: 11px;
}

.theme-ticker-tooltip .theme-tooltip-tickers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.theme-ticker-tooltip .theme-tooltip-ticker {
    background: var(--bg-tertiary, #0d1117);
    color: var(--text-primary, #e6edf3);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
}

/* Theme sub-rows (individual tickers within expanded theme) */
.data-table tbody tr.theme-sub-row {
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(88, 166, 255, 0.3);
}

.data-table tbody tr.theme-sub-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.data-table tbody tr.theme-sub-row td {
    padding: 3px 8px;
    font-size: 12px;
}

.data-table tbody tr.theme-sub-row .theme-sub-ticker {
    padding-left: 20px;
}

.data-table tbody tr.theme-sub-row .theme-sub-ticker .cell-ticker {
    cursor: pointer;
    color: var(--accent-blue);
    text-decoration: none;
}

.data-table tbody tr.theme-sub-row .theme-sub-ticker .cell-ticker:hover {
    text-decoration: underline;
}

.data-table tbody tr.theme-sub-row .theme-sub-detail {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

/* New since last visit indicator */
.data-table tbody tr.row-new {
    border-left: 3px solid var(--accent-blue);
    animation: newRowFade 4s ease-out;
}

@keyframes newRowFade {
    0% { background: rgba(74, 158, 255, 0.15); }
    100% { background: transparent; }
}

/* All-green row highlight */
.data-table tbody tr.row-highlight-green {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.10) 0%, rgba(34, 197, 94, 0.03) 100%);
    border-left: 3px solid var(--accent-green);
}

.data-table tbody tr.row-highlight-green:hover {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.08) 100%);
}

/* Blue catalyst row highlight (3+ green columns + blue keyword) */
.data-table tbody tr.row-highlight-blue {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.25) 0%, rgba(74, 158, 255, 0.06) 100%);
    border-left: 3px solid #5ab0ff;
    box-shadow: inset 4px 0 12px rgba(74, 158, 255, 0.15);
}

.data-table tbody tr.row-highlight-blue:hover {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.35) 0%, rgba(74, 158, 255, 0.12) 100%);
}

/* Blue border takes priority when both new and green */
.data-table tbody tr.row-new.row-highlight-green {
    border-left-color: var(--accent-blue);
}

/* Clickable theme links in cells */
.data-table td span.clickable-theme {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.data-table td span.clickable-theme:hover {
    text-decoration-style: solid;
    color: var(--accent-blue);
}

/* Copy annotation column */
.data-table th.col-copy,
.data-table td.col-copy {
    width: 28px;
    max-width: 28px;
    padding: 4px 2px;
    text-align: center;
}

.copy-annotation-btn {
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.3;
    transition: opacity 0.15s;
    user-select: none;
}

.data-table tbody tr:hover .copy-annotation-btn {
    opacity: 0.7;
}

.copy-annotation-btn:hover {
    opacity: 1 !important;
}

/* Win rate columns */
.data-table th.col-winrate,
.data-table td.col-winrate {
    padding: 10px 8px;
    max-width: 80px;
    text-align: center;
}

/* Compact Theme and Rank columns */
.data-table td.col-theme {
    padding: 10px 8px;
    max-width: 150px;
}

.data-table th.col-theme {
    padding: 10px 8px;
}

.data-table td.col-rank {
    padding: 10px 6px;
    max-width: 60px;
    text-align: center;
}

.data-table th.col-rank {
    padding: 10px 6px;
    text-align: center;
}

/* Theme tracker row index (#) — minimal width */
.data-table th.col-row-num,
.data-table td.col-row-num {
    width: 1%;
    max-width: 28px;
    min-width: 22px;
    padding: 10px 2px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Compact numeric columns (1W, 1M, 3M in Theme Tracker) */
.data-table th.col-narrow,
.data-table td.col-narrow {
    padding: 10px 8px;
    width: 60px;
    max-width: 80px;
    text-align: center;
}

/* RVOL — short values (e.g. 1.7); shrink-to-fit so the column does not eat width */
.data-table th.col-rvol,
.data-table td.col-rvol {
    width: 1%;
    max-width: 52px;
    padding: 10px 4px;
    text-align: center;
    white-space: nowrap;
}

/* Wide text columns (Summary, Commentary) - default: just wider truncation */
.data-table th.col-wide,
.data-table td.col-wide {
    max-width: 400px;
}

/* In focus mode these stay one line, like every other cell.
 *
 * They used to wrap here, so that the whole summary was visible without
 * asking. Single-panel view then became the default on load, which made that
 * the state every reload starts in: a table where one long commentary sets the
 * height of its row and the rows are all different heights, with the column
 * narrow enough that a paragraph becomes a tall block. Widening a column by
 * dragging did not settle it either, because this rule outranks the width
 * rules and put the wrapping back.
 *
 * Nothing is lost by truncating. The full text is already available two ways
 * that cost a gesture rather than the whole table's shape: hovering the cell
 * opens the tooltip, which carries a copy button, and double-clicking the row
 * expands it in place (see .row-expanded, under "Inline Row Expansion").
 */
.panel-focused .data-table td.col-wide {
    max-width: 500px;
}

/* An expanded row still expands in focus mode. Spelled out because the rule
 * above is more specific than the .row-expanded one and would otherwise keep
 * the 500px cap on the cell the reader just asked to see in full. */
.panel-focused .data-table tbody tr.row-expanded td.col-wide {
    white-space: normal;
    word-wrap: break-word;
    max-width: none;
    line-height: 1.5;
}

/* Hover tooltip for summary/commentary cells */
.cell-tooltip {
    position: fixed;
    z-index: 10000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.825rem;
    line-height: 1.6;
    white-space: normal;
    word-wrap: break-word;
    max-width: 500px;
    min-width: 250px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    /* Interactive now: the tooltip can be hovered, its text selected, and its
       copy button clicked. pointer-events: none made all three impossible. */
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    padding-right: 62px;          /* room for the copy button */
}

.cell-tooltip.active {
    opacity: 1;
    visibility: visible;
}

.cell-tooltip-body {
    white-space: pre-line;        /* the line breaks between highlights survive */
}

.cell-tooltip-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 8px;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.cell-tooltip-copy:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.cell-tooltip-copy.copied {
    color: var(--accent-green);
    border-color: var(--accent-green);
}

/* Cell formatting - use higher specificity to override .data-table td */
.data-table td.cell-ticker {
    font-weight: 600;
    color: var(--accent-blue);
}

.data-table td.cell-source {
    text-align: center;
    font-weight: 600;
    font-size: 0.75em;
    color: var(--text-muted);
    width: 28px;
    max-width: 28px;
    padding: 2px 4px;
}

.data-table th.col-source {
    width: 28px;
    max-width: 28px;
    padding: 2px 4px;
}

/* Inflection point indicator on screener ticker cells (cached EDGAR) */
.inflection-dot {
    display: inline-block;
    margin-left: 5px;
    color: var(--accent-green);
    font-size: 0.55rem;
    vertical-align: middle;
    cursor: help;
    animation: inflectionPulse 2s ease-in-out infinite;
}
@keyframes inflectionPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Realtime inflection indicator (from 8-K press release) — brighter/bolder */
.inflection-rt {
    display: inline-block;
    margin-left: 5px;
    color: #00ff88;
    font-size: 0.65rem;
    vertical-align: middle;
    cursor: help;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
    animation: inflectionGlow 1.5s ease-in-out infinite;
}
@keyframes inflectionGlow {
    0%, 100% { opacity: 0.85; text-shadow: 0 0 4px rgba(0, 255, 136, 0.4); }
    50% { opacity: 1; text-shadow: 0 0 8px rgba(0, 255, 136, 0.8); }
}

/* Trend signal indicator (amber triangle, visually quieter than turnaround) */
.trend-signal-dot {
    display: inline-block;
    margin-left: 5px;
    color: #f59e0b;
    font-size: 0.45rem;
    vertical-align: middle;
    cursor: help;
    animation: trendPulse 3s ease-in-out infinite;
}
@keyframes trendPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.data-table td.cell-positive,
.detail-value.cell-positive {
    color: var(--accent-green);
}

.data-table td.cell-warning,
.detail-value.cell-warning {
    color: var(--accent-yellow);
}

.data-table td.cell-neutral,
.detail-value.cell-neutral {
    color: var(--text-secondary);
}

.data-table td.cell-dim {
    color: var(--text-muted, #555);
}

.data-table td.cell-negative,
.detail-value.cell-negative {
    color: var(--accent-red);
}

.data-table td.cell-exceptional,
.detail-value.cell-exceptional {
    color: #ffd700;
    font-weight: 600;
}

.exceptional-badge {
    display: inline-block;
    font-size: 9px;
    color: #ffd700;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1;
}

/* Loading */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-header {
    padding: 16px 40px 16px 20px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.modal-header h3 {
    font-size: 1.1rem;
    color: var(--accent-blue);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    width: 140px;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-value {
    flex: 1;
    color: var(--text-primary);
    word-wrap: break-word;
    /* Bulleted Highlights and Signals arrive with newlines between items;
       without this they collapse into one line and the bullets run together. */
    white-space: pre-line;
}

/* The entry, stop and risk behind a forward-tester R: present, but secondary
   to the figure itself. */
.detail-sub {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-left: 4px;
}

/* Finviz Data Section */
.detail-section-header {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 8px 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent-blue);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Key Info Grid (price, mkt cap, earnings date) */
.key-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 10px;
}

.key-info-item {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 6px;
}

.key-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.key-info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.key-info-value .cell-positive {
    color: var(--accent-green);
}

.key-info-value .cell-negative {
    color: var(--accent-red);
}

.earnings-date {
    color: var(--accent-yellow);
}

.detail-description {
    display: block;
}

.detail-description .detail-value {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.finviz-loading {
    padding: 20px 0;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* News Items */
.news-item {
    display: block;
    padding: 8px 0;
}

.news-item .detail-value {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.news-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
}

.news-link:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.news-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive */
@media (max-width: 1200px) {
    .panels-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .resize-handle {
        display: none;
    }
    .panels-grid .panel {
        margin: 6px;
    }
}

@media (max-width: 800px) {
    .panels-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Error state */
.error-message {
    color: var(--accent-red);
    padding: 20px;
    text-align: center;
}

/* Row count badge */
.row-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Chart Tooltip (Finviz preview on hover) */
.chart-tooltip {
    position: fixed;
    z-index: 2000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    display: none;
}

.chart-tooltip.active {
    display: block;
}

.chart-tooltip img {
    display: block;
    max-width: 400px;
    height: auto;
    border-radius: 4px;
    /* Invert to dark theme - Finviz chart API doesn't support native dark mode */
    filter: invert(0.92) hue-rotate(180deg);
}

.chart-tooltip .tooltip-ticker {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 6px;
    text-align: center;
}

.chart-tooltip .tooltip-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

/* ============= Floating Chart Window ============= */
.floating-chart {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 700px;
    height: 560px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    z-index: 1600;
    flex-direction: column;
    overflow: hidden;
    min-width: 400px;
    min-height: 360px;
}

.floating-chart.active {
    display: flex;
}

.floating-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    flex-shrink: 0;
    user-select: none;
}

.floating-chart-ticker {
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-blue);
    min-width: 60px;
}

.floating-chart-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.floating-chart-close:hover {
    color: var(--accent-red);
}

.floating-chart-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.floating-chart-body .floating-chart-canvas {
    flex: 1;
    min-height: 0;
}

.floating-chart-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 10;
}

.floating-chart-resize::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    opacity: 0.5;
}

/* Table footer */
.table-footer {
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    text-align: right;
}

/* Rich text formatting - use theme colors for visibility on dark bg */
.rt-green {
    color: var(--accent-green);
    font-weight: 600;
}

.rt-red {
    color: var(--accent-red);
    font-weight: 600;
}

.rt-blue {
    color: var(--accent-blue);
    font-weight: 600;
}

/* ============= Quick Links in Modal ============= */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-ticker {
    font-size: 1.1rem;
    color: var(--accent-blue);
}

.quick-links {
    display: flex;
    gap: 6px;
}

.quick-link {
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.15s;
}

.quick-link:hover {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* ============= Run Prompt Row ============= */
.run-prompt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.prompt-select {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-primary);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.76rem;
    cursor: pointer;
    min-width: 0;
}

.prompt-select option {
    background: #1a1f2e;
    color: var(--text-primary);
}

.run-prompt-btn {
    background: rgba(100, 200, 120, 0.12);
    border: 1px solid rgba(100, 200, 120, 0.30);
    color: #7dcf90;
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.run-prompt-btn:hover {
    background: rgba(100, 200, 120, 0.22);
    border-color: rgba(100, 200, 120, 0.5);
}

.run-prompt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prompt-copy-notice {
    margin: 6px 0 2px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
}

.prompt-copy-success {
    background: rgba(0, 180, 90, 0.12);
    border: 1px solid rgba(0, 180, 90, 0.25);
    color: #7dcf90;
}

.prompt-copy-error {
    background: rgba(220, 50, 50, 0.12);
    border: 1px solid rgba(220, 50, 50, 0.25);
    color: #f08080;
}

/* ============= Panel Toolbar ============= */
.panel-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
}

.toolbar-btn {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s;
}

.toolbar-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.toolbar-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* ── Style Selector Dropdown ─────────────────────────────── */
.style-selector {
    position: relative;
}
.style-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 120px;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    overflow: hidden;
}
.style-dropdown.open { display: block; }
.style-option {
    padding: 8px 14px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s;
}
.style-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.style-option.active {
    color: var(--accent-green);
    font-weight: 600;
}

/* ============= Keyboard Navigation ============= */
.row-selected {
    background: rgba(74, 158, 255, 0.25) !important;
    outline: 1px solid var(--accent-blue);
}

.panel-active {
    box-shadow: 0 0 0 2px var(--accent-blue);
}

/* ============= Column Selector Modal ============= */
.column-selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.column-selector-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 300px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.column-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.column-selector-header h3 {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
}

.column-selector-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.column-checkbox:hover {
    color: var(--text-primary);
}

.column-checkbox input {
    cursor: pointer;
}

.column-selector-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.btn-small {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-small:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* ============= Toast Notifications ============= */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 40px));
}

.toast-notification {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-blue);
    border-radius: 8px;
    padding: 12px 20px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    max-width: 100%;
    word-wrap: break-word;
}

.toast-notification.show {
    transform: translateX(0);
}

/* ============= Earnings Calendar ============= */
.calendar-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 95%;
    max-width: 1400px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.calendar-header h3 {
    font-size: 1.1rem;
    color: var(--accent-blue);
    margin: 0;
}

.calendar-body {
    /* No padding at the top edge. This is the scrollport, so a sticky header
       pins at the top of the padding box while rows travel through the padding
       band on their way out of view -- which is the strip of half-rows that
       kept appearing above the session headers. The side and bottom padding
       stay; the top is the table's own header row instead.

       Do not put padding-top back. A box-shadow apron on the header was tried
       as armor against exactly that and is not equal to the job: a shadow is
       offset, not grown, so it leaves a sliver the height of the difference,
       and on every th it painted over the session title in the row beneath. */
    padding: 0 16px 16px;
    overflow-y: auto;
    flex: 1;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.calendar-day {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

.calendar-day.today {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

.calendar-day.has-earnings {
    background: rgba(74, 158, 255, 0.1);
}

.calendar-day-header {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.day-name {
    color: var(--text-muted);
    text-transform: uppercase;
}

.day-date {
    color: var(--text-secondary);
    font-weight: 500;
}

.calendar-day-content {
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

.calendar-ticker {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.calendar-ticker:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.calendar-ticker .ticker-name {
    font-weight: 600;
    color: var(--accent-blue);
    font-size: 0.8rem;
}

.calendar-ticker:hover .ticker-name {
    color: white;
}

.calendar-ticker .ticker-theme {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

.calendar-ticker:hover .ticker-theme {
    color: rgba(255, 255, 255, 0.7);
}

.calendar-ticker .ticker-ranks {
    font-size: 0.6rem;
    color: var(--accent-purple);
    display: block;
    font-family: 'Fira Code', monospace;
    letter-spacing: -0.5px;
}

.calendar-ticker:hover .ticker-ranks {
    color: rgba(255, 255, 255, 0.6);
}

.calendar-ticker .ticker-pos {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
}

.calendar-ticker:hover .ticker-pos {
    color: rgba(255, 255, 255, 0.5);
}

.no-earnings {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
}

/* ============= Responsive Calendar ============= */
@media (max-width: 900px) {
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .calendar-day-content {
        grid-template-columns: 1fr;
    }
}

/* ============= Search Bar ============= */
.search-bar {
    display: flex;
    gap: 6px;
    align-items: center;
}

.search-input {
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    width: 140px;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-input:focus {
    border-color: var(--accent-blue);
    width: 180px;
    transition: width 0.2s;
}

.search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.search-btn {
    padding: 8px 14px;
    background: var(--accent-blue);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s;
}

.search-btn:hover {
    background: #3d8ae8;
}

/* ============= Search Modal ============= */
.search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1500;
    justify-content: center;
    align-items: flex-start;
    padding-top: 40px;
    overflow-y: auto;
}

.search-modal.active {
    display: flex;
}

.search-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 95%;
    max-width: 1100px;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 40px;
}

.search-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.search-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.search-ticker {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-right: 12px;
}

.search-company {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.search-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.search-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
}

.search-change {
    font-size: 1.1rem;
    font-weight: 600;
}

.search-sector {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Theme ranking badge in search modal */
.search-theme-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    background: rgba(167, 139, 250, 0.08);
    border-bottom: 1px solid var(--border-color);
}

.search-theme-badge .theme-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-purple);
    cursor: pointer;
    transition: color 0.15s;
}

.search-theme-badge .theme-name:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.search-theme-badge .theme-ranks {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.theme-rank-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.theme-rank-item .rank-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.theme-rank-item .rank-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-purple);
    font-family: 'Fira Code', monospace;
}

.search-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* Chart in search */
.search-chart-section {
    margin-bottom: 20px;
}

.search-chart-canvas {
    width: 100%;
    height: 420px;
    min-height: 360px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.floating-chart-canvas {
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.search-chart-canvas.vault-chart-loading::after,
.floating-chart-canvas.vault-chart-loading::after {
    content: 'Loading chart…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Metrics Grid */
.search-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.search-metric {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.search-metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.search-metric-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.search-metric-value.cell-positive {
    color: var(--accent-green);
}

.search-metric-value.cell-negative {
    color: var(--accent-red);
}

.search-metric-value.earnings-date {
    color: var(--accent-yellow);
}

/* Search sections */
.search-section {
    margin-bottom: 16px;
}

.search-section-header {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.search-summary {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.search-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.search-news-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-news-item:last-child {
    border-bottom: none;
}

/* Commentary from sheet data */
.search-commentary-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.search-commentary-item:last-child {
    border-bottom: none;
}

.search-commentary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.search-commentary-value {
    white-space: pre-line;   /* one highlight per line, as in the tooltip */
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* Mini-tables (EPS & Revenue) */
.mini-tables-row {
    display: flex;
    gap: 20px;
}

.mini-table-container {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.mini-table-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.mini-table thead th {
    text-align: left;
    padding: 5px 8px;
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    white-space: nowrap;
}

.mini-table tbody td {
    padding: 4px 8px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(30, 41, 54, 0.5);
    white-space: nowrap;
}

.mini-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.mini-table tbody tr:last-child td {
    border-bottom: none;
}

.mini-table .cell-positive {
    color: var(--accent-green);
}

.mini-table .cell-negative {
    color: var(--accent-red);
}
tr.qr-hidden {
    display: none;
}
.qr-show-toggle {
    font-size: 0.72rem;
    color: var(--accent-blue, #60a5fa);
    cursor: pointer;
    margin-top: 6px;
    text-align: center;
}
.qr-show-toggle:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .mini-tables-row {
        flex-direction: column;
    }
}

/* Responsive search */
@media (max-width: 800px) {
    .search-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .search-bar {
        display: none;
    }
}

@media (max-width: 500px) {
    .search-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============= Focus Mode ============= */
.panels-grid.focus-mode {
    grid-template-columns: 1fr !important;
}

.panel-hidden {
    display: none !important;
}

.panel-focused {
    box-shadow: 0 0 0 2px var(--accent-blue);
}

/* ============= Collapsible Panels ============= */
.panel-header {
    cursor: default;
    user-select: none;
}

.panel.panel-collapsed {
    min-width: 40px;
    max-width: 40px;
    overflow: hidden;
    transition: min-width 0.2s, max-width 0.2s;
}

.panel.panel-collapsed .panel-filters,
.panel.panel-collapsed .panel-content,
.panel.panel-collapsed .panel-toolbar {
    display: none;
}

.panel.panel-collapsed .panel-header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 16px 8px;
    cursor: pointer;
    justify-content: center;
    border-bottom: none;
    height: 100%;
}

/* Collapse hides the toolbar, and Evaluate no longer lives in it, so it has to
   be named separately or it rides down the 40px strip on its own. */
.panel.panel-collapsed .eval-launch {
    display: none;
}

.panel.panel-collapsed .panel-header h2 {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ============= Row Pinning ============= */
.data-table tbody tr.row-pinned {
    background: rgba(74, 158, 255, 0.06);
    border-left: 2px solid var(--accent-purple);
}

.data-table tbody tr.row-pinned:hover {
    background: rgba(74, 158, 255, 0.12);
}

.data-table tbody tr.row-pinned td:first-child::before {
    content: '\25C6';
    color: white;
    font-size: 0.6rem;
    margin-right: 6px;
}

/* ============= Inline Row Expansion ============= */
.data-table tbody tr.row-expanded td {
    white-space: normal;
    word-wrap: break-word;
    max-width: none;
}

.data-table tbody tr.row-expanded {
    background: var(--bg-tertiary);
}

/* ============= Column Filter Popover ============= */
.col-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    vertical-align: middle;
    border-radius: 3px;
    position: relative;
    z-index: 2;
}

.data-table th:hover .col-filter-icon,
.col-filter-icon.active {
    opacity: 1;
}

.col-filter-icon.active {
    color: var(--accent-blue);
    background: rgba(74, 158, 255, 0.15);
}

.col-filter-icon:hover {
    color: var(--accent-blue);
    background: rgba(74, 158, 255, 0.2);
}

.col-filter-popover {
    position: fixed;
    z-index: 3000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    min-width: 200px;
}

.col-filter-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.col-filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.col-filter-op {
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    min-width: 70px;
}

.col-filter-op:focus {
    border-color: var(--accent-blue);
}

.col-filter-val {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.col-filter-val:focus {
    border-color: var(--accent-blue);
}

.col-filter-val::placeholder {
    color: var(--text-muted);
}

.col-filter-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.col-filter-clear,
.col-filter-apply {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.col-filter-clear {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.col-filter-clear:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.col-filter-apply {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.col-filter-apply:hover {
    background: #3d8ae8;
}

/* Checklist filter (for text columns like Sector) */
.col-filter-checklist {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
}

.col-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: background 0.1s;
}

.col-filter-checkbox:hover {
    background: rgba(74, 158, 255, 0.08);
    color: var(--text-primary);
}

.col-filter-checkbox input[type="checkbox"] {
    accent-color: var(--accent-blue);
    margin: 0;
}

.col-filter-select-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.75rem;
}

.col-filter-select-actions a {
    color: var(--accent-blue);
    text-decoration: none;
}

.col-filter-select-actions a:hover {
    text-decoration: underline;
}

/* ============= Filter Presets ============= */
.preset-save-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.preset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.preset-item:hover {
    background: var(--bg-tertiary);
}

.preset-name {
    color: var(--text-primary);
    font-size: 0.85rem;
    flex: 1;
}

.preset-name:hover {
    color: var(--accent-blue);
}

.preset-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.preset-delete:hover {
    color: var(--accent-red);
}

/* Active filter indicator on column header */
.data-table th:has(.col-filter-icon.active) {
    border-bottom: 2px solid var(--accent-blue);
}

/* ======================================================================
   HEADER NAVIGATION TABS (Vault / Database)
   ====================================================================== */

.header-nav {
    display: flex;
    gap: 3px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 3px;
    margin: 0 12px;
}

.nav-tab {
    padding: 6px 20px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: lowercase;
    transition: all 0.2s;
}

.nav-tab.active {
    background: var(--accent-blue);
    color: #fff;
}

.nav-tab:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(74, 158, 255, 0.1);
}

/* ======================================================================
   DATABASE PAGE
   ====================================================================== */

.database-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.database-subnav {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.database-subnav--inline {
    padding: 0;
}

.database-subtab {
    appearance: none;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.database-subtab:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(74, 158, 255, 0.08);
    border-color: rgba(74, 158, 255, 0.25);
}

.database-subtab.active {
    color: #fff;
    background: var(--accent-blue, #4a9eff);
    border-color: var(--accent-blue, #4a9eff);
}

.database-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
}

#scanRunsPanel.panel {
    flex: 1;
    min-height: 0;
}

#scanRunsPanel .panel-header {
    background-color: var(--bg-secondary);
}

#scanRunsPanel .panel-content {
    min-height: 0;
}

#parabolicStudyPanel.panel {
    flex: 1;
    min-height: 0;
}

#parabolicStudyPanel .panel-header {
    background-color: var(--bg-secondary);
}

#parabolicStudyPanel .panel-header .database-subnav--inline {
    flex-shrink: 0;
}

#parabolicStudyContent {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

#parabolicStudyContent.db-panel-content {
    overflow: auto;
}

#parabolicStudyContent .fwd-charts-view {
    min-height: min-content;
}

#databasePanel.panel {
    flex: 1;
    min-height: 0;
}

#databasePanel .panel-header,
#databasePanel .db-panel-header {
    background-color: var(--bg-secondary);
    gap: 0;
    padding: 10px 14px;
}

#databasePanel .panel-header .database-subnav--inline {
    padding-right: 16px;
    margin-right: 8px;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--text-muted));
    flex-shrink: 0;
}

.db-panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    max-width: 100%;
    flex: 1;
    min-width: 0;
}

.db-toolbar-zone {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.db-toolbar-zone--query {
    padding-right: 4px;
}

.db-toolbar-zone--display {
    padding-left: 4px;
}

.db-toolbar-spacer {
    flex: 1 1 32px;
    min-width: 20px;
    height: 1px;
}

.db-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.db-toolbar-group--search {
    gap: 0;
}

.db-toolbar-group--view {
    gap: 10px;
}

.db-panel-toolbar .db-results-count {
    margin-left: 16px;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    padding-left: 16px;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--text-muted));
}

.db-panel-toolbar .db-column-groups {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: min(100%, 640px);
    scrollbar-width: thin;
    gap: 6px;
}

.db-panel-toolbar .tab-btn.db-group-tab {
    padding: 4px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.db-toolbar-divider {
    width: 1px;
    height: 24px;
    background: color-mix(in srgb, var(--border-color) 85%, var(--text-muted));
    flex-shrink: 0;
    margin: 0 14px;
    align-self: center;
}

/* Allow selection in filter inputs */
.database-page input,
.database-page select,
.database-page textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.db-panel-filters {
    min-height: 0;
    gap: 0;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    transition: padding 0.15s ease;
}

.db-filter-bar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    padding: 4px 12px;
    min-height: 0;
}

.db-filter-bar-head .db-results-count {
    margin-left: auto;
    flex-shrink: 0;
}

.db-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.db-panel-filters.db-filters-collapsed .db-filter-controls {
    display: none;
}

.db-panel-filters.db-filters-collapsed .db-filter-bar-head {
    cursor: pointer;
    padding: 4px 12px;
}

.db-panel-filters.db-filters-collapsed .db-filter-bar-head:hover {
    background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-secondary));
}

.db-panel-filters.db-filters-collapsed .db-filter-chips:not([hidden]) {
    padding-top: 0;
}

.db-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: inherit;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.db-filter-toggle-btn:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-secondary));
}

.db-filter-toggle-icon {
    font-size: 0.65rem;
    line-height: 1;
}

.db-filter-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-mono);
    border-radius: 999px;
    background: var(--accent-blue);
    color: #fff;
}

#databasePanel.db-filters-collapsed #dbFilterStrip {
    display: none !important;
}

.db-panel-toolbar .db-search-btn {
    font-weight: 600;
}

.db-filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

.db-date-presets {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.db-date-preset-btn {
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.db-date-preset-btn:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border-color));
}

.db-date-preset-btn.active {
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--bg-secondary));
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.db-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    min-height: 0;
}

.db-filter-chips:not([hidden]) {
    padding-top: 2px;
}

.db-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 10px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-secondary));
    color: var(--text-primary);
    max-width: 280px;
}

.db-filter-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-filter-chip-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 2px;
}

.db-filter-chip-remove:hover {
    color: var(--accent-red);
}

.db-presets-btn {
    font-size: 0.78rem;
    padding: 5px 12px;
}

.db-presets-empty,
.db-presets-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 12px 0;
    text-align: center;
}

.db-presets-list {
    margin-top: 8px;
}

.db-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.fwd-chart-cell.db-chart-cell-focused,
.fwd-chart-cell.chart-grid-cell-active {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.35);
}

.fwd-chart-cell.db-chart-cell-focused {
    outline: none;
}

.db-chart-kbd-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-left: auto;
}

#databasePanel.db-charts-mode .db-filter-strip-wrap {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--bg-secondary);
    box-shadow: 0 1px 0 var(--border-color);
}

#databasePanel.db-charts-mode .db-filter-strip {
    background: var(--bg-secondary);
    flex-shrink: 0;
}

#databasePanel.db-col-filters-collapsed .db-filter-strip {
    display: none;
}

.db-col-filter-toggle-btn {
    font-size: 0.78rem;
}

#scanRunsPanel .panel-header .database-subnav--inline {
    flex-shrink: 0;
}

.toolbar-btn.db-search-btn {
    padding: 7px 22px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--accent-blue);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 70%, white);
    border-radius: 5px;
    color: #fff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-blue) 40%, transparent),
        0 2px 10px color-mix(in srgb, var(--accent-blue) 35%, transparent);
    flex-shrink: 0;
}

.toolbar-btn.db-search-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--accent-blue) 88%, white);
    border-color: color-mix(in srgb, var(--accent-blue) 60%, white);
    color: #fff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-blue) 55%, transparent),
        0 3px 14px color-mix(in srgb, var(--accent-blue) 45%, transparent);
}

.toolbar-btn.db-search-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

[data-theme="matrix"] .toolbar-btn.db-search-btn {
    color: #000;
}

[data-theme="matrix"] .toolbar-btn.db-search-btn:not(:disabled):hover {
    color: #000;
}

.db-results-count {
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}

#dbFilterStrip {
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: visible;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

#dbFilterStrip .db-table-wrapper {
    overflow: visible;
    max-height: none;
}

#dbFilterStrip .db-table {
    margin-bottom: 0;
}

#dbTableView {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#dbChartsContent {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

#dbChartsContent .fwd-charts-view {
    min-height: 100%;
}

.db-panel-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* --- Table wrapper --- */
.db-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
}

.db-pagination-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    flex-shrink: 0;
}
.db-page-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.db-page-btn:hover:not(:disabled) { background: var(--accent-blue); color: #fff; }
.db-page-btn:disabled { opacity: 0.35; cursor: default; }
.db-page-info { font-size: 12px; color: var(--text-muted); }

/* --- Database table --- */
.db-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    font-size: 0.75rem;
}

.db-table th,
.db-table td {
    padding: 2px 5px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
}

/* Compact numeric / flag columns — may ellipsis if unusually long (body cells only) */
.db-table td.db-col-num,
.db-table td.db-col-wide {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label columns — full text, natural width */
.db-col-text,
.db-col-xs {
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Ticker + date — shrink-wrap tight, no dead space */
.db-col-ticker,
.db-col-date {
    width: 1%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding: 2px 4px;
}

.db-col-ticker {
    max-width: 4.75rem;
}

.db-col-date {
    max-width: 5.35rem;
}

.db-col-num {
    width: auto;
    min-width: 2.75rem;
    max-width: 4.5rem;
}

.db-col-xs {
    min-width: 2.75rem;
}

.db-col-wide {
    min-width: 5rem;
    max-width: 9rem;
}

.db-table td { color: var(--text-primary); }

/* Group divider: thicker border on last column of each group */
.db-group-end {
    border-right: 2px solid rgba(74, 158, 255, 0.2) !important;
}

/* Alternating group column tint (opaque so sticky headers don't bleed) */
.db-table tbody td.db-grp-tint {
    background-color: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-secondary));
}
.db-table th.db-grp-tint { background-color: var(--bg-tertiary); }
.db-table tbody tr:hover td.db-grp-tint {
    background-color: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-secondary));
}

/* --- Group header row --- */
.db-group-row th {
    background-color: var(--bg-tertiary);
    text-align: center;
    font-weight: 600;
    font-size: 0.68rem;
    color: var(--accent-blue);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 4px;
    border-bottom: 2px solid var(--accent-blue);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* --- Column header row --- */
.db-header-row th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--text-primary);
    cursor: pointer;
    position: sticky;
    top: 22px;
    z-index: 21;
    padding: 2px 6px 2px 5px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    overflow: visible;
    vertical-align: middle;
}

.db-header-row th:hover {
    color: var(--accent-blue);
}

.db-header-row th.db-sorted {
    color: var(--accent-blue);
    background-color: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-tertiary));
    padding-right: 13px;
}

.db-header-inner {
    display: block;
    white-space: nowrap;
}

.db-header-text {
    display: inline;
}

/* Headers may be wider than body numeric cells so labels + sort icon fit */
.db-header-row th.db-col-num {
    max-width: none;
    min-width: 2.75rem;
}

.db-sort-indicator {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-blue);
    font-size: 0.55rem;
    line-height: 1;
    pointer-events: none;
}

/* --- Filter row --- */
.db-filter-row th {
    background-color: var(--bg-tertiary);
    position: sticky;
    top: 42px;
    z-index: 22;
    padding: 1px 2px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

.db-filter-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
    box-sizing: border-box;
}

.db-col-ticker .db-filter-input {
    width: 100%;
    min-width: 0;
    max-width: 3.25rem;
    padding: 2px 3px;
    box-sizing: border-box;
}
.db-col-date .db-filter-input {
    width: 100%;
    min-width: 0;
    max-width: 5.1rem;
    padding: 2px 3px;
    box-sizing: border-box;
}
.db-col-xs .db-filter-input { min-width: 2.75rem; }
.db-col-text .db-filter-input { min-width: 5.5rem; }
.db-col-num .db-filter-input { min-width: 2.75rem; max-width: 4.5rem; }

.db-filter-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* Condition filter (operator + value) */
.db-condition-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-condition-operator {
    width: 100%;
    padding: 2px 3px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
}

.db-condition-value {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 3px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
    box-sizing: border-box;
}

.db-col-num .db-condition-value { min-width: 2.5rem; max-width: 4.5rem; }

.db-condition-value:focus { border-color: var(--accent-blue); outline: none; }

/* --- Averages row --- */
.db-averages-row td {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    color: var(--accent-blue);
    position: sticky;
    top: 64px;
    z-index: 19;
    border-bottom: 2px solid var(--accent-blue);
    font-size: 0.72rem;
    padding: 2px 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* --- Frozen columns --- */
.db-table tbody td.db-frozen-0,
.db-table tbody td.db-frozen-1 {
    background-color: var(--bg-secondary);
}

.db-frozen-0 {
    position: sticky !important;
    left: 0;
    z-index: 5 !important;
    background-color: var(--bg-secondary);
}

.db-frozen-1 {
    position: sticky !important;
    left: var(--db-frozen-1-left, 68px);
    z-index: 5 !important;
    background-color: var(--bg-secondary);
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.4);
}

/* Frozen + header/group/filter intersections sit above body frozen cells */
.db-group-row .db-frozen-0,
.db-group-row .db-frozen-1 {
    z-index: 30 !important;
    background-color: var(--bg-tertiary) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.4);
}
.db-header-row .db-frozen-0,
.db-header-row .db-frozen-1 {
    z-index: 31 !important;
    background-color: var(--bg-tertiary) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.4);
}
.db-filter-row .db-frozen-0,
.db-filter-row .db-frozen-1 {
    z-index: 32 !important;
    background-color: var(--bg-tertiary) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.4);
}
.db-averages-row .db-frozen-0,
.db-averages-row .db-frozen-1 {
    z-index: 28 !important;
    background-color: var(--bg-tertiary) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.4);
}

/* --- Cell formatting --- */
.db-positive { color: var(--accent-green); }
.db-negative { color: var(--accent-red); }

.db-text-cell {
    cursor: pointer;
    color: var(--accent-blue);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.db-text-cell:hover {
    color: color-mix(in srgb, var(--accent-blue) 80%, white);
}

/* Chart icon in ticker cells */
.db-chart-icon {
    cursor: pointer;
    margin-left: 2px;
    opacity: 0.4;
    font-size: 0.7rem;
    transition: opacity 0.2s;
    display: inline;
    vertical-align: baseline;
}

.db-chart-icon:hover {
    opacity: 1;
}

/* Data row hover (opaque — transparent accent-glow showed through sticky headers) */
.db-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-secondary));
}
.db-table tbody tr:hover td.db-frozen-0,
.db-table tbody tr:hover td.db-frozen-1 {
    background-color: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-secondary));
}

/* --- Multi-select dropdown --- */
.db-multiselect-container {
    position: relative;
}

.db-multiselect-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-col-text .db-multiselect-btn { min-width: 5.5rem; }
.db-col-xs .db-multiselect-btn { min-width: 2.75rem; }

.db-multiselect-btn.has-selection {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.db-multiselect-dropdown {
    position: fixed;
    min-width: 180px;
    max-height: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    z-index: 5000;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    display: none;
}

.db-multiselect-dropdown.open { display: block; }

.db-multiselect-search {
    width: calc(100% - 8px);
    margin: 4px;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 0.7rem;
}

.db-multiselect-clear {
    display: block;
    width: calc(100% - 8px);
    margin: 0 4px 4px;
    padding: 3px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    text-align: center;
}

.db-multiselect-clear:hover { color: var(--accent-red); border-color: var(--accent-red); }

.db-multiselect-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-primary);
}

.db-multiselect-option:hover { background: var(--bg-tertiary); }

.db-multiselect-option input[type="checkbox"] {
    accent-color: var(--accent-blue);
}

/* --- Database chart modal --- */
.db-chart-modal-content {
    max-width: 1200px;
    width: 95vw;
    max-height: 90vh;
}

.db-chart-tabs {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.db-chart-tab {
    padding: 5px 14px;
    border: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.db-chart-tab.active {
    background: var(--accent-blue);
    color: #fff;
    font-weight: 600;
}

.db-chart-tab:hover:not(.active) {
    color: var(--text-primary);
}

.db-chart-about {
    padding: 0 20px 12px;
    border-bottom: 1px solid var(--border-color);
    max-height: 140px;
    overflow-y: auto;
}

.db-chart-about .search-section {
    margin-bottom: 0;
}

.db-chart-about-company {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.db-chart-modal-body {
    min-height: 450px;
    position: relative;
}

.db-chart-error {
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
    font-size: 0.9rem;
}

/* --- Database text modal --- */
.db-text-modal-content {
    max-width: 900px;
    width: 90vw;
    max-height: 85vh;
}

#dbTextModalBody {
    white-space: pre-wrap;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-primary);
    max-height: 70vh;
    overflow-y: auto;
}

/* --- Database PR edit mode --- */
.db-curator-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.db-edit-cell {
    cursor: pointer;
    position: relative;
}

.db-edit-cell:hover {
    background: rgba(74, 158, 255, 0.08);
}

.db-edit-cell.db-edit-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.db-edit-cell.db-edit-pr-label {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-edit-cell .db-edit-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.db-edit-badge.done {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.db-edit-badge.skipped {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.db-pr-edit-modal {
    max-width: 1100px;
    width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.db-pr-edit-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.db-pr-edit-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.db-pr-edit-left,
.db-pr-edit-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.db-pr-edit-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.db-pr-edit-select {
    width: 100%;
    margin-bottom: 12px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
}

.db-pr-candidates {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    max-height: 50vh;
}

.db-pr-candidate {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    background: var(--bg-primary);
    text-align: left;
    color: var(--text-primary);
    font: inherit;
}

.db-pr-candidate:hover {
    border-color: var(--accent-blue);
}

.db-pr-candidate.selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

.db-pr-candidate.current {
    border-color: #f59e0b;
}

.db-pr-candidate .headline {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.db-pr-candidate .tags {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.db-pr-edit-preview {
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    max-height: 55vh;
}

.db-pr-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.db-pr-edit-progress {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .db-pr-edit-body {
        grid-template-columns: 1fr;
    }
}

/* --- Loading / empty state --- */
.db-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.db-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
}

/* --- Chart Resize Handle --- */
.db-chart-resize-handle {
    flex-shrink: 0;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
    position: relative;
    margin: -2px 0;
    z-index: 5;
}

.db-chart-resize-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-color);
    transition: background 0.15s;
}

.db-chart-resize-handle:hover::after,
.db-chart-resize-handle.dragging::after {
    background: var(--accent-blue);
}

/* --- Chart Generator Panel --- */
.db-chart-gen-panel {
    flex-shrink: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.db-chart-gen-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    flex-wrap: wrap;
}

.db-chart-gen-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.db-chart-gen-right {
    display: flex;
    align-items: center;
}

.db-chart-gen-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
    white-space: nowrap;
}

.db-chart-gen-select {
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    min-width: 120px;
    cursor: pointer;
}

.db-chart-gen-select:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.db-chart-gen-info {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: 'Fira Code', monospace;
}

.db-chart-gen-canvas-wrap {
    position: relative;
    padding: 12px 16px 16px;
    height: 380px;
}

.db-chart-gen-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Axis value filter buttons & dropdowns */
.db-chart-filter-wrap {
    position: relative;
    display: inline-flex;
}

.db-chart-filter-btn {
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
}

.db-chart-filter-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.db-chart-filter-btn.has-filter { border-color: var(--accent-blue); color: var(--accent-blue); }

.db-chart-filter-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 180px;
    max-height: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    overflow-y: auto;
    margin-top: 4px;
}

.db-chart-filter-dropdown.open { display: block; }

.db-chart-filter-dropdown .filter-search {
    width: calc(100% - 8px);
    margin: 4px;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-family: 'Fira Code', monospace;
}

.db-chart-filter-dropdown .filter-actions {
    display: flex;
    gap: 4px;
    padding: 2px 4px 4px;
}

.db-chart-filter-dropdown .filter-actions button {
    flex: 1;
    padding: 2px 4px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-family: 'Fira Code', monospace;
    cursor: pointer;
}

.db-chart-filter-dropdown .filter-actions button:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.db-chart-filter-dropdown .filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.72rem;
    font-family: 'Fira Code', monospace;
    color: var(--text-secondary);
}

.db-chart-filter-dropdown .filter-option:hover { background: var(--bg-tertiary); }

.db-chart-filter-dropdown .filter-option input[type="checkbox"] {
    accent-color: var(--accent-blue);
}

.db-chart-filter-dropdown .filter-numeric {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-chart-filter-dropdown .filter-num-op {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
    cursor: pointer;
}

.db-chart-filter-dropdown .filter-num-val {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
    box-sizing: border-box;
}

.db-chart-filter-dropdown .filter-num-val:focus,
.db-chart-filter-dropdown .filter-num-op:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* --- Help Modal --- */
.help-modal-content {
    max-width: 680px;
    max-height: 80vh;
}

.help-tabs {
    display: flex;
    gap: 4px;
    margin-left: 16px;
}

.help-tab {
    padding: 5px 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.help-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.help-tab.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.help-modal-body {
    overflow-y: auto;
    max-height: calc(80vh - 80px);
    padding: 16px 20px;
}

.help-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.help-group h4 {
    color: var(--accent-blue);
    font-size: 0.95rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.help-group p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}

.help-group ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.help-group li {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 14px;
    position: relative;
}

.help-group li::before {
    content: '\2022';
    color: var(--text-muted);
    position: absolute;
    left: 0;
}

.help-group li strong {
    color: var(--text-primary);
}

.help-green { color: var(--accent-green); }
.help-red { color: var(--accent-red); }
.help-yellow { color: var(--accent-yellow); }
.help-blue { color: var(--accent-blue); }

.help-group kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.78rem;
    font-family: 'Fira Code', monospace;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.help-group code {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--accent-blue);
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ============= Financials Icon (Screener) ============= */
.fin-icon {
    cursor: pointer;
    margin-left: 4px;
    opacity: 0.3;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-green);
    transition: opacity 0.2s;
    font-family: 'Fira Code', monospace;
}
.fin-icon:hover {
    opacity: 1;
}

/* ============= Financials (Search Modal Integrated) ============= */

.fin-tabs-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.fin-stmt-tabs, .fin-view-tabs {
    display: flex;
    gap: 6px;
}

.fin-stmt-tab, .fin-view-tab {
    padding: 6px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.fin-stmt-tab:hover, .fin-view-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.fin-stmt-tab.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}
.fin-view-tab.active {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

.fin-key-toggle {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
    transition: all 0.15s;
    font-family: 'Fira Code', monospace;
}
.fin-key-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.fin-key-toggle.active {
    background: rgba(0, 200, 120, 0.12);
    border-color: rgba(0, 200, 120, 0.4);
    color: var(--accent-green);
}

/* ── Financial Inflection Sidebar ─────────────────────────── */
/* The table gets the full width; the events run as a strip beneath it.
   The old 230px right-hand column cost the statement that width and
   pushed a six-year annual view into a horizontal scroll, so the third
   year was cut off before anyone scrolled. */
.fin-layout-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.fin-layout-wrap .fin-table-scroll {
    width: 100%;
    min-width: 0;
}
.fin-inflection-sidebar {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    align-items: flex-start;
}
/* One group per label, so "Latest" stays attached to its own events. */
.fin-infl-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.fin-infl-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    min-width: 0;
}
.fin-infl-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.fin-infl-prior-label { margin-top: 0; }
.fin-infl-event {
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.fin-infl-event-prior { opacity: 0.65; }
.fin-infl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.fin-infl-dot-pos { background: var(--accent-green); }
.fin-infl-dot-neg { background: var(--accent-red); }
.fin-infl-period {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    display: inline;
    margin-right: 6px;
}
.fin-infl-event > div { display: flex; align-items: baseline; gap: 6px; }
.fin-infl-desc {
    font-size: 0.74rem;
    color: var(--text-primary);
    line-height: 1.3;
}
.fin-infl-empty {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

.fin-error {
    color: var(--accent-red);
    padding: 16px;
    text-align: center;
}

.fin-no-data {
    color: var(--text-muted);
    text-align: center;
    padding: 32px;
}

/* Financials statement table */
.fin-table-scroll {
    overflow-x: auto;
    margin-bottom: 8px;
}

.fin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Fira Code', monospace;
    font-size: 0.78rem;
}

.fin-table th {
    text-align: right;
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 2;
}
.fin-table th.fin-label-col {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-secondary);
    min-width: 180px;
}

.fin-table td {
    text-align: right;
    padding: 6px 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(30, 41, 54, 0.4);
    white-space: nowrap;
}
.fin-table td.fin-label-col {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--bg-primary);
    z-index: 1;
    color: var(--text-primary);
    min-width: 180px;
}

.fin-table tbody tr:hover td {
    background: var(--bg-tertiary);
}
.fin-table tbody tr:hover td.fin-label-col {
    background: var(--bg-tertiary);
}

/* Subtotal rows (bold) */
.fin-subtotal td {
    font-weight: 600;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}
.fin-subtotal td.fin-label-col {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* Value coloring — needs .fin-table td prefix to beat .fin-table td specificity */
.fin-positive, .fin-table td.fin-positive { color: var(--accent-green); }
.fin-negative, .fin-table td.fin-negative { color: var(--accent-red); }

/* Turnaround highlight — first positive after streak of negatives */
.fin-turnaround, .fin-table td.fin-turnaround {
    color: #fff;
    background: rgba(0, 200, 120, 0.22);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 200, 120, 0.35);
}

/* Y/Y and Q/Q change sub-lines inside key metric cells */
.fin-changes {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1px;
    line-height: 1.15;
}
.fin-chg {
    font-size: 0.58rem;
    font-family: 'Fira Code', monospace;
    opacity: 0.85;
}
.fin-chg-pos { color: #fff; }
.fin-chg-neg { color: #fff; }

/* Inflection point badge (search modal header) */
.search-inflection-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(0, 200, 120, 0.06);
    border-bottom: 1px solid var(--border-color);
}
.inflection-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-green);
    white-space: nowrap;
}
.inflection-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.inflection-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 200, 120, 0.12);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 200, 120, 0.25);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.inflection-item:hover {
    background: rgba(0, 200, 120, 0.22);
    border-color: rgba(0, 200, 120, 0.45);
}
.inflection-period {
    font-weight: 400;
    color: var(--accent-green);
    font-size: 0.68rem;
}
.inflection-item.inflection-annual {
    border-color: rgba(0, 200, 120, 0.5);
    background: rgba(0, 200, 120, 0.18);
    font-weight: 600;
}

/* Trend signal badge (search modal header — amber) */
.search-trend-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    background: rgba(245, 158, 11, 0.06);
    border-bottom: 1px solid var(--border-color);
}
.trend-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #f59e0b;
    white-space: nowrap;
}
.trend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.trend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245, 158, 11, 0.10);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.20);
    font-size: 0.70rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.trend-item:hover {
    background: rgba(245, 158, 11, 0.20);
    border-color: rgba(245, 158, 11, 0.40);
}

/* Trend signal cell highlight (amber, subordinate to turnaround green) */
.fin-trend-up, .fin-table td.fin-trend-up {
    background: rgba(245, 158, 11, 0.12);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.20);
}
/* Turnaround always wins over trend signal */
.fin-turnaround.fin-trend-up, .fin-table td.fin-turnaround.fin-trend-up {
    background: rgba(0, 200, 120, 0.22);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 120, 0.35);
}

.fin-source {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 6px;
}

.fin-8k-period {
    color: #4ade80 !important;
    font-style: italic;
}

.fin-nongaap .fin-label-col {
    font-style: italic;
    color: #a78bfa;
}

/* Earnings Trend Charts (Revenue + EPS histograms) */
/* Trends section heading */
.fin-trend-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.fin-trend-charts {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
}
.fin-trend-chart {
    flex: 1;
    min-width: 0;
}
.fin-trend-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.fin-trend-area {
    display: flex;
    gap: 4px;
}
.fin-trend-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.6rem;
    color: #4ade80;
    font-weight: 600;
    padding: 0 4px 0 0;
    min-width: 38px;
    white-space: nowrap;
}
.fin-trend-bars-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.fin-trend-zero {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 1;
}
.fin-trend-yaxis-neg {
    position: relative;
}
.fin-trend-bars {
    display: flex;
    gap: 2px;
    height: 160px;
    position: relative;
}
.fin-trend-bar-col {
    flex: 1;
    position: relative;
    min-width: 0;
}
.fin-trend-bar {
    position: absolute;
    width: 75%;
    max-width: 18px;
    min-width: 3px;
    left: 50%;
    transform: translateX(-50%);
    background: #3ea8b5;
    border-radius: 1px 1px 0 0;
    transition: opacity 0.15s;
}
.fin-trend-bar:hover {
    opacity: 0.8;
}
.fin-trend-bar.neg {
    background: #3ea8b5;
    border-radius: 0 0 1px 1px;
}
/* Labels row (separate from bars) — uses relative positioning */
.fin-trend-labels {
    position: relative;
    height: 14px;
    margin-top: 4px;
}
.fin-trend-labels span {
    position: absolute;
    font-size: 0.5rem;
    color: var(--text-muted);
    white-space: nowrap;
    transform: translateX(-50%);
}
/* SVG value line overlay */
.fin-trend-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
    z-index: 2;
}
/* Trend chart area outer wrapper (no scroll, bars flex to fit) */
.fin-trend-area-outer {
    width: 100%;
}

/* Database page financials icon (keep for database.js) */
.db-fin-icon {
    cursor: pointer;
    margin-left: 3px;
    opacity: 0.35;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-green);
    transition: opacity 0.2s;
    font-family: 'Fira Code', monospace;
}
.db-fin-icon:hover { opacity: 1; }

/* ── Forward Testing Stats Bar ──────────────────────────── */
.fwd-stats-wrapper {
    margin-bottom: 0;
}
/* The totals sit in the table header now, in one cell spanning everything left
   of the first method column. That is the only arrangement where they share a
   line with the per-method figures and those figures stay over their own
   columns. No border or background of its own -- the header row supplies both. */
.fwd-snapshot {
    display: flex;
    gap: 12px;
    padding: 0;
    flex-wrap: nowrap;
    align-items: center;
}
.data-table thead tr.fwd-method-row th.fwd-snap-cell {
    padding: 8px 14px;
    text-align: left;
    vertical-align: middle;
}
/* The switches end the totals cell, right beside the figures they filter. */
.fwd-snapshot .fwd-methods-head {
    margin: 0 0 0 auto;
    padding: 0 0 0 12px;
    align-self: center;
}
.fwd-snap-bucket {
    flex: 1;
    min-width: 160px;
    padding: 6px 10px;
    border-right: 1px solid var(--border-color);
}
.fwd-snap-bucket:last-child {
    border-right: none;
}
.fwd-snap-title {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.fwd-snap-stat {
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Fira Code', monospace;
    color: var(--text-primary);
}
.fwd-snap-stat .positive { color: var(--accent-green); }
.fwd-snap-stat .negative { color: var(--accent-red); }
.fwd-snap-stat.muted { color: var(--text-muted); font-weight: 400; }
.fwd-snap-detail {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 3px;
}
.fwd-snap-detail .positive { color: var(--accent-green); }
.fwd-snap-detail .negative { color: var(--accent-red); }
.fwd-snap-top {
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.fwd-snap-top-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fwd-snap-performer {
    white-space: nowrap;
}
.fwd-snap-performer .cell-ticker { color: var(--accent-blue); }
.fwd-snap-performer .positive { color: var(--accent-green); }

.fwd-snap-title.clickable {
    cursor: pointer;
    user-select: none;
}
.fwd-snap-title.clickable:hover {
    color: var(--accent-blue);
}
.fwd-snap-chevron {
    font-size: 0.6rem;
    margin-left: 3px;
    display: inline-block;
    transition: transform 0.15s;
}
.fwd-snap-detail-area {
    max-height: 300px;
    overflow-y: auto;
}
.fwd-snap-trades {
    margin-top: 6px;
}
.fwd-snap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-family: 'Fira Code', monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.fwd-snap-table thead th {
    padding: 5px 10px;
    text-align: left;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.fwd-snap-table tbody td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.03));
}
.fwd-snap-table tbody tr:hover {
    background: var(--bg-tertiary);
}
.fwd-snap-table .positive { color: var(--accent-green); }
.fwd-snap-table .negative { color: var(--accent-red); }
.fwd-snap-table .cell-ticker { color: var(--accent-blue); }
.fwd-snap-table .muted { color: var(--text-muted); }

/* Forward testing chart grid */
.fwd-charts-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fwd-charts-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.fwd-charts-count {
    font-weight: 600;
    color: var(--text-primary);
}
.fwd-charts-sort,
.fwd-charts-filter {
    font-family: var(--font-mono);
}
.fwd-charts-table-head {
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    -webkit-overflow-scrolling: touch;
}
.fwd-charts-table-head .data-table {
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}
/* Header-only sort bar: don't apply body column width caps — show full labels */
.fwd-charts-table-head .data-table th {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}
.fwd-charts-table-head .data-table th.col-narrow,
.fwd-charts-table-head .data-table th.col-rvol,
.fwd-charts-table-head .data-table th.col-theme,
.fwd-charts-table-head .data-table th.col-source,
.fwd-charts-table-head .data-table th.col-rank,
.fwd-charts-table-head .data-table th.col-winrate {
    width: auto;
    max-width: none;
    min-width: 0;
}
.fwd-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.fwd-hl-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 6px;
    max-width: 118px;
    cursor: pointer;
}

.toolbar-select.scan-run-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 8px;
    max-width: 160px;
}

.scan-runs-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px 8px;
}

.data-table th.col-context,
.data-table td.col-context {
    max-width: 320px;
    min-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: var(--text-secondary);
}

.scan-runs-criteria-item {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: var(--font-mono);
}
.fwd-chart-cell {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s;
    min-width: 0;
}
.fwd-chart-cell:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.25);
}
.fwd-chart-cell-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.fwd-chart-cell-ticker {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-blue);
    flex-shrink: 0;
}
.fwd-chart-cell-date {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 0;
}
.fwd-chart-cell-context {
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fwd-chart-cell-chg {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.fwd-chart-cell-chg.cell-positive {
    color: var(--accent-green);
}
.fwd-chart-cell-chg.cell-negative {
    color: var(--accent-red);
}
.fwd-chart-cell-chg-pending {
    color: var(--text-muted);
    font-weight: 500;
}
.fwd-chart-grid .chart-cell-canvas {
    width: 100%;
    height: 260px;
    min-height: 220px;
    background: var(--bg-primary);
}
/* Stacked layout: one full-width chart per row, sized to the viewport */
.fwd-chart-grid.fwd-chart-stacked {
    grid-template-columns: 1fr;
    gap: 12px;
}
.fwd-chart-grid.fwd-chart-stacked .chart-cell-canvas {
    height: clamp(360px, 68vh, 720px);
}
.fwd-chart-grid.fwd-chart-stacked .fwd-chart-cell-ticker,
.fwd-chart-grid.fwd-chart-stacked .fwd-chart-cell-date,
.fwd-chart-grid.fwd-chart-stacked .fwd-chart-cell-chg {
    font-size: 13px;
}
.fwd-chart-grid.fwd-chart-stacked .fwd-chart-cell-context {
    font-size: 11px;
}

/* Chart cards: two per row, each with a sidebar of that row's table data.
   Shared by the screener and forward-testing chart views. */
#screenersContent .fwd-charts-view,
#forwardTestingContent .fwd-charts-view {
    /* Both views sit in resizable side-by-side panels, so the card layout has to
       respond to the panel's width — a viewport media query can't see it. */
    container-type: inline-size;
}
.fwd-chart-grid.chart-side-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.chart-side-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 210px);
    cursor: default;
}
.chart-side-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    cursor: pointer;
}
.fwd-chart-grid.chart-side-grid .chart-cell-canvas {
    height: 300px;
    min-height: 240px;
}
.chart-side-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
    overflow-y: auto;
    max-height: 328px;
}
.chart-side-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.chart-side-panel .fwd-stat-line {
    font-size: 0.72rem;
    gap: 8px;
}
.chart-side-panel .fwd-stat-label {
    font-size: 0.62rem;
}
.chart-side-panel .fwd-stat-val {
    font-size: 0.7rem;
}
.chart-side-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.chart-side-block-label {
    color: var(--text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chart-side-block-text {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-primary);
    white-space: pre-wrap;
}
.chart-side-empty {
    color: var(--text-muted);
    font-size: 0.7rem;
}
/* Carry the table's row highlights onto the cards. Tint the header and
   sidebar only — a wash over the chart itself hurts candle readability. */
.chart-side-cell.row-highlight-green {
    border-left: 3px solid var(--accent-green);
}
.chart-side-cell.row-highlight-green .fwd-chart-cell-head,
.chart-side-cell.row-highlight-green .chart-side-panel {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0.04) 100%);
}
.chart-side-cell.row-highlight-blue {
    border-left: 3px solid #5ab0ff;
    box-shadow: inset 4px 0 12px rgba(74, 158, 255, 0.15);
}
.chart-side-cell.row-highlight-blue .fwd-chart-cell-head,
.chart-side-cell.row-highlight-blue .chart-side-panel {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.28) 0%, rgba(74, 158, 255, 0.07) 100%);
}
@container (max-width: 1000px) {
    .fwd-chart-grid.chart-side-grid {
        grid-template-columns: 1fr;
    }
}
@container (max-width: 560px) {
    .chart-side-cell {
        grid-template-columns: 1fr;
    }
    .chart-side-panel {
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

.fwd-chart-cell.chart-grid-cell-active {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.35);
}

/* Chart grid expand modal (theme tracker + forward testing) */
.chart-grid-expand-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 12050;
}
.chart-grid-expand-overlay.active { display: block; }
.chart-grid-expand-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 96vw);
    max-height: 96vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    z-index: 12051;
    overflow: hidden;
    flex-direction: column;
}
.chart-grid-expand-modal.chart-grid-expand-modal--with-sidebar {
    width: min(1680px, 98vw);
}
.chart-grid-expand-modal.chart-grid-expand-modal--large {
    width: min(1680px, 98vw);
}
.chart-grid-expand-modal.active { display: flex; }
.chart-grid-expand-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.chart-grid-expand-capture {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: var(--bg-primary);
}
.chart-grid-expand-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.chart-grid-expand-ticker {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-blue);
    flex-shrink: 0;
}
.chart-grid-expand-date {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}
.chart-grid-expand-chg {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    margin-left: auto;
}
.chart-grid-expand-chg.cell-positive { color: var(--accent-green); }
.chart-grid-expand-chg.cell-negative { color: var(--accent-red); }
.chart-grid-expand-canvas {
    width: 100%;
    flex: 1;
    min-height: 420px;
    height: min(62vh, 680px);
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}
.chart-grid-expand-modal--with-sidebar .chart-grid-expand-canvas {
    min-height: 480px;
    height: clamp(480px, 72vh, 820px);
}
.chart-grid-expand-modal--large .chart-grid-expand-canvas {
    min-height: 480px;
    height: clamp(480px, 72vh, 820px);
}
.chart-grid-expand-sidebar {
    width: min(360px, 34vw);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.chart-grid-expand-sidebar[hidden] {
    display: none !important;
}
.chart-grid-expand-sidebar-head {
    flex-shrink: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent-blue);
}
.chart-grid-expand-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0;
}
.chart-grid-expand-sidebar-body .fwd-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 14px;
    font-size: 0.76rem;
    line-height: 1.35;
}
.chart-grid-expand-sidebar-body .fwd-stat-label {
    color: var(--text-muted);
    flex-shrink: 0;
    max-width: 46%;
}
.chart-grid-expand-sidebar-body .fwd-stat-value {
    text-align: right;
    font-family: var(--font-mono);
    color: var(--text-primary);
    word-break: break-word;
}
.chart-grid-expand-sidebar-body .db-pr-collapsible {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 100%;
}
.chart-grid-expand-sidebar-body .db-pr-headline {
    font-family: var(--font-sans, inherit);
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-primary);
    text-align: right;
}
.chart-grid-expand-sidebar-body .db-pr-expand-toggle {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.68rem;
    color: var(--accent-blue, #4a9eff);
    cursor: pointer;
    text-align: right;
}
.chart-grid-expand-sidebar-body .db-pr-expand-toggle:hover {
    text-decoration: underline;
}
.chart-grid-expand-sidebar-body .db-pr-full {
    font-family: var(--font-sans, inherit);
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: left;
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}
.fwd-stats-popup-body .db-pr-collapsible {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.fwd-stats-popup-body .db-pr-headline {
    font-family: var(--font-sans, inherit);
    text-align: right;
}
.fwd-stats-popup-body .db-pr-expand-toggle {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.68rem;
    color: var(--accent-blue, #4a9eff);
    cursor: pointer;
}
.fwd-stats-popup-body .db-pr-full {
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: pre-wrap;
    max-height: 180px;
    overflow-y: auto;
    text-align: left;
}
.chart-grid-expand-sidebar-body .fwd-stats-popup-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    text-align: center;
}
.chart-grid-expand-sidebar-body .fwd-stats-popup-footer .fwd-stat-link {
    color: var(--accent-blue, #4a9eff);
    text-decoration: none;
}
.chart-grid-expand-sidebar-body .fwd-stats-popup-footer .fwd-stat-link:hover {
    text-decoration: underline;
}
.chart-grid-expand-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.chart-grid-expand-nav {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}
.chart-grid-expand-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-right: auto;
}
.chart-grid-expand-copy-btn {
    font-size: 11px;
    padding: 4px 10px;
}
.chart-grid-expand-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 4px;
}
.chart-grid-expand-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
@media (max-width: 960px) {
    .chart-grid-expand-modal.chart-grid-expand-modal--with-sidebar {
        width: min(98vw, 100vw);
        max-height: 98vh;
    }
    .chart-grid-expand-modal--with-sidebar .chart-grid-expand-body {
        flex-direction: column;
    }
    .chart-grid-expand-sidebar {
        width: 100%;
        max-height: 38vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
    .chart-grid-expand-modal--with-sidebar .chart-grid-expand-canvas {
        height: clamp(320px, 48vh, 560px);
        min-height: 320px;
    }
}

.fwd-chart-stats-popup {
    position: fixed;
    z-index: 12000;
    display: none;
    flex-direction: column;
    min-width: 220px;
    max-width: 320px;
    max-height: min(420px, 70vh);
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    padding: 0;
}
.fwd-chart-stats-popup.active {
    display: flex;
    pointer-events: auto;
}
.fwd-stats-popup-head {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-blue);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
}
.fwd-stats-popup-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.fwd-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.78rem;
    line-height: 1.35;
}
.fwd-stat-value {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    word-break: break-word;
}
.fwd-stat-link {
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.76rem;
}
.fwd-stat-link:hover {
    color: var(--text-primary);
}
.fwd-stat-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-primary);
}
.fwd-stat-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.fwd-stat-val {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.76rem;
}
/* getCellClass colours are written for table cells (.data-table td.cell-*), so a
 * stat line picks up the class and none of the colour. Mirror the table palette
 * onto the value — the label keeps its own muted style, as it does in a header. */
.fwd-stat-line.cell-positive .fwd-stat-val {
    color: var(--accent-green);
}
.fwd-stat-line.cell-negative .fwd-stat-val {
    color: var(--accent-red);
}
.fwd-stat-line.cell-warning .fwd-stat-val {
    color: var(--accent-yellow);
}
.fwd-stat-line.cell-neutral .fwd-stat-val {
    color: var(--text-secondary);
}
.fwd-stat-line.cell-dim .fwd-stat-val {
    color: var(--text-muted, #555);
}
.fwd-stat-line.cell-exceptional .fwd-stat-val {
    color: #ffd700;
    font-weight: 600;
}
.fwd-stat-line.cell-ticker .fwd-stat-val {
    color: var(--accent-blue);
    font-weight: 600;
}
.fwd-stat-line.cell-source .fwd-stat-val {
    color: var(--text-muted);
    font-weight: 600;
}
.fwd-stats-popup-footer {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    text-align: center;
    background: var(--bg-secondary);
}
.fwd-stats-popup-footer .fwd-stat-link {
    color: var(--accent-blue, #4a9eff);
    text-decoration: none;
}
.fwd-stats-popup-footer .fwd-stat-link:hover {
    text-decoration: underline;
}
.db-charts-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.82rem;
}
.fwd-stats-popup-hint {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.68rem;
    color: var(--text-dim);
    text-align: center;
    background: var(--bg-secondary);
}

/* ── Screener Replay ──────────────────────────────────── */
.toolbar-date {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: 'Fira Code', monospace;
    cursor: pointer;
}
.toolbar-date::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
.replay-banner {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: var(--accent-yellow);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
    text-align: center;
    margin-bottom: 6px;
    font-family: 'Fira Code', monospace;
}

/* ── Momentum Arrows ─────────────────────────────────── */
.cell-muted {
    color: var(--text-muted) !important;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .db-panel-toolbar {
        justify-content: flex-start;
    }

    .db-toolbar-spacer {
        flex-basis: 100%;
        height: 0;
        min-width: 0;
    }

    .db-toolbar-zone--display {
        width: 100%;
        padding-top: 6px;
    }

    .db-panel-toolbar .db-results-count {
        margin-left: auto;
        border-left: none;
        padding-left: 0;
    }

    .db-toolbar-divider {
        margin: 0 10px;
    }
    .header-nav {
        margin: 0 6px;
    }
    .nav-tab {
        padding: 5px 12px;
        font-size: 0.75rem;
    }
}

/* ── Hamburger menu button (hidden on desktop) ──────────── */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    margin-left: auto;
}
.mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
/* Animate to X when open */
.header.mobile-menu-open .mobile-menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.header.mobile-menu-open .mobile-menu-btn span:nth-child(2) {
    opacity: 0;
}
.header.mobile-menu-open .mobile-menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ── Mobile cards (hidden on desktop) ───────────────────── */
.mobile-cards {
    display: none;
}
.mobile-theme-table {
    display: none;
}

/* ── Mobile breakpoint ──────────────────────────────────── */
/* Portrait phones only.
 *
 * The min-height is what makes "portrait" precise. A small phone in landscape
 * (an SE is 667x375) is narrower than 767 and would otherwise land here purely
 * on width; requiring a tall viewport sends every landscape phone to the
 * desktop layout instead, whatever its width.
 *
 * Landscape deliberately does NOT come here. Turning the phone sideways is a
 * request for more screen, and answering it with mobile cards throws away the
 * density that was the point -- so landscape keeps the desktop layout and is
 * tuned for a short viewport further down instead.
 *
 * That is only possible because .header wraps now. It used to need ~1500px on
 * one line, which became the body's width on any narrower screen: a landscape
 * phone was pushed to 1394px against an 844px viewport and Chrome shrink-to-fit
 * the whole page to about 60%.
 */
@media (max-width: 767px) and (min-height: 541px) {
    /* Layout: natural scroll instead of viewport lock */
    .dashboard {
        height: auto;
        min-height: 100vh;
    }
    .panels-grid {
        /* `display` is deliberately NOT !important. switchPage hides this
           page with an inline `display: none`, and an !important
           declaration outranks an inline style that carries none -- so the
           whole screener stayed stacked underneath every other page. This
           block sits after the base `display: grid`, so source order alone
           is enough to win. */
        display: flex;
        flex-direction: column;
        height: auto !important;
        grid-template-columns: unset !important;
        padding: 8px 0;
        gap: 8px;
    }
    .panel {
        margin: 0 !important;
        min-height: unset;
        max-height: none;
    }
    .panel-content {
        overflow-y: auto;
        max-height: 70vh;
    }
    .resize-handle { display: none; }

    /* Header: hamburger layout */
    .header {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 0;
    }
    .mobile-menu-btn {
        display: flex;
    }
    .header-nav {
        display: none;
        order: 10;
        width: 100%;
        flex-direction: column;
        gap: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
        margin-top: 10px;
    }
    .header-controls {
        display: none;
        order: 11;
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
    }
    .header.mobile-menu-open .header-nav,
    .header.mobile-menu-open .header-controls {
        display: flex;
    }
    .nav-tab {
        min-height: 44px;
        font-size: 0.85rem;
    }

    /* Hide ticker tape */
    .market-pulse {
        display: none !important;
    }

    /* Tables: hidden on mobile (replaced by cards) */
    .data-table {
        display: none !important;
    }
    .table-footer {
        display: none;
    }

    /* Mobile cards: visible on mobile */
    .mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mobile-card {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-left: 3px solid var(--text-muted);
        border-radius: 8px;
        padding: 12px 14px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .mobile-card:active {
        background: var(--bg-secondary);
    }
    .mobile-card.card-positive {
        border-left-color: var(--accent-green);
    }
    .mobile-card.card-negative {
        border-left-color: var(--accent-red);
    }
    /* Row highlight styles (matching desktop table) */
    .mobile-card.row-highlight-green {
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.10) 0%, rgba(34, 197, 94, 0.03) 100%);
        border-left-color: var(--accent-green);
    }
    .mobile-card.row-highlight-blue {
        background: linear-gradient(90deg, rgba(74, 158, 255, 0.25) 0%, rgba(74, 158, 255, 0.06) 100%);
        border-left-color: #5ab0ff;
        box-shadow: inset 4px 0 12px rgba(74, 158, 255, 0.15);
    }
    .mobile-card.row-new {
        border-left-color: var(--accent-blue);
        animation: newRowFade 4s ease-out;
    }
    .mobile-card.row-pinned {
        border-left-color: var(--accent-yellow);
    }
    .mobile-card-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 4px;
    }
    .mobile-card-row:last-child {
        margin-bottom: 0;
    }
    .mobile-card-ticker {
        font-weight: 600;
        font-size: 1rem;
        color: var(--accent-blue);
    }
    .mobile-card-change {
        font-size: 0.85rem;
        font-weight: 600;
    }
    .mobile-card-change.positive { color: var(--accent-green); }
    .mobile-card-change.negative { color: var(--accent-red); }
    .mobile-card-meta {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }
    .mobile-card-meta span {
        margin-right: 10px;
    }
    .mobile-card-summary {
        font-size: 0.72rem;
        color: var(--text-muted);
        line-height: 1.3;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .mobile-cards-footer {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-align: center;
        padding: 6px 0;
    }

    /* Mobile theme tracker table */
    .mobile-theme-table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        font-size: 0.72rem;
    }
    .mobile-theme-table th {
        padding: 8px 6px;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 2px solid var(--border-color);
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
    }
    .mobile-theme-table th.sorted {
        color: var(--accent-blue);
    }
    .mobile-theme-table td {
        padding: 8px 6px;
        text-align: center;
        border-bottom: 1px solid rgba(30, 41, 54, 0.4);
        white-space: nowrap;
    }
    .mobile-theme-name-col {
        text-align: left !important;
        font-weight: 600;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-theme-perf-col {
        min-width: 36px;
    }
    .mobile-theme-table tbody tr {
        cursor: pointer;
    }
    .mobile-theme-table tbody tr:active {
        background: var(--bg-tertiary);
    }

    /* Touch-friendly targets */
    .toolbar-btn, .tab-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Full-screen modals on mobile */
    .search-modal {
        padding-top: 0;
        align-items: stretch;
    }
    .search-modal-content,
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .search-modal-content {
        overflow-y: auto;
    }
    .modal-close {
        font-size: 1.5rem;
        min-width: 44px;
        min-height: 44px;
    }

    /* Modal header: compact for mobile */
    .search-header {
        padding: 12px 14px 10px;
        padding-right: 48px; /* room for absolute close button */
    }
    .search-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 4px;
    }
    .search-ticker {
        font-size: 1.1rem;
    }
    .search-company {
        font-size: 0.8rem;
    }
    .search-price {
        font-size: 1.2rem;
    }
    .search-change {
        font-size: 0.9rem;
    }
    .search-price-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .search-sector {
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
    }
    .quick-links {
        gap: 4px;
    }
    .quick-link {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inflection + Trend badges: collapsed by default on mobile */
    .search-inflection-badge,
    .search-trend-badge {
        flex-wrap: wrap;
        padding: 8px 14px;
        gap: 6px;
    }
    .inflection-items,
    .trend-items {
        display: none;
        width: 100%;
        margin-left: 0;
    }
    .inflection-items.mobile-expanded,
    .trend-items.mobile-expanded {
        display: flex;
    }
    /* Collapse toggle indicator */
    .inflection-label,
    .trend-label {
        cursor: pointer;
    }
    .inflection-label::after,
    .trend-label::after {
        content: ' ▸';
        font-size: 0.65rem;
    }
    .inflection-label.expanded::after,
    .trend-label.expanded::after {
        content: ' ▾';
    }
    .inflection-item,
    .trend-item {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    /* Theme badge: stack on mobile */
    .search-theme-badge {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 14px;
    }
    .search-theme-badge .theme-ranks {
        margin-left: 0;
    }

    /* Modal body: scrollable */
    .search-modal-body {
        padding: 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Metrics grid: 2 columns on mobile */
    .search-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .search-metric {
        padding: 8px 10px;
    }
    .search-metric-label {
        font-size: 0.62rem;
    }
    .search-metric-value {
        font-size: 0.82rem;
    }

    /* The desktop rule already stacks; on a phone the strip reads better
       as rows than as a wrapping line. */
    .fin-inflection-sidebar {
        flex-direction: column;
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
    }
    .fin-infl-group { flex-direction: column; gap: 4px; }
    .fin-infl-items { flex-direction: column; gap: 6px; }
    .fin-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fin-table th, .fin-table td {
        padding: 5px 8px;
        font-size: 0.7rem;
    }
    .fin-table th.fin-label-col,
    .fin-table td.fin-label-col {
        min-width: 120px;
    }

    /* Trend charts: stack on mobile */
    .fin-trend-charts {
        flex-direction: column;
        gap: 16px;
    }

    /* Run Prompt row */
    .run-prompt-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Panel toolbar: wrap nicely */
    .panel-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .panel-toolbar {
        flex-wrap: wrap;
        gap: 4px;
    }
    .tab-selector {
        flex-wrap: wrap;
    }

    /* Panel collapse: vertical on mobile (hide content, keep header) */
    .panel.panel-collapsed {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
    .panel.panel-collapsed .panel-header {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        height: auto;
        padding: 10px 14px;
    }
    .panel.panel-collapsed .panel-header h2::after {
        content: ' (tap to expand)';
        font-size: 0.65rem;
        color: var(--text-muted);
        font-weight: 400;
    }
}

/* ==================== MORNING BRIEF ==================== */
.morning-brief-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
}
.morning-brief-overlay.active { display: block; }
.morning-brief-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(860px, 94vw);
    max-height: 82vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 1101;
    overflow: hidden;
    flex-direction: column;
}
.morning-brief-modal.active { display: flex; }
.morning-brief-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.morning-brief-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.morning-brief-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}
.morning-brief-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.morning-brief-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.morning-brief-snap-btn { font-size: 0.8rem; padding: 2px 6px; margin-right: 4px; }
.morning-brief-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.mb-group {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.mb-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: 6px 6px 0 0;
}
.mb-group-label.mb-label-large  { border-left-color: #4a9eff; }
.mb-group-label.mb-label-mid    { border-left-color: #3dd68c; }
.mb-group-label.mb-label-small  { border-left-color: #f5a623; }
.mb-group-label.mb-label-micro  { border-left-color: #9b59b6; }
.mb-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 12px;
}
.mb-item {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--border-color);
}
.mb-item:nth-last-child(-n+2) { border-bottom: none; }
.mb-ticker {
    font-weight: 700;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--accent-blue);
    margin-right: 2px;
}
/* The gap, as a pill against the ticker beside it.
 *
 * Coloured through --accent-green/--accent-red, which every theme defines.
 * These rules asked for --green and --red, which nothing defines anywhere --
 * an invalid colour is dropped, so the figure fell back to the item's grey
 * body text and no gap on the page had ever actually been green. */
.mb-change-pos,
.mb-change-neg {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(74, 158, 255, 0.13);
    border: 1px solid rgba(74, 158, 255, 0.32);
    line-height: 1.35;
    margin: 0 1px;
}
.mb-change-pos { color: var(--accent-green); }
.mb-change-neg { color: var(--accent-red); }
.mb-summary { color: var(--text-secondary); }
.mb-footer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.mb-overall {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex: 1;
}
.mb-stats { display: flex; gap: 10px; flex-shrink: 0; }
.mb-stat {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.mb-stat-up   { background: rgba(0,200,80,0.12); color: var(--accent-green); }
.mb-stat-down { background: rgba(220,50,50,0.12); color: var(--accent-red); }
.mb-stat-sum  { background: rgba(100,160,255,0.12); color: var(--accent-blue); }


/* ============= Sync Health Indicator ============= */

.sync-health-wrap, .alerts-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sync-health-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.sync-health-btn .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.health-ok { background: var(--accent-green); }
.dot.health-stale { background: var(--accent-yellow); }
.dot.health-error { background: var(--accent-red); animation: pulse 1s infinite; }
.dot.health-unknown { background: #777; }

.sync-health-panel, .alerts-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 320px;
    max-width: 420px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    padding: 8px 0;
    font-size: 0.78rem;
}

.sync-health-panel.open, .alerts-panel.open { display: block; }

.sync-health-title {
    padding: 4px 12px 6px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
}

.sync-health-errors-title { color: var(--accent-red); margin-top: 6px; }

.sync-health-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    color: var(--text-primary);
}

.sync-health-row .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sync-health-name { flex: 1; white-space: nowrap; }
.sync-health-detail { color: var(--text-secondary); white-space: nowrap; }
.sync-health-age { color: var(--text-secondary); white-space: nowrap; min-width: 64px; text-align: right; }

.sync-health-error {
    padding: 3px 12px;
    color: var(--accent-red);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============= Usage / Sign-in Log (admin) ============= */

.usage-log-modal {
    max-width: min(960px, 96vw);
    width: 100%;
}

.usage-log-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.usage-log-range-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.usage-log-range-label select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
}

.usage-log-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: min(70vh, 720px);
}

.usage-log-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.usage-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
}

.usage-stat-value {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono, 'Fira Code', monospace);
}

.usage-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.usage-log-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.usage-log-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
}

.usage-log-tab.active {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.12);
}

.usage-log-table-wrap {
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 420px;
}

.usage-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.usage-log-table th,
.usage-log-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.usage-log-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.usage-log-table tr:last-child td {
    border-bottom: none;
}

.usage-log-event-login { color: var(--accent-green, #22c55e); }
.usage-log-event-logout { color: var(--text-secondary); }

.usage-log-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
}

/* ============= Alerts Bell ============= */

.alerts-bell {
    position: relative;
    font-size: 0.85rem;
    line-height: 1;
}

.alerts-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    background: var(--accent-red);
    color: #fff;
    border-radius: 9px;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    padding: 0 3px;
    pointer-events: none;
}

.alerts-empty {
    padding: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.alert-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--border-color);
}

.alert-row:last-child { border-bottom: none; }

.alert-kind {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 5px;
    background: rgba(100,160,255,0.15);
    color: var(--accent-blue);
}

.alert-rvol_spike .alert-kind { background: rgba(0,200,80,0.15); color: var(--accent-green); }
.alert-rank_jump .alert-kind { background: rgba(255,200,0,0.15); color: var(--accent-yellow); }

.alert-rvol_spike .alert-kind { background: rgba(0,200,80,0.15); color: var(--accent-green); }
.alert-rank_jump .alert-kind { background: rgba(255,200,0,0.15); color: var(--accent-yellow); }
.alert-price_level .alert-kind { background: rgba(74, 158, 255, 0.15); color: var(--accent-blue); }
.alert-chart_line .alert-kind { background: rgba(167, 139, 250, 0.16); color: var(--accent-purple, #a78bfa); }

.alerts-section-gap { margin-top: 10px; }

/* Opening bell — a setting, sitting in the alerts panel because that is
   where someone goes looking for it. */
.bell-setting { padding: 2px 12px 10px; }

.bell-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.bell-toggle input { cursor: pointer; margin: 0; }

/* The heads-up is a qualifier on the bell, not a peer of it. */
.bell-sub {
    margin-top: 6px;
    padding-left: 18px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.bell-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.bell-controls input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.bell-test {
    flex-shrink: 0;
    padding: 2px 10px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.bell-test:hover { color: var(--accent-blue); border-color: var(--accent-blue); }

.bell-note {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.price-levels-empty {
    padding: 8px 12px 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.price-levels-list {
    max-height: 180px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-color);
}

.price-level-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
}

.price-level-row:last-child { border-bottom: none; }

.price-level-open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-mono, 'Fira Code', monospace);
    font-size: 0.68rem;
}

.price-level-open:hover { background: var(--bg-tertiary); }

.price-level-ticker {
    font-weight: 700;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.price-level-kind {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.pl-support .price-level-kind { color: var(--accent-green); }
.pl-resist .price-level-kind { color: var(--accent-red); }
.pl-custom .price-level-kind { color: var(--accent-blue); }

.price-level-price {
    flex-shrink: 0;
    color: var(--text-primary);
}

.price-level-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.price-level-alert-btn,
.price-level-delete {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
}

.price-level-alert-btn.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.price-level-delete:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.alert-msg { flex: 1; color: var(--text-primary); }
.alert-time { color: var(--text-secondary); font-size: 0.68rem; flex-shrink: 0; }

/* ============= RVOL Sparkline ============= */

.rvol-cell { white-space: nowrap; }

.data-table td.col-rvol.rvol-cell {
    max-width: 72px;
}

/* ============= Library (Vimeo) ============= */

.library-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 8px;
}

#libraryPanel.panel {
    flex: 1;
    min-height: 0;
}

.library-filters {
    flex-shrink: 0;
}

.library-sync-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.library-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 6px;
    flex-shrink: 0;
    max-height: 88px;
    overflow-y: auto;
}

.library-cat-pill {
    appearance: none;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.library-cat-pill:hover:not(.active) {
    color: var(--text-primary);
    border-color: rgba(74, 158, 255, 0.35);
}

.library-cat-pill.active {
    color: #fff;
    background: var(--accent-blue, #4a9eff);
    border-color: var(--accent-blue, #4a9eff);
}

.library-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    align-content: start;
}

.library-empty {
    color: var(--text-secondary);
    padding: 24px 8px;
    font-size: 0.9rem;
}

.library-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
}

.library-card:hover,
.library-card:focus-visible {
    border-color: rgba(74, 158, 255, 0.45);
    transform: translateY(-1px);
    outline: none;
}

.library-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-primary);
    overflow: hidden;
}

.library-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.library-card-no-thumb {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.12), rgba(74, 158, 255, 0.03));
}

.library-card-dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.library-card-body {
    padding: 10px 12px 12px;
}

.library-card-cat {
    font-size: 0.68rem;
    color: var(--accent-blue, #4a9eff);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.library-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.library-card-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.library-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.library-page-btn {
    appearance: none;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
}

.library-page-btn:hover:not([disabled]) {
    border-color: rgba(74, 158, 255, 0.45);
}

.library-page-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

.library-page-info {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.library-player-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.78);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.library-player-modal.open {
    display: flex;
}

.library-player-dialog {
    position: relative;
    width: min(960px, 100%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.library-player-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
}

.library-player-head {
    padding: 14px 44px 10px 16px;
}

.library-player-head h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--text-primary);
}

.library-player-desc {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.library-player-wrap {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.library-player-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 640px) {
    .library-grid {
        grid-template-columns: 1fr;
    }
    .library-categories {
        max-height: 120px;
    }
}

/* ============= Upcoming earnings list ============= */
/* Condensed: a date is a header with its tickers underneath, so the day reads
   once instead of repeating down every row. */
.earnings-list { width: 100%; border-collapse: separate; border-spacing: 0;
                 font-size: 0.65rem; }

/* One sticky block, not three. The session title, the column names and the day
   header were each sticky at a hand-guessed offset, and any mismatch between a
   guessed height and the real one left a band where rows showed through above
   the header. The title now lives inside thead, so the whole head sticks as a
   unit with nothing to align, and the day rows scroll normally underneath. */
/* z-index 30, and the body clamped to its own layer below. The header sat at
   4 while `table.data-table th { position: relative }` (added later, for the
   column-resize grip) switched on the z-index: 10 that .data-table th had been
   carrying inertly -- so header cells and scrolling rows were being ordered by
   rules written for a different table. Giving tbody a stacking context at 0
   settles it for good: nothing inside it can climb past the head, whatever
   z-index some future rule puts on a cell. */
.earnings-list thead { position: sticky; top: 0; z-index: 30; }
.earnings-list tbody { position: relative; z-index: 0; }
.earnings-list thead th {
    /* Opaque, and explicitly so -- a themed variable that resolved to an rgba
       would make the whole header a window onto the rows behind it. */
    background-color: var(--bg-secondary, #131316);
    background-image: none;
    text-align: right; padding: 3px 6px; font-weight: 500; font-size: 0.55rem;
    text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-muted, #71717a);
    border-bottom: 1px solid var(--border-color, #27272a);
    white-space: nowrap;
}
.earnings-list thead tr.col-title th {
    text-align: left; font-size: 0.6rem; font-weight: 700; letter-spacing: .5px;
    padding: 5px 6px 3px; border-bottom: none;
}
.earnings-list thead th:nth-child(-n+2) { text-align: left; }
.earnings-list td {
    padding: 1px 6px; text-align: right; line-height: 1.35;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.earnings-list td:nth-child(-n+2) { text-align: left; }
.earnings-list tr.earnings-row { cursor: pointer; }
.earnings-list tr.earnings-row:hover td { background: rgba(74,158,255,.10); }
.earnings-list tr.row-selected td { background: rgba(74,158,255,.20); }

/* The day header scrolls with its rows rather than sticking, which is what
   removed the last overlapping layer. */
.earnings-list tr.earnings-day td {
    background: var(--bg-primary, #0c0c0e);
    padding: 4px 6px 2px; text-align: left;
    font-weight: 700; font-size: 0.62rem; letter-spacing: .3px;
    color: var(--accent-blue, #4a9eff);
    border-top: 1px solid var(--border-color, #27272a);
    border-bottom: 1px solid rgba(39,39,42,.6);
}
.when-bmo { color: var(--accent-blue, #4a9eff); font-weight: 600; font-size: 0.55rem; }
.when-amc { color: var(--accent-purple, #a78bfa); font-weight: 600; font-size: 0.55rem; }

/* Sector can be long; it is context, not a number to compare. */
.earnings-list td:nth-child(2) {
    max-width: 95px; overflow: hidden; text-overflow: ellipsis;
}

/* Two sessions side by side. They are different trades: a before-open name
   moves that morning, an after-close name gaps the next session. */
.earnings-split { display: flex; gap: 14px; align-items: flex-start; }
.earnings-split > .earnings-col { flex: 1 1 0; min-width: 0; }
.head-bmo { color: var(--accent-blue, #4a9eff) !important; }
.head-amc { color: var(--accent-purple, #a78bfa) !important; }
.head-unknown { color: var(--text-muted, #71717a) !important; }
.earnings-unknown { margin-top: 14px; }
.earnings-unknown .earnings-col { width: 100%; }
.earnings-col .no-earnings {
    padding: 8px 6px; font-size: 0.62rem; color: var(--text-muted, #71717a);
}

@media (max-width: 1100px) {
    .earnings-split { flex-direction: column; }
}

/* ---- Gap-database press-release insights ------------------------------- */
/* Signals and highlights read off the stored release when a row is opened.
   Negatives are coloured against the positives deliberately: an offering
   alongside a gap up is the one that changes a decision. */
.db-pr-insights {
    margin: 6px 0 4px;
}
.db-pr-insights-loading {
    font-size: 11px;
    opacity: 0.6;
}
.db-pr-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.db-pr-signal {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    cursor: help;
}
.db-pr-signal.is-good {
    background: rgba(38, 166, 154, 0.16);
    color: #26a69a;
    border: 1px solid rgba(38, 166, 154, 0.35);
}
.db-pr-signal.is-bad {
    background: rgba(239, 83, 80, 0.16);
    color: #ef5350;
    border: 1px solid rgba(239, 83, 80, 0.35);
}
.db-pr-highlights {
    margin: 0 0 6px;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.45;
}
.db-pr-highlights li {
    margin-bottom: 3px;
}

/* ---- Forward tester: trade still running -------------------------------- */
/* The R beside this pill is mark-to-market and moves every session until the
   position exits, so it is not comparable with the settled figures around it.
   Amber rather than red: it is a caveat, not a loss. */
.r-open {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 7px;
    white-space: nowrap;
    background: rgba(255, 167, 38, 0.16);
    color: #ffa726;
    border: 1px solid rgba(255, 167, 38, 0.4);
    cursor: help;
}


/* ============================================================================
   Gap-database news card
   ----------------------------------------------------------------------------
   Copied from the chart companion's own card, rule for rule, because the point
   is that the two are the same thing rather than two things that resemble each
   other. Every variable it uses already exists here, so nothing was translated.

   The card is opened by clicking a news annotation on a chart in the Charts
   view. It stays until dismissed and its text can be selected -- unlike the
   hover popup beside it, which is for a glance.
   ========================================================================= */
#earningsModal {
  /* Fixed and high, unlike the companion's copy of this rule. There the chart
     is nearly the whole page and z-index 20 clears everything; here the vault
     stacks panels and overlays up to 12,051, and the chart list scrolls inside
     its own container -- so an absolutely positioned card at 20 renders under
     the page and appears not to open at all. */
  position: fixed; z-index: 12060; display: none;
  width: 430px; padding: 12px 14px;
  background: rgba(19,19,22,.985);
  border: 1px solid var(--border-color); border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(0,0,0,.75);
  user-select: text;
}
#earningsModal.show { display: block; }
.em-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.em-ticker {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}
.em-date { font-size: 11px; color: var(--text-muted); }
.em-gap {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent-green);
}
.em-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; line-height: 1; padding: 2px 4px;
}
.em-close:hover { color: var(--text-primary); }
.em-headline {
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
  margin-bottom: 10px;
}
.em-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.em-table th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); font-weight: 500; text-align: right;
  padding: 0 0 4px; border-bottom: 1px solid var(--border-color);
}
.em-table th:first-child { text-align: left; }
.em-table td {
  font-size: 11.5px; padding: 5px 0; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.em-table td:first-child {
  text-align: left; color: var(--text-muted);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px;
}
.em-table .beat { color: var(--accent-green); }
.em-table .miss { color: var(--accent-red); }
.em-transcript {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-color);
  font-size: 10.5px; line-height: 1.45; color: var(--text-muted);
  max-height: 108px; overflow-y: auto; white-space: pre-wrap;
}
.em-transcript:empty { display: none; }
.em-link {
  display: inline-block; margin-top: 10px;
  font-size: 11px; color: var(--accent-blue); text-decoration: none;
}
.em-link:hover { text-decoration: underline; }
.em-stats {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border-color);
}
.em-stats.hidden { display: none; }
.es-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.es-table th {
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 500; text-align: right;
  padding: 0 0 4px 12px; border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.es-table th:first-child { text-align: left; padding-left: 0; }
.es-table td {
  font-size: 11px; padding: 4px 0 4px 12px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  white-space: nowrap;
}
.es-table td:first-child {
  text-align: left; padding-left: 0; color: var(--text-secondary);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 10.5px;
  white-space: nowrap;   /* "1M ORB" was wrapping onto two lines */
}
.es-table td.lvl { color: var(--text-muted); }
.es-table td.win { color: var(--accent-green); }
.es-table td.loss { color: var(--accent-red); }
.es-foot td {
  border-top: 1px solid var(--border-color); padding: 5px 0 0 12px;
  color: var(--text-muted); font-size: 10.5px;
}
.es-foot .mfe-pct { color: var(--accent-green); }
.es-foot .mfe-pct.down { color: var(--accent-red); }
.es-foot .mfe-days { color: var(--text-muted); font-size: 9.5px; }
.em-kind {
  font-size: 9px; letter-spacing: .7px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}
.em-kind:empty { display: none; }
.em-kind.is-e { color: var(--accent-purple); background: rgba(167,139,250,.14); }
.em-kind.is-g { color: var(--text-muted); background: rgba(113,113,122,.16); }
.em-table .em-guide-period { text-align: center; color: var(--text-secondary); }
.em-table .em-row-guide.hidden { display: none; }
.em-insights:empty { display: none; }
.em-sig-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}
.em-sig {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: help;
}
.em-sig.is-good {
  background: rgba(38, 166, 154, 0.16);
  color: #26a69a;
  border: 1px solid rgba(38, 166, 154, 0.35);
}
.em-sig.is-bad {
  background: rgba(239, 83, 80, 0.16);
  color: #ef5350;
  border: 1px solid rgba(239, 83, 80, 0.35);
}
.em-highlights {
  margin: 4px 0 6px;
  padding-left: 15px;
  font-size: 10.5px;
  line-height: 1.4;
  opacity: 0.9;
}
.em-highlights li { margin-bottom: 2px; }

/* The chart companion's background stamp, in the chartbook. Same weights, same
   opacity, same centring -- sized against the cell rather than the viewport,
   because these are twelve charts in a list and not one filling a window. */
.vault-chart-watermark {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none; text-align: center;
    color: #ffffff; opacity: .05; line-height: 1.2;
    font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
}
.vault-chart-watermark .wm-line-0 {
    font-size: clamp(34px, 7cqw, 96px); font-weight: 300; letter-spacing: 6px;
}
.vault-chart-watermark .wm-line-1,
.vault-chart-watermark .wm-line-2 {
    font-size: clamp(11px, 1.7cqw, 18px); font-weight: 300; letter-spacing: .5px;
}
.fwd-chart-cell-canvas {
    container-type: inline-size;
    /* The chart draws transparent so the watermark shows, which
       makes this the surface the candles sit on. */
    background: var(--bg-primary, #0c0c0e);
}

/* The E/G marker on a gap-database chart. A button, not a painted marker, so
   it can carry a cursor and a hover state -- without them there is nothing to
   say it opens anything. Pinned to the bottom of the chart, where the eye goes
   looking for it, rather than floating against its candle. */
.db-gap-marker {
    position: absolute;
    /* bottom is set in JS: the floor of the price area, above the volume
       overlay and clear of the date axis. */
    transform: translateX(-50%);
    z-index: 4;
    min-width: 20px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    border-radius: 3px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}
.db-gap-marker.is-e {
    color: var(--accent-purple, #a78bfa);
    background: color-mix(in srgb, var(--accent-purple, #a78bfa) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple, #a78bfa) 45%, transparent);
}
.db-gap-marker.is-g {
    color: var(--accent-green, #4ade80);
    background: color-mix(in srgb, var(--accent-green, #4ade80) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-green, #4ade80) 42%, transparent);
}
.db-gap-marker:hover {
    transform: translateX(-50%) translateY(-1px);
}
.db-gap-marker.is-e:hover {
    background: color-mix(in srgb, var(--accent-purple, #a78bfa) 32%, transparent);
    border-color: var(--accent-purple, #a78bfa);
}
.db-gap-marker.is-g:hover {
    background: color-mix(in srgb, var(--accent-green, #4ade80) 30%, transparent);
    border-color: var(--accent-green, #4ade80);
}
.db-gap-marker:focus-visible {
    outline: 2px solid var(--accent-blue, #4a9eff);
    outline-offset: 2px;
}

/* Controls for the method rollups. */
.fwd-methods-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0 4px 4px;
}
.fwd-methods-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: auto;
}
.fwd-method-toggle {
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
}
.fwd-method-toggle:hover { color: var(--text-primary); }
.fwd-method-toggle.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(74, 158, 255, 0.10);
}
/* What a filter removed. Deliberately legible rather than a faint footnote:
   a total that quietly drops trades is the thing these toggles exist to fix. */
.fwd-method-line.dropped {
    color: var(--accent-yellow);
    opacity: 0.75;
    margin-top: 1px;
}

/* Each method's record, in the header row directly above its own column, so
   there is nothing to match up by eye. Inside the table because those four are
   the last of nineteen columns -- anything outside would drift the moment the
   table scrolls sideways or a column is hidden. */
.data-table thead tr.fwd-method-row th {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    /* Continues the snapshot bar above, which leaves its bottom edge open, so
       the totals and the per-column figures read as one panel. */
    border-top: 1px solid var(--border-color);
    padding: 6px 6px 8px;
    position: static;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    cursor: default;
}
.data-table thead tr.fwd-method-row th.fwd-method-cell {
    line-height: 1.25;
    white-space: nowrap;
}
.fwd-method-cell span { display: block; font-family: 'Fira Code', monospace; }
/* Total R first: a 40% win rate that keeps its winners beats a 60% one that
   does not, and the win rate has been the only number on screen until now. */
.fwd-method-cell .fmc-r { font-size: 0.8rem; font-weight: 600; }
.fwd-method-cell .fmc-wr { font-size: 0.65rem; }
.fwd-method-cell .fmc-n { font-size: 0.6rem; color: var(--text-muted); }
.fwd-method-cell .positive { color: var(--accent-green); }
.fwd-method-cell .negative { color: var(--accent-red); }
.fwd-method-cell .muted { color: var(--text-muted); }


/* ==================== THEMES PAGE ====================
   Built on the vault's own components -- .panel, .panel-header, .tab-btn,
   .toolbar-btn, .filter-input, .data-table -- so it inherits every style
   option and follows future changes to the vault's look. Only what is
   genuinely new to this page is defined here.                            */
.themes-page { display: flex; flex-direction: column; padding: 10px 0 20px;
               min-height: 0; flex: 1; }
.themes-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
               gap: 10px; align-items: start; min-height: 0; flex: 1; }
.themes-cols > .panel { max-height: calc(100vh - 170px); }
/* The lookup is a utility in the detail panel's header, not a banner: small,
   out of the way, and next to where its answer appears. */
.tx-lookup { display: flex; gap: 6px; align-items: center; }
.tx-lookup #tx-ticker { width: 92px; padding: 5px 9px; font-family: var(--font-mono);
               font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.tx-lookup .toolbar-btn { padding: 5px 10px; font-size: 12px; }

#tx-answer:empty { display: none; }
#tx-answer { padding: 12px 16px; border-left: 3px solid var(--accent-blue);
             background: var(--bg-primary); }
#tx-answer .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
                text-transform: uppercase; color: var(--text-muted);
                display: block; margin-bottom: 5px; }
#tx-answer .path { font-size: 12px; color: var(--text-muted); margin: 0 0 3px; }
#tx-answer .th { font-size: 16px; font-weight: 600; margin: 0 0 6px; cursor: pointer; }
#tx-answer .th:hover { color: var(--accent-blue); }
#tx-answer .def { color: var(--text-secondary); font-size: 13px; margin: 0; }
#tx-answer .more { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
#tx-answer .more b { color: var(--text-secondary); font-weight: 500; cursor: pointer; }
#tx-answer .more b:hover { color: var(--accent-blue); }

/* Numeric columns right-align and use lining figures so digits stack. */
.themes-page .data-table th.num,
.themes-page .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.themes-page .data-table td { padding: 7px 12px; white-space: nowrap;
             border-bottom: 1px solid var(--border-color); }
.themes-page .data-table tbody tr { cursor: pointer; }
.themes-page .data-table tbody tr:hover { background: var(--bg-tertiary); }
.themes-page .data-table tbody tr.selected { background: var(--accent-soft);
             box-shadow: inset 3px 0 0 var(--accent-blue); }
.themes-page .data-table th .dir { opacity: .6; margin-left: 3px; }
.tx-path { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.tx-rank { display: inline-block; min-width: 24px; font-family: var(--font-mono);
           font-size: 11px; color: var(--text-muted); }
.tx-caret { display: inline-block; width: 12px; color: var(--text-muted); }
/* Lift an open parent one surface level, then recess each visible child level.
   The ID keeps the hierarchy treatment ahead of the global theme zebra rules. */
#tx-body > tr.expanded:not(.lv1) { background: var(--bg-tertiary); }
#tx-body > tr.lv1 { background: var(--bg-primary); }
#tx-body > tr.lv1.expanded { background: var(--bg-secondary); }
#tx-body > tr.lv2 {
    background: color-mix(in srgb, var(--bg-primary) 75%, #000 25%);
}
#tx-body > tr.expanded:not(.lv1):hover {
    background: color-mix(in srgb, var(--bg-tertiary) 88%, var(--text-primary) 12%);
}
#tx-body > tr.lv1:hover {
    background: color-mix(in srgb, var(--bg-primary) 80%, var(--bg-secondary) 20%);
}
#tx-body > tr.lv1.expanded:hover {
    background: color-mix(in srgb, var(--bg-secondary) 80%, var(--bg-tertiary) 20%);
}
#tx-body > tr.lv2:hover {
    background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary) 15%);
}
#tx-body > tr.selected { background: var(--accent-soft); }
.themes-page .lv1 td:first-child { padding-left: 26px; }
.themes-page .lv2 td:first-child { padding-left: 46px; }
.themes-page .pos { color: var(--accent-green); }
.themes-page .neg { color: var(--accent-red); }
.themes-page .zero { color: var(--text-muted); }

/* Breadth reads as a length: a share is faster to compare that way when
   scanning a long list for participation. */
.tx-breadth { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.tx-breadth .track { width: 40px; height: 6px; border-radius: 3px; flex: none;
                     background: var(--bg-primary); border: 1px solid var(--border-color);
                     overflow: hidden; }
.tx-breadth .fill { display: block; height: 100%; background: var(--accent-blue); }
.tx-breadth .num { min-width: 28px; text-align: right; }

/* Dispersion only earns ink when it is large enough to mean "one name is doing
   the work" -- a badge on every row would train you to stop seeing it. */
.tx-flag { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px;
           border-radius: 4px; background: var(--bg-tertiary);
           color: var(--accent-yellow); border: 1px solid var(--accent-yellow); }

/* Rank change. --accent-green/--accent-red, never --green/--red: the latter are
   defined nowhere, and an invalid colour is dropped silently, so the figure
   would render in body grey and the column would look broken-but-plausible. */
.tx-chg { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tx-chg.up { color: var(--accent-green); }
.tx-chg.down { color: var(--accent-red); }

/* Header tooltips: median, breadth and dispersion are not self-explanatory, and
   showing three numbers instead of one is pointless if the reader cannot tell
   which question each answers. CSS rather than title=, which truncates, delays
   about a second, and will not wrap. */
.tx-tip { position: relative; }
.tx-tip::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 7px); right: 0;
  width: 280px; padding: 10px 12px; z-index: 40;
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  font: 400 11.5px/1.5 inherit; letter-spacing: 0; text-transform: none;
  text-align: left; white-space: normal; opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
}
.tx-tip:first-child::after { left: 0; right: auto; }
.tx-tip:hover::after { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tx-tip::after { transition: none; } }

/* Detail pane */
.tx-stats { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 0 12px;
            border-bottom: 1px solid var(--border-color); margin-bottom: 12px; }
.tx-stat .v { display: block; font: 600 15px/1 var(--font-mono);
              font-variant-numeric: tabular-nums; }
.tx-stat .k { display: block; font-size: 10px; letter-spacing: .08em;
              text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
#tx-detail { padding: 14px 16px; }
#tx-detail .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--text-muted);
             display: block; margin-bottom: 5px; }
#tx-detail p { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; }
#tx-detail .bound { color: var(--text-primary); border-left: 2px solid var(--accent-blue);
             padding-left: 10px; }
.tx-sigs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; padding: 0;
           list-style: none; }
.tx-sigs li { font-size: 11px; color: var(--text-muted); background: var(--bg-tertiary);
             border: 1px solid var(--border-color); border-radius: 4px; padding: 2px 7px; }
.tx-weak { opacity: .55; }
.tx-chart { height: 300px; margin: 6px 0 10px; border: 1px solid var(--border-color);
            border-radius: var(--radius-sm); overflow: hidden; }
.tx-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

@media (max-width: 1100px) {
  .themes-cols { grid-template-columns: 1fr; }
  .themes-cols > .panel { max-height: none; }
}

/* Nested performance map: sector frame, industry frame, theme tile. The two
   borders make the hierarchy readable even when adjacent groups share a sign. */
.tx-heatmap { height: calc(100vh - 205px); min-height: 480px; padding: 8px;
              display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.tx-heatmap[hidden] { display: none; }
.tx-heatmap-key { min-height: 20px; display: flex; align-items: center;
                  justify-content: space-between; gap: 12px; color: var(--text-muted);
                  font: 10px var(--font-mono); text-transform: uppercase;
                  letter-spacing: .06em; }
.tx-heat-scale { display: grid; grid-template-columns: 34px 38px 24px 38px;
                 align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.tx-heat-scale i { grid-column: 1 / -1; height: 5px; border-radius: 3px;
                   background: linear-gradient(90deg, var(--accent-red),
                     var(--bg-tertiary) 50%, var(--accent-green)); }
.tx-heat-scale b, .tx-heat-scale em { font: inherit; text-align: center; }
.tx-heat-scale b:first-of-type { grid-column: 1 / 3; text-align: left; }
.tx-heat-scale em { grid-column: 3; font-style: normal; }
.tx-heat-scale b:last-of-type { grid-column: 4; text-align: right; }
.tx-heatmap-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden;
                     background: var(--bg-primary); }
.tx-heat-sector { position: absolute; overflow: hidden; box-sizing: border-box;
                   border: 2px solid var(--bg-primary); background: var(--bg-secondary); }
.tx-heat-sector-head, .tx-heat-industry-head { position: absolute; inset: 0 0 auto;
                    display: flex; align-items: center; justify-content: space-between;
                    gap: 5px; overflow: hidden; white-space: nowrap;
                    font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tx-heat-sector-head { height: 23px; padding: 0 7px; z-index: 2;
                       color: var(--text-primary); background: var(--bg-tertiary);
                       font-size: 10px; font-weight: 700; text-transform: uppercase;
                       letter-spacing: .055em; }
.tx-heat-sector-head span, .tx-heat-industry-head span { overflow: hidden;
                       text-overflow: ellipsis; }
.tx-heat-sector-head b, .tx-heat-industry-head b { flex: none; color: var(--text-secondary);
                       font: 600 10px var(--font-mono); }
.tx-heat-sector-body, .tx-heat-industry-body { position: absolute; inset: 0; }
.tx-heat-industry { position: absolute; overflow: hidden; box-sizing: border-box;
                     border: 1px solid var(--bg-primary); background: var(--bg-secondary); }
.tx-heat-industry-head { height: 18px; padding: 0 5px; z-index: 1;
                         color: var(--text-secondary);
                         background: color-mix(in srgb, var(--bg-tertiary) 82%, #000 18%);
                         font-size: 9px; font-weight: 600; letter-spacing: .025em; }
.tx-heat-tile { position: absolute; display: flex; flex-direction: column;
                align-items: center; justify-content: center; gap: 2px; min-width: 0;
                box-sizing: border-box; overflow: hidden; padding: 4px;
                border: 1px solid color-mix(in srgb, var(--bg-primary) 78%, transparent);
                border-radius: 0; cursor: pointer; color: var(--text-primary);
                font-family: var(--font-mono); line-height: 1.05; text-align: center;
                transition: filter .1s ease, box-shadow .1s ease; }
.tx-heat-tile.pos { color: var(--text-primary);
                    background: color-mix(in srgb, var(--accent-green) var(--tx-strength),
                      var(--bg-secondary)); }
.tx-heat-tile.neg { color: var(--text-primary);
                    background: color-mix(in srgb, var(--accent-red) var(--tx-strength),
                      var(--bg-secondary)); }
.tx-heat-tile.flat { color: var(--text-primary); background: var(--bg-tertiary); }
.tx-heat-tile:hover, .tx-heat-tile:focus-visible { z-index: 4; filter: brightness(1.28);
                    outline: none; box-shadow: inset 0 0 0 2px var(--text-primary); }
.tx-heat-tile.selected { z-index: 3; box-shadow: inset 0 0 0 2px var(--accent-blue); }
.tx-heat-theme-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
                      font-size: 10px; font-weight: 700; }
.tx-heat-theme-value { font-size: 11px; font-weight: 700;
                       font-variant-numeric: tabular-nums; }
.tx-heat-theme-count { position: absolute; right: 3px; bottom: 2px;
                       font-size: 8px; opacity: .68; }
.tx-heat-tile.compact { align-items: flex-start; padding: 3px; text-align: left; }
.tx-heat-tile.compact .tx-heat-theme-value,
.tx-heat-tile.compact .tx-heat-theme-count { display: none; }
.tx-heat-tile.label-hidden > span { display: none; }
@media (max-width: 1100px) {
  .tx-heatmap { height: 620px; min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .tx-heat-tile { transition: none; }
}

/* Member rows: ticker on top, company underneath. The name is what stops a
   symbol being read as something it is not, which is the whole reason this
   page exists. */
.tx-tkr { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .03em;
          font-weight: 500; }
.tx-co { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 1px;
         max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Eight columns in a narrow pane: tighten and let it scroll rather than wrap. */
.tx-members { font-size: 12px; }
.tx-members th, .tx-members td { padding: 6px 7px; }
.tx-members th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tx-members th.sortable:hover { color: var(--text-primary); }
.tx-members th .dir { margin-left: 3px; font-size: 9px; opacity: 0.85; }
#tx-detail { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Evaluation panel — top of the ticker modal.

   Sits above the data rather than below it: the call is made while the chart is
   up in the companion, and a form under a long modal is a form that gets
   scrolled past. Three rows of chips and one line of text, no taller than it
   needs to be, because friction here is the whole reason the habit fails.
   --------------------------------------------------------------------------- */
.eval-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eval-head { display: flex; align-items: center; gap: 10px; }
.eval-title {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-secondary); font-weight: 600;
}
.eval-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.eval-saved {
    margin-left: auto; font-size: 0.7rem; color: var(--accent-green);
    font-family: var(--font-mono);
}
.eval-vis {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); border-radius: 4px; cursor: pointer;
    font-size: 0.66rem; padding: 3px 8px; letter-spacing: 0.04em;
}
.eval-vis:hover { color: var(--text-secondary); border-color: var(--text-muted); }
.eval-rows { display: flex; flex-direction: column; gap: 7px; }
.eval-row { display: flex; align-items: center; gap: 12px; }
.eval-row > label {
    flex: 0 0 62px; font-size: 0.72rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.eval-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.eval-chip {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary); border-radius: 5px; cursor: pointer;
    font-size: 0.78rem; padding: 5px 13px; min-width: 38px;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.eval-chip:hover:not(:disabled) { border-color: var(--text-muted); color: var(--text-primary); }
/* Also matched on :hover — the hover rule above carries higher specificity
   (:not() counts), so without this the chip under the cursor loses its
   selected colour the moment it is chosen, which reads as "did that save?". */
.eval-chip.on,
.eval-chip.on:hover:not(:disabled) {
    background: var(--accent-soft); border-color: var(--accent-blue);
    color: var(--accent-blue); font-weight: 600;
}
.eval-chip:disabled { cursor: default; opacity: 0.85; }
.eval-chip:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.eval-note {
    width: 100%; background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 5px;
    padding: 7px 9px; font-size: 0.82rem; font-family: inherit; resize: vertical;
}
.eval-note:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 0; }
.eval-note::placeholder { color: var(--text-muted); }
/* Member-facing readout */
.eval-readout { display: flex; gap: 6px; flex-wrap: wrap; }
.eval-tag {
    font-size: 0.72rem; padding: 3px 9px; border-radius: 4px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.eval-tag.eval-took { color: var(--accent-green); border-color: var(--accent-green); }
.eval-tag.eval-watching { color: var(--accent-yellow); border-color: var(--accent-yellow); }
.eval-tag.eval-passed { color: var(--text-muted); }
.eval-note-read { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 767px) and (min-height: 541px) {
    .eval-row { align-items: flex-start; flex-direction: column; gap: 5px; }
    .eval-row > label { flex: none; }
    .eval-chip { padding: 7px 15px; }
}

/* The verdict line: silent unless the three criteria line up, loud when they do
   and louder when one was passed on anyway. Nothing renders in the ordinary
   case, so the panel stays three rows tall on the names that do not qualify. */
.eval-verdict:empty { display: none; }
.eval-verdict {
    font-size: 0.8rem; padding: 8px 11px; border-radius: 5px;
    border: 1px solid transparent; line-height: 1.4;
}
.eval-verdict.meets {
    background: rgba(74, 222, 128, 0.10); border-color: var(--accent-green);
    color: var(--accent-green); font-weight: 600;
}
.eval-verdict.against {
    background: rgba(248, 113, 113, 0.10); border-color: var(--accent-red);
    color: var(--accent-red); font-weight: 600;
}
.eval-note.needed { border-color: var(--accent-red); }

/* ---------------------------------------------------------------------------
   Evaluation walker — a standalone box, not a section of the ticker modal.

   Deliberately small and fixed in size: the chart is in the companion and the
   eye stays there, so this must never move, grow or scroll as it steps. Every
   ticker presents the same three rows in the same place, which is what lets a
   list be walked at speed with one hand on the arrow keys.
   --------------------------------------------------------------------------- */
.eval-walker {
    display: none; position: fixed; inset: 0; z-index: 1200;
    background: rgba(0, 0, 0, 0.55);
    align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.eval-walker.active { display: flex; }
.eval-walker-box {
    width: min(1000px, 96vw);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.eval-walker-top {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.eval-walker-id {
    flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
.eval-walker-ticker {
    font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--accent-blue); font-family: var(--font-mono);
}
.eval-walker-count {
    font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono);
}
.eval-nav {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary); border-radius: 5px; cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 3px 12px;
}
.eval-nav:hover:not(:disabled) { color: var(--text-primary); border-color: var(--text-muted); }
.eval-nav:disabled { opacity: 0.3; cursor: default; }
.eval-nav:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.eval-walker-close {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.eval-walker-close:hover { color: var(--text-primary); }
/* Inside the walker the panel is the whole box, so it drops its own chrome. */
.eval-walker .eval-panel {
    border: 0; border-radius: 0; margin-bottom: 0; background: var(--bg-secondary);
}
@media (max-width: 767px) and (min-height: 541px) {
    .eval-walker { padding-top: 6vh; }
    .eval-walker-box { width: 96vw; }
}

/* Screener row beside the answers. The data pane scrolls on its own so the
   answer chips never move between tickers -- a control that shifts position as
   the list steps is a control that gets mis-tapped at speed. */
.eval-walker-cols { display: grid; grid-template-columns: 1fr 340px; }
.eval-walker-data {
    padding: 12px 14px; border-right: 1px solid var(--border-color);
    max-height: 62vh; overflow-y: auto;
}
.eval-data-grid {
    display: grid; grid-template-columns: auto 1fr auto 1fr;
    gap: 5px 10px; margin: 0; align-items: baseline;
}
.eval-data-grid dt {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); white-space: nowrap;
}
.eval-data-grid dd {
    margin: 0; font-size: 0.8rem; color: var(--text-primary);
    font-family: var(--font-mono); word-break: break-word;
}
.eval-data-prose { margin-top: 11px; }
/* The label only. Scoped by class rather than by element: formatRichText
   emits its own spans for emphasis, and a bare `span` rule uppercased those
   too -- highlights came out shouting half their words. */
.eval-data-label {
    display: block;
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
}
.eval-data-prose p {
    margin: 3px 0 0; font-size: 0.82rem; line-height: 1.5;
    color: var(--text-secondary);
}
.eval-walker-box.row-blue { border-color: var(--accent-blue); }
.eval-walker-box.row-green { border-color: var(--accent-green); }
.eval-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.eval-dot.blue { background: var(--accent-blue); }
.eval-dot.green { background: var(--accent-green); }
.eval-walker .eval-panel { padding: 12px 14px; }
.eval-walker .eval-row > label { flex: 0 0 58px; }
@media (max-width: 900px) {
    .eval-walker-cols { grid-template-columns: 1fr; }
    .eval-walker-data { border-right: 0; border-bottom: 1px solid var(--border-color); max-height: 34vh; }
    .eval-data-grid { grid-template-columns: auto 1fr; }
}

/* The Evaluate launcher. Sits first in the toolbar and is the only filled
   control there, because it starts the one daily pass that has to actually get
   done -- a button that looks like the six utilities beside it gets treated
   like one. */
.eval-launch {
    background: var(--accent-blue);
    color: #0b0b0d;
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 0 3px var(--accent-glow);
    transition: filter 0.14s ease, box-shadow 0.14s ease;
}
.eval-launch:hover { filter: brightness(1.12); box-shadow: 0 0 0 4px var(--accent-soft); }
.eval-launch:active { filter: brightness(0.95); }
.eval-launch:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* The detail half of a packed cell — the dollar figures a surprise percentage
   was computed from. Set below the value rather than beside it: a beat on a
   $40M estimate and one on a $4B estimate are different events, and that is
   worth a line of its own. */
.eval-data-detail {
    display: block; margin-top: 2px;
    font-size: 0.74rem; color: var(--text-muted); font-family: var(--font-mono);
}
.eval-data-prose p { white-space: pre-wrap; }
.eval-data-prose .cell-positive { color: var(--accent-green); }
.eval-data-prose .cell-negative { color: var(--accent-red); }


/* Forward tester — theme outcome scatter. Two axes because win rate and average
   result answer different questions: a theme can be right half the time and
   still lose money, which a single colour scale hides. */
.fwd-theme-wrap { padding: 8px 10px 14px; }
.fwd-theme-svg { width: 100%; height: auto; max-height: 60vh; display: block; }
.fwd-theme-zero { stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 3 3; }
.fwd-theme-tick { fill: var(--text-muted); font-size: 10px; font-family: var(--font-mono); }
.fwd-theme-axis { fill: var(--text-muted); font-size: 11px; letter-spacing: 0.04em; }
.fwd-theme-label { fill: var(--text-secondary); font-size: 10px; pointer-events: none;
                   paint-order: stroke; stroke: var(--bg-primary); stroke-width: 3px;
                   stroke-linejoin: round; }
.fwd-theme-n { fill: var(--text-muted); font-family: var(--font-mono); font-size: 9px; }
.fwd-theme-dot { stroke: var(--bg-primary); stroke-width: 1; cursor: pointer;
                 transition: opacity 0.12s ease; }
.fwd-theme-dot.pos { fill: var(--accent-green); fill-opacity: 0.55; }
.fwd-theme-dot.neg { fill: var(--accent-red); fill-opacity: 0.55; }
.fwd-theme-dot.flat { fill: var(--text-muted); fill-opacity: 0.4; }
/* Faint rather than hidden: a theme with two setups is real, it just is not
   evidence. Removing it would be a quieter lie than drawing it small. */
.fwd-theme-dot.thin { fill-opacity: 0.18; }
.fwd-theme-dot:hover { fill-opacity: 0.85; }
/* Pinned to the axis edge because its average sits outside the readable range.
   Ringed rather than removed: the theme is still there, the chart just cannot
   show how far out it is without making everything else illegible. */
.fwd-theme-dot.clipped { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 2 2; }
.fwd-theme-note { color: var(--text-muted); font-size: 11px; margin-top: 6px; }
.fwd-theme-empty { color: var(--text-muted); padding: 24px; text-align: center; }

/* Estimate, surprise and guidance rows inside the statement table. Set apart
   from the reported figures by a divider and a dimmer label, because they are a
   different kind of number -- what was expected, against what arrived. */
.fin-est-divider td {
    padding-top: 14px; font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}
.fin-est-row td { color: var(--text-secondary); }
.fin-est-row .fin-label-col { color: var(--text-muted); font-style: normal; }
/* "initial" is a fact, not a figure: the first guide for a period has nothing
   to be measured against, and dimming it stops it reading as a zero. */
.fin-est-row .fin-est-muted { color: var(--text-muted); }

/* Stocks tab: the selected stock's own chart above its theme peers. Taller
   than a grid cell because it is the one chart being read, not one of
   twenty being scanned. */
.tx-stock-chart { margin: 0 0 14px; }
.tx-stock-chart .tx-stock-canvas { height: 300px; }

/* Column resizing: the edge lights up when the pointer is on the grip.
   The cursor alone is too quiet in a header that already carries a sort
   arrow and a filter funnel. */
table.data-table th { position: relative; }
table.data-table th.col-resize-edge::after {
    content: ''; position: absolute; top: 0; right: 0;
    width: 2px; height: 100%;
    background: var(--accent-blue, #4a9eff);
}

/* --- AI Analysis -----------------------------------------------------------
   Set apart from the measured columns deliberately. Revenue and EPS are facts
   off a filing; this is a model reading one, and at a glance the two must not
   look like the same kind of thing. Hence the left rule, the muted body, and a
   verdict chip rather than the plain numerals every other column uses. */
.ai-analysis-cell {
    cursor: pointer;
    border-left: 2px solid var(--accent-blue, #3b82f6);
    max-width: 34ch;
}
/* Clamped in the cell, whole in the modal. The column is narrow and the
   finding is a sentence, so the table shows as much as fits and the click
   shows the rest -- the value itself is stored complete. */
.ai-analysis-cell .ai-analysis-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-analysis-cell:hover { background: rgba(59, 130, 246, 0.07); }

.ai-verdict {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: 1px;
}
.ai-verdict--down  { background: rgba(239, 68, 68, 0.18);  color: #f87171; }
.ai-verdict--up    { background: rgba(34, 197, 94, 0.18);  color: #4ade80; }
.ai-verdict--mixed { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.ai-verdict--clean { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
/* The label is a fact, so it gets one neutral style; no color leans. */
.ai-verdict--fact  { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.ai-verdict--none  { background: rgba(100, 116, 139, 0.14); color: #64748b; }

.ai-analysis-text { color: var(--text-secondary); }

.ai-analysis-modal-content { max-width: 820px; width: 92vw; max-height: 86vh; }
/* The finding, at the top, in the size it deserves. Everything under it is
   the working that produced it. */
.ai-modal-bottomline {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-primary);
    padding: 12px 14px;
    margin-bottom: 14px;
    background: rgba(59, 130, 246, 0.07);
    border-left: 3px solid var(--accent-blue, #3b82f6);
    border-radius: 0 4px 4px 0;
}
.ai-modal-bottomline .ai-verdict {
    font-size: 0.66rem;
    vertical-align: 2px;
    margin-right: 7px;
}

.ai-modal-headline {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.ai-modal-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.ai-modal-report {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 6px;
}
/* Section headings carry the structure, so they get the weight and the space.
   The report is read by scanning for the one section that matters, not
   top to bottom. */
/* Collapsed sections read as a contents page: the findings are open, the
   framework around them is one click away. A busy morning gets three sections,
   not fifteen. */
/* The conclusion, lifted out of the document and shown as a panel. Not a
   dropdown: it is the one part nobody should have to open. */
.ai-report-lead {
    padding: 12px 14px;
    margin: 0 0 16px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 4px;
    font-size: 0.88rem;
    line-height: 1.55;
}
.ai-report-lead p:last-child,
.ai-report-lead ul:last-child { margin-bottom: 0; }

.ai-report-section { margin-bottom: 2px; }
.ai-report-section > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-blue, #3b82f6);
    padding: 7px 0 6px 16px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ai-report-section > summary::-webkit-details-marker { display: none; }
.ai-report-section > summary::before {
    content: '▸';
    position: absolute;
    left: 2px;
    font-size: 0.7rem;
    transition: transform 0.12s ease;
}
.ai-report-section[open] > summary::before { transform: rotate(90deg); }
/* A closed section is still a heading; a dimmer one, so the open ones lead. */
.ai-report-section:not([open]) > summary { color: var(--text-secondary); }
.ai-report-section > summary:hover { color: var(--accent-blue, #3b82f6); }
.ai-report-body { padding: 10px 0 6px 16px; }

.ai-modal-report h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-blue, #3b82f6);
    margin: 18px 0 6px;
}
.ai-modal-report h4:first-child { margin-top: 0; }
.ai-modal-report p { margin: 0 0 10px; }
.ai-modal-report ul,
.ai-modal-report ol { margin: 0 0 12px; padding-left: 20px; }
/* Numbered findings get room between them: each is a separate point, and run
   together they read as one paragraph, which is what they were before. */
.ai-modal-report li { margin-bottom: 6px; }
.ai-modal-report ol > li { padding-left: 2px; }
.ai-modal-report ol > li::marker { color: var(--text-secondary); font-weight: 600; }
.ai-modal-report strong { color: var(--text-primary); font-weight: 650; }
.ai-modal-report hr {
    border: 0;
    border-top: 1px solid var(--border-color, #2a2a2a);
    margin: 16px 0;
}
/* Figures line up under each other or the table is just rows of words. */
.ai-report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 14px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.ai-report-table th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    padding: 4px 10px 4px 0;
}
.ai-report-table td {
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ai-report-table tr:last-child td { border-bottom: 0; }
/* Says what the reader is looking at. The report sits beside columns taken
   from filings, and the distinction stops mattering the moment it is not
   stated. */
.ai-modal-note {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #2a2a2a);
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Not applicable, versus not available -------------------------------
   An empty cell said two different things: the company never reported, so
   there is no figure to have, and the enrichment failed to return one. Only
   the second is a problem, and they were indistinguishable at a glance.
   A struck dash marks the first; genuinely missing data stays blank. */
.cell-na {
    opacity: 0.25;
    text-align: center;
}
.cell-na span {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ==================== theme: terminal (Style menu opt-in) ==================== */
/* The app's own tokens come first: every legacy rule reads --text-muted,
   --accent-blue and friends, so a theme that only added its own --t-* names
   left the old greys and the old ticker blue sitting in the middle of it.
   Row highlight colors are deliberately untouched -- the screener is sorted by
   them, so green and blue rows must look the same under every theme. */
[data-theme="terminal"]{
  --bg-primary:#0b0f14;--bg-secondary:#10161d;--bg-tertiary:#0e1319;
  --border-color:#1c2530;
  --text-primary:#d7dee6;--text-secondary:#9aa5b1;--text-muted:#7d8894;
  --accent-blue:#3fd1c0;--accent-green:#4ade80;--accent-red:#f87171;
  --accent-yellow:#e3b565;--accent-purple:#93abe9;
  --accent-soft:rgba(63,209,192,.14);--accent-glow:rgba(63,209,192,.08);
  --surface-glass:rgba(16,22,29,.9);--chart-grid:rgba(255,255,255,.04);
  --t-bg:#0b0f14;--t-panel:#10161d;--t-panel2:#0e1319;--t-rule:#1c2530;
  --t-ink:#d7dee6;--t-muted:#7d8894;--t-dim:#55606c;
  --t-teal:#3fd1c0;--t-teal-soft:rgba(63,209,192,.12);
  --t-mono:"Fira Code",Consolas,"Cascadia Mono",ui-monospace,monospace;
}
[data-theme="terminal"] body,[data-theme="terminal"] .dashboard{
  background:var(--t-bg)!important;color:var(--t-ink)}
[data-theme="terminal"] .header{background:var(--t-panel)!important;
  border-bottom:1px solid var(--t-rule)!important;box-shadow:none!important}
[data-theme="terminal"] .brand-text{font-family:var(--t-mono)!important;
  color:var(--t-ink)!important}
[data-theme="terminal"] .header-nav{background:var(--t-panel2)!important;
  border:1px solid var(--t-rule)!important}
[data-theme="terminal"] .nav-tab{color:var(--t-muted)!important;
  background:transparent!important;font-family:var(--t-mono)}
[data-theme="terminal"] .nav-tab.active{background:var(--t-teal-soft)!important;
  color:var(--t-teal)!important;box-shadow:none!important}
[data-theme="terminal"] .search-input,[data-theme="terminal"] .filter-input,
[data-theme="terminal"] .toolbar-date{background:var(--t-panel2)!important;
  border:1px solid var(--t-rule)!important;color:var(--t-ink)!important;
  font-family:var(--t-mono)!important}
[data-theme="terminal"] .search-btn,[data-theme="terminal"] .btn-refresh,
[data-theme="terminal"] .eval-launch{background:var(--t-teal-soft)!important;
  color:var(--t-teal)!important;border:1px solid rgba(63,209,192,.35)!important}
[data-theme="terminal"] .toolbar-btn{background:var(--t-panel2)!important;
  border:1px solid var(--t-rule)!important;color:var(--t-muted)!important}
[data-theme="terminal"] .toolbar-btn:hover{color:var(--t-ink)!important}
/* The selected horizon (1D/1W/1M/3M) had no distinction under Terminal.
   .toolbar-btn.active carries the accent, but the theme's plain
   .toolbar-btn rule above is !important and outranks it, so every button
   rendered identically and the current selection was invisible. Restated
   here at the same weight. */
[data-theme="terminal"] .toolbar-btn.active{background:var(--t-teal-soft)!important;
  border-color:var(--t-teal)!important;color:var(--t-teal)!important;
  font-weight:600!important}
[data-theme="terminal"] .toolbar-btn.active:hover{color:var(--t-teal)!important}
[data-theme="terminal"] .market-pulse{background:var(--t-panel2)!important;
  border-bottom:1px solid var(--t-rule)!important}
[data-theme="terminal"] .panel{background:var(--t-panel)!important;
  border:1px solid var(--t-rule)!important;box-shadow:none!important}
[data-theme="terminal"] .panel-header{background:transparent!important;
  border-bottom:1px solid var(--t-rule)!important}
[data-theme="terminal"] .panel-header h2{font-family:var(--t-mono)!important;
  color:var(--t-ink)!important}
[data-theme="terminal"] .tab-btn{color:var(--t-muted)!important;
  background:transparent!important}
[data-theme="terminal"] .tab-btn.active{background:var(--t-teal-soft)!important;
  color:var(--t-teal)!important}
[data-theme="terminal"] .tmt-btn.active{background:var(--t-teal-soft)!important;
  color:var(--t-teal)!important}
[data-theme="terminal"] .data-table{font-family:var(--t-mono)!important}
[data-theme="terminal"] .data-table th{background:var(--t-panel2)!important;
  color:var(--t-dim)!important;text-transform:uppercase!important;
  letter-spacing:.1em!important;font-size:9.5px!important}
[data-theme="terminal"] .data-table tbody tr:hover{background:#131a22!important}
[data-theme="terminal"] .data-table td.cell-ticker{color:var(--t-teal)!important}
[data-theme="terminal"] .data-table td.cell-source{color:var(--t-dim)!important}
[data-theme="terminal"] ::selection{background:rgba(63,209,192,.25)}
[data-theme="terminal"] ::-webkit-scrollbar{width:10px;height:10px}
[data-theme="terminal"] ::-webkit-scrollbar-track{background:var(--t-bg)}
[data-theme="terminal"] ::-webkit-scrollbar-thumb{background:#1e2833;
  border-radius:5px;border:2px solid var(--t-bg)}

/* ==================== compact view (toolbar opt-in) ==================== */
body.compact .data-table th{padding:6px 10px!important;font-size:9.5px!important}
body.compact .data-table td{padding:4px 10px!important;font-size:11.5px!important}
body.compact .panel-header{padding:8px 14px!important}
body.compact .panel-filters{padding:6px 14px!important}
body.compact .toolbar-btn{padding:3px 9px!important;font-size:11px!important}
body.compact .tab-btn{padding:4px 11px!important;font-size:12px!important}
#compactToggle.on{background:rgba(63,209,192,.12)!important;color:#3fd1c0!important}

/* ============ wrap mode (toolbar opt-in, next to compact) ============ */
/* Every cell shows its whole text; the row grows instead of the text being
   clipped. Column widths are deliberately NOT released: the first version set
   max-width:none, which let the columns size to their content and pushed the
   table from 1691px to 2352px, so the text did not wrap -- it marched off the
   right edge and under the sticky ticker column. Keeping the caps is what
   makes the text wrap in place, which is the whole point.
   !important because the base .data-table td rule and the per-column rules
   below it both set white-space, and this has to beat all of them. */
body.wrap .data-table td,
body.wrap .db-table td{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  vertical-align:top;
}
/* No forced breaking here on purpose. A number is one unbreakable token, so
   its column cannot shrink below it and 86,017,761 stays whole; with
   overflow-wrap:anywhere it wrapped to "86,017,7 / 61". Prose has spaces and
   wraps without help. Only the prose columns get the anywhere-break, for the
   occasional URL. */
/* Prose columns get room to breathe; the 200px default is a lot of lines for
   a paragraph of commentary. Numbers keep the default cap. */
/* Prose columns: a floor as well as a ceiling. Without the floor the browser
   hands every spare pixel to the columns that cannot shrink (a number is one
   unbreakable token) and squeezes the prose to ~11 characters a line. */
body.wrap .data-table td.col-wide,
body.wrap .data-table td.col-prose{
  min-width:240px!important;max-width:340px!important;overflow-wrap:anywhere}
body.wrap .ai-analysis-cell{min-width:34ch!important;max-width:38ch!important;
  overflow-wrap:anywhere}
/* The clamp is what hides the tail of an analysis; wrap mode is the request
   to see it. */
body.wrap .ai-analysis-cell .ai-analysis-text{
  display:block!important;-webkit-line-clamp:unset!important;
  overflow:visible!important;
}
body.wrap .db-edit-cell.db-edit-pr-label{
  white-space:normal!important;overflow:visible!important;
  text-overflow:clip!important;max-width:340px!important}
#wrapToggle.on{background:rgba(63,209,192,.12)!important;color:#3fd1c0!important}

/* ============ theme tracker: chart popup ============ */
/* A grid chart is ~180px tall by necessity -- twenty on a page. Clicking one
   opens it at a size where a base is actually readable. */
.tx-chart-popup{position:fixed;inset:0;z-index:2200;display:flex;
  align-items:center;justify-content:center;background:rgba(0,0,0,.78);
  padding:24px}
.tx-chart-popup-inner{width:min(1400px,94vw);height:min(820px,88vh);
  background:var(--bg-secondary);border:1px solid var(--border-color);
  border-radius:10px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.tx-chart-popup-head{display:flex;align-items:center;gap:14px;
  padding:11px 16px;border-bottom:1px solid var(--border-color)}
.tx-chart-popup-tk{font:700 1.05rem var(--font-mono);color:var(--accent-blue);
  letter-spacing:.04em}
.tx-chart-popup-hint{font:11px var(--font-mono);color:var(--text-muted)}
.tx-chart-popup-x{margin-left:auto;background:none;border:none;
  color:var(--text-secondary);font-size:1.6rem;line-height:1;cursor:pointer}
.tx-chart-popup-x:hover{color:var(--text-primary)}
.tx-chart-popup-canvas{flex:1;min-height:0;background:var(--bg-primary)}
/* The chart is the affordance, so it says so on hover. */
.chart-cell-canvas[data-ticker],.tx-stock-canvas[data-ticker]{cursor:zoom-in}


/* ---------------------------------------------------------------- landscape
 * A phone on its side gets the DESKTOP layout -- real tables, both panels,
 * full density. The only thing wrong with it at 844x390 was never the width;
 * it was the header forcing a 1500px page, which is fixed above.
 *
 * What does need adjusting is height. The desktop shell locks itself to the
 * viewport and lets panels scroll inside; at 390px tall that leaves a pane a
 * couple of rows deep. So here the page scrolls naturally instead and the
 * panels are allowed their content, which is the same trade the portrait
 * layout makes for the same reason.
 */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
    .dashboard {
        height: auto;
        min-height: 100vh;
    }
    .panels-grid {
        height: auto !important;
        align-items: start;
    }
    .panel {
        max-height: none;
        min-height: unset;
    }
    /* Tall enough to be worth scrolling, short enough that the panel below is
       still reachable without a long swipe. */
    .panel-content {
        max-height: 78vh;
        overflow-y: auto;
    }

    /* Vertical chrome is the expensive thing on a 390px screen. */
    .header { padding: 6px 12px; }
    .panel-header { padding: 7px 12px; }
    .market-pulse { display: none !important; }

    /* Touch targets on a real table: comfortable without wrecking density. */
    .data-table td, .data-table th { padding-top: 7px; padding-bottom: 7px; }
}

/* ---- TC mark on charts -------------------------------------------------- */
/* Bottom-left, under the crosshair and over the grid. Sized in em of the
   container so a 200px grid cell and a full-screen modal both get a mark in
   proportion rather than one that dominates the small one. */
.vault-chart-stamp {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: clamp(18px, 5.5%, 44px);
    height: auto;
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}
/* The mark is white artwork; on a light theme it needs inverting to read. */
[data-theme="light"] .vault-chart-stamp { filter: invert(1); opacity: 0.18; }

/* Chart copy / PNG controls. Hidden until the chart is hovered so they do not
   sit over the price action while reading, and hidden entirely in the capture
   itself -- see the onclone in exportChart. */
.vault-chart-export {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .12s ease;
    z-index: 4;
}
.vault-chart-host:hover .vault-chart-export,
.vault-chart-export:focus-within { opacity: 1; }
.vault-chart-export button {
    font-family: inherit;
    font-size: 10px;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    color: var(--text-muted);
    cursor: pointer;
}
.vault-chart-export button:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.vault-chart-export button:disabled { cursor: default; opacity: .7; }

/* ---- Ticker modal: rail / chart / bottom ------------------------------- */
/* Three zones rather than one column. The rail is read top to bottom, the
   chart is looked at, and the bottom tables are consulted -- stacking them
   meant scrolling past the chart to reach the financials and losing it. */
.search-modal-body.sm-grid {
    display: grid;
    grid-template-columns: minmax(280px, 24%) 1fr;
    grid-template-areas: "rail main" "rail bottom";
    /* A bounded chart row. 1fr let the old chart canvas overrun into the
       bottom row, which is how the financials tabs ended up floating over
       the chart's last candles -- and unclickable beneath its canvas. */
    grid-template-rows: minmax(420px, 58vh) auto;
    gap: 14px;
    align-items: start;
}
.sm-rail   { grid-area: rail; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sm-main   { grid-area: main; min-width: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.sm-main .sm-chartwrap { flex: 1 1 auto; height: 100%; }
/* The charts view gives the pane a 620px floor because its column is tall.
   Inside a 58vh modal row that floor would overflow; the row is the size. */
.sm-main .sc-chartwrap > .cc-scope { min-height: 0; }

.sm-bottom { grid-area: bottom; min-width: 0; }

/* The chart fills its column; the rail scrolls independently so a long
   commentary cannot drag the chart off screen. */
.sm-main .search-chart-canvas { min-height: 340px; }
.sm-rail { max-height: 78vh; overflow-y: auto; }

.sm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.sm-tab {
    font-family: inherit;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 7px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.sm-tab:hover { color: var(--text-primary); }
.sm-tab.on { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.sm-empty { color: var(--text-muted); font-size: 0.8rem; padding: 14px 2px; }

/* Narrow screens get the old single column back: a 260px rail beside a chart
   is not a layout at 900px, it is two things too small to read. */
@media (max-width: 1100px) {
    .search-modal-body.sm-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "rail" "bottom";
        grid-template-rows: auto auto auto;
    }
    .sm-rail { max-height: none; overflow-y: visible; }
}

/* ---- Screener Charts view: rail / chart / tables ------------------------ */
/* Landscape by construction. The old layout stacked, so the chart was a band
   across the middle and everything competed with it; here the chart column
   takes whatever the rail does not, and the rail is a fixed 300px rather than
   a percentage so it cannot squeeze the chart on a narrow window. */
.fwd-charts-view.sc-detail {
    display: grid;
    grid-template-columns: 210px 290px minmax(0, 1fr);
    grid-template-areas: "tick rail chart" "tick rail bottom";
    grid-template-rows: minmax(640px, 1fr) auto;
    gap: 12px;
    padding: 12px;
    align-items: stretch;
    min-height: 0;
}
.sc-tickers   { grid-area: tick; }
.sc-rail      { grid-area: rail; }
.sc-chartwrap { grid-area: chart; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sc-bottom    { grid-area: bottom; min-width: 0; }

/* The chart takes every pixel the column has left after the header and the
   toolbar. 460px floor so it stays landscape rather than collapsing into a
   strip when the panel is short. */
.sc-chart { flex: 1 1 auto; min-height: 600px; width: 100%; }

/* Rail scrolls down and never sideways. Long words in a description or a
   commentary used to widen the column and put a horizontal scrollbar under
   it, which moved the whole rail off-axis. */
.sc-rail {
    min-width: 0;
    max-width: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-rail, .sc-rail * { min-width: 0; }
.sc-rail p, .sc-rail div, .sc-rail span {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* The metrics grid was clipping cards off the right edge -- it was sized for a
   wide modal. In a 300px rail it wraps instead. */
.sc-rail .search-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    overflow: visible;
}
.sc-rail .search-metrics-grid > * { min-width: 0; }

/* Ticker picker: the screener's rows, compact, driving the view. */
.sc-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}
.sc-pick {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: inherit;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
}
.sc-pick:hover { color: var(--text-primary); }
.sc-pick.on { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(41,98,255,.10); }
.sc-pick-t { font-weight: 700; letter-spacing: .02em; }
.sc-pick-c { font-size: 10px; }
.sc-info { flex: 1 1 auto; }

/* Chart header: one line, wrapping rather than clipping. */
.sc-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 2px 2px 8px;
    flex: 0 0 auto;
}
.sc-sym  { font-size: 1.15rem; font-weight: 700; color: var(--accent-blue); }
.sc-name { color: var(--text-muted); font-size: .85rem; }
.sc-px   { font-size: 1rem; font-weight: 600; }
.sc-chg  { font-size: .9rem; font-weight: 600; }
.sc-sect { color: var(--text-muted); font-size: .75rem; margin-left: auto; }
.sc-empty { color: var(--text-muted); font-size: .8rem; padding: 12px 2px; }

/* The bottom tables scroll inside themselves. Without this a wide financials
   table stretched the grid column and dragged the chart wider than the panel,
   which is what was clipping the right-hand side. */
.sc-bottom .sm-pane { max-height: 320px; overflow: auto; }
.sc-bottom table { max-width: 100%; }

@media (max-width: 900px) {
    .fwd-charts-view.sc-detail {
        grid-template-columns: 1fr;
        grid-template-areas: "tick" "chart" "rail" "bottom";
        grid-template-rows: auto auto auto auto;
    }
    .sc-tickers { max-width: none; flex-direction: row; flex-wrap: wrap; }
    .sc-item { width: auto; }
    .sc-item-s { display: none; }
    .sc-rail { max-width: none; max-height: none; }
}

/* ---- Charts view: the ticker sidebar ----------------------------------- */
/* Its own column, not a strip inside the detail rail. Each entry is the
   ticker and its gap on one line with the summary under it, so the list can be
   read down rather than clicked through. */
.sc-tickers {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 210px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
}
.sc-item {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    min-width: 0;
}
.sc-item:hover { background: var(--bg-primary); }
.sc-item.on {
    background: rgba(41, 98, 255, .10);
    border-color: rgba(41, 98, 255, .45);
}
.sc-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sc-item-t { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-primary); }
.sc-item.on .sc-item-t { color: var(--accent-blue); }
.sc-item-c { font-size: 11px; font-weight: 600; flex: 0 0 auto; }

/* Two lines of summary, then an ellipsis. Clamped rather than sliced so the
   whole string stays in the title attribute and in find-on-page. */
.sc-item-s {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* ---- The AI Analysis card in the rail ---------------------------------- */
.sc-ai {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-left: 2px solid var(--accent-blue, #3b82f6);
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-blue) 6%, transparent);
    cursor: pointer;
}
.sc-ai:hover { background: color-mix(in srgb, var(--accent-blue) 12%, transparent); }
.sc-ai-head {
    display: flex; align-items: center; gap: 4px 6px;
    /* Wrap between the label and the badge, never inside the label. The
       verdict is usually one word, but some reports carry a sentence there,
       and it was crushing "AI Analysis" into a one-character column. */
    flex-wrap: wrap;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted);
}
.sc-ai-tag { flex: none; white-space: nowrap; }
.sc-ai-line { font-size: 0.78rem; line-height: 1.45; color: var(--text-primary); overflow-wrap: anywhere; }
.sc-ai-more { font-size: 0.63rem; color: var(--text-muted); opacity: .8; }
.sc-verdict {
    font-size: 0.6rem; font-weight: 700; letter-spacing: .05em;
    padding: 1px 5px; border-radius: 3px;
    background: rgba(148, 163, 184, .18); color: #94a3b8;
    /* A sentence-length verdict becomes a block that wraps within itself,
       instead of a badge fighting the label for the row. */
    min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left;
}
.sc-verdict--noise    { background: rgba(148,163,184,.18); color: #94a3b8; }
.sc-verdict--incremental { background: rgba(245,158,11,.18); color: #fbbf24; }
.sc-verdict--material { background: rgba(34,197,94,.18);  color: #4ade80; }
.sc-verdict--negative { background: rgba(239,68,68,.18);  color: #f87171; }

@media (max-width: 1300px) {
    .fwd-charts-view.sc-detail {
        grid-template-columns: 190px minmax(0, 1fr);
        grid-template-areas: "tick chart" "tick rail" "tick bottom";
        grid-template-rows: minmax(560px, 1fr) auto auto;
    }
    .sc-rail { max-width: none; }
}


/* ---- Charts view: distinguishing the surfaces -------------------------- */
/* The ticker list, the detail rail and the chart were all the same colour on
   the same background, so the view read as one undivided sheet. Each is now a
   panel in its own right. */
.sc-tickers {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 6px;
}
.sc-rail {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
}

/* The chart sits on its own darker ground with a border, so the plot area is
   visibly the subject rather than more of the page. The canvas paints
   --bg-primary itself (see theme() in vault-charts.js); this matches the
   frame around it so the two do not disagree at the edges. */
.sc-chartwrap {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px 10px;
}
.sc-bottom {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
}

/* ---- Charts view: HV readout and range selector ------------------------ */
/* The companion's HVEHV1Bars line, above the chart. Each half carries the
   colour of the volume bar it refers to, so the number and the highlighted
   candle read as the same thing. */
.sc-chart-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.sc-hv { font-size: 11px; font-family: var(--font-mono, monospace); letter-spacing: .02em; }
.sc-hv .hv-e { color: var(--chart-hve, #ff8c1a); }
.sc-hv .hv-1 { color: var(--chart-hv1, #4a9eff); }
.sc-hv .hv-sep { color: var(--text-muted); margin: 0 7px; opacity: .6; }

.sc-range { display: flex; gap: 3px; }
.sc-range button {
    font-family: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
}
.sc-range button:hover { color: var(--text-primary); }
.sc-range button.on {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(41, 98, 255, .10);
}

/* ---- The companion pane inside the vault ------------------------------- */
/* The companion's #mainWrap is `flex: 1 1 auto` and its #volWrap a fixed
   128px band; both are flex children of a page that is 100vh tall. Dropped
   into a plain div they collapse to nothing, #chart is inset:0 inside that
   nothing, and the chart draws zero pixels of a perfectly good payload.
   This supplies the flex context and the height its own page gave it. */
.sc-chartwrap > .cc-scope {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 620px;
    min-width: 0;
}
/* The pane brings its own surface; the wrapper must not paint over it. */
.sc-chartwrap { padding: 0; background: none; border: none; }
.sc-chartwrap > .cc-scope > #mainWrap { flex: 1 1 auto; min-height: 380px; }
.sc-chartwrap > .cc-scope > #volWrap  { flex: 0 0 128px; }

/* ---- Charts view: fit a 16:9 screen ------------------------------------ */
/* The view was built from minimums -- a 640px chart row, a 620px pane, a
   380px price pane -- which added up taller than the panel on a 1080p screen
   and pushed the volume subgraph off the bottom. Heights are now shares of
   what the panel actually has, with floors small enough to survive a laptop.

   Overrides rather than edits to the rules above so the two are legible as
   "the layout" and "making it fit". */
.fwd-charts-view.sc-detail {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
}
/* The panel stops scrolling only for this view, where each region scrolls
   inside itself. The table view still needs the panel to scroll, so this is
   conditional on the charts layout being the thing inside it. */
#screenersContent:has(.sc-detail) { overflow: hidden; }
.sc-tickers, .sc-rail { min-height: 0; max-height: 100%; }

.sc-chartwrap > .cc-scope {
    min-height: 0;
    height: 100%;
}
/* The price pane takes what is left; the volume subgraph keeps a fixed band
   because it is read as a strip rather than scaled. 96px still shows the MA50
   line and the HVE/HV1 bars clearly. */
.sc-chartwrap > .cc-scope > #mainWrap { flex: 1 1 auto; min-height: 200px; }
.sc-chartwrap > .cc-scope > #volWrap  { flex: 0 0 96px; }

/* The companion's own chrome, tightened. Its page has a whole window; here it
   shares one panel with a ticker list, a detail rail and two tables. */
.sc-chartwrap > .cc-scope > .quote-row { padding: 2px 4px; margin: 0; font-size: 12px; }
.sc-chartwrap > .cc-scope > .tab-row   { padding: 0 4px 2px; margin: 0; }
.sc-chartwrap > .cc-scope > #hscroll   { flex: 0 0 10px; }
.sc-chartwrap > .cc-scope > #status    { flex: 0 0 auto; padding: 1px 4px; font-size: 10px; }

/* The tables get a share, not free rein: a long financials table used to set
   the height of the whole view and crowd the chart out. */
.sc-bottom { max-height: 30vh; overflow: auto; }
.sc-bottom .sm-pane { max-height: 22vh; }

/* ---- Details tab: description beside the characteristic cards ---------- */
/* Both were in the 290px rail, where the cards wrapped into a block taller
   than the commentary next to them. Down here there is width for the two to
   sit side by side, which is how they are actually used: read the description
   once, glance at the numbers. */
.sc-details {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
/* With the squares gone, About reads at a comfortable measure rather than
   stretching one paragraph across the whole panel. */
.sc-details--about-only { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.sc-details-about .search-description { font-size: 0.82rem; line-height: 1.55; }
.sc-details-cards .search-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
}
@media (max-width: 1100px) {
    .sc-details { grid-template-columns: 1fr; }
}

/* ---- Source badge and earnings figures --------------------------------- */
/* E or G beside the ticker, from the All tab's SOURCE column. Small and
   lettered rather than coloured alone, so it still reads when two rows of the
   same colour sit next to each other. */
.sc-src {
    display: inline-block;
    margin-left: 5px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
    vertical-align: 1px;
}
.sc-src-e { background: rgba(74, 222, 128, .18); color: #4ade80; }
.sc-src-g { background: rgba(148, 163, 184, .18); color: #94a3b8; }

/* The reported figures, under the AI card. Label, the surprise, then the
   actual-versus-estimate it came from on its own line -- a percentage without
   the numbers behind it is what invites someone to guess them. */
.sc-earnings .sc-earn-row {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.sc-earnings .sc-earn-row:last-child { border-bottom: none; }
.sc-earn-k {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.sc-earn-v { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-earn-d {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---- Chart surface: match the themes tab ------------------------------- */
/* The companion paints its panes with .backdrop -- a dotted grid plus two blue
   radial washes -- and draws the chart itself on a transparent canvas, so the
   gradient is what you see behind the candles. The themes tab draws on a flat
   --bg-primary, so the two read as different products side by side.
   The washes go and the surface is the shared one. */
.sc-chartwrap .cc-scope .backdrop {
    background-image: none;
    /* Transparent, not a colour. The chart canvas now paints the vault's
       --bg-primary itself through VaultCharts.theme(), so painting it here
       too meant two guesses at the same value that could disagree. */
    background-color: transparent;
}
/* .cc-scope defines its own --bg-primary, so the variable is named explicitly
   rather than inherited, or the pane would fall back to the companion's near
   black instead of the vault's chart ground. */
.sc-chartwrap > .cc-scope { background: var(--bg-primary); }

/* The companion stylesheet pins the default palette's tokens on .cc-scope --
   they were its standalone :root, machine-scoped by scope_css.py. On a themed
   vault page those pins shadowed the theme's values, so every Style painted
   the chart pane the same near-black; the companion's own theme blocks were
   scoped into ".cc-scope [data-theme]", which looks for the attribute INSIDE
   the pane and so never matches the vault's <html data-theme>. The page
   defines the same token names at :root, so hand the pinned ones back to
   inheritance whenever the vault is hosting. html[data-theme] matches every
   vault page (the attribute is "" on the original style), never the
   standalone companion, and outweighs the .cc-scope pins. Edit this block,
   not companion-chart.css -- that file is regenerated. */
html[data-theme] .cc-scope {
    --bg-primary: inherit;
    --bg-secondary: inherit;
    --bg-tertiary: inherit;
    --border-color: inherit;
    --text-primary: inherit;
    --text-secondary: inherit;
    --text-muted: inherit;
    --accent-blue: inherit;
    --accent-green: inherit;
    --accent-red: inherit;
    --accent-yellow: inherit;
    --accent-purple: inherit;
}
/* The ambient radial gradients are literal rgba of the default palette's
   blue; on any other style they would glow the wrong hue over the right
   ground, so themed pages go flat -- same rule the standalone companion
   applies to its themed body. */
html[data-theme]:not([data-theme=""]) .cc-scope {
    background-image: none;
}

/* The ticker list sits a step below the panels it selects into, so the eye
   reads it as the index rather than as another panel of content. */
.sc-tickers { background: var(--bg-primary); }

/* ---- Theme bar above the chart ----------------------------------------- */
/* The badge was written for the modal's full-width header, where 24px of side
   padding and a bottom border made sense. Above a chart in a panel it needs to
   be a thin strip, and the ranks belong at the far end rather than crowding
   the name. */
.sc-themebar { flex: 0 0 auto; }
.sc-themebar:empty { display: none; }
.sc-themebar .search-theme-badge {
    padding: 5px 8px;
    margin-bottom: 6px;
    border-bottom: none;
    border-radius: 4px;
    justify-content: space-between;
    gap: 10px;
}
.sc-themebar .theme-name { font-size: 0.78rem; }
.sc-themebar .theme-ranks { flex: 0 0 auto; }

/* ---- Sidebar rows carry the screener's highlighting -------------------- */
/* Same left rule and wash the table uses, so a name that stands out there
   stands out in the list you pick from. Kept lighter than the table's, since
   these sit two-up against a darker ground and the full-strength gradient
   read as a solid block. */
.sc-item.row-highlight-green {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.09) 0%, rgba(34, 197, 94, 0.02) 100%);
    border-left: 3px solid var(--accent-green);
}
.sc-item.row-highlight-green:hover {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.16) 0%, rgba(34, 197, 94, 0.06) 100%);
}
.sc-item.row-highlight-blue {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.10) 0%, rgba(74, 158, 255, 0.03) 100%);
    border-left: 3px solid var(--accent-blue);
}
.sc-item.row-highlight-blue:hover {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.18) 0%, rgba(74, 158, 255, 0.07) 100%);
}
/* Selection still wins: the border stays the highlight's colour so the reason
   the row is lit is not lost, but the fill says which one is on screen. */
.sc-item.on.row-highlight-green,
.sc-item.on.row-highlight-blue {
    background: rgba(41, 98, 255, .16);
}

/* ---- Left icon rail ---------------------------------------------------- */
/* Navigation moved off the top. Five destinations and a calendar, pointed at
   rather than read, so they cost a 52px column instead of a band across a
   1080p screen. */
.side-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 52px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 6px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
}
.rail-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 2px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.rail-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.rail-btn.active { color: var(--accent-blue); background: rgba(41, 98, 255, .12); }
/* The active mark is on the rail's own edge, so it reads as "this column is
   showing that page" rather than as a selected button. */
.rail-btn.active::before {
    content: '';
    position: absolute;
    left: -6px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--accent-blue);
    border-radius: 0 2px 2px 0;
}
.rail-ico { font-size: 16px; line-height: 1; }
/* Named as well as drawn. An icon rail whose icons have to be learned is a
   quiz; at this size the word costs one line and removes the guessing. */
.rail-label { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; }
/* .rail-sep is gone from the markup; the rule stays harmless and unused so
   reinstating a grouping later is markup only. */

/* Glyphs are drawn as text, never as emoji. A codepoint with emoji
   presentation renders in full colour next to the monochrome geometrics and
   at a different weight, which is what made the calendar look pasted in. */
.rail-ico {
    font-variant-emoji: text;
    -webkit-font-feature-settings: normal;
}

/* The page shifts over by the rail's width rather than the rail floating over
   it, so nothing underneath is unreachable. */
.dashboard.has-rail { padding-left: 52px; }

/* The header keeps the brand, search and tools; the page tabs in it are now
   duplicates of the rail and only earn their space when the rail is hidden. */
.dashboard.has-rail .header-nav { display: none; }

/* Narrow screens keep the old header nav and drop the rail: a fixed column is
   a large fraction of a phone, and the mobile menu already exists for this. */
@media (max-width: 900px) {
    .side-rail { display: none; }
    .dashboard.has-rail { padding-left: 0; }
    .dashboard.has-rail .header-nav { display: flex; }
}

/* ---- Header pinned, and the gap under it closed ------------------------ */
/* The header scrolled away with the page and sat inside 12px of dashboard
   padding, so there was a band of empty above it and another between it and
   the first panel label. It is now flush to the top and stays there. */
.dashboard.has-rail {
    padding: 0 12px 12px 52px;
    gap: 0;
}
.dashboard.has-rail .header {
    position: sticky;
    top: 0;
    z-index: 800;
    margin: 0 -12px;
    padding: 8px 20px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
}
/* The panels start immediately under it. The grid used to inherit the
   dashboard's 12px gap on top of its own spacing. */
.dashboard.has-rail .panels-grid { margin-top: 8px; }
.dashboard.has-rail #homePage,
.dashboard.has-rail #databasePage,
.dashboard.has-rail #libraryPage { margin-top: 8px; }

/* Every page starts where the screener starts. The themes page carried its
   own 10px top inset and the pages above an 8px margin, so each sat a
   different distance below the pinned header. */
.dashboard.has-rail #themesPage,
.dashboard.has-rail #libraryPage,
.dashboard.has-rail #databasePage,
.dashboard.has-rail #homePage { margin-top: 0; }
.dashboard.has-rail .themes-page { padding-top: 0; }

/* ...and each fills the height rather than stopping short of it. The themes
   columns were capped at 100vh-170px, a figure from before the header was
   pinned and the rail took the nav, which left dead space under the boxes. */
.dashboard.has-rail .themes-page { padding-bottom: 0; }
.dashboard.has-rail .themes-cols { align-items: stretch; min-height: 0; }
.dashboard.has-rail .themes-cols > .panel { max-height: none; height: 100%; }

/* The rail sits above the pinned header rather than under it, so the brand and
   the rail read as one edge. */
.side-rail { z-index: 900; }

/* Help is pushed to the bottom of the rail rather than ordered after the
   calendar: auto margin means it stays at the foot however many destinations
   are added above it. */
.rail-foot { margin-top: auto; }

/* Header controls that moved into the rail. The wraps keep their ids and
   panels; only the anchoring changed, so a panel opens to the right of the
   rail, bottom-aligned with its button, instead of dropping below a header
   that is no longer its parent. */
.side-rail .rail-wrap { position: relative; display: flex; flex-direction: column; }
.side-rail .rail-wrap > .rail-btn { width: 100%; }
.side-rail .style-dropdown,
.side-rail .alerts-panel,
.side-rail .sync-health-panel {
    top: auto;
    bottom: 0;
    left: calc(100% + 8px);
    right: auto;
}
.side-rail .rail-ico { position: relative; }
.side-rail .alerts-badge { position: absolute; top: -6px; right: -10px; }
.side-rail .sync-health-btn .dot { display: inline-block; }

/* ---- Vault panels fill the page ---------------------------------------- */
/* One panel at a time, reached from the rail, so the side padding and the
   resize gutter between them are space with nothing to separate. */
.dashboard.has-rail { padding-left: 52px; padding-right: 0; }
.dashboard.has-rail .header { margin: 0; padding: 8px 16px; }
.dashboard.has-rail .panels-grid {
    grid-template-columns: 1fr;
    margin-top: 0;
}
/* The handle divided two visible panels; with one focused it divides nothing. */
.dashboard.has-rail .panels-grid .resize-handle { display: none; }
/* Flush to the rail. The forward panel carried a 3px nudge from when a
   resize handle sat to its left, and the calendar page its own 4px inset --
   both read as a seam beside a screener that has none. */
.dashboard.has-rail .panels-grid .panel { margin-left: 0; }
.dashboard.has-rail .cal-page { padding-left: 0; }
.dashboard.has-rail .panel { border-radius: 0; border-left: none; border-right: none; }
/* A collapsed panel can no longer be produced, but a stored one from before
   this change would still be honoured by the class alone. */
.panel.panel-collapsed { min-width: 0; max-width: none; overflow: visible; }

/* ---- Charts view: reclaim the padding ---------------------------------- */
/* Every region was carrying its own 8-12px inset on top of the panel's, so
   four boxes of air ran the length of the screen. Kept only where two
   surfaces actually meet and need separating. */
.fwd-charts-view.sc-detail { padding: 4px; gap: 4px; }
.sc-tickers { padding: 4px 3px; }
.sc-rail    { padding: 6px; }
.sc-bottom  { padding: 4px 6px; }
.sc-chartwrap > .cc-scope { padding: 0; }
.sc-chartwrap > .cc-scope > .quote-row { padding: 1px 3px; }
.sc-chartwrap > .cc-scope > .tab-row   { padding: 0 3px 1px; }
.sc-themebar .search-theme-badge { padding: 3px 6px; margin-bottom: 3px; }

/* The panel's own chrome above it, trimmed to match. */
.dashboard.has-rail #screenersPanel .panel-header  { padding: 6px 10px; }
.dashboard.has-rail #screenersPanel .panel-filters { padding: 4px 10px; }
.dashboard.has-rail #forwardTestingPanel .panel-header  { padding: 6px 10px; }
.dashboard.has-rail #forwardTestingPanel .panel-filters { padding: 4px 10px; }
/* Bottom of the page: the dashboard's own inset under the panel. */
.dashboard.has-rail { padding-bottom: 0; }

/* ---- Calendar page ------------------------------------------------------ */
/* List and chart side by side. The chart is the reason this is a page rather
   than the modal it replaces, so it takes the larger share and the list is
   sized to hold two columns of names without wrapping. */
.cal-page {
    display: grid;
    grid-template-columns: minmax(360px, 34%) minmax(0, 1fr);
    gap: 6px;
    flex: 1;
    min-height: 0;
    padding: 4px;
}
.cal-list {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
}
.cal-chart {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
/* Same flex context the charts view gives the pane, or #mainWrap collapses and
   the chart draws nothing -- the failure this already had once. */
.cal-chart > .cc-scope {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    background: var(--bg-primary);
}
.cal-chart > .cc-scope > #mainWrap { flex: 1 1 auto; min-height: 200px; }
.cal-chart > .cc-scope > #volWrap  { flex: 0 0 96px; }
.cal-chart .cc-scope .backdrop { background-image: none; background-color: transparent; }

.cal-session-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.cal-session-toggle button {
    flex: 1;
    font-family: inherit;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
}
.cal-session-toggle button:hover { color: var(--text-primary); }
.cal-session-toggle button.on {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(41, 98, 255, .12);
}

/* The split was designed for the modal's full width. In this pane the two
   sessions stack instead: a column each was what clipped AFTER THE CLOSE off
   the edge of the page. */
.cal-page .earnings-split { flex-direction: column; }
.cal-page .earnings-col { width: 100%; }

/* The selected row, as the modal marks it. */
.cal-list tr.earnings-row.row-selected {
    background: rgba(41, 98, 255, .16);
    outline: 1px solid rgba(41, 98, 255, .45);
}

@media (max-width: 1100px) {
    .cal-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* Sort control above the ticker list. */
.sc-sortbar {
    display: flex;
    gap: 3px;
    padding: 0 0 5px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}
.sc-sortbar button {
    flex: 1;
    font-family: inherit;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 4px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
}
.sc-sortbar button:hover { color: var(--text-primary); }
.sc-sortbar button.on {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(41, 98, 255, .12);
}

/* ==== Workspace ========================================================== */
/* A page the user arranges. The grid is twelve columns of equal width and
   fixed-height rows, so a pane's stored w/h means the same thing on any
   screen; panes place themselves with grid-column/grid-row spans. */
.ws-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 6px;
}
.ws-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}
.ws-brand {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: .04em;
}
.ws-hint { font-size: 0.66rem; color: var(--text-muted); margin-left: auto; }
.ws-add-wrap { position: relative; }
.ws-add-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 160px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 4px;
}
.ws-add-menu.open { display: block; }
.ws-add {
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
}
.ws-add:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.ws-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* No bottom padding: the row height is computed to land the last row
       exactly on the page's bottom edge, and padding would hold it short. */
}
.ws-slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
/* Lifted while dragged so it reads as picked up, and above its neighbours so
   the drop target highlight below it is never the thing on top. */
.ws-slot.ws-dragging {
    opacity: .85;
    z-index: 40;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
/* The pane a drop would tab into. */
.ws-slot.ws-drop {
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}
/* The pane the arrow keys act in -- the last one clicked, or where Tab has
   cycled to. Quieter than ws-drop: a resting state, not an event. */
.ws-slot.ws-hot {
    border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border-color));
}
.ws-slot.ws-hot .ws-grip { color: var(--accent-blue); }
.ws-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    flex: 0 0 auto;
    user-select: none;
}
.ws-grip { color: var(--text-muted); font-size: 0.8rem; letter-spacing: -2px; }
.ws-head-actions {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex: 0 0 auto;
}
.ws-head-actions .ws-link { margin-left: 0; }
.ws-head > .ws-x { order: 3; margin-left: 0; }
.ws-tab-add {
    width: 24px;
    height: 22px;
    padding: 0;
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font: 700 14px/1 var(--font-mono);
    text-align: center;
    text-align-last: center;
}
.ws-tab-add:hover, .ws-tab-add:focus-visible {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    outline: none;
}
.ws-tab-add:disabled { cursor: default; opacity: .4; }
.ws-tab-add option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: 12px var(--font-mono);
    text-align: left;
}
.ws-chart-head-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 2px 4px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--accent-blue);
    cursor: pointer;
    line-height: 1;
}
.ws-chart-head-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ws-chart-head-toggle.is-off { color: var(--text-muted); opacity: .7; }
.ws-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
}
.ws-x, .ws-tab-x {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 2px;
}
.ws-x:hover, .ws-tab-x:hover { color: var(--accent-red); }
.ws-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; }
.ws-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-family: inherit;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 4px 4px 0 0;
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.ws-tab:hover { color: var(--text-primary); }
.ws-tab.on {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    border-bottom-color: transparent;
    color: var(--accent-blue);
}
.ws-tab .ws-tab-x { margin-left: 2px; }
/* A tab being dragged into a new place in its bar. */
.ws-tab.ws-tab-dragging { opacity: .55; }
.ws-body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; }
/* A slot keeps one body per tab now, hidden rather than rebuilt, so a chart
   behind a tab survives the flip. The attribute must win over any display a
   widget's own rules set. */
.ws-slot > .ws-body[hidden] { display: none !important; }
/* The chart pane is the one thing that must not scroll internally: the
   companion sizes itself to this box. */
.ws-body:has(.ws-chart-host) { overflow: hidden; }
.ws-chart-host { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.ws-chart-host > .cc-scope {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    background: var(--bg-primary);
}
.ws-chart-chrome-hidden .cc-scope > .quote-row,
.ws-chart-chrome-hidden .cc-scope > .tab-row,
.ws-chart-chrome-hidden .cc-scope > #hscroll,
.ws-chart-chrome-hidden .cc-scope > #status { display: none; }
/* One per corner. Only the bottom-right carries the visible notch -- four
   painted triangles would read as damage rather than as an affordance --
   but all four take the drag, and the cursor says so on approach. */
.ws-resize {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 3;
}
.ws-resize-se {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--border-color) 50%);
}
.ws-resize-nw { left: 0; top: 0; cursor: nwse-resize; }
.ws-resize-ne { right: 0; top: 0; cursor: nesw-resize; }
.ws-resize-sw { left: 0; bottom: 0; cursor: nesw-resize; }
/* A hint on approach, so the other three are discoverable without being
   drawn on all the time. */
.ws-slot:hover > .ws-resize-nw,
.ws-slot:hover > .ws-resize-ne,
.ws-slot:hover > .ws-resize-sw {
    background: radial-gradient(circle at var(--wsx, 50%) var(--wsy, 50%),
                var(--border-color) 0 2px, transparent 2px);
}
.ws-resize-nw { --wsx: 4px; --wsy: 4px; }
.ws-resize-ne { --wsx: 10px; --wsy: 4px; }
.ws-resize-sw { --wsx: 4px; --wsy: 10px; }
.ws-empty { padding: 14px; font-size: 0.72rem; color: var(--text-muted); text-align: center; }

/* Rows in a list widget: ticker, move, and as much summary as fits. */
.ws-row {
    display: grid;
    grid-template-columns: 62px 60px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    padding: 4px 8px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-left: 2px solid transparent;
    background: none;
    cursor: pointer;
}
.ws-row:hover { background: var(--bg-tertiary); }
.ws-row.on { background: rgba(41, 98, 255, .14); border-left-color: var(--accent-blue); }
.ws-row-tk { font-weight: 700; font-size: 0.76rem; color: var(--accent-blue); }
.ws-row-chg { font-size: 0.72rem; }
.ws-row-chg.pos { color: var(--accent-green); }
.ws-row-chg.neg { color: var(--accent-red); }
.ws-row-sum {
    font-size: 0.68rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The screener's own row colours, so a blue row is blue here too. */
.ws-row.row-highlight-blue  { border-left-color: var(--accent-blue); }
.ws-row.row-highlight-green { border-left-color: var(--accent-green); }

.ws-detail-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 6px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--accent-blue);
}
.ws-detail-head span { font-size: 0.72rem; color: var(--text-muted); }
/* Ticker Detail, fleshed out (2026-10-07): where the company sits, its theme
   and the theme's rank, the day's digest, and a grid of float / short /
   ownership / trading numbers. */
.ws-det-sub { padding: 0 10px 4px; font-size: 0.68rem; color: var(--text-muted); }
.ws-det-theme { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 2px 10px 6px;
                font-size: 0.7rem; }
.ws-det-theme-name { color: var(--accent-blue); font-weight: 600; margin-right: 2px; }
.ws-det-rank { font-family: var(--font-mono); color: var(--text-primary); }
.ws-det-rank i { font-style: normal; color: var(--text-muted); margin-right: 3px; font-size: 0.6rem; }
.ws-det-digest { margin: 6px 10px; padding: 5px 8px; border-left: 2px solid var(--accent-blue);
                 background: var(--bg-tertiary); font-size: 0.72rem; line-height: 1.4; color: var(--text-secondary); }
.ws-det-digest b { color: var(--text-primary); font-weight: 600; margin-right: 6px; }
.ws-det-when { margin-right: 6px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent-blue);
               cursor: pointer; white-space: nowrap; }
.ws-det-when:hover { text-decoration: underline; }
.ws-det-when--unknown { font-family: inherit; font-style: italic; color: var(--text-muted); cursor: help; }
.ws-det-when--unknown:hover { text-decoration: none; }
.ws-det-src { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid var(--border-color);
              border-radius: 3px; font-size: 0.58rem; line-height: 1.5; color: var(--accent-blue);
              text-decoration: none; vertical-align: 1px; }
.ws-det-src:hover { border-color: var(--accent-blue); }
.ws-det-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 7px 14px;
               padding: 6px 10px 10px; }
.ws-det-stat span { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: .05em;
                    color: var(--text-muted); }
.ws-det-stat b { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--text-primary); }
.ws-det-stat em { font-style: normal; color: var(--text-muted); font-size: 0.64rem; }
.ws-det-wait { padding: 6px 10px; font-size: 0.68rem; color: var(--text-muted); }
.ws-sec { padding: 6px 10px 10px; font-size: 0.76rem; line-height: 1.5; }
.ws-sec b {
    display: block;
    margin-bottom: 4px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.ws-sec p { margin: 0; color: var(--text-secondary); }

/* ---- The header is gone; the rail carries everything ------------------- */
/* Kept in the stylesheet rather than deleted: .header still exists in the
   mobile layout under 900px, where the rail is hidden. */
.dashboard.has-rail > .header { display: none; }
.dashboard.has-rail { padding-top: 6px; }
.rail-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 2px 8px;
    margin-bottom: 2px;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.rail-logo { width: 26px; height: 26px; object-fit: contain; }
/* The refresh status under its button: two short lines rather than the wide
   pill the header had room for. */
.side-rail .refresh-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 8px;
    color: var(--text-muted);
    text-align: center;
    padding: 0 2px 4px;
    line-height: 1.2;
}
.side-rail .refresh-indicator .dot { width: 5px; height: 5px; flex: none; }

@media (max-width: 900px) {
    .dashboard.has-rail > .header { display: flex; }
    .ws-grid { grid-template-columns: 1fr; }
    .ws-slot { grid-column: 1 / -1 !important; }
}

/* ---- Workspace: widget interiors --------------------------------------- */
/* News links, financial statement buttons and the rest were sitting against
   the pane's left border, because their own pages give them a container with
   padding and the widget body has none. */
.ws-body > .ws-news,
.ws-body > .ws-fin { padding: 8px 10px 10px; }
.ws-news .search-news-item { padding: 6px 0; border-bottom: 1px solid var(--border-color); }
.ws-news .search-news-item:last-child { border-bottom: none; }
.ws-news .news-link { display: block; margin-bottom: 2px; line-height: 1.4; }
/* Recent News merges headlines, SEC filings and the vault's releases; the tag
   says which each line is. */
.ws-news-tag { display: inline-block; padding: 0 5px; margin-right: 4px; border-radius: 3px;
               font-size: 10px; line-height: 15px; font-family: var(--font-mono);
               background: var(--bg-tertiary); color: var(--text-secondary); }
.ws-news-tag--sec { color: var(--accent-yellow); }
.ws-news-tag--gap { color: var(--accent-green); }
.ws-news-tag--rel { color: var(--accent-blue); }
.ws-news-tag--wire { color: var(--accent-blue); }
/* Earnings, guidance and analyst actions from the vault's own tables, each
   with its numbers underneath in the Newsfeed's red / green footnote lines. */
.ws-news-tag--earn { color: var(--accent-purple); }
.ws-news-tag--guide { color: var(--accent-purple); }
.ws-news-tag--anl { color: var(--text-secondary); }
.ws-news-tag--anl-up { color: var(--accent-green); }
.ws-news-tag--anl-down { color: var(--accent-red); }
.ws-news-fins { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
                margin: 0 0 3px; font-size: 11px; line-height: 1.45; }
/* Recent News's lookup by date: a bar that stays put while the list scrolls,
   day headings in history mode, and the day asked about in the accent. */
.ws-news-bar { position: sticky; top: -8px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center;
               gap: 4px; margin: -8px -10px 4px; padding: 6px 10px; background: var(--bg-secondary);
               border-bottom: 1px solid var(--border-color); }
.ws-news-bar--on { box-shadow: inset 0 -2px 0 var(--accent-blue); }
.ws-news-bar input[type="date"], .ws-news-bar select, .ws-news-bar button {
    height: 22px; font: inherit; font-size: 11px; background: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 4px; padding: 0 6px; color-scheme: dark; }
/* The date keeps its width in a narrow pane; the rest wraps under it. */
.ws-news-bar input[type="date"] { flex: 0 0 122px; }
.ws-news-bar select { min-width: 0; }
.ws-news-bar button { cursor: pointer; color: var(--text-secondary); }
.ws-news-bar button:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.ws-news-step { padding: 0 7px; font-size: 14px; line-height: 1; }
.ws-news-latest { margin-left: auto; }
.ws-news-nosec { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11px;
                 color: var(--text-secondary); cursor: pointer; white-space: nowrap; user-select: none; }
.ws-news-nosec input { margin: 0; accent-color: var(--accent-blue); cursor: pointer; }
.ws-news-bar:not(.ws-news-bar--on) .ws-news-nosec { margin-left: auto; }
.ws-news-hint { min-width: 0; font-size: 10px; color: var(--text-muted);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-news-day { display: flex; gap: 6px; align-items: baseline; padding: 9px 0 3px; font-size: 10px; font-weight: 600;
               text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
               border-bottom: 1px solid var(--border-color); }
.ws-news-day--on { color: var(--accent-blue); }
.ws-news-rel { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.ws-news-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
.ws-news-when { cursor: pointer; }
.ws-news-when:hover { color: var(--accent-blue); text-decoration: underline; }
.ws-news-cover { padding-top: 10px; font-size: 10px; color: var(--text-muted); }
/* The foot of a list that loads older news as it is scrolled. */
.ws-news-more { padding: 10px 0 4px; font-size: 10px; color: var(--text-muted); text-align: center; }
/* A story that arrived while the list was open, lit for a moment. */
@keyframes ws-news-flash { from { background: color-mix(in srgb, var(--accent-blue) 24%, transparent); } to { background: transparent; } }
.ws-news .search-news-item.ws-news-new { animation: ws-news-flash 6s ease-out; }
/* A date lookup's catalyst window -- the day asked about, and everything after
   the prior session's close -- tinted the full width of the pane, so the news
   that could have moved that day stands out from the week around it. */
.ws-news .search-news-item.ws-news-hit {
    margin: 0 -10px; padding: 6px 10px 6px 13px;
    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--accent-blue);
    border-bottom-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-color));
}
.ws-news-legend { padding: 0 0 4px; font-size: 10px; color: var(--text-muted); }
.ws-news-legend b { font-weight: 600; color: var(--accent-blue); }
.ws-earn-date--news { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.ws-earn-date--news:hover { color: var(--accent-blue); }

/* Newsfeed (owner): Benzinga Pro through the desk companion. */
.ws-body > .ws-bzfeed { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bzf-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px;
           border-bottom: 1px solid var(--border-color); font-size: 11px; }
.bzf-bar button { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color);
                  border-radius: 3px; padding: 2px 7px; font-size: 11px; cursor: pointer; }
.bzf-bar button.active { color: var(--text-primary); border-color: var(--accent-blue); }
.bzf-follow { display: inline-flex; align-items: center; gap: 3px; color: var(--text-secondary); cursor: pointer; }
.bzf-sym { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; }
.bzf-live { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 0 5px; border-radius: 3px;
            color: var(--text-muted); border: 1px solid var(--border-color); }
.bzf-live.on { color: var(--accent-green); border-color: var(--accent-green); }
.bzf-lag { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); flex: none; }
.bzf-new { animation: bzfNew 4s ease-out; }
@keyframes bzfNew { from { background: rgba(80, 200, 120, 0.22); } to { background: transparent; } }
.bzf-status { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
.bzf-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; font-size: 11px;
               border-bottom: 1px solid var(--border-color); color: var(--text-secondary); }
.bzf-filters input { width: 86px; background: var(--bg-primary); color: var(--text-primary);
                     border: 1px solid var(--border-color); border-radius: 3px; padding: 1px 4px; font-size: 11px; }
.bzf-fnote { flex-basis: 100%; color: var(--text-muted); font-size: 10px; }
.bzf-list { overflow-y: auto; flex: 1; min-height: 0; padding: 0 8px; }
/* The scanner's strip: what fired, above the tape, whatever the tape shows. */
.bzf-alerts { flex: none; border-bottom: 1px solid var(--border-color); background: color-mix(in srgb, var(--accent-yellow) 6%, transparent); }
.bzf-rules { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 5px 8px; font-size: 10px; color: var(--text-secondary); }
.bzf-rules b { color: var(--text-primary); letter-spacing: .04em; text-transform: uppercase; font-size: 9px; margin-right: 2px; }
.bzf-rules input { width: 5.5em; padding: 1px 4px; font: inherit; font-size: 10px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 3px; }
.bzf-rstat { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--accent-green); }
.bzf-rstat.off { color: var(--accent-red); }
/* Whether the strip's moves are live from the desk's stream. */
.bzf-pxstat { margin-left: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--accent-green); }
.bzf-pxstat.off { color: var(--accent-red); }
.bzf-rules-early { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; padding-top: 3px; border-top: 1px dashed var(--border-color); color: var(--text-muted); }
.bzf-rules-early .bzf-primary { color: var(--text-secondary); }
.bzf-rules-early input { width: 3.6em; }
.bzf-rules-early input[data-rule="early_dollars"] { width: 5.5em; }
.bzf-alist { max-height: 190px; }
/* An early row is a heads-up, not a bell: muted until it confirms. */
.bzf-alert.bzf-early { opacity: .78; }
.bzf-alert.bzf-early b { color: var(--text-secondary); }
.bzf-alert.bzf-early .bzf-a-move { font-weight: 500; }
.bzf-tier { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-yellow); border: 1px solid color-mix(in srgb, var(--accent-yellow) 45%, transparent); border-radius: 3px; padding: 0 3px; }
.bzf-tier.ok { color: var(--accent-green); border-color: color-mix(in srgb, var(--accent-green) 45%, transparent); }
.bzf-lb-sub { padding: 8px 0 2px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
/* The scorecard: the week's fires and what followed each. */
.bzf-sc-sum { padding: 3px 0; font-size: 10px; color: var(--text-secondary); line-height: 1.5; }
.bzf-sc-sum b { color: var(--text-primary); }
.bzf-sc-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 10px; }
.bzf-sc-table th { text-align: left; font-weight: 500; color: var(--text-muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px 2px 0; }
.bzf-sc-table td { padding: 3px 6px 0 0; white-space: nowrap; vertical-align: baseline; }
.bzf-sc-table td.mono { font-family: var(--font-mono); }
.bzf-sc-table td.up { color: var(--accent-green); }
.bzf-sc-table td.down { color: var(--accent-red); }
.bzf-sc-table td b[data-sym] { font-family: var(--font-mono); color: var(--text-primary); cursor: pointer; }
.bzf-sc-table tr.bzf-sc-title td { padding: 0 0 5px; white-space: normal; color: var(--text-muted); font-size: 10px; border-bottom: 1px solid var(--border-color); }
.bzf-sc-note { color: var(--text-muted); font-size: 9px; }
.bzf-alist { max-height: 150px; overflow-y: auto; padding: 0 8px 4px; }
.bzf-alert { display: grid; grid-template-columns: auto auto auto 1fr; gap: 0 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--border-color); font-size: 11px; }
.bzf-alert b { font-family: var(--font-mono); color: var(--text-primary); cursor: pointer; }
.bzf-alert b:hover { color: var(--accent-blue); }
.bzf-a-move { font-family: var(--font-mono); font-weight: 700; }
.bzf-a-move.up { color: var(--accent-green); }
.bzf-a-move.down { color: var(--accent-red); }
.bzf-a-move small { font-size: 8px; font-weight: 400; letter-spacing: .04em; color: var(--text-muted); }
.bzf-a-vol { font-family: var(--font-mono); color: var(--text-secondary); }
.bzf-a-when { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); justify-self: end; }
.bzf-a-title { grid-column: 1 / -1; color: var(--text-secondary); line-height: 1.3; }
.bzf-a-empty { padding: 4px 0 6px; font-size: 10px; color: var(--text-muted); }
.bzf-since { font-style: normal; color: var(--text-secondary); }
.bzf-cls { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 3px; padding: 0 3px; margin-left: 4px; flex: none; }
.bzf-cls-halt, .bzf-cls-analyst { color: var(--accent-yellow); }
/* What kind of news, what it has done before, and the wire's numbers. */
.bzf-catline { margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; font-size: 10px; }
.bzf-cat { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-blue); border: 1px solid color-mix(in srgb, var(--accent-blue) 45%, transparent); border-radius: 3px; padding: 0 4px; flex: none; }
.bzf-base { font-family: var(--font-mono); color: var(--text-muted); }
.bzf-fin { font-family: var(--font-mono); color: var(--text-secondary); border-left: 2px solid var(--border-color); padding-left: 5px; }
.bzf-fin.up { color: var(--accent-green); border-left-color: var(--accent-green); }
.bzf-fin.down { color: var(--accent-red); border-left-color: var(--accent-red); }
.bzf-a-title .bzf-cat { margin-right: 2px; }
/* Who else is moving on the story, under the ring's headline. */
.bzf-a-symp { grid-column: 1 / -1; font-size: 10px; color: var(--text-muted); line-height: 1.4; }
.bzf-a-symp-l { letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }
.bzf-a-symp b { font-family: var(--font-mono); color: var(--text-secondary); cursor: pointer; }
.bzf-a-symp b:hover { color: var(--accent-blue); }
.bzf-a-symp .up { color: var(--accent-green); }
.bzf-a-symp .down { color: var(--accent-red); }
.bzf-tier.bzf-symp { color: var(--text-secondary); border-color: var(--border-color); }
/* Today's halts, under the rules. */
.bzf-halts { padding: 3px 8px 4px; font-size: 10px; color: var(--text-muted); line-height: 1.4; border-top: 1px solid var(--border-color); }
.bzf-halts-l { letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }
.bzf-halts b { font-family: var(--font-mono); color: var(--text-secondary); cursor: pointer; }
.bzf-halts b:hover { color: var(--accent-blue); }
.bzf-halt.on b { color: var(--accent-yellow); }
.bzf-tier.bzf-halted { color: var(--accent-yellow); border-color: color-mix(in srgb, var(--accent-yellow) 45%, transparent); }
/* A related name, not the story's subject: on the row, not on the bell. */
.bzf-m.bzf-rel, .bzf-t.bzf-rel { opacity: .55; }
.bzf-m.bzf-rel b, .bzf-t.bzf-rel { color: var(--text-secondary); }
.bzf-primary { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.bzf-lb { padding: 1px 6px; font: inherit; font-size: 10px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 3px; cursor: pointer; }
.bzf-lb:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.bzf-lookback { max-height: 260px; overflow-y: auto; padding: 0 8px 6px; border-top: 1px solid var(--border-color); }
.bzf-lb-head { display: flex; align-items: baseline; gap: 8px; padding: 5px 0 2px; font-size: 10px; color: var(--text-secondary); }
.bzf-lb-head b { color: var(--text-primary); }
.bzf-lb-prog { font-family: var(--font-mono); }
.bzf-lb-x { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.bzf-lb-near { padding: 6px 0 2px; font-size: 10px; color: var(--text-muted); line-height: 1.6; }
.bzf-lb-near b { font-family: var(--font-mono); color: var(--text-secondary); cursor: pointer; }
.bzf-since.hot { color: var(--accent-yellow); font-weight: 600; }
.bzf-item { padding: 5px 0; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.bzf-head { display: flex; gap: 6px; align-items: baseline; }
.bzf-time { font-family: var(--font-mono); color: var(--text-muted); font-size: 10px; flex: none; }
.bzf-src { font-size: 10px; color: var(--text-secondary); flex: none; }
.bzf-wire .bzf-src { color: var(--accent-green); }
.bzf-filing .bzf-src { color: var(--accent-yellow); }
.bzf-title { color: var(--text-primary); cursor: pointer; line-height: 1.35; }
.bzf-title:hover { color: var(--accent-blue); }
/* The row buttons: copy, 5m, open. Quiet until hovered, never hidden. */
.bzf-acts { margin-left: auto; display: inline-flex; gap: 2px; flex: none; align-self: flex-start; }
.bzf-act { min-width: 20px; height: 18px; padding: 0 4px; font: inherit; font-family: var(--font-mono); font-size: 11px; line-height: 16px;
           color: var(--text-muted); background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.bzf-act:hover { color: var(--text-primary); border-color: var(--border-color); background: var(--bg-primary); }
.bzf-act-tf { font-size: 9px; letter-spacing: .04em; }
.bzf-act.done { color: var(--accent-green); }
.bzf-a-when .bzf-acts { margin-left: 4px; vertical-align: middle; }
.bzf-tk { margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--text-secondary); }
.bzf-tk b, .bzf-m b { font-family: var(--font-mono); color: var(--accent-blue); cursor: pointer; }
.bzf-body { margin-top: 5px; padding: 6px 8px; max-height: 320px; overflow-y: auto; font-size: 12px;
            background: var(--bg-secondary); border-radius: 4px; color: var(--text-secondary); }
.bzf-body p { margin: 0 0 6px; }
.ws-fin .fin-tabs,
.ws-fin .fin-toolbar,
.ws-fin .financials-tabs { flex-wrap: wrap; gap: 4px; }
.ws-fin table { width: 100%; }

/* A list widget holds the real table. It scrolls inside the pane and its
   header sticks, so a column heading is still readable at row fifty. */
.ws-body > .ws-list { padding: 0; }
.ws-list .data-table { margin: 0; }
.ws-list .data-table thead th { position: sticky; top: 0; z-index: 3; }
/* The row the chart is showing. */
.ws-list tbody tr.ws-on { background: rgba(41, 98, 255, .16) !important; }
.ws-list tbody tr { cursor: pointer; }

/* The refresh indicator in the rail: the dot alone, with the wording on
   hover. The text element stays in the DOM because it is what the tooltip is
   built from and what the mobile header still shows. */
.side-rail .refresh-indicator { cursor: default; padding: 0 2px 6px; }
.side-rail .refresh-indicator #refreshStatus { display: none; }
.side-rail .refresh-indicator .dot { width: 7px; height: 7px; }

/* ---- Workspace: header, watchlist, calendar ---------------------------- */
/* The page header is .panel-header now, so it inherits the site's type and
   spacing; only the hint beside the title and the add menu are local. */
/* The page takes keyboard focus when the Companion iframe gives it back
   (reclaimKeyboard); it is a sink, not a control, and its focus ring drew a
   white line along the top of the vault whenever the pointer left the window
   after arrow-key use. */
#workspacePage:focus, #workspacePage:focus-visible { outline: none; }
.ws-page > .panel-header { flex: 0 0 auto; }
.ws-page > .panel-header h2 { text-transform: lowercase; }
.ws-hint { font-size: 0.66rem; color: var(--text-muted); }
.ws-ny-clock {
    min-width: 92px;
    padding-right: 9px;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-align: right;
    white-space: nowrap;
}

.ws-watch-add { padding: 6px 8px; border-bottom: 1px solid var(--border-color); }
.ws-watch-add input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    padding: 4px 7px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.ws-watch-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    border-left: 2px solid transparent;
}
.ws-watch-row.on { background: rgba(41, 98, 255, .14); border-left-color: var(--accent-blue); }
.ws-watch-row:hover { background: var(--bg-tertiary); }
.ws-watch-tk {
    flex: 1;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-blue);
    background: none;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
}
.ws-watch-x {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 8px;
    font-size: 0.7rem;
}
.ws-watch-x:hover { color: var(--accent-red); }

/* The calendar widget is the calendar page's own renderer in a narrow box:
   one session at a time, and its toggle sized for the pane. */
.ws-body > .ws-cal { padding: 6px 8px 10px; }
.ws-cal .earnings-split { flex-direction: column; }
.ws-cal .earnings-col { width: 100%; }
.ws-cal .cal-session-toggle button { font-size: 0.6rem; padding: 4px 5px; }
.ws-cal .data-table { font-size: 0.68rem; }
.ws-cal tr.earnings-row { cursor: pointer; }

/* Saved arrangements, beside the toolbar buttons that manage them. */
.ws-presets { display: flex; gap: 4px; align-items: center; }
.ws-preset {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}
.ws-preset button {
    font-family: inherit;
    font-size: 0.68rem;
    padding: 3px 7px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
}
.ws-preset button:hover { color: var(--text-primary); }
.ws-preset.on { border-color: var(--accent-blue); }
.ws-preset.on > button:first-child { color: var(--accent-blue); }
.ws-preset-x { padding: 3px 5px !important; opacity: .6; }
.ws-preset-x:hover { color: var(--accent-red) !important; opacity: 1; }

/* The companion's tool buttons, in the toolbar row rather than over the plot.
   Inside #mainWrap they were unreachable: the chart canvas fills that box and
   takes every pointer event above them. */
.cc-scope .cc-tools { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.cc-scope .cc-tools button {
    font-family: inherit;
    font-size: 0.66rem;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.cc-scope .cc-tools button:hover { color: var(--text-primary); }
.cc-scope .cc-tools button.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(41, 98, 255, .12);
}

/* The workspace itself never scrolls -- its panes do. A page-level scrollbar
   here means a pane is overflowing its slot, and arrowing through a list would
   move the page instead of the list. */
.ws-page { overflow: hidden; }
.ws-grid { overflow: hidden; }

/* The link-group chip on a pane's header. Unlinked is an open circle rather
   than a colour: with one chart nothing needs linking, and a workspace that
   demands setup before it works is a worse default. */
.ws-link {
    margin-left: 4px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    cursor: pointer;
    line-height: 1;
}
.ws-link svg { display: block; }
.ws-link--none  { opacity: .55; }
.ws-link--red   { border-color: #f87171; color: #f87171; background: rgba(248,113,113,.12); }
.ws-link--green { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,.12); }
.ws-link--blue  { border-color: #60a5fa; color: #60a5fa; background: rgba(96,165,250,.12); }

/* A chart pane that is not currently the live one. */
.ws-idle-chart {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; height: 100%; padding: 16px; text-align: center;
}
.ws-idle-chart b { font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent-blue); }
.ws-idle-chart span { font-size: 0.66rem; color: var(--text-muted); }
.ws-idle-chart .ws-idle-note { max-width: 240px; line-height: 1.4; opacity: .8; }

/* ---- Workspace: themes and notes widgets ------------------------------- */
.ws-body > .ws-themes,
.ws-body > .ws-notes { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-th-bar { display: flex; gap: 3px; padding: 5px 6px; border-bottom: 1px solid var(--border-color); flex: 0 0 auto; }
.ws-th-bar button {
    flex: 1 1 auto; max-width: 96px;
    font-family: inherit; font-size: 0.6rem; text-transform: uppercase;
    letter-spacing: .04em; padding: 3px 4px; border-radius: 3px;
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-muted); cursor: pointer;
}
.ws-th-bar button.on { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(41,98,255,.12); }
.ws-th-filter {
    flex: 1.4; min-width: 60px; font-family: inherit; font-size: 0.62rem;
    padding: 3px 6px; border-radius: 3px;
    border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-primary);
}
.ws-th-filter:focus { outline: none; border-color: var(--accent-blue); }
.ws-th-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* The page's own tables, in a pane: same data-table/tx-* classes, so the
   look is the themes page's by construction. These rules only handle the
   pane's realities -- sticky headers inside a scrolling body, click cursor,
   the selection highlight the link groups use. */
.ws-th-list table.ws-thx, .ws-th-members table.ws-thx { width: 100%; }
.ws-thx thead th {
    position: sticky; top: 0; z-index: 2; background: var(--bg-secondary);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); padding: 4px 8px; text-align: left;
    cursor: pointer; white-space: nowrap; user-select: none;
}
.ws-thx thead th.num { text-align: right; }
.ws-thx thead th .dir { margin-left: 3px; color: var(--accent-blue); }
.ws-thx tbody td { padding: 3px 8px; font-size: 0.7rem;
                   border-bottom: 1px solid var(--border-color); }
.ws-thx tbody td.num { text-align: right; font-family: var(--font-mono);
                       font-size: 0.66rem; white-space: nowrap; }
.ws-thx tbody tr { cursor: pointer; }
.ws-thx tbody tr:hover { background: var(--bg-tertiary); }
.ws-thx tbody tr.ws-on { background: rgba(41, 98, 255, .14); }
/* Peers: the active ticker's themes, each a group of its members, the
   ticker's own row marked the way the News lookup marks its catalyst rows. */
.ws-th-peers-top { flex: 0 0 auto; padding: 5px 8px 4px; font-size: 0.7rem; color: var(--text-secondary); }
.ws-th-peers-top b { color: var(--text-primary); }
.ws-thx tbody tr.ws-th-peer-head { cursor: default; }
.ws-thx tbody tr.ws-th-peer-head:hover { background: none; }
.ws-thx tbody tr.ws-th-peer-head td {
    padding: 9px 8px 4px; font-size: 0.64rem; font-weight: 600; letter-spacing: .03em;
    color: var(--accent-blue); border-bottom: 1px solid var(--border-color);
}
.ws-th-peer-tag { margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 0.56rem;
                  text-transform: uppercase; color: var(--text-secondary); background: var(--bg-tertiary); }
.ws-th-peer-sub { margin-left: 8px; font-weight: 400; color: var(--text-muted); }
.ws-thx tbody tr.ws-th-me td { background: color-mix(in srgb, var(--accent-blue) 16%, transparent); font-weight: 600; }
.ws-thx tbody tr.ws-th-me td:first-child { box-shadow: inset 3px 0 0 var(--accent-blue); }

/* Median -- and the return columns on the Stocks tab and the drilled member
   table -- already carry .pos/.neg: they are rendered by the themes page's
   own formatter, which the widget borrows through ThemesPage.widgetApi. But
   those classes are painted by `.themes-page .pos`, and the widget is not on
   that page, so the classes landed and nothing coloured them. Same rule, one
   scope out: the widget root, which holds all three tables. */
.ws-themes .pos { color: var(--accent-green); }
.ws-themes .neg { color: var(--accent-red); }
.ws-themes .zero { color: var(--text-muted); }
.ws-th-nmwrap { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ws-th-rank { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem;
              color: var(--text-muted); min-width: 16px; }
.ws-th-name { font-size: 0.72rem; color: var(--text-primary); }
.ws-th-crumb { display: block; padding-left: 22px; font-size: 0.6rem;
               color: var(--text-muted); white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.ws-th-members { flex: 0 0 auto; max-height: 45%; overflow: auto; border-top: 1px solid var(--border-color); }
.ws-th-head {
    display: flex; flex-direction: column; gap: 1px; padding: 6px 8px;
    font-size: 0.74rem; color: var(--accent-blue);
    position: sticky; top: 0; background: var(--bg-secondary); z-index: 2;
}
.ws-th-head span { font-size: 0.62rem; color: var(--text-muted); }
/* (member rows are the page's tx-members table now; see .ws-thx above) */

/* Drill-down, the way the themes page navigates: a theme's members replace
   the list, behind a back control -- not a drawer rising from the bottom. */
.ws-th-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ws-th-title b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-th-back {
    border: none; background: none; color: var(--text-secondary);
    cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px 1px 0;
    flex: 0 0 auto;
}
.ws-th-back:hover { color: var(--accent-blue); }
/* The bar stays through a drill: the filter narrows the member rows and
   the horizon buttons still mean something. */
.ws-themes.ws-drilled .ws-th-list,
.ws-rot.ws-drilled .ws-rot-cols,
.ws-rot.ws-drilled .ws-rot-bar { display: none; }
.ws-themes.ws-drilled .ws-th-members,
.ws-rot.ws-drilled .ws-th-members {
    flex: 1 1 auto; max-height: none; min-height: 0; border-top: none;
    overflow: auto;
}

/* Saved layouts live in one dropdown: starters first, then the user's own
   with rename and delete beside each. */
.ws-preset-dd { position: relative; display: inline-block; }
.ws-preset-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    z-index: 60; min-width: 195px; padding: 4px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ws-preset-menu.open { display: block; }
.ws-preset-h { padding: 4px 8px 2px; font-size: 0.58rem; text-transform: uppercase;
               letter-spacing: .06em; color: var(--text-muted); }
.ws-preset-it { display: flex; align-items: center; gap: 2px; border-radius: 4px; }
.ws-preset-it:hover { background: var(--bg-tertiary); }
.ws-preset-it.on .ws-preset-load { color: var(--accent-blue); }
.ws-preset-load {
    flex: 1 1 auto; text-align: left; border: none; background: none;
    color: var(--text-secondary); font-family: inherit; font-size: 0.7rem;
    padding: 4px 8px; cursor: pointer; white-space: nowrap;
}
.ws-preset-load.ws-preset--starter { font-style: italic; color: var(--text-muted); }
.ws-preset-it.on .ws-preset-load.ws-preset--starter { color: var(--accent-blue); font-style: normal; }
.ws-preset-a { border: none; background: none; color: var(--text-muted);
               cursor: pointer; font-size: 0.66rem; padding: 2px 5px; }
.ws-preset-a:hover { color: var(--text-primary); }
.ws-preset-x:hover { color: var(--accent-red); }
.ws-preset-none { padding: 4px 8px 6px; font-size: 0.62rem; color: var(--text-muted); }

/* Financing red flags in the detail widget. */
.ws-det-flags { padding: 0 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.ws-det-flags:not(:empty) { padding: 6px 10px 2px; }
.ws-det-flag {
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
    padding: 2px 7px; border-radius: 3px; border: 1px solid;
    cursor: help;
}
.ws-det-flag--shelf { color: var(--accent-yellow); border-color: var(--accent-yellow); background: rgba(234, 179, 8, .08); }
.ws-det-flag--pricing { color: var(--accent-red); border-color: var(--accent-red); background: rgba(248, 113, 113, .08); }
.ws-det-flag--registration { color: var(--accent-purple); border-color: var(--accent-purple); background: rgba(167, 139, 250, .08); }

/* ---- Watchlist quote strip ---------------------------------------------- */
.ws-watch-row { display: flex; align-items: baseline; gap: 8px; }
.ws-watch-px { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); }
.ws-watch-chg { font-family: var(--font-mono); font-size: 0.68rem; }
.ws-watch-chg.pos { color: var(--accent-green); }
.ws-watch-chg.neg { color: var(--accent-red); }
.ws-watch-earn { margin-left: auto; font-size: 0.6rem; color: var(--text-muted); white-space: nowrap; }
.ws-watch-row .ws-watch-x { margin-left: 4px; }

/* ---- This Week widget --------------------------------------------------- */
.ws-body > .ws-wk { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-wk-bar { flex: 0 0 auto; }
.ws-wk-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ws-wk-day {
    position: sticky; top: 0; z-index: 2;
    padding: 5px 8px 3px; font-size: 0.64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent-blue); background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.ws-wk-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 3px 8px; border-bottom: 1px solid var(--border-color);
    font-size: 0.7rem;
}
.ws-wk-tk {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    color: var(--accent-blue); min-width: 44px; text-align: left;
}
.ws-wk-tk:hover { text-decoration: underline; }
.ws-wk-when { font-size: 0.6rem; font-weight: 700; color: var(--accent-yellow); }
.ws-wk-per { font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }
.ws-wk-hab { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem;
             color: var(--text-muted); white-space: nowrap; }
.ws-wk-hab em { font-style: normal; }
.ws-wk-hab em.pos { color: var(--accent-green); }
.ws-wk-hab em.neg { color: var(--accent-red); }
.ws-wk-foot { flex: 0 0 auto; padding: 4px 8px; font-size: 0.6rem; color: var(--text-muted); }

/* ---- Morning Sheet ------------------------------------------------------ */
/* On the home page (phones), the sheet is a card of its own; the section
   styles below are shared with the workspace widget. */
.home-sheet {
    margin: 12px 16px; border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); background: var(--bg-secondary);
    overflow: hidden;
}
.home-sheet .ws-sh-head { background: var(--bg-tertiary); }
.ws-body > .ws-sheet { height: 100%; min-height: 0; overflow: auto; }
.ws-sh-sec { border-bottom: 1px solid var(--border-color); padding-bottom: 4px; }
.ws-sh-head {
    position: sticky; top: 0; z-index: 2;
    padding: 6px 8px 3px; font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent-blue); background: var(--bg-secondary);
}
.ws-sh-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 2px 8px; font-size: 0.7rem; color: var(--text-secondary);
}
.ws-sh-row em { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; margin-left: auto; }
.ws-sh-row em.pos, .ws-sh-row .pos { color: var(--accent-green); }
.ws-sh-row em.neg, .ws-sh-row .neg { color: var(--accent-red); }
.ws-sh-tk {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    color: var(--accent-blue); min-width: 44px; text-align: left;
}
.ws-sh-tk:hover { text-decoration: underline; }
.ws-sh-dim { font-size: 0.62rem; color: var(--text-muted); }
.ws-sh-theme { font-size: 0.68rem; }
.ws-sh-none { padding: 4px 8px 6px; font-size: 0.64rem; color: var(--text-muted); }
.ws-sh-more { padding: 2px 8px 4px; font-size: 0.6rem; color: var(--text-muted); }

/* ---- Analyst widget ----------------------------------------------------- */
.ws-body > .ws-anl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-anl-bar { flex: 0 0 auto; }
.ws-anl-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 6px 8px; font-family: var(--font-mono); font-size: 0.86rem;
    color: var(--accent-blue); border-bottom: 1px solid var(--border-color); flex: 0 0 auto;
}
.ws-anl-head span { font-size: 0.62rem; color: var(--text-muted); }
.ws-anl-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ws-anl-row { padding: 5px 8px; border-bottom: 1px solid var(--border-color); }
.ws-anl-top { display: flex; align-items: baseline; gap: 8px; font-size: 0.72rem; }
.ws-anl-tk {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
    color: var(--accent-blue);
}
.ws-anl-tk:hover { text-decoration: underline; }
.ws-anl-date { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); }
.ws-anl-act { font-weight: 600; color: var(--text-secondary); }
.ws-anl-act.pos { color: var(--accent-green); }
.ws-anl-act.neg { color: var(--accent-red); }
.ws-anl-act.ini { color: var(--accent-blue); }
.ws-anl-pt { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem;
             color: var(--text-secondary); white-space: nowrap; }
.ws-anl-pt em { font-style: normal; }
.ws-anl-pt em.pos { color: var(--accent-green); }
.ws-anl-pt em.neg { color: var(--accent-red); }
.ws-anl-sub { font-size: 0.64rem; color: var(--text-muted); margin-top: 1px; }
.ws-anl-foot {
    flex: 0 0 auto; padding: 4px 8px; font-size: 0.6rem; color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

.ws-note-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 6px 8px; font-family: var(--font-mono); font-size: 0.86rem;
    color: var(--accent-blue); border-bottom: 1px solid var(--border-color); flex: 0 0 auto;
}
.ws-note-saved { font-family: inherit; font-size: 0.6rem; color: var(--text-muted); }
.ws-note-body {
    flex: 1 1 auto; min-height: 0; width: 100%; resize: none;
    font-family: inherit; font-size: 0.78rem; line-height: 1.5;
    padding: 8px 10px; border: none; background: transparent; color: var(--text-primary);
}
.ws-note-body:focus { outline: none; }
/* Screenshots attached to the note: a thumbnail strip under the text. */
.ws-note-att {
    display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto;
    padding: 0 10px;
}
.ws-note-att:not(:empty) { padding: 6px 10px 8px; border-top: 1px solid var(--border-color); }
.ws-note-thumb {
    position: relative; width: 64px; height: 44px;
    border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 0.7rem;
}
.ws-note-thumb img {
    width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block;
}
.ws-note-thumb-x {
    position: absolute; top: 0; right: 0;
    border: none; background: rgba(0, 0, 0, .55); color: #fff;
    font-size: 0.6rem; line-height: 1; padding: 2px 4px; cursor: pointer;
    border-radius: 0 0 0 4px; display: none;
}
.ws-note-thumb:hover .ws-note-thumb-x { display: block; }

/* The screener widget's own tab bar. Pinned above its table, which scrolls
   under it -- the bar is how you change what the pane is showing, so it must
   not scroll away with the rows. */
.ws-body > .ws-list { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-tabbar { display: flex; gap: 2px; padding: 4px 5px; flex: 0 0 auto;
             border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.ws-tabbar button {
    flex: 1; font-family: inherit; font-size: 0.62rem; text-transform: uppercase;
    letter-spacing: .04em; padding: 3px 4px; border-radius: 3px;
    border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-muted); cursor: pointer;
}
.ws-tabbar button:hover { color: var(--text-primary); }
.ws-tabbar button.on { border-color: var(--accent-blue); color: var(--accent-blue);
                       background: rgba(41, 98, 255, .12); }
.ws-list-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* The column-settings cog sits at the end of the widget's tab bar, sized to
   the tabs rather than stretching like one. */
.ws-tabbar .ws-cog { flex: 0 0 auto; width: 26px; padding: 3px 0; text-align: center; }

/* Replay controls in a list widget's bar: a date, and LIVE to come back.
   Amber while a past day is on screen -- a replayed table must never read
   as today's. */
.ws-replay { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.ws-replay input {
    font-family: inherit; font-size: 0.6rem; padding: 2px 3px; width: 106px;
    border: 1px solid var(--border-color); border-radius: 3px;
    background: var(--bg-primary); color: var(--text-muted);
    color-scheme: dark;
}
.ws-replay.on input { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.ws-tabbar .ws-replay button {
    flex: 0 0 auto; color: var(--accent-yellow); border-color: var(--accent-yellow);
    background: rgba(234, 179, 8, .1);
}
.ws-tabbar--plain { justify-content: flex-end; }

/* ---- Earnings history widget ------------------------------------------- */
.ws-body > .ws-earn { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-earn-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 6px 8px; font-family: var(--font-mono); font-size: 0.86rem;
    color: var(--accent-blue); border-bottom: 1px solid var(--border-color); flex: 0 0 auto;
}
.ws-earn-head span { font-family: inherit; font-size: 0.62rem; color: var(--text-muted); }
.ws-earn-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ws-earn-table { width: 100%; font-size: 0.7rem; }
.ws-earn-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); }
.ws-earn-num { text-align: right; }
.ws-earn-date { font-family: var(--font-mono); white-space: nowrap; }
/* The report's press release, beside its date (opens in the news reader). */
.ws-earn-pr { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid var(--border-color);
              border-radius: 3px; font-size: 0.58rem; line-height: 1.5; color: var(--accent-blue);
              text-decoration: none; vertical-align: 1px; }
.ws-earn-pr:hover { border-color: var(--accent-blue); }
.ws-earn-bar { margin: -2px 0 4px; }
.ws-earn-estmark { font-size: 0.6rem; color: var(--text-muted); }
.ws-earn-years td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.ws-earn-est { color: var(--text-muted); }
.ws-earn-table em { font-style: normal; }
.ws-earn-table em.pos { color: var(--accent-green); }
.ws-earn-table em.neg { color: var(--accent-red); }
/* A quarter that has not happened: the estimate is real, the rest is not. */
.ws-earn-future { opacity: .62; }
.ws-earn-future .ws-earn-date { color: var(--accent-yellow); }
.ws-earn-guide { font-size: 0.66rem; white-space: normal; }
.ws-earn-guide b { color: var(--text-secondary); font-weight: 600; }
.ws-earn-more { margin-left: 4px; color: var(--text-muted); font-size: 0.6rem; }
.ws-earn-prior { margin-left: 5px; font-size: 0.6rem; color: var(--text-muted); }
.ws-earn-na { color: var(--text-muted); opacity: .6; font-size: 0.62rem; }

/* ---- Rail highlight covers its whole button ---------------------------- */
/* The rail carried 6px of side padding, so a button was 39px wide while
   "Workspace" renders at 47px -- the label overflowed the highlight on both
   sides and the text appeared to bleed through it. The padding moves to the
   buttons, which now span the rail's full width, so the active background
   covers the icon and the word together. */
.side-rail { padding-left: 0; padding-right: 0; }
.side-rail .rail-btn,
.side-rail .rail-wrap > .rail-btn {
    width: 100%;
    padding: 7px 1px;
    border-radius: 0;
}
/* The edge marker sits on the rail's own edge now that nothing insets it. */
.side-rail .rail-btn.active::before { left: 0; top: 0; bottom: 0; border-radius: 0; }
.side-rail .rail-brand { padding-left: 0; padding-right: 0; }
/* A label still longer than the rail is clipped rather than allowed to spill
   over the buttons above and below it. */
.side-rail .rail-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}


/* ---- Chart type-to-search ---------------------------------------------- */
/* Copied from the companion so the box looks and behaves the same in both.
   Scoped under .cc-scope because the vault has its own #searchBox-free page
   chrome and these ids are the companion's, not the site's. */
.cc-scope #searchBox {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  /* Wide enough for a symbol and the company name beside it, and no wider.
     This is a lookup, not a dialog. */
  z-index: 8; display: none; align-items: center; width: 290px;
  /* The suggestion list is a second row inside the box rather than a floating
     panel under it, so the whole thing stays one object on screen. */
  flex-wrap: wrap;
  padding: 7px 8px 5px; border-radius: var(--radius);
  background: rgba(19,19,22,.97); border: 1px solid var(--accent-blue);
  box-shadow: 0 12px 38px rgba(0,0,0,.72);
}
.cc-scope #searchBox.show { display: flex; }
.cc-scope #searchInput {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 5px 8px; width: 100%;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; outline: none;
}
.cc-scope #searchInput:focus { border-color: var(--accent-blue); }
.cc-scope #searchInput.notfound { border-color: var(--accent-red); color: var(--accent-red); }
.cc-scope .search-hint {
  flex-basis: 100%; margin-top: 4px; text-align: right;
  font-size: 9px; color: var(--text-muted);
}

/* ---- symbol suggestions ---- */
.cc-scope #searchResults {
  display: none; flex-basis: 100%; max-height: 320px; overflow-y: auto;
  margin-top: 5px; padding-top: 4px;
  border-top: 1px solid var(--border-color);
}
.cc-scope #searchResults.show { display: block; }
.cc-scope .sr-row {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 2px 4px; border-radius: var(--radius-sm);
}
.cc-scope .sr-row b {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .5px; color: var(--text-primary);
  /* Every name starts at the same x, whatever the symbol's length. */
  flex: 0 0 46px;
}
.cc-scope .sr-row i {
  font-style: normal; font-size: 10px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Pushed to the right edge of the row, so a column of them is scannable. */
.cc-scope .sr-dead {
  margin-left: auto; padding-left: 8px; text-decoration: none;
  font-size: 9px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent-yellow); opacity: .75; white-space: nowrap;
}
.cc-scope .sr-row.on { background: rgba(58,124,214,.22); }
.cc-scope .sr-row.on b { color: var(--accent-blue); }
.cc-scope .sr-row.on i { color: var(--text-secondary); }

/* The box is positioned against the chart pane, which is what it belongs to. */
.cc-scope #mainWrap { position: relative; }

/* How this name behaves on earnings, over its recent prints. */
.ws-earn-habits {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    padding: 5px 8px; font-size: 0.68rem; color: var(--text-muted);
    border-bottom: 1px solid var(--border-color); flex: 0 0 auto;
}
.ws-earn-habits b { color: var(--text-primary); font-weight: 600; }
.ws-earn-habits em { font-style: normal; }
.ws-earn-habits em.pos { color: var(--accent-green); }
.ws-earn-habits em.neg { color: var(--accent-red); }

/* ---- Rotation widget ---------------------------------------------------- */
.ws-body > .ws-rot { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-rot-bar { display: flex; gap: 3px; align-items: center; padding: 5px 6px;
              border-bottom: 1px solid var(--border-color); flex: 0 0 auto; }
.ws-rot-bar button {
    font-family: inherit; font-size: 0.62rem; padding: 3px 7px; border-radius: 3px;
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-muted); cursor: pointer;
}
.ws-rot-bar button.on { border-color: var(--accent-blue); color: var(--accent-blue);
                        background: rgba(41,98,255,.12); }
.ws-rot-win { margin-left: auto; font-size: 0.6rem; color: var(--text-muted); }
.ws-rot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px;
               flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 6px; }
.ws-rot-head { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .05em;
               padding: 4px 2px; position: sticky; top: 0; background: var(--bg-secondary); }
.ws-rot-head.pos { color: var(--accent-green); }
.ws-rot-head.neg { color: var(--accent-red); }
.ws-rot-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
    width: 100%; text-align: left; font-family: inherit; padding: 3px 2px;
    border: none; border-bottom: 1px solid var(--border-color);
    background: none; cursor: pointer;
}
.ws-rot-row:hover { background: var(--bg-tertiary); }
.ws-rot-name { font-size: 0.7rem; color: var(--text-primary);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-rot-move { font-family: var(--font-mono); font-size: 0.66rem; white-space: nowrap; }
.ws-rot-move.pos { color: var(--accent-green); }
.ws-rot-move.neg { color: var(--accent-red); }
.ws-rot ~ .ws-th-members, .ws-rot .ws-th-members { flex: 0 0 auto; max-height: 40%; overflow: auto;
    border-top: 1px solid var(--border-color); }

/* ---- Receipts widget ---------------------------------------------------- */
.ws-body > .ws-rcp { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-rcp-head { display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 8px; font-family: var(--font-mono); font-size: 0.74rem;
    color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.ws-rcp-head span { font-size: 0.62rem; color: var(--text-muted); }
.ws-rcp-note { padding: 6px 8px; font-size: 0.64rem; color: var(--text-muted);
    line-height: 1.45; border-top: 1px solid var(--border-color); }
.ws-rcp-note b { color: var(--accent-yellow); font-weight: 600; }
tr.ws-rcp-blue td:first-child { color: var(--accent-blue); font-weight: 600; }
tr.ws-rcp-green td:first-child { color: var(--accent-green); font-weight: 600; }
tr.ws-rcp-plain td:first-child { color: var(--text-muted); }

/* ---- Similar-setups widget --------------------------------------------- */
.ws-body > .ws-sim { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-sim-anchor { padding: 7px 8px 3px; font-size: 0.76rem; color: var(--text-secondary); }
.ws-sim-anchor b { font-family: var(--font-mono); color: var(--accent-blue); }
.ws-sim-crit { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 8px 7px;
    border-bottom: 1px solid var(--border-color); }
.ws-sim-crit span {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border-color);
    color: var(--text-muted); }
.ws-sim-crit .ws-sim-n { margin-left: auto; border-color: var(--accent-blue);
    color: var(--accent-blue); }
.ws-sim-table { flex: 0 0 auto; }
.ws-sim-med { color: var(--text-primary); font-weight: 600; }
.neg-dim { color: color-mix(in srgb, var(--accent-red) 70%, var(--text-muted)); }
.pos-dim { color: color-mix(in srgb, var(--accent-green) 70%, var(--text-muted)); }
.ws-sim-note { padding: 5px 8px; font-size: 0.62rem; color: var(--text-muted);
    line-height: 1.4; border-bottom: 1px solid var(--border-color); }
.ws-sim-samples { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ws-sim-sample { display: grid; grid-template-columns: 58px 78px 40px 44px 1fr;
    gap: 6px; align-items: baseline; padding: 3px 8px;
    border-bottom: 1px solid var(--border-color); font-size: 0.7rem; }
.ws-sim-sample button { font-family: var(--font-mono); font-weight: 700;
    color: var(--accent-blue); background: none; border: none; padding: 0;
    text-align: left; cursor: pointer; }
.ws-sim-sample span { color: var(--text-muted); font-size: 0.64rem; }
.ws-sim-sample em { font-style: normal; text-align: right; }
.ws-sim-sample em.pos { color: var(--accent-green); }
.ws-sim-sample em.neg { color: var(--accent-red); }
.ws-sim-sample a { justify-self: end; font-size: 0.62rem; color: var(--text-muted); }
.ws-sim-sample a:hover { color: var(--accent-blue); }

/* The companion's chart stamp, on the VaultCharts side. Same shape: symbol
   over name over sector, industry and theme, centered, faint, under the
   candles and never in the way of the pointer. */
.vc-watermark {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none; text-align: center;
    color: #ffffff; opacity: .05; line-height: 1.25;
    font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
    overflow: hidden;
}
.vc-watermark b { font-weight: 300; letter-spacing: 4px; }
.vc-watermark i { font-style: normal; font-weight: 300; letter-spacing: .5px; }

/* The pane behind the transparent chart canvas carries the theme colour --
   the canvas itself must not, or the watermark under it can never show. */
.cc-scope #mainWrap.backdrop,
.cc-scope #volWrap.backdrop { background-image: none; background-color: var(--bg-primary); }

/* ── Themes replay ───────────────────────────────────────
   A view that a replayed day cannot answer for. Dimmed rather than removed:
   the tab set is how the page says what it can show, and a tab that vanishes
   on a date change reads as a bug. The title attribute carries the reason. */
#txTabs .tab-btn.tx-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;   /* keep the tooltip reachable on a disabled button */
}
#txList .replay-banner {
    margin: 0 0 8px;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ── Workspace themes widget: level toggle + stocks list ──
   The level buttons pick WHICH list (themes or stocks); the horizon buttons
   beside them pick what the numbers measure. Two different questions sharing
   one bar, so a separator keeps them from reading as one six-way choice. */
.ws-th-bar .ws-th-lvl { flex: 0 0 auto; max-width: none; padding: 3px 8px; }
.ws-th-bar .ws-th-lvl.on {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(41, 98, 255, .12);
}
.ws-th-sep {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    background: var(--border-color);
    margin: 0 3px;
}
.ws-thstk .ws-th-more {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.62rem;
    padding: 6px 8px;
}

/* The calendar widget's selected row. Its own highlight classes already paint
   a background, so the selection has to outrank them or the arrow cursor is
   invisible on exactly the rows worth arrowing to. */
#workspaceGrid tr.earnings-row.ws-on > td {
    background: rgba(41, 98, 255, .18) !important;
}

/* ── Workspace themes widget: replay ─────────────────────
   The same control the themes page carries, sized for a pane's bar. The date
   box gets a fixed basis because a bare date input collapses to nothing next
   to the flexible filter and becomes unclickable. */
.ws-th-bar .ws-th-date {
    flex: 0 0 auto;
    width: 108px;
    font-family: inherit;
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.ws-th-bar .ws-th-date::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
.ws-th-bar .ws-th-live {
    flex: 0 0 auto;
    max-width: none;
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}
/* A level the replayed day cannot answer for. Dimmed, not removed, and the
   pointer stays live so the title explaining why is still reachable. */
.ws-th-bar .ws-th-lvl.ws-th-shut { opacity: 0.35; cursor: not-allowed; }
.replay-banner.ws-th-replay {
    flex: 0 0 auto;
    margin: 4px 6px 0;
    padding: 3px 8px;
    font-size: 0.6rem;
}

/* ── Workspace list: an empty table that says why ────────
   A filter that matches nothing empties the table exactly like data that never
   arrived. The distinction is the whole point of this block, so the count and
   the way out both sit with the message. */
.ws-empty-sub { color: var(--text-muted); font-size: 0.62rem; }
.ws-empty-btn {
    display: block;
    margin: 8px auto 0;
    font-family: inherit;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid var(--accent-blue);
    background: rgba(41, 98, 255, .12);
    color: var(--accent-blue);
    cursor: pointer;
}
.ws-empty-btn:hover { background: rgba(41, 98, 255, .22); }

/* ── Earnings History widget: column bands ───────────────
   The table is four groups of related columns sitting in one flat grid, and
   at this density the eye loses which "Est." belongs to which figure. Two
   alternating tints band them -- EPS, revenue, guidance, reaction -- kept
   deliberately faint: this is a reading aid, not a highlight, and it must not
   compete with the red and green the surprise columns carry.
   Header cells take the same tint a shade stronger so the band reads as a
   column from the top down. */
.ws-earn-table td.ws-earn-b1,
.ws-earn-table th.ws-earn-b1 { background: rgba(255, 255, 255, .035); }
.ws-earn-table td.ws-earn-b2,
.ws-earn-table th.ws-earn-b2 { background: rgba(41, 98, 255, .07); }
.ws-earn-table thead th.ws-earn-b1 { background: rgba(255, 255, 255, .06); }
.ws-earn-table thead th.ws-earn-b2 { background: rgba(41, 98, 255, .12); }
/* A guide has an EPS line and a revenue line now, so it is no longer one
   nowrap run (the rule above was changed to wrap). Each line labels itself,
   because "0.07-0.12" and "$150.0M" are only obviously different until a
   company guides revenue per share or EPS in the hundreds. */
.ws-earn-gline { white-space: nowrap; }
.ws-earn-gk {
    display: inline-block;
    min-width: 26px;
    margin-right: 3px;
    color: var(--text-muted);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* A widget header's tiebreaker arrow. `.ws-thx thead th .dir` paints every
   arrow accent-blue and outweighs .sort-secondary on its own, so the numbered
   secondary marker would have come out the same colour as the primary and lost
   the only thing distinguishing them. */
.ws-thx thead th .dir.sort-secondary { color: var(--accent-purple); }

/* ── Gap database: the selected row ──────────────────────
   The table is 69 columns wide and most of them are off-screen right, so a
   member reading the ORB or MFE columns has the ticker far to their left and
   every row looking alike. Hover only answered while the pointer stayed still.
   A clicked row stays lit.

   Every cell carries the tint, including the two frozen ones, because the
   sticky columns paint their own opaque background and would otherwise punch
   two unlit holes in the middle of the highlighted row. Stronger than hover
   and later in the file than the group tint, so it wins over both. The left
   marker rides the first frozen cell, which is the one column always on
   screen no matter how far right the table is scrolled. */
.db-table tbody tr.db-row-selected td,
.db-table tbody tr.db-row-selected td.db-grp-tint,
.db-table tbody tr.db-row-selected td.db-frozen-0,
.db-table tbody tr.db-row-selected td.db-frozen-1 {
    background-color: color-mix(in srgb, var(--accent-blue) 26%, var(--bg-secondary));
}
.db-table tbody tr.db-row-selected td.db-frozen-0 {
    box-shadow: inset 3px 0 0 var(--accent-blue);
}
.db-table tbody tr.db-row-selected td { color: var(--text-primary); }
/* Hovering the lit row should not dim it back to the hover tint. */
.db-table tbody tr.db-row-selected:hover td,
.db-table tbody tr.db-row-selected:hover td.db-frozen-0,
.db-table tbody tr.db-row-selected:hover td.db-frozen-1 {
    background-color: color-mix(in srgb, var(--accent-blue) 32%, var(--bg-secondary));
}

/* ── Command line ─────────────────────────────────────────────
   A global overlay rather than a pane. It costs no layout when closed, and
   the one thing it must never do is sit between the reader and the vault --
   so the scrim is light, Esc always closes, and a click outside dismisses. */
.vc-shell {
    position: fixed; inset: 0; z-index: 4000;
    display: none;
    /* Neutral scrim rather than a themed one: it sits over the whole app, and
       every theme this vault ships is dark-grounded. A paper theme would want
       this lightened, which is a one-line override when one exists. */
    background: rgba(0, 0, 0, .45);
    padding: 12vh 20px 20px;
    justify-content: center;
    align-items: flex-start;
}
.vc-shell.on { display: flex; }
.vc-box {
    width: 100%; max-width: 660px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.vc-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--cmd-accent);
}
.vc-prompt {
    font-family: var(--font-mono); color: var(--cmd-accent);
    font-weight: 600; letter-spacing: .08em; user-select: none;
}
#vcInput {
    flex: 1 1 auto; min-width: 0;
    background: none; border: none; outline: none;
    color: var(--text-primary);
    font-family: var(--font-mono); font-size: 15px;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 13px 0;
}
#vcInput::placeholder { color: var(--text-muted); text-transform: none; letter-spacing: .02em; }
.vc-esc {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em;
    color: var(--text-muted); border: 1px solid var(--border-color);
    padding: 2px 6px; user-select: none;
}
.vc-note {
    display: none;
    padding: 10px 14px;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.vc-note b { color: var(--cmd-accent); font-weight: 600; }
/* An inline answer lands in the note, and a filings or dilution table can be
   longer than the overlay -- it scrolls inside itself rather than pushing the
   suggestion list off the screen. */
.vc-note { max-height: 46vh; overflow-y: auto; }
.vc-answer-head { display: block; }
.vc-suggest { max-height: 46vh; overflow-y: auto; }
.vc-suggest:empty { display: none; }
.vc-head {
    padding: 6px 14px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.vc-row {
    display: grid; grid-template-columns: 106px 1fr auto;
    gap: 12px; align-items: baseline;
    padding: 8px 14px; cursor: pointer;
    border-left: 3px solid transparent;
    font-family: var(--font-mono);
}
.vc-row + .vc-row { border-top: 1px solid var(--bg-tertiary); }
.vc-row.on { background: var(--bg-tertiary); border-left-color: var(--cmd-accent); }
.vc-key { color: var(--cmd-accent); font-weight: 600; letter-spacing: .05em; font-size: 13px; }
.vc-desc { color: var(--text-primary); font-size: 12.5px; }
.vc-tag {
    color: var(--text-muted); font-size: 10px;
    letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 560px) {
    .vc-shell { padding-top: 6vh; }
    .vc-row { grid-template-columns: 88px 1fr; }
    .vc-tag { display: none; }
}

/* The banner shown when a command narrowed the ticker modal to one block.
   It has to say both what you are looking at and how to get the rest back --
   a filtered view with no way out reads as a broken page. */
.vc-only {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 12px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--cmd-accent);
    font-family: var(--font-mono); font-size: 12px;
    color: var(--text-secondary);
}
.vc-only b { color: var(--cmd-accent); font-weight: 600; letter-spacing: .04em; }
.vc-only button {
    background: none; border: 1px solid var(--border-color);
    color: var(--text-primary); font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .05em; padding: 3px 9px; cursor: pointer;
}
.vc-only button:hover, .vc-only button:focus-visible {
    border-color: var(--cmd-accent); color: var(--cmd-accent); outline: none;
}

/* A short answer, rendered in the command overlay itself.
   A fact that fits in six lines should not require opening, reading and
   closing a modal to get at. */
.vc-answer { margin-top: 8px; }
.vc-answer .vc-ok { margin: 0; color: var(--text-secondary); }
.vc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vc-table td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.vc-table tr:last-child td { border-bottom: none; }
.vc-flag { color: var(--cmd-accent); font-weight: 600; white-space: nowrap; }
.vc-when { color: var(--text-muted); white-space: nowrap; text-align: right; }

/* The command line's own modal, for a function whose answer is a full view.
   Its own container rather than the ticker modal filtered down: that one lays
   its sections across a rail and a main column, so removing some of them
   leaves the rest in a layout built for what is no longer there. */
.vc-modal {
    position: fixed; inset: 0; z-index: 4100;
    display: none; align-items: flex-start; justify-content: center;
    background: rgba(0, 0, 0, .55);
    padding: 6vh 20px 20px;
}
.vc-modal.on { display: flex; }
.vc-modal-box {
    width: 100%; max-width: 960px;
    max-height: 88vh; display: flex; flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.vc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--cmd-accent);
    flex: 0 0 auto;
}
.vc-modal-title {
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary);
}
.vc-modal-title b { color: var(--cmd-accent); font-weight: 600; margin-right: 6px; }
.vc-modal-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.vc-modal-close:hover, .vc-modal-close:focus-visible { color: var(--text-primary); outline: none; }
.vc-modal-body { padding: 14px; overflow: auto; flex: 1 1 auto; min-height: 0; }

/* Command-modal tables. Wide content scrolls in its own box so the modal
   never grows a horizontal scrollbar of its own. */
.vc-scroll { overflow-x: auto; }
.vc-table.vc-wide { font-size: 12px; }
.vc-table.vc-wide th {
    text-align: left; padding: 6px 10px 7px 0;
    color: var(--cmd-accent); font-weight: 500;
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.vc-table .n, .vc-table th.n { text-align: right; padding-right: 10px; }
.vc-table td { font-variant-numeric: tabular-nums; }
.vc-pending td { color: var(--text-muted); }
.vc-sched {
    font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--accent-yellow); margin-left: 5px;
}
.vc-up { color: var(--accent-green); }
/* An answer the panel could not actually establish. Amber rather than red:
   nothing is wrong with the company, the check did not run. */
.vc-alarm { color: var(--accent-yellow); font-weight: 600; }
.vc-dn { color: var(--accent-red); }

/* Guidance is a column on the report row, and one report can guide several
   periods, so those stack inside the cell. A fixed grid keeps every guided
   line's columns aligned with the ones above and below it -- without that the
   stack reads as a paragraph rather than as data. */
.vc-eh td { vertical-align: top; }
.vc-guides { padding-left: 14px !important; border-left: 1px solid var(--border-color); }
.vc-g {
    display: grid;
    grid-template-columns: 74px 86px 56px 92px 56px;
    gap: 0 10px;
    align-items: baseline;
    white-space: nowrap;
}
.vc-g + .vc-g { margin-top: 2px; }
.vc-g-per { color: var(--cmd-accent); }
.vc-g-eps, .vc-g-rev { color: var(--text-primary); text-align: right; }
.vc-g-d { text-align: right; }
.vc-guides:empty { border-left: none; }

/* Cohort and record summaries: the numbers that give a table its meaning,
   above the table rather than buried in it. */
.vc-stats {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono); font-size: 12px;
}
.vc-stat { white-space: nowrap; color: var(--text-primary); }
.vc-stat b {
    color: var(--text-muted); font-weight: 500; margin-right: 6px;
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
}
.vc-stat.vc-warn { color: var(--accent-yellow); }
.vc-prose {
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
    color: var(--text-primary); max-width: 78ch;
}

/* The cohort's distribution sits above its members: the spread is the answer,
   the analogs below are only there to open. */
.vc-spread { margin-bottom: 12px; }
.vc-spread tbody td { border-bottom: 1px solid var(--bg-tertiary); }
.vc-spread b { font-weight: 600; }

/* Filing forms are coloured by what they do to a shareholder, not by type.
   A 424B5 after the close is tomorrow's gap down; a 10-Q is Tuesday. */
.vc-form-dilutive { color: var(--accent-yellow) !important; }
.vc-form-stake { color: var(--cmd-accent) !important; }
.vc-link { color: var(--cmd-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.vc-link:hover, .vc-link:focus-visible { border-bottom-color: var(--cmd-accent); outline: none; }

/* DES is an identity card: a name, a sentence, and the numbers that decide
   how it trades. Two columns on anything wider than a phone, because these
   are label/value pairs and reading them as a list wastes the width. */
.vc-des-name {
    font-family: var(--font-mono); font-size: 15px; font-weight: 600;
    color: var(--cmd-accent); letter-spacing: .03em; margin-bottom: 6px;
}
.vc-des-about {
    margin: 0 0 14px; max-width: 74ch;
    color: var(--text-secondary); font-size: 13px; line-height: 1.6;
}
.vc-des-grid {
    display: grid; grid-template-columns: auto 1fr auto 1fr;
    gap: 5px 14px; margin: 0; align-items: baseline;
    font-family: var(--font-mono); font-size: 12.5px;
}
.vc-des-grid dt {
    color: var(--text-muted); font-size: 10.5px;
    letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.vc-des-grid dd {
    margin: 0; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 620px) {
    .vc-des-grid { grid-template-columns: auto 1fr; }
}

/* Insider rows: only decisions carry colour. A grant or a vesting withholding
   is a payroll event on a schedule set years ago, and a list where those look
   like purchases is how "insider activity" becomes a number nobody trusts. */
.vc-bought .vc-act { color: var(--accent-green); font-weight: 600; }
.vc-sold   .vc-act { color: var(--accent-red); font-weight: 600; }
.vc-routine td { color: var(--text-muted); }
.vc-role {
    display: block; color: var(--text-muted);
    font-size: 10.5px; letter-spacing: .03em; margin-top: 1px;
}

/* The Treasury curve. Tenors are spaced evenly along the x axis rather than by
   maturity -- a linear year axis puts everything inside two years in the first
   inch, and that is the half of the curve that moves. */
.vc-curve { margin: 10px 0 4px; }
.vc-curve svg { display: block; width: 100%; height: auto; }
.vc-grid { stroke: var(--border-color); stroke-width: 1; }
.vc-axis {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .06em; fill: var(--text-muted);
}
.vc-curve-line { stroke: var(--cmd-accent); stroke-width: 1.6; }
.vc-dot { fill: var(--cmd-accent); }

/* The note under a panel that says where the numbers came from, or what the
   panel is not showing. Used since FIL and never given a size of its own. */
.vc-legend {
    margin: 10px 0 0; font-family: var(--font-mono); font-size: 10.5px;
    line-height: 1.5; color: var(--text-muted);
}

/* The one-line read under a short-answer panel: what the numbers together
   mean, which neither says alone. */
.vc-read {
    margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px;
    color: var(--text-secondary); line-height: 1.55;
}

/* -- Member Comparison Bench ---------------------------------------------
   The chart and matrix share one clean surface. The ticker chips carry each
   line's color all the way through the legend and column headings so six
   neighboring series remain identifiable without relying on column order. */
.comparison-page {
    height: calc(100vh - 6px);
    min-height: 560px;
    overflow: hidden;
    background: var(--bg-primary);
}
.comparison-shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.comparison-head {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 14px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.comparison-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: lowercase;
}
.comparison-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 10px;
}
.comparison-head-actions {
    display: flex;
    flex: none;
    gap: 6px;
}
.comparison-builder {
    min-height: 49px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary));
}
.comparison-add {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 325px;
    min-width: 220px;
}
.comparison-add label {
    color: var(--text-muted);
    font: 600 9px var(--font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
}
.comparison-add .filter-input {
    min-width: 120px;
    height: 30px;
}
.comparison-add-btn { color: var(--cmd-accent); }
.comparison-symbols {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.comparison-symbol {
    height: 27px;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--bench-color) 42%, var(--border-color));
    border-radius: 4px;
    background: color-mix(in srgb, var(--bench-color) 8%, var(--bg-primary));
}
.comparison-symbol::before {
    content: '';
    width: 3px;
    background: var(--bench-color);
}
.comparison-symbol.is-error {
    opacity: .48;
    border-style: dashed;
}
.comparison-symbol button {
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    cursor: pointer;
}
.comparison-symbol-open {
    padding: 0 7px 0 8px;
    font-size: 10px;
    font-weight: 700;
}
.comparison-symbol-open:hover { color: var(--bench-color); }
.comparison-symbol-remove {
    width: 22px;
    border-left: 1px solid color-mix(in srgb, var(--bench-color) 25%, var(--border-color)) !important;
    color: var(--text-muted) !important;
    font-size: 14px;
}
.comparison-symbol-remove:hover {
    background: color-mix(in srgb, var(--accent-red) 13%, transparent) !important;
    color: var(--accent-red) !important;
}
.comparison-clear {
    flex: 0 0 auto;
    padding: 4px 5px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: 9px var(--font-mono);
    cursor: pointer;
}
.comparison-clear:hover { color: var(--accent-red); }
.comparison-symbol-placeholder {
    color: var(--text-muted);
    font: 10px var(--font-mono);
    white-space: nowrap;
}
.comparison-status {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font: 9px var(--font-mono);
    white-space: nowrap;
}
.comparison-status.is-error { color: var(--accent-red); }
.comparison-body {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(390px, .92fr) minmax(500px, 1.08fr);
    overflow: hidden;
}
.comparison-chart-panel,
.comparison-table-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}
.comparison-chart-panel { border-right: 1px solid var(--border-color); }
.comparison-section-head {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex: 0 0 auto;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.comparison-section-head h3 {
    margin: 0;
    color: var(--text-secondary);
    font: 600 10px var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.comparison-section-head span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}
.comparison-ranges { flex: none; }
.comparison-ranges .tab-btn { min-width: 34px; padding: 4px 7px; }
.comparison-legend {
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 13px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border-bottom: 1px solid var(--border-color);
}
.comparison-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: 10px var(--font-mono);
    cursor: pointer;
}
.comparison-legend-item:hover b { color: var(--bench-color); }
.comparison-legend-item i,
.comparison-table thead i {
    width: 13px;
    height: 2px;
    display: inline-block;
    flex: none;
    border-radius: 2px;
    background: var(--bench-color);
}
.comparison-legend-item b { color: var(--text-primary); font-size: 10px; }
.comparison-legend-item span { color: var(--text-muted); }
.comparison-chart {
    position: relative;
    min-height: 300px;
    flex: 1 1 auto;
    overflow: hidden;
}
.comparison-table-wrap {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: thin;
}
.comparison-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--text-secondary);
    font: 10px var(--font-mono);
}
.comparison-table th,
.comparison-table td {
    height: 32px;
    padding: 6px 10px;
    overflow: hidden;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comparison-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 38px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.comparison-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 125px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    text-align: left;
    font-weight: 500;
}
.comparison-table thead th:first-child { z-index: 4; background: var(--bg-tertiary); }
.comparison-table thead button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: 700 10px var(--font-mono);
    cursor: pointer;
}
.comparison-table thead button:hover { color: var(--bench-color); }
.comparison-table tbody tr:not(.comparison-group):hover td,
.comparison-table tbody tr:not(.comparison-group):hover th { background: var(--bg-tertiary); }
.comparison-table .comparison-group th {
    position: sticky;
    left: 0;
    z-index: 2;
    height: 28px;
    padding: 7px 10px 5px;
    background: color-mix(in srgb, var(--bg-tertiary) 82%, var(--bg-primary));
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
}
.comparison-table td.is-positive,
.comparison-legend-item .is-positive { color: var(--accent-green); }
.comparison-table td.is-negative,
.comparison-legend-item .is-negative { color: var(--accent-red); }
.comparison-table td.is-best {
    background: color-mix(in srgb, var(--cmd-accent) 7%, transparent);
    box-shadow: inset 0 -1px color-mix(in srgb, var(--cmd-accent) 35%, transparent);
    font-weight: 700;
}
.comparison-loading,
.comparison-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-muted);
    font: 10px var(--font-mono);
    text-align: center;
}
.comparison-empty b { color: var(--text-secondary); font-size: 12px; }
.comparison-empty span { max-width: 330px; line-height: 1.45; }
.comparison-loading i {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--cmd-accent);
    border-radius: 50%;
    animation: comparison-spin .7s linear infinite;
}
@keyframes comparison-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
    .comparison-body {
        overflow-y: auto;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(390px, 48vh) auto;
    }
    .comparison-chart-panel { border-right: 0; border-bottom: 1px solid var(--border-color); }
    .comparison-table-panel { min-height: 440px; }
    .comparison-table-wrap { flex: none; overflow: auto; }
}

@media (max-width: 900px) {
    .comparison-page { height: calc(100vh - 54px); }
    .comparison-head { min-height: 52px; }
    .comparison-builder { flex-wrap: wrap; gap: 7px; }
    .comparison-add { flex: 1 1 280px; }
    .comparison-symbols { order: 3; flex-basis: 100%; }
    .comparison-status { margin-left: 0; }
}

@media (max-width: 580px) {
    .comparison-head { padding: 8px 9px; }
    .comparison-head p { display: none; }
    .comparison-builder { padding: 7px 9px; }
    .comparison-add { min-width: 0; flex-basis: 100%; }
    .comparison-add label { display: none; }
    .comparison-status { display: none; }
    .comparison-body { grid-template-rows: minmax(350px, 55vh) auto; }
    .comparison-section-head { padding: 7px 9px; }
    .comparison-section-head span { display: none; }
    .comparison-ranges .tab-btn { min-width: 31px; padding: 4px 5px; }
    .comparison-legend { padding: 6px 9px; gap: 3px 10px; }
    .comparison-chart { min-height: 255px; }
    .comparison-table { min-width: 650px; }
}

/* ==========================================================================
   Modelbook: the member's private research notebook.
   Three panes: tree, editor, research drawer. Tokens only; no new colours
   beyond the four callout accents, which reuse the palette variables.
   ========================================================================== */
.modelbook-page {
    height: calc(100vh - 6px);
    min-height: 520px;
    padding: 0;
    position: relative;
}
.mb-shell {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.mb-shell.drawer-open { grid-template-columns: 264px minmax(0, 1fr) 328px; }
.mb-shell > .mb-drawer { display: none; }
.mb-shell.drawer-open > .mb-drawer { display: flex; }

.mb-pane-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-color);
}
.mb-pane-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-primary);
}
.mb-pane-actions { display: flex; gap: 6px; }
.mb-pane-actions .toolbar-btn, .mb-pane-head .toolbar-btn { padding: 4px 8px; font-size: 11px; }

/* -- tree ---------------------------------------------------------------- */
.mb-tree-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg-secondary) 72%, #000 28%);
    border-right: 1px solid var(--border-color);
}
.mb-search { margin: 8px 10px 4px; width: calc(100% - 20px); box-sizing: border-box; }
.mb-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px 12px;
    border: 1px dashed transparent;
}
.mb-tree.is-drop-root { border-color: var(--accent-blue); background: rgba(41, 98, 255, .06); }
.mb-tree-foot {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.mb-tree-empty {
    padding: 22px 12px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.mb-tree-empty b { color: var(--text-secondary); }
.mb-folder { margin: 1px 0; }
.mb-folder-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px calc(6px + var(--depth, 0) * 14px);
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    border: 1px solid transparent;
}
.mb-folder-row:hover { background: var(--bg-tertiary); }
.mb-folder-row.is-drop { border-color: var(--accent-blue); background: rgba(41, 98, 255, .10); }
.mb-caret {
    width: 0; height: 0;
    border-left: 5px solid var(--text-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .12s ease;
    justify-self: center;
}
.mb-folder.is-open > .mb-folder-row .mb-caret { transform: rotate(90deg); }
.mb-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-folder-row small { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
.mb-row-actions { display: none; gap: 2px; }
.mb-folder-row:hover .mb-row-actions { display: inline-flex; }
.mb-row-actions button {
    background: none; border: 0; color: var(--text-muted);
    width: 18px; height: 18px; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1;
}
.mb-row-actions button:hover { background: var(--bg-primary); color: var(--text-primary); }
.mb-folder-children { display: none; }
.mb-folder.is-open > .mb-folder-children { display: block; }
.mb-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title time" "sub sub";
    gap: 1px 8px;
    padding: 6px 8px 6px calc(10px + var(--depth, 0) * 14px);
    margin: 1px 0;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
}
.mb-doc:hover { background: var(--bg-tertiary); }
.mb-doc.is-active { background: rgba(41, 98, 255, .12); border-color: rgba(41, 98, 255, .35); }
.mb-doc-title { grid-area: title; font-size: 12.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-doc-sub { grid-area: sub; font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-doc-sub b { color: var(--accent-blue); font-weight: 600; font-family: var(--font-mono); font-size: 10px; }
.mb-doc time { grid-area: time; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

/* -- editor -------------------------------------------------------------- */
.mb-editor-pane {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mb-doc-head {
    flex: 0 0 auto;
    padding: 12px 22px 6px;
    border-bottom: 1px solid var(--border-color);
}
.mb-title {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    padding: 2px 0 6px;
}
.mb-title::placeholder { color: var(--text-muted); opacity: .6; }
.mb-doc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 26px;
}
.mb-folder-select {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    padding: 3px 6px;
    max-width: 240px;
}
.mb-status { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.mb-status[data-tone="warn"] { color: var(--accent-yellow); }
.mb-counts { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-left: auto; }
.mb-export { position: relative; }
.mb-export .toolbar-btn, .mb-doc-meta .toolbar-btn { padding: 4px 9px; font-size: 11px; }
.mb-export-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 220px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.mb-export-menu button {
    background: none; border: 0; text-align: left; cursor: pointer;
    color: var(--text-primary); font-size: 12px; padding: 7px 10px; border-radius: 4px;
}
.mb-export-menu button:hover { background: var(--bg-tertiary); }
.mb-danger { color: var(--accent-red) !important; }
.mb-primary { border-color: var(--accent-blue) !important; color: var(--accent-blue) !important; }

.mb-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    padding: 6px 18px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 60%, var(--bg-primary) 40%);
}
.mb-tool-group { display: inline-flex; gap: 2px; padding-right: 10px; border-right: 1px solid var(--border-color); }
.mb-tool-group:last-child, .mb-tool-right { border-right: 0; padding-right: 0; }
.mb-tool-right { margin-left: auto; }
.mb-toolbar button {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    height: 24px;
    min-width: 26px;
    padding: 0 6px;
    cursor: pointer;
}
.mb-toolbar button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.mb-toolbar button.active { background: rgba(41, 98, 255, .14); border-color: rgba(41, 98, 255, .4); color: var(--accent-blue); }

.mb-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 18px;
    background: rgba(240, 160, 60, .10);
    border-bottom: 1px solid rgba(240, 160, 60, .35);
    font-size: 12px;
    color: var(--text-primary);
}
.mb-banner span { color: var(--text-secondary); }
.mb-banner button {
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 4px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.mb-banner button:hover { border-color: var(--accent-blue); }

.mb-editor-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    position: relative;
    padding: 26px 22px 120px;
}
.mb-body {
    max-width: 820px;
    margin: 0 auto;
    outline: 0;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.65;
    min-height: 60vh;
    caret-color: var(--accent-blue);
}
.mb-body:empty::before, .mb-body > p:only-child:has(> br:only-child)::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: .7;
    pointer-events: none;
}
.mb-body > p:only-child:has(> br:only-child)::before { content: ''; }
.mb-body:empty::before { display: block; }
.mb-body h1, .mb-body h2, .mb-body h3, .mb-body h4 { line-height: 1.25; margin: 1.5em 0 .45em; color: var(--text-primary); }
.mb-body h1 { font-size: 26px; } .mb-body h2 { font-size: 21px; } .mb-body h3 { font-size: 17px; } .mb-body h4 { font-size: 15px; }
.mb-body > :first-child { margin-top: 0; }
.mb-body p, .mb-body ul, .mb-body ol, .mb-body blockquote, .mb-body pre, .mb-body table { margin: 0 0 .9em; }
.mb-body ul, .mb-body ol { padding-left: 1.6em; }
.mb-body a { color: var(--accent-blue); }
.mb-body blockquote {
    border-left: 3px solid var(--border-color);
    margin-left: 0;
    padding: 4px 16px;
    color: var(--text-secondary);
}
.mb-body blockquote cite { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.mb-body pre, .mb-body code { font-family: var(--font-mono); font-size: 12.5px; }
.mb-body pre { background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 10px 12px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; }
.mb-body hr { border: 0; border-top: 1px solid var(--border-color); margin: 1.8em 0; }
.mb-body table { border-collapse: collapse; width: 100%; font-size: 13px; }
.mb-body th, .mb-body td { border: 1px solid var(--border-color); padding: 5px 8px; text-align: left; vertical-align: top; min-width: 40px; }
.mb-body th { background: var(--bg-secondary); font-weight: 600; }
.mb-body table.mb-stats th:first-child { width: 42%; color: var(--text-secondary); font-weight: 500; }
.mb-body .mb-callout {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    background: rgba(41, 98, 255, .07);
    padding: 8px 14px;
    border-radius: 6px;
    margin: 0 0 1em;
}
.mb-body .mb-callout p:last-child { margin-bottom: 0; }
.mb-body .mb-callout.mb-warn { border-left-color: var(--accent-yellow); background: rgba(240, 160, 60, .08); }
.mb-body .mb-callout.mb-good { border-left-color: var(--accent-green); background: rgba(47, 179, 106, .08); }
.mb-body .mb-callout.mb-bad { border-left-color: var(--accent-red); background: rgba(224, 82, 82, .08); }
.mb-body figure { margin: 1.2em 0; position: relative; }
.mb-body figure.mb-figure { max-width: 100%; }
.mb-body figure.mb-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.mb-body figure.is-selected img { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.mb-body figcaption {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-family: var(--font-mono);
}
.mb-body .mb-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    user-select: none;
}
.mb-body .mb-card.is-selected { outline: 2px solid var(--accent-blue); }
.mb-card-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.mb-card-ticker { font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--accent-blue); cursor: pointer; }
.mb-card-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.mb-card-tag { font-size: 10.5px; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; padding: 1px 8px; }
.mb-card-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin: 4px 0; }
.mb-card-stats b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.mb-body .mb-card-headline { font-size: 13px; margin: 6px 0 0; color: var(--text-primary); }
.mb-body .mb-card-context { font-size: 11px; margin: 4px 0 0; color: var(--text-muted); }
.mb-pos { color: var(--accent-green) !important; }
.mb-neg { color: var(--accent-red) !important; }

.mb-figure-tools {
    position: absolute;
    z-index: 20;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.mb-figure-tools button {
    background: none; border: 1px solid transparent; border-radius: 4px;
    color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px;
    height: 22px; padding: 0 7px; cursor: pointer;
}
.mb-figure-tools button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.mb-figure-tools button.active { color: var(--accent-blue); border-color: rgba(41, 98, 255, .4); }

.mb-editor-empty { display: none; }
.mb-editor-pane.is-empty .mb-doc-head,
.mb-editor-pane.is-empty .mb-toolbar,
.mb-editor-pane.is-empty .mb-body { display: none; }
.mb-editor-pane.is-empty .mb-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 18vh auto 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.mb-editor-pane.is-empty .mb-editor-empty b { color: var(--text-primary); font-size: 16px; }

/* -- research drawer ------------------------------------------------------ */
.mb-drawer {
    min-height: 0;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 72%, #000 28%);
}
.mb-research-form { display: flex; gap: 6px; padding: 10px 12px 6px; }
.mb-research-form .filter-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.mb-research-form .toolbar-btn { padding: 4px 9px; font-size: 11px; }
.mb-drawer-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 24px; }
.mb-drawer-empty { padding: 18px 4px; color: var(--text-muted); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.mb-drawer-empty b { color: var(--text-secondary); }
.mb-drawer-title, .mb-research-head {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; margin: 10px 0 8px;
}
.mb-research-head b { color: var(--text-primary); font-size: 13px; letter-spacing: .02em; }
.mb-research-head span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-mini {
    background: none; border: 1px solid var(--border-color); color: var(--text-secondary);
    border-radius: 4px; font-size: 10px; padding: 2px 7px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.mb-mini:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.mb-research-card {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-primary);
    padding: 9px 10px;
    margin-bottom: 8px;
}
.mb-research-top { display: flex; gap: 8px; align-items: baseline; }
.mb-research-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.mb-research-top b { margin-left: auto; font-family: var(--font-mono); font-size: 12px; }
.mb-research-headline { margin: 6px 0 4px; font-size: 12px; line-height: 1.45; color: var(--text-primary); }
.mb-research-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-muted); margin: 4px 0 6px; }
.mb-research-stats b { font-family: var(--font-mono); color: var(--text-secondary); }
.mb-research-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.mb-research-actions button {
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary);
    border-radius: 4px; font-size: 10.5px; padding: 3px 8px; cursor: pointer;
}
.mb-research-actions button:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue); }
.mb-research-actions button:disabled { opacity: .4; cursor: default; }
.mb-research-actions .mb-chart-action {
    border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--border-color));
    color: var(--accent-blue);
}
.mb-captures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mb-capture-thumb {
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px;
    padding: 4px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px;
}
.mb-capture-thumb:hover { border-color: var(--accent-blue); }
.mb-capture-thumb img { width: 100%; height: 64px; object-fit: cover; border-radius: 3px; display: block; }
.mb-capture-thumb span { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- capture dialog and toasts -------------------------------------------- */
.mb-capture {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0, 0, 0, .62);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mb-capture-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 0;
    width: min(960px, 100%);
    max-height: 90vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.mb-capture-preview { background: var(--bg-primary); display: flex; align-items: center; justify-content: center; padding: 14px; min-height: 240px; }
.mb-capture-preview img { max-width: 100%; max-height: 70vh; border-radius: 4px; border: 1px solid var(--border-color); }
.mb-capture-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.mb-capture-form h3 { margin: 0 0 4px; font-size: 15px; color: var(--text-primary); }
.mb-capture-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono); }
.mb-capture-form input, .mb-capture-form select {
    background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 5px; padding: 7px 9px; font-size: 13px; font-family: inherit; text-transform: none; letter-spacing: 0;
}
.mb-capture-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 8px; }
.mb-db-chart-dialog {
    width: min(1080px, 96vw);
    max-height: 94vh;
    display: grid;
    grid-template-rows: auto auto auto minmax(280px, 1fr) auto;
    overflow: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.mb-db-chart-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px 8px;
}
.mb-db-chart-head > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mb-db-chart-head b { color: var(--accent-blue); font-size: 16px; }
.mb-db-chart-head span {
    color: var(--text-muted); font-family: var(--font-mono); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-db-chart-close {
    border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 24px; line-height: 1;
}
.mb-db-chart-close:hover { color: var(--text-primary); }
.mb-db-chart-tabs { display: flex; gap: 4px; padding: 0 16px 8px; border-bottom: 1px solid var(--border-color); }
.mb-db-chart-tabs button {
    border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary);
    border-radius: 4px; padding: 5px 12px; font: 11px var(--font-mono); cursor: pointer;
}
.mb-db-chart-tabs button.active {
    border-color: var(--accent-blue); color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-primary));
}
.mb-db-chart-tabs button:disabled { opacity: .55; cursor: wait; }
.mb-db-chart-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 8px 16px; font: 11px var(--font-mono); color: var(--text-secondary);
}
.mb-db-chart-controls label { display: flex; align-items: center; gap: 5px; }
.mb-db-chart-controls input[type="date"] {
    background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 4px; font: inherit; color-scheme: dark;
}
.mb-chart-trade-status { color: var(--accent-blue); }
.mb-chart-note-hint { width: 100%; color: var(--text-muted); }
.mb-chart-notes { position: absolute; inset: 0; overflow: hidden; z-index: 9; pointer-events: none; }
.mb-chart-note {
    position: absolute; pointer-events: auto; color: #fbbf24; background: rgba(12, 17, 23, .85);
    border-left: 2px solid #fbbf24; padding: 3px 6px; border-radius: 3px; white-space: pre-wrap;
    overflow-wrap: anywhere; font-family: var(--font-mono); line-height: 1.35; cursor: pointer;
}
.mb-chart-note-editor {
    position: absolute; z-index: 2; width: 275px; padding: 8px; pointer-events: auto;
    background: var(--bg-secondary); border: 1px solid var(--accent-blue); border-radius: 5px;
}
.mb-chart-note-editor textarea {
    width: 100%; box-sizing: border-box; background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border-color); padding: 5px; resize: vertical; font: 13px var(--font-mono);
}
.mb-chart-note-editor > div { display: flex; gap: 6px; margin-top: 5px; }
.mb-chart-note-editor button, .mb-chart-note-editor select {
    background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: 3px; padding: 4px 6px; cursor: pointer;
}
.mb-db-chart-canvas { min-height: 360px; position: relative; background: var(--bg-primary); }
.mb-db-chart-canvas > .loading,
.mb-db-chart-error {
    height: 100%; min-height: 360px; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}
.mb-db-chart-foot {
    display: flex; align-items: flex-end; gap: 12px; padding: 10px 16px 14px;
    border-top: 1px solid var(--border-color); background: var(--bg-secondary);
}
.mb-db-chart-foot label {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted);
    font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .07em;
}
.mb-db-chart-foot input {
    width: 100%; border: 1px solid var(--border-color); border-radius: 4px;
    background: var(--bg-primary); color: var(--text-primary); padding: 7px 9px;
    font: inherit; font-size: 12px;
}
.mb-db-chart-foot > div { display: flex; gap: 8px; flex: 0 0 auto; }
.mb-body .mb-commentary { border-left-color: var(--accent-purple, #a78bfa); }
.mb-body .mb-commentary > p:nth-child(2) { white-space: pre-wrap; }
.mb-body .mb-commentary-source {
    margin-top: 7px; color: var(--text-muted); font: 10.5px var(--font-mono);
}
.mb-field-dialog {
    width: min(760px, 96vw); max-height: 90vh; display: flex; flex-direction: column;
    overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.mb-field-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 16px 9px; border-bottom: 1px solid var(--border-color);
}
.mb-field-head > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mb-field-head b { color: var(--accent-blue); font-size: 16px; }
.mb-field-head span {
    color: var(--text-muted); font: 11px var(--font-mono); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.mb-field-tools { display: flex; gap: 7px; padding: 10px 16px; border-bottom: 1px solid var(--border-color); }
.mb-field-tools .filter-input { flex: 1 1 auto; min-width: 0; }
.mb-field-tools .toolbar-btn { flex: 0 0 auto; }
.mb-field-list { min-height: 0; overflow-y: auto; padding: 8px 16px 14px; }
.mb-field-group { margin: 0 0 12px; }
.mb-field-group[hidden], .mb-field-row[hidden] { display: none; }
.mb-field-group h4 {
    margin: 5px 0 5px; color: var(--text-muted); font: 10px var(--font-mono);
    letter-spacing: .08em; text-transform: uppercase;
}
.mb-field-row {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start;
    padding: 7px 8px; border-radius: 5px; cursor: pointer;
}
.mb-field-row:hover { background: var(--bg-tertiary); }
.mb-field-row input { margin: 2px 0 0; accent-color: var(--accent-blue); }
.mb-field-row span { display: grid; grid-template-columns: minmax(130px, .55fr) minmax(0, 1fr); gap: 12px; }
.mb-field-row b { color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.mb-field-row small {
    color: var(--text-muted); font: 10.5px var(--font-mono); line-height: 1.4;
    overflow-wrap: anywhere; white-space: pre-wrap;
}
.mb-field-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px 13px; border-top: 1px solid var(--border-color);
}
.mb-field-foot > span { color: var(--text-muted); font: 10.5px var(--font-mono); }
.mb-field-foot > div { display: flex; gap: 8px; }
.mb-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 4500; display: flex; flex-direction: column; gap: 8px; }
.mb-toast {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 7px; padding: 9px 12px; font-size: 12.5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    animation: mb-toast-in .18s ease;
}
.mb-toast.is-leaving { opacity: 0; transition: opacity .3s ease; }
.mb-toast button {
    background: none; border: 1px solid var(--accent-blue); color: var(--accent-blue);
    border-radius: 4px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
@keyframes mb-toast-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* -- responsive ----------------------------------------------------------- */
.mb-panes { display: none; }
@media (max-width: 1180px) {
    .mb-shell.drawer-open { grid-template-columns: 232px minmax(0, 1fr) 288px; }
}
@media (max-width: 900px) {
    /* Same breakpoint as the rail: below it the header nav takes over. */
    .modelbook-page { height: calc(100vh - 54px); min-height: 0; overflow: hidden; }
    .mb-shell, .mb-shell.drawer-open { display: block; border: 0; height: calc(100% - 44px); }
    .mb-shell > * { display: none !important; height: 100%; max-width: 100%; }
    .mb-body { overflow-wrap: anywhere; }
    .mb-doc-meta { gap: 6px; }
    .mb-folder-select { max-width: 140px; }
    .mb-status { flex-basis: 100%; order: 9; }
    .mb-export { margin-left: auto; }
    .mb-shell[data-pane="tree"] > .mb-tree-pane,
    .mb-shell[data-pane="editor"] > .mb-editor-pane,
    .mb-shell[data-pane="drawer"] > .mb-drawer { display: flex !important; }
    .mb-tree-pane, .mb-drawer { border: 0; }
    .mb-doc-head { padding: 10px 14px 6px; }
    .mb-title { font-size: 20px; }
    .mb-toolbar { padding: 6px 10px; gap: 4px 6px; }
    .mb-tool-group { padding-right: 6px; }
    .mb-tool-right { margin-left: 0; }
    .mb-editor-scroll { padding: 16px 14px 90px; }
    .mb-counts { display: none; }
    .mb-panes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 44px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }
    .mb-panes button {
        background: none; border: 0; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .mb-panes button.active { color: var(--accent-blue); box-shadow: inset 0 2px 0 var(--accent-blue); }
    .mb-capture-dialog { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
    .mb-capture-preview { min-height: 160px; }
    .mb-capture-preview img { max-height: 36vh; }
    .mb-field-tools { flex-wrap: wrap; }
    .mb-field-tools .filter-input { flex-basis: 100%; }
    .mb-field-row span { grid-template-columns: 1fr; gap: 2px; }
    .mb-field-foot { align-items: stretch; flex-direction: column; }
    .mb-field-foot > div { justify-content: flex-end; }
    .mb-toasts { left: 12px; right: 12px; bottom: 60px; }
}

/* Modelbook fixes from the first render: the module's own display rules must
   not defeat the hidden attribute, and the search box must not stretch. */
.mb-export-menu[hidden], .mb-figure-tools[hidden], .mb-banner[hidden],
.mb-editor-pane [hidden], .mb-tree-pane [hidden] { display: none !important; }
.mb-tree-pane .mb-search { flex: 0 0 auto; height: 30px; min-height: 30px; }
.mb-tree { border: 0; outline: 1px dashed transparent; outline-offset: -1px; }
.mb-tree.is-drop-root { outline-color: var(--accent-blue); }
/* Nine wide letters do not fit the rail at .03em; WORKSPACE only just does. */
.rail-btn[data-page="modelbook"] .rail-label { letter-spacing: 0; font-size: 7.5px; }

/* Modelbook publishing: the Community tab, the read-only bar, the share dialog. */
.mb-mode { display: flex; gap: 2px; margin: 8px 10px 0; padding: 2px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; }
.mb-mode button { flex: 1 1 0; background: none; border: 0; border-radius: 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 5px 0; cursor: pointer; }
.mb-mode button.active { background: var(--bg-tertiary); color: var(--text-primary); }
.mb-doc.mb-pub .mb-doc-sub em { font-style: normal; color: var(--text-secondary); }
.mb-readbar { background: rgba(41, 98, 255, .08); border-bottom-color: rgba(41, 98, 255, .35); }
.mb-readbar[hidden] { display: none !important; }
.mb-body[contenteditable="false"] { caret-color: transparent; }
.mb-share-dialog { grid-template-columns: 1fr; width: min(560px, 100%); }
.mb-share-status { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.mb-share-link { display: flex; gap: 6px; }
.mb-share-link input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 11px; }
.mb-share-check { flex-direction: row !important; align-items: center; gap: 8px !important; text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important; font-size: 12.5px !important; color: var(--text-primary) !important; }
.mb-share-check input { width: 15px; height: 15px; accent-color: var(--cmd-accent); }
/* The stats table's spanning header inherited the 42% first-column width. */
.mb-body table.mb-stats th:first-child { width: auto; }
.mb-body table.mb-stats tbody th:first-child { width: 42%; }

/* Modelbook templates: chart slots, hints, and the template chooser. */
.mb-body figure.mb-placeholder {
    border: 1px dashed var(--border-color); border-radius: 8px; padding: 22px 16px; text-align: center;
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent); cursor: pointer; user-select: none;
}
.mb-body figure.mb-placeholder:hover { border-color: var(--accent-blue); }
.mb-body figure.mb-placeholder.is-selected { outline: 2px solid var(--accent-blue); }
.mb-placeholder-body { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mb-placeholder-body b { font-size: 13px; color: var(--text-secondary); }
.mb-placeholder-body span { font-size: 11.5px; color: var(--text-muted); max-width: 480px; }
.mb-placeholder-body em { color: var(--accent-blue); font-style: normal; font-weight: 600; }
.mb-body p.mb-hint { color: var(--text-muted); font-style: italic; }
.mb-figure-tools.is-placeholder [data-width], .mb-figure-tools.is-placeholder [data-action="caption"] { display: none; }
.mb-tpl-dialog { width: min(680px, 100%); }
.mb-tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.mb-tpl {
    display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; color: var(--text-primary);
}
.mb-tpl:hover { border-color: var(--accent-blue); }
.mb-tpl b { font-size: 13px; }
.mb-tpl span { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.mb-tpl small { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }

/* Comparison Bench groups: the picker and the group chips. */
.comparison-add-group select {
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 5px; padding: 5px 8px; font-size: 11.5px; height: 30px;
}
.comparison-symbol.is-group .comparison-symbol-open i {
    font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); margin-right: 6px;
}
.comparison-table th small { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }

/* Workspace Compare widget: the bench in a pane. */
.ws-cmp { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-cmp-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.ws-cmp-ranges .tab-btn { min-width: 30px; padding: 3px 5px; font-size: 10px; }
.ws-cmp-add { display: flex; gap: 4px; align-items: center; flex: 1 1 auto; min-width: 0; }
.ws-cmp-add select, .ws-cmp-add input, .ws-cmp-add button, .ws-cmp-open {
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 4px; font-size: 11px; height: 24px; padding: 0 6px;
}
.ws-cmp-add input { flex: 1 1 60px; min-width: 0; }
.ws-cmp-add button, .ws-cmp-open { cursor: pointer; }
.ws-cmp-add button:hover, .ws-cmp-open:hover { border-color: var(--accent-blue); }
.ws-cmp-open { margin-left: auto; white-space: nowrap; }
.ws-cmp-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 6px 8px; }
.ws-cmp-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px;
    border: 1px solid var(--border-color); border-left: 3px solid var(--c, var(--accent-blue)); border-radius: 4px;
    font-size: 11px; background: var(--bg-secondary);
}
.ws-cmp-chip.is-error { opacity: .5; }
.ws-cmp-name { background: none; border: 0; padding: 0; color: var(--text-primary); cursor: pointer; font: inherit; font-weight: 600; }
.ws-cmp-name i { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: 5px; }
.ws-cmp-chip b { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.ws-cmp-chip b.pos { color: var(--accent-green); }
.ws-cmp-chip b.neg { color: var(--accent-red); }
.ws-cmp-x { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }
.ws-cmp-x:hover { color: var(--accent-red); }
.ws-cmp-chart { flex: 1 1 auto; min-height: 140px; }

/* Ten entries and two pickers no longer fit one row: the builder wraps and
   the chips take a full row of their own, at every width. */
.comparison-builder { flex-wrap: wrap; row-gap: 8px; }
.comparison-add, .comparison-add-group { flex: 0 1 auto; min-width: 0; }
.comparison-add-group select, .comparison-add-group .filter-input { flex: 0 0 auto; }
/* The builder never shrinks under the body: as a flex item it was collapsing
   to its min-height and the chips and status were clipped behind the chart.
   Chips stay on one scrolling line, so twelve long theme names cost one row. */
.comparison-builder { flex: 0 0 auto; }
.comparison-symbols { flex: 1 1 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.comparison-status { order: 4; flex-basis: 100%; }

/* Comparison bench: every group of a kind, ranked, one row each. */
/* A ranking up: the chart takes the larger share, the table sits compact beside it. */
.comparison-body.has-ranking { grid-template-columns: minmax(520px, 1.4fr) minmax(400px, .6fr); }
.comparison-rank-rail {
    min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
}
.comparison-rank-rail[hidden] { display: none; }
.comparison-rank-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; scrollbar-width: thin; }
.comparison-ranked-close {
    border: 0; background: transparent; color: var(--text-muted);
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.comparison-ranked-close:hover { color: var(--text-primary); }
.comparison-rank-table {
    width: auto; min-width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0;
    color: var(--text-secondary); font: 10px var(--font-mono);
}
.comparison-rank-table th, .comparison-rank-table td {
    height: 26px; padding: 4px 5px; white-space: nowrap; text-align: right;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
.comparison-rank-table thead th {
    position: sticky; top: 0; z-index: 2; height: 30px;
    background: var(--bg-tertiary); color: var(--text-muted);
    font-weight: 500; letter-spacing: .4px;
}
.comparison-rank-table th.rk-name, .comparison-rank-table td.rk-name { text-align: left; }
.comparison-rank-table td.rk-name { color: var(--text-primary); width: 1%; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.comparison-rank-table td.rk-name i {
    width: 10px; height: 2px; display: inline-block; vertical-align: middle;
    margin-right: 7px; border-radius: 2px; background: var(--bench-color);
}
.comparison-rank-table .rk-rank { width: 30px; color: var(--text-muted); }
.comparison-rank-table .rk-ret { width: 54px; }
.comparison-rank-table .rk-n { width: 36px; }
.comparison-rank-table.is-compact .rk-ret { width: 76px; }
.comparison-rank-table td.rk-n { color: var(--text-muted); }
.comparison-rank-table .rk-toggle { width: 26px; color: var(--text-muted); font-size: 12px; }
.comparison-rank-table th.is-range { color: var(--text-primary); }
.comparison-rank-table td.is-range { font-weight: 600; }
.comparison-rank-table td.is-positive { color: var(--accent-green); }
.comparison-rank-table td.is-negative { color: var(--accent-red); }
.comparison-rank-table tbody tr { cursor: pointer; }
.comparison-rank-table tbody tr:hover td { background: var(--bg-tertiary); }
.comparison-rank-table tbody tr.is-on td.rk-name { font-weight: 600; }
.comparison-rank-table tbody tr.is-on td.rk-toggle { color: var(--bench-color); }
.comparison-rank-table.is-compact th, .comparison-rank-table.is-compact td { padding: 4px 6px; }
.comparison-ranked-row small { text-align: right; color: var(--text-muted); }

/* Journal editing (2026-09-19): one-click entries, popovers in place of
   prompt() dialogs, table tools, hints that behave as placeholders, and
   cards that can be selected and removed like charts. */
.mb-split { display: inline-flex; }
.mb-split .toolbar-btn + .toolbar-btn { margin-left: -1px; padding-left: 5px; padding-right: 5px; }
.mb-editor-empty .mb-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mb-tree-empty .mb-link, .mb-editor-empty .mb-link {
    background: none; border: 0; padding: 0; color: var(--accent-blue); cursor: pointer; font-size: 12px;
}
.mb-tree-empty .mb-link:hover { text-decoration: underline; }

.mb-popover {
    position: absolute; z-index: 4600;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 7px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4); padding: 8px;
}
.mb-mini-prompt { width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; }
.mb-mini-prompt label {
    display: flex; flex-direction: column; gap: 5px;
    font: 10.5px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.mb-mini-prompt input {
    background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 5px; padding: 7px 9px; font-size: 13px; font-family: inherit; text-transform: none; letter-spacing: 0;
}
.mb-mini-prompt input:focus { outline: 0; border-color: var(--accent-blue); }
.mb-mini-prompt > div { display: flex; justify-content: flex-end; gap: 6px; }
.mb-mini-prompt .toolbar-btn { padding: 4px 10px; font-size: 11px; }
.mb-grid-pick { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mb-grid { display: grid; grid-template-columns: repeat(var(--n, 8), 16px); gap: 3px; }
.mb-grid i { display: block; width: 16px; height: 16px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-primary); cursor: pointer; }
.mb-grid i.on { background: rgba(41, 98, 255, .28); border-color: var(--accent-blue); }
.mb-grid-label { font: 10.5px var(--font-mono); color: var(--text-secondary); }

/* A hint reads as guidance in the editor and does not print. */
.mb-body p.mb-hint { border-left: 2px dashed var(--border-color); padding-left: 10px; }
@media print { .mb-body p.mb-hint { display: none; } }

.mb-body figure.mb-card { cursor: pointer; }
.mb-body figure.mb-card.is-selected { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* Paragraphs typed before the separator was set arrived as <div>s. */
.mb-body > div:not(.mb-callout):not(.mb-commentary) { margin: 0 0 .9em; }
.mb-body td:focus-within, .mb-body th:focus-within { outline: 0; }
.mb-table-tools button { white-space: nowrap; }

/* Journal, second pass (2026-09-20): the / menu, undo buttons that know
   when there is nothing to undo, and row actions on entries. */
.mb-slash { width: min(300px, calc(100vw - 24px)); padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.mb-slash > input {
    background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary);
    border-radius: 5px; padding: 6px 9px; font-size: 13px; font-family: inherit;
}
.mb-slash > input:focus { outline: 0; border-color: var(--accent-blue); }
.mb-slash-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.mb-slash-list button {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
    background: none; border: 0; border-radius: 4px; padding: 6px 8px; text-align: left; cursor: pointer;
    color: var(--text-primary); font-size: 12.5px;
}
.mb-slash-list button span { color: var(--text-muted); font: 10.5px var(--font-mono); white-space: nowrap; }
.mb-slash-list button:hover, .mb-slash-list button.active { background: rgba(41, 98, 255, .14); }
.mb-slash-none { padding: 8px; color: var(--text-muted); font-size: 12px; }
.mb-toolbar button:disabled { opacity: .35; cursor: default; }
.mb-toolbar button:disabled:hover { background: none; color: var(--text-secondary); }

/* Entry rows: rename and delete appear on hover, in a third column. */
.mb-doc { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title time act" "sub sub act"; }
.mb-doc-actions { grid-area: act; align-self: center; display: none; gap: 2px; }
.mb-doc:hover .mb-doc-actions { display: inline-flex; }
.mb-doc:hover time { display: none; }

/* Inline formatting (2026-09-20). The colour classes are global, not scoped
   to .mb-body, so the toolbar swatches can paint themselves with currentColor. */
.mb-c-red { color: var(--accent-red); }
.mb-c-green { color: var(--accent-green); }
.mb-c-amber { color: var(--accent-yellow); }
.mb-c-blue { color: var(--accent-blue); }
.mb-c-purple { color: var(--accent-purple, #a78bfa); }
.mb-c-muted { color: var(--text-muted); }
.mb-body mark { background: rgba(240, 200, 60, .42); color: inherit; padding: 0 2px; border-radius: 2px; }
.mb-body :not(pre) > code { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 3px; padding: 0 4px; font-size: .88em; }
.mb-body small { font-size: .82em; color: var(--text-secondary); }
.mb-body sup, .mb-body sub { font-size: .72em; line-height: 0; }
.mb-tb-mark { background: rgba(240, 200, 60, .42); color: inherit; padding: 0 2px; border-radius: 2px; }
.mb-tb-color { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent-red); }
.mb-toolbar button svg { display: block; }
.mb-swatches { display: flex; gap: 6px; padding: 6px; }
.mb-swatch {
    width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border-color); background: currentColor; padding: 0;
}
.mb-swatch:hover { transform: scale(1.12); }
.mb-swatch-none { background: none; color: var(--text-muted); font-size: 14px; line-height: 1; }

/* Journal, third pass (2026-09-20): checkboxes, the link popover, the
   switcher, and a toolbar that folds its secondary groups on a phone. */
.mb-body ul.mb-todo { list-style: none; padding-left: 0; }
.mb-body ul.mb-todo > li { position: relative; padding-left: 26px; }
.mb-body ul.mb-todo > li::before {
    content: ''; position: absolute; left: 2px; top: .34em; width: 14px; height: 14px;
    border: 1.5px solid var(--text-muted); border-radius: 3px; background: var(--bg-primary); cursor: pointer;
}
.mb-body ul.mb-todo > li.mb-done::before { background: var(--accent-green); border-color: var(--accent-green); }
.mb-body ul.mb-todo > li.mb-done::after {
    content: ''; position: absolute; left: 7px; top: calc(.34em + 2px); width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mb-body ul.mb-todo > li.mb-done { color: var(--text-muted); text-decoration: line-through; }

.mb-linkpop { display: flex; align-items: center; gap: 6px; padding: 6px 8px; max-width: calc(100vw - 24px); }
.mb-linkpop-url { font: 10.5px var(--font-mono); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mb-linkpop button {
    background: none; border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px;
    padding: 3px 8px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.mb-linkpop button:hover { border-color: var(--accent-blue); }
.mb-body a { cursor: pointer; }

.mb-switch .mb-slash-list button.mb-switch-new b { color: var(--accent-blue); }
.mb-title::placeholder { color: var(--text-secondary); opacity: .55; }

.mb-tool-more-btn { display: none; }
@media (max-width: 900px) {
    .mb-tool-more-btn { display: inline-flex; align-items: center; }
    .mb-toolbar:not(.is-more) .mb-tool-more { display: none; }
}

/* Journal, fourth pass (2026-09-20): outline, pinned rows, the trash list. */
.mb-outline {
    position: absolute; right: 16px; bottom: 18px; z-index: 15;
    width: 210px; max-height: 42vh; overflow-y: auto;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    border: 1px solid var(--border-color); border-radius: 7px; padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 1px;
}
.mb-outline[hidden] { display: none !important; }
.mb-outline-head { font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 2px 6px 6px; }
.mb-outline button {
    background: none; border: 0; text-align: left; color: var(--text-secondary); font-size: 12px;
    padding: 3px 6px; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-outline button.mb-outline-h2 { padding-left: 14px; }
.mb-outline button.mb-outline-h3 { padding-left: 22px; font-size: 11.5px; }
.mb-outline button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.mb-outline button.active { color: var(--accent-blue); }
@media (max-width: 900px) { .mb-outline { display: none !important; } }

.mb-doc.is-pinned .mb-doc-title::before { content: '\2605 '; color: var(--accent-yellow); font-size: 10px; }
.mb-tree-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mb-tree-foot .mb-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-muted); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.mb-tree-foot .mb-link:hover { color: var(--accent-blue); }

.mb-trash-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "s b";
    gap: 0 10px; padding: 6px 8px; border-radius: 4px; align-items: center;
}
.mb-trash-row:hover { background: var(--bg-tertiary); }
.mb-trash-row b { grid-area: t; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-trash-row span { grid-area: s; color: var(--text-muted); font: 10.5px var(--font-mono); }
.mb-trash-row button {
    grid-area: b; background: none; border: 1px solid var(--accent-blue); color: var(--accent-blue);
    border-radius: 4px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.mb-trash-row button:disabled { opacity: .5; cursor: default; }


/* ══════════════════════════════════════════════════════════════════════════
   PHONES  --  measured, not guessed
   ═════════════════════════════════════════════════════════════════════════
   Everything in this block answers something seen on a 390x844 viewport
   running this exact stylesheet. It sits at the end of the file on purpose:
   several of the rules it corrects are themselves later overrides, and
   ordinary specificity plus source order is a great deal easier to reason
   about than another layer of !important.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The rail's gutter, on screens with no rail ──────────────────────────
   `@media (max-width: 900px) { .dashboard.has-rail { padding-left: 0 } }`
   already says this, and is undone eight lines later by the
   `padding: 0 12px 12px 52px` shorthand -- a longhand in a media query
   losing to a shorthand that comes after it. So every phone reserved 52px,
   an eighth of its width, for a rail that is `display: none`. Content sat
   inset on the left and flush to the right. */
@media (max-width: 900px) {
    .dashboard.has-rail { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 767px) {
    /* ── Navigation ─────────────────────────────────────────────────────
       The nav was a 347px column of tabs stranded at the BOTTOM of the
       document (measured at y=5722 on Home, below every screener card),
       and it was also the entire horizontal scroll the site had: width:100%
       plus 6px of side margin inside a 338px column overflows by exactly
       the 6px the page scrolled. Taking it out of flow fixes both at once,
       and makes it a menu rather than a footer nobody would find.

       `.dashboard.has-rail .header-nav` is what forces it visible, so these
       have to match that specificity to be heard at all. */
    .dashboard.has-rail .header-nav {
        display: none;
        position: fixed;
        top: 58px;
        right: 8px;
        left: auto;
        width: 240px;
        max-width: calc(100% - 16px);
        margin: 0;
        padding: 6px;
        flex-direction: column;
        gap: 2px;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
        z-index: 1240;
    }
    .dashboard.has-rail.mobile-menu-open .header-nav { display: flex; }
    .header-nav .nav-tab {
        width: 100%;
        text-align: left;
        min-height: 42px;
        font-size: 0.85rem;
    }

    /* The button stays put while the page scrolls. It is the only way to
       navigate on a phone, and it used to scroll away with the top of the
       document. */
    .mobile-menu-btn {
        position: sticky;
        top: 8px;
        z-index: 1250;
        align-self: flex-end;
        margin: 0 0 4px auto;
        background: var(--bg-secondary);
    }
    /* The open/close animation was keyed off `.header`, which no longer
       exists, so the bars never became an X. */
    .dashboard.mobile-menu-open .mobile-menu-btn span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .dashboard.mobile-menu-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
    .dashboard.mobile-menu-open .mobile-menu-btn span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* ── Toolbars wrap instead of running off the side ──────────────────
       .panel-filters is a nowrap flex row. On the themes panel its search
       box ended 107px past the edge and the replay date 241px past, so the
       controls existed but could not be reached. */
    .panel-filters {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
    }
    .panel-filters > .filter-input,
    .panel-filters > input[type="search"] { flex: 1 1 100%; min-width: 0; }
    .panel-filters > .toolbar-date { flex: 1 1 140px; min-width: 0; }
    .panel-filters > .theme-refresh-time { flex: 1 1 100%; }
    .comparison-builder,
    .comparison-add { flex-wrap: wrap; gap: 6px; }
    .comparison-add > .filter-input { flex: 1 1 140px; min-width: 0; }
    .fin-view-tabs { flex-wrap: wrap; }

    /* ── Wide tables scroll inside their own box, never the page ─────────
       The gap database is 5350px across and the financials table 1242px.
       Both belong in a scroller; what matters is that the scroller is the
       one that moves. */
    .db-table-wrapper,
    .fin-table-scroll,
    .comparison-table-wrap,
    .table-container { max-width: 100%; overflow-x: auto; }

    /* Yesterday's recap is five columns of numbers in 390px. Its own box
       could not hold it (132px over), and it is the first thing on Home. */
    .recap-table { font-size: 0.68rem; table-layout: fixed; width: 100%; }
    .recap-table th,
    .recap-table td { padding: 5px 4px; }
    .recap-table td:first-child,
    .recap-table th:first-child { white-space: normal; word-break: break-word; }

    /* ── Cards ──────────────────────────────────────────────────────────
       The metric line wrapped one item onto a line of its own ("RVOL:" then
       "1.4"), which read as a mistake. A grid keeps the pairs together and
       lines them up down the card. */
    .mobile-card-meta { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
    .mobile-card-meta > span { display: inline-block; white-space: nowrap; }

    /* ── Home's index cards ─────────────────────────────────────────────
       A 160px min-width in a wrapping row put one card per line at about
       half the width of the screen, so the three indices cost three
       screenfuls of scrolling to read six numbers. Three across fits. */
    .home-index-cards { gap: 6px; }
    .home-index-card {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px;
        gap: 1px;
    }
    .home-index-card .hic-label { font-size: 0.6rem; }
    .home-index-card .hic-chg { font-size: 0.78rem; white-space: nowrap; }
    .home-vault-btn { flex: 1 1 100%; margin-top: 4px; }
}


/* ── Chart grid shape ────────────────────────────────────────────────────
   Three fixed columns with a flat 300px height made every cell "long and
   skinny" on a wide monitor; columns that followed the width (auto-fill at
   460px) then put six small charts across it -- Kyle, 2026-09-25: "charts
   are far too small ... 3 wide ... a minimum height requirement". So: three
   columns, each chart 16:9 of its third, and never under 340px tall. A
   third of a wide monitor is a large chart; a narrow window still gets a
   readable one, taller than 16:9 if it has to be. */
.fwd-chart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fwd-chart-grid .fwd-chart-cell-canvas {
    height: auto;
    min-height: 340px;
    aspect-ratio: 16 / 9;
    /* A ceiling on a tall, narrow window, where 16:9 of a third is taller
       than is useful. */
    max-height: 60vh;
}
/* Stacked is one chart across the full width, where 16:9 would be enormous. */
.fwd-chart-grid.fwd-chart-stacked {
    grid-template-columns: minmax(0, 1fr);
}
.fwd-chart-grid.fwd-chart-stacked .fwd-chart-cell-canvas {
    aspect-ratio: 21 / 9;
    max-height: 70vh;
}
@media (max-width: 767px) {
    .fwd-chart-grid { grid-template-columns: minmax(0, 1fr); }
    .fwd-chart-grid .fwd-chart-cell-canvas { max-height: none; }
}

/* ── The indicator editor ────────────────────────────────────────────────
   A popover, because it is edited while looking at the chart it changes. */
.vc-ind-editor {
    position: fixed;
    z-index: 2400;
    width: 300px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
    color: var(--text-primary);
}
.vc-ind-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--border-color);
}
.vc-ind-head b { font-size: 0.78rem; }
.vc-ind-scope {
    flex: 1;
    min-width: 0;
    font-size: 0.64rem;
    color: var(--text-muted);
    text-align: right;
}
.vc-ind-x {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}
.vc-ind-x:hover { color: var(--accent-red); }
.vc-ind-rows { padding: 6px 0; }
.vc-ind-row {
    display: grid;
    grid-template-columns: auto 1fr 3.4em 2em 1fr auto;
    align-items: center;
    gap: 5px;
    padding: 3px 2px;
}
.vc-ind-row input,
.vc-ind-row select {
    min-width: 0;
    padding: 3px 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}
.vc-ind-row input[type="checkbox"] {
    padding: 0;
    cursor: pointer;
    accent-color: var(--accent-blue);
}
.vc-ind-row input[type="color"] {
    padding: 0;
    height: 20px;
    cursor: pointer;
    background: none;
}
.vc-ind-row button[data-act="remove"] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 2px;
}
.vc-ind-row button[data-act="remove"]:hover { color: var(--accent-red); }
.vc-ind-empty {
    padding: 10px 4px;
    color: var(--text-muted);
    text-align: center;
}
.vc-ind-foot {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}
.vc-ind-foot button {
    flex: 1;
    padding: 4px 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}
.vc-ind-foot button:hover:not(:disabled) {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.vc-ind-foot button:disabled { opacity: 0.4; cursor: default; }

/* ── Popped-out widgets ──────────────────────────────────────────────────
   A pop-out is the whole vault, booted in a second window, showing one slot
   full-screen. So there is nothing to lay out -- only things to get out of
   the way, and one slot to let fill the window. */
body.ws-popout-mode .side-rail,
body.ws-popout-mode .mobile-menu-btn,
body.ws-popout-mode .header-nav,
body.ws-popout-mode .market-pulse,
body.ws-popout-mode .ws-toolbar,
body.ws-popout-mode .ws-add,
body.ws-popout-mode .ws-head .ws-grip,
body.ws-popout-mode .ws-head .ws-x,
body.ws-popout-mode .ws-pop,
body.ws-popout-mode .ws-resize { display: none !important; }

body.ws-popout-mode .dashboard.has-rail { padding: 0 !important; }

body.ws-popout-mode #workspaceGrid {
    display: block !important;
    height: 100vh;
    padding: 0;
    gap: 0;
}
/* Every slot but the one asked for. The grid still holds them all, because
   the layout is shared and this window is only choosing what to show. */
body.ws-popout-mode #workspaceGrid .ws-slot { display: none !important; }
body.ws-popout-mode #workspaceGrid .ws-slot.ws-popout-target {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    /* Its grid placement belongs to a grid that is not being used here. */
    grid-column: auto !important;
    grid-row: auto !important;
    border: none;
    border-radius: 0;
}
body.ws-popout-mode #workspaceGrid .ws-popout-target > .ws-body { flex: 1; min-height: 0; }

.ws-pop {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 3px;
}
.ws-pop:hover { color: var(--accent-blue); }

/* An icon button in the database toolbar, sized to the text ones beside it. */
.toolbar-btn.toolbar-btn-icon {
    width: 30px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    text-align: center;
}