/* =============================================================
   ChatMMM Dashboard v2 styles
   - Hero strip (Top Bullish / Top Bearish)
   - Filter chip rail (scroll-snap)
   - Single signal feed + slim right rail
   - Signal cards: low-density, color = direction only
   ============================================================= */

@layer components {

    /* ---------- Layout: feed + rail ---------- */
    .dash {
        display: grid;
        grid-template-columns: 1fr var(--rightrail-w);
        gap: 24px;
        align-items: start;
    }
    @media (max-width: 1180px) {
        .dash { grid-template-columns: 1fr; }
        .dash__rail { order: -1; }
    }

    .dash__main { min-width: 0; }

    .dash__rail {
        position: sticky;
        top: calc(var(--topbar-h) + 16px);
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: calc(100vh - var(--topbar-h) - 32px);
        overflow-y: auto;
        scrollbar-gutter: stable;
        padding-right: 4px;
    }
    .dash__rail::-webkit-scrollbar { width: 6px; }
    .dash__rail::-webkit-scrollbar-thumb {
        background: var(--color-gray-300, #d1d5db);
        border-radius: 3px;
    }

    /* ---------- Hero strip ---------- */
    .dash-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 18px;
    }
    @media (max-width: 720px) {
        .dash-hero { grid-template-columns: 1fr; }
    }

    .dash-hero__card {
        position: relative;
        padding: 18px 20px;
        border-radius: 16px;
        background: var(--surface-card);
        border: 1px solid var(--border-color, #e5e7eb);
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition:
            transform var(--dur-base) var(--ease-spring),
            box-shadow var(--dur-base) var(--ease-out),
            border-color var(--dur-fast) var(--ease-out);
    }
    .dash-hero__card:hover {
        transform: translateY(-2px);
        box-shadow: var(--elev-3);
    }
    .dash-hero__card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.08;
        background: radial-gradient(circle at top right, currentColor, transparent 60%);
        pointer-events: none;
    }
    .dash-hero__card--bull { color: var(--bull); border-color: rgba(22,163,74,0.25); }
    .dash-hero__card--bear { color: var(--bear); border-color: rgba(220,38,38,0.25); }

    .dash-hero__head {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        margin-bottom: 10px;
    }

    .dash-hero__body { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
    .dash-hero__ticker {
        font-size: var(--fs-2xl);
        font-weight: 800;
        letter-spacing: var(--tracking-tight);
        color: var(--text-primary);
        font-family: var(--font-mono);
    }
    .dash-hero__pct {
        font-size: var(--fs-xl);
        font-weight: 700;
    }
    .dash-hero__company {
        flex: 1 1 100%;
        font-size: var(--fs-sm);
        color: var(--text-muted);
        margin-top: 2px;
    }
    .dash-hero__headline {
        margin: 10px 0 0;
        font-size: var(--fs-sm);
        color: var(--text-secondary);
        line-height: var(--lh-snug);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dash-hero__spark {
        position: absolute;
        bottom: 10px;
        right: 14px;
        width: 88px;
        height: 36px;
        opacity: 0.85;
    }

    .dash-hero__skeleton {
        height: 134px;
        border-radius: 16px;
        background:
            linear-gradient(90deg,
                var(--surface-sunken) 0%,
                var(--surface-card) 50%,
                var(--surface-sunken) 100%);
        background-size: 200% 100%;
        animation: dash-shimmer 1.4s linear infinite;
        border: 1px solid var(--border-color, #e5e7eb);
    }

    /* ---------- Chip rail ---------- */
    .dash-section__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 18px 0 8px;
    }
    .dash-section__title {
        margin: 0;
        font-size: var(--fs-md, 16px);
        font-weight: 700;
        color: var(--text-primary);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .dash-section__title i { color: var(--brand-700); font-size: 13px; }
    .dash-section__count {
        font-size: var(--fs-xs, 12px);
        font-weight: 600;
        color: var(--text-muted);
        background: var(--surface-sunken);
        padding: 2px 8px;
        border-radius: 999px;
    }

    .dash-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding: 6px 0 14px;
        margin-bottom: 6px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    }
    .dash-chips::-webkit-scrollbar { display: none; }

    /* Second, collapsed row for the industry chips (opened by the Filter chip).
       A sibling of the scroller, not a popover — the scroller clips overflow. */
    .dash-chips__more {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 0 12px;
        margin-top: -6px;
    }
    .dash-chips__more[hidden] { display: none !important; }
    .dash-chip[data-kind="filter"] .dash-chip__count { background: var(--brand-50); color: var(--brand-700); }
    /* Guests have no watchlist to filter by. */
    body[data-cmm-guest="1"] .dash-chip[data-kind="watchlist"] { display: none !important; }

    .dash-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        background: var(--surface-card);
        border: 1px solid var(--border-color, #e5e7eb);
        color: var(--text-secondary);
        font-size: var(--fs-sm);
        font-weight: 500;
        cursor: pointer;
        transition:
            background var(--dur-fast) var(--ease-out),
            color var(--dur-fast) var(--ease-out),
            border-color var(--dur-fast) var(--ease-out),
            transform var(--dur-fast) var(--ease-out);
        white-space: nowrap;
    }
    .dash-chip:hover {
        background: var(--brand-50);
        border-color: var(--brand-300);
        color: var(--brand-700);
    }
    .dash-chip:active { transform: scale(0.97); }
    .dash-chip:focus-visible {
        outline: none;
        box-shadow: var(--elev-glow-brand);
        border-color: var(--brand-500);
    }
    .dash-chip__count {
        font-size: 10px;
        background: var(--surface-sunken);
        padding: 1px 6px;
        border-radius: 999px;
        color: var(--text-muted);
    }
    .dash-chip.is-active {
        background: var(--brand-600);
        border-color: var(--brand-600);
        color: #fff;
    }
    .dash-chip.is-active .dash-chip__count {
        background: rgba(255,255,255,0.22);
        color: #fff;
    }
    .dash-chip[data-key="bullish"].is-active { background: var(--bull); border-color: var(--bull); }
    .dash-chip[data-key="bearish"].is-active { background: var(--bear); border-color: var(--bear); }

    /* ---------- Signal feed ---------- */
    .dash-feed {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dash-card {
        position: relative;
        display: grid;
        grid-template-columns: 76px 1fr auto;
        gap: 16px;
        padding: 14px 18px;
        background: var(--surface-card);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 14px;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        contain: layout paint;
        content-visibility: auto;
        contain-intrinsic-size: 0 110px;
        transition:
            transform var(--dur-fast) var(--ease-out),
            box-shadow var(--dur-fast) var(--ease-out),
            border-color var(--dur-fast) var(--ease-out);
    }
    .dash-card:hover {
        transform: translateY(-1px);
        box-shadow: var(--elev-2);
        border-color: var(--brand-200);
    }
    .dash-card:focus-visible {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: var(--elev-glow-brand);
    }
    .dash-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--neutral);
        transition: background var(--dur-fast) var(--ease-out);
    }
    .dash-card[data-dir="bullish"]::before { background: var(--bull); }
    .dash-card[data-dir="bearish"]::before { background: var(--bear); }

    .dash-card__ticker {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
    }
    .dash-card__sym {
        font-family: var(--font-mono);
        font-weight: 800;
        font-size: var(--fs-md);
        letter-spacing: var(--tracking-tight);
        color: var(--text-primary);
    }
    .dash-card__industry {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        color: var(--text-muted);
        line-height: 1;
    }

    /* "since posted" qualifier on the move % — clarifies it's a hypothetical
       educational snapshot, not a return (shared with news-strip cards). */
    .dash-card__pct-since {
        margin-left: 4px;
        font-size: 9px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        opacity: 0.85;
    }

    /* Hover-reveal "save bookmark" on a signal card (card is position:relative). */
    .dash-card__bookmark {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: var(--surface-card);
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        opacity: 0;
        transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
        z-index: 4;
    }
    .dash-card:hover .dash-card__bookmark,
    .dash-card__bookmark:focus-visible { opacity: 1; }
    .dash-card__bookmark:hover { color: var(--brand-600); background: var(--brand-50, #eef2ff); }
    .dash-card__bookmark.is-saved { opacity: 1; color: var(--brand-600); }
    /* Ticker chip (.cmm-ticker), app-wide. The chip is clickable (opens the
       ticker's page) and reveals a shared hover menu (#cmmTickerMenu) with
       watchlist + view actions. The old inline "+/✓" button is retired. */
    .cmm-ticker {
        display: inline-flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        border-radius: 5px;
        transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .cmm-ticker:hover { color: var(--brand-600, #6366f1); }
    .cmm-ticker:focus-visible {
        outline: 2px solid var(--brand-500, #8b5cf6);
        outline-offset: 1px;
    }
    /* A faint dot marks a watchlisted ticker once membership is known. */
    .cmm-ticker.is-watchlisted::after {
        content: "";
        width: 4px; height: 4px;
        margin-left: 4px;
        border-radius: 50%;
        background: var(--bull, #10b981);
        flex: none;
    }

    /* ---- Shared hover/focus menu (one element, body-anchored) ---- */
    .cmm-ticker-menu {
        position: absolute;
        z-index: 1200;
        min-width: 188px;
        padding: 5px;
        border-radius: 11px;
        background: var(--surface-overlay, var(--surface-card, #fff));
        border: 1px solid var(--border-color, rgba(0,0,0,0.1));
        box-shadow: 0 10px 30px -8px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.12);
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
        transform-origin: top left;
        transition: opacity var(--dur-fast, 0.14s) var(--ease-out, ease),
                    transform var(--dur-fast, 0.14s) var(--ease-out, ease);
        pointer-events: none;
    }
    .cmm-ticker-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .cmm-ticker-menu[hidden] { display: none; }
    .cmm-ticker-menu__item {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 8px 10px;
        border: none;
        border-radius: 7px;
        background: transparent;
        color: var(--text-primary);
        font-size: var(--fs-sm, 0.85rem);
        text-align: left;
        cursor: pointer;
        transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .cmm-ticker-menu__item > i { width: 15px; text-align: center; color: var(--text-muted); flex: none; }
    .cmm-ticker-menu__item:hover { background: color-mix(in srgb, var(--brand-600) 12%, transparent); }
    .cmm-ticker-menu__item:hover > i { color: var(--brand-600); }
    .cmm-ticker-menu__item.is-remove:hover { background: color-mix(in srgb, var(--bear, #ef4444) 13%, transparent); color: var(--bear, #ef4444); }
    .cmm-ticker-menu__item.is-remove:hover > i { color: var(--bear, #ef4444); }
    /* In-flight: dim + lock, but keep the spinner readable (don't fade it out). */
    .cmm-ticker-menu__item.is-busy { pointer-events: none; }
    .cmm-ticker-menu__item.is-busy > span { opacity: 0.7; }
    /* Success flash: green check, settles back to the resting menu after ~0.95s. */
    .cmm-ticker-menu__item.is-done,
    .cmm-ticker-menu__item.is-done > i { color: var(--bull, #10b981); }
    .cmm-ticker-menu__item.is-done > i { transform: scale(1); animation: cmm-ticker-pop var(--dur-fast, 0.18s) var(--ease-out, ease); }
    .cmm-ticker-menu__item.is-error { background: color-mix(in srgb, var(--bear, #ef4444) 16%, transparent); color: var(--bear, #ef4444); }
    .cmm-ticker-menu__item.is-error > i { color: var(--bear, #ef4444); }
    /* Spinner for the in-flight watchlist write (self-contained, no FA-spin dependency). */
    .cmm-ticker-menu__item .cmm-spin { animation: cmm-ticker-spin 0.6s linear infinite; }

    @keyframes cmm-ticker-spin { to { transform: rotate(360deg); } }
    @keyframes cmm-ticker-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

    @media (prefers-reduced-motion: reduce) {
        .cmm-ticker-menu { transition: opacity var(--dur-fast, 0.14s) linear; transform: none; }
        .cmm-ticker-menu.is-open { transform: none; }
        .cmm-ticker-menu__item .cmm-spin { animation: none; }
        .cmm-ticker-menu__item.is-done > i { animation: none; }
    }

    .dash-card__body { min-width: 0; }
    .dash-card__row1 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }
    .dash-card__dir {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
    }
    .dash-card[data-dir="bullish"] .dash-card__dir { color: var(--bull); }
    .dash-card[data-dir="bearish"] .dash-card__dir { color: var(--bear); }

    .dash-card__pct {
        font-weight: 700;
        font-size: var(--fs-md);
    }
    .dash-card[data-dir="bullish"] .dash-card__pct { color: var(--bull); }
    .dash-card[data-dir="bearish"] .dash-card__pct { color: var(--bear); }

    .dash-card__pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
        border-radius: 999px;
    }
    .dash-card__pill--live {
        background: var(--bull-soft);
        color: var(--bull-strong);
    }
    .dash-card__pill--live::before {
        content: "";
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--bull);
        animation: dash-pulse 1.6s var(--ease-out) infinite;
    }
    .dash-card__headline {
        font-size: var(--fs-sm);
        line-height: var(--lh-snug);
        color: var(--text-primary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dash-card__time {
        font-size: var(--fs-xs);
        color: var(--text-muted);
        margin-top: 4px;
    }

    .dash-card__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        min-width: 56px;
    }
    /* "How pressing" the news is — a hot/cold SEGMENT meter. Bars rise
       cold->hot; lit count = current (age-decayed) heat. Descriptive, not a
       magnitude/forecast. Hovering it opens .cmm-heatpop (see below); the old
       `cursor: help` '?' cursor is gone — it inherits the card's pointer. */
    .cmm-heatmeter {
        display: inline-flex;
        align-items: flex-end;
        gap: 2px;
        height: 14px;
        vertical-align: middle;
    }
    .cmm-heatmeter__seg {
        width: 4px;
        border-radius: 1px;
        opacity: 0.2;
        transition: opacity var(--dur-fast) var(--ease-out);
    }
    .cmm-heatmeter__seg.is-lit { opacity: 1; }
    .cmm-heatmeter__seg--0 { height: 6px;  background: #3b82f6; }
    .cmm-heatmeter__seg--1 { height: 8px;  background: #38bdf8; }
    .cmm-heatmeter__seg--2 { height: 10px; background: #f59e0b; }
    .cmm-heatmeter__seg--3 { height: 12px; background: #f97316; }
    .cmm-heatmeter__seg--4 { height: 14px; background: #ef4444; }

    /* Animated hover popup for the heat meter (initHeatPopup, dashboard-v2-init.js).
       One instance, appended to <body> and fixed-positioned per hover, so it is
       never clipped by the cards' overflow:hidden. Replaces the native `title`. */
    .cmm-heatpop {
        position: fixed;
        z-index: 9999;
        /* max-content (capped) makes the width depend on the CONTENT, never on
           the available viewport width — a left-only fixed box would otherwise
           shrink to min-content (one narrow column). */
        width: max-content;
        max-width: 260px;
        box-sizing: border-box;
        padding: 10px 12px;
        background: var(--surface-card, #fff);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 10px;
        box-shadow: var(--elev-2, 0 10px 26px rgba(0, 0, 0, 0.14));
        color: var(--text-primary, #111827);
        font-size: 12px;
        line-height: 1.45;
        pointer-events: none;             /* purely informational — never blocks clicks */
        opacity: 0;
        transform: translateY(5px) scale(0.97);
        transition: opacity var(--dur-fast, 150ms) var(--ease-out, ease),
                    transform var(--dur-fast, 150ms) var(--ease-out, ease);
    }
    .cmm-heatpop.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .cmm-heatpop__title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 12px;
        margin-bottom: 5px;
    }
    .cmm-heatpop__title i { color: #f97316; font-size: 11px; }
    .cmm-heatpop__level {
        font-size: 11px;
        color: var(--text-secondary, #4b5563);
        margin-bottom: 6px;
    }
    .cmm-heatpop__level strong { color: var(--text-primary, #111827); font-weight: 700; }
    .cmm-heatpop__body { color: var(--text-secondary, #4b5563); }
    .cmm-heatpop__foot {
        margin-top: 7px;
        padding-top: 6px;
        border-top: 1px solid var(--border-color, #e5e7eb);
        font-size: 10.5px;
        color: var(--text-muted, #9ca3af);
    }

    .dash-card__skeleton {
        height: 110px;
        background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-card) 50%, var(--surface-sunken) 100%);
        background-size: 200% 100%;
        animation: dash-shimmer 1.4s linear infinite;
        border-radius: 14px;
        border: 1px solid var(--border-color, #e5e7eb);
    }

    .dash-feed__empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
    }
    .dash-feed__empty i { font-size: 28px; margin-bottom: 10px; opacity: 0.45; display: block; }
    .dash-feed__empty span { display: block; margin-bottom: 14px; }
    .dash-feed__retry {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        font: inherit;
        font-size: var(--fs-sm, 14px);
        font-weight: 600;
        color: var(--brand-700, #6d28d9);
        background: var(--surface-card, #fff);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 8px;
        cursor: pointer;
        transition: background var(--dur-fast, 150ms) var(--ease-out, ease);
    }
    .dash-feed__retry:hover { background: var(--surface-sunken, #f9fafb); }
    .dash-feed__retry:focus-visible {
        outline: 2px solid var(--brand-500, #8b5cf6);
        outline-offset: 2px;
    }
    .dash-feed__retry i { font-size: 12px; margin: 0; opacity: 1; display: inline; }

    /* ---------- Infinite-scroll status footer ---------- */
    /* Rendered after the IntersectionObserver sentinel: an invisible idle state,
       a spinner while the next page loads, and an "all caught up" end marker so
       the reader can tell the flow finished rather than silently stalled. */
    .dash-feed__sentinel { height: 1px; }
    .dash-feed__more {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 18px 20px 8px;
        color: var(--text-muted, #9ca3af);
        font-size: var(--fs-sm, 14px);
    }
    .dash-feed__more[data-state="idle"] { padding: 0; }
    .dash-feed__spinner,
    .dash-feed__end { display: inline-flex; align-items: center; gap: 8px; }
    .dash-feed__spinner i { color: var(--brand-500, #8b5cf6); }
    .dash-feed__end { opacity: 0.7; }

    @keyframes dash-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    @keyframes dash-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: 0.55; transform: scale(0.85); }
    }

    /* ---------- Right rail panels ---------- */
    .rail-panel {
        background: var(--surface-card);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 14px;
        overflow: hidden;
        /* Don't let the rail's flex column compress panels: with overflow:hidden a
           flex child's min-height resolves to 0, so a tall rail would shrink + clip
           panels instead of overflowing. flex-shrink:0 keeps full height so the
           rail's own overflow-y:auto scrollbar engages and all content is reachable. */
        flex-shrink: 0;
        transition: box-shadow var(--dur-base) var(--ease-out);
    }
    .rail-panel:hover { box-shadow: var(--elev-1); }
    .rail-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        gap: 10px;
    }
    .rail-panel__title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        margin-right: auto;
    }
    .rail-panel__title i { color: var(--brand-600); width: 16px; text-align: center; }
    .rail-panel__count {
        font-size: 10px;
        font-weight: 700;
        background: var(--surface-sunken);
        color: var(--text-muted);
        padding: 2px 7px;
        border-radius: 999px;
    }
    /* Watchlist settings cog — opens full watchlist management. */
    .rail-panel__cog {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        color: var(--text-muted);
        font-size: 13px;
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .rail-panel__cog:hover { color: var(--brand-600); background: var(--brand-50, #eef2ff); }
    /* Panels render at full content height; the whole rail (.dash__rail) scrolls
       as one column. No per-panel cap/scrollbar — avoids nested scroll boxes that
       hid content with no obvious way to "see more". */
    .rail-panel__body {
        padding: 0 14px 14px;
        font-size: var(--fs-sm);
    }

    .rail-market-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        font-size: var(--fs-sm);
    }
    .rail-market-row:last-child { border-bottom: none; }
    .rail-market-row__name { color: var(--text-secondary); }
    .rail-market-row__pct { font-weight: 700; font-family: var(--font-mono); }
    .rail-market-row__pct--bull { color: var(--bull); }
    .rail-market-row__pct--bear { color: var(--bear); }

    .rail-mini-card {
        display: grid;
        grid-template-columns: 48px 1fr auto;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        align-items: center;
        font-size: var(--fs-xs);
    }
    .rail-mini-card:last-child { border-bottom: none; }
    .rail-mini-card__sym {
        font-family: var(--font-mono);
        font-weight: 700;
        color: var(--text-primary);
    }
    .rail-mini-card__title {
        color: var(--text-secondary);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rail-mini-card__pct {
        font-family: var(--font-mono);
        font-weight: 700;
    }
    .rail-mini-card__pct--bull { color: var(--bull); }
    .rail-mini-card__pct--bear { color: var(--bear); }

    /* ---------- Market regime badge + popover (Markets panel) ---------- */
    .rail-panel[data-panel="markets"] { position: relative; }
    .rail-regime {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-left: auto;
        padding: 3px 9px;
        border-radius: 999px;
        border: 1px solid transparent;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1.4;
        cursor: pointer;
        transition: filter 0.15s ease, transform 0.1s ease;
    }
    .rail-regime:hover { filter: brightness(1.05); }
    .rail-regime:active { transform: scale(0.97); }
    .rail-regime:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
    .rail-regime i { font-size: 11px; }
    .rail-regime--up      { color: var(--bull, #16a34a); background: color-mix(in srgb, var(--bull, #16a34a) 12%, transparent); border-color: color-mix(in srgb, var(--bull, #16a34a) 32%, transparent); }
    .rail-regime--down    { color: var(--bear, #dc2626); background: color-mix(in srgb, var(--bear, #dc2626) 12%, transparent); border-color: color-mix(in srgb, var(--bear, #dc2626) 32%, transparent); }
    .rail-regime--neutral { color: #b45309;             background: color-mix(in srgb, #f59e0b 14%, transparent);             border-color: color-mix(in srgb, #f59e0b 38%, transparent); }

    /* Market regime modal — centered overlay (mirrors the alerts/learn modal). */
    .cmm-regime-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        transition: opacity 0.2s var(--ease-out, ease);
    }
    .cmm-regime-modal[hidden] { display: none; }
    .cmm-regime-modal.is-open { opacity: 1; }
    .cmm-regime-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(10, 12, 20, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .cmm-regime-modal__panel {
        position: relative;
        width: min(440px, 100%);
        max-height: 85vh;
        overflow-y: auto;
        background: var(--surface-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: var(--elev-3, 0 24px 64px rgba(0, 0, 0, 0.35));
        transform: translateY(10px) scale(0.985);
        transition: transform 0.2s var(--ease-out, ease);
    }
    .cmm-regime-modal.is-open .cmm-regime-modal__panel { transform: none; }
    .cmm-regime-modal__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--border-color);
    }
    .cmm-regime-modal__title {
        margin: 0;
        font-size: var(--fs-lg, 1.125rem);
        font-weight: 700;
        color: var(--text-primary);
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .cmm-regime-modal__title i { color: var(--brand-700); }
    .cmm-regime-modal__close {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border: none;
        cursor: pointer;
        background: transparent;
        color: var(--text-muted);
        border-radius: 8px;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.12s ease, color 0.12s ease;
    }
    .cmm-regime-modal__close:hover { background: var(--surface-sunken); color: var(--text-primary); }
    .cmm-regime-modal__body { padding: 18px; }

    .cmm-regime-modal__hero {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        margin-bottom: 14px;
        border: 1px solid transparent;
    }
    .cmm-regime-modal__hero--up      { background: color-mix(in srgb, var(--bull, #16a34a) 10%, transparent); border-color: color-mix(in srgb, var(--bull, #16a34a) 30%, transparent); }
    .cmm-regime-modal__hero--down    { background: color-mix(in srgb, var(--bear, #dc2626) 10%, transparent); border-color: color-mix(in srgb, var(--bear, #dc2626) 30%, transparent); }
    .cmm-regime-modal__hero--neutral { background: color-mix(in srgb, #f59e0b 12%, transparent);             border-color: color-mix(in srgb, #f59e0b 34%, transparent); }
    .cmm-regime-modal__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
    .cmm-regime-modal__hero--up .cmm-regime-modal__dot      { background: var(--bull, #16a34a); }
    .cmm-regime-modal__hero--down .cmm-regime-modal__dot    { background: var(--bear, #dc2626); }
    .cmm-regime-modal__hero--neutral .cmm-regime-modal__dot { background: #f59e0b; }
    .cmm-regime-modal__label { font-size: var(--fs-md, 1rem); font-weight: 800; letter-spacing: 0.01em; }
    .cmm-regime-modal__hero--up .cmm-regime-modal__label      { color: var(--bull, #16a34a); }
    .cmm-regime-modal__hero--down .cmm-regime-modal__label    { color: var(--bear, #dc2626); }
    .cmm-regime-modal__hero--neutral .cmm-regime-modal__label { color: #b45309; }
    .cmm-regime-modal__score { margin-left: auto; font-size: var(--fs-xs, 0.78rem); font-weight: 600; color: var(--text-muted); }
    .cmm-regime-modal__sentiment { margin: 0 0 14px; color: var(--text-secondary, var(--text-primary)); line-height: 1.5; }
    .cmm-regime-modal__subhead { margin: 0 0 8px; font-size: var(--fs-xs, 0.74rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .cmm-regime-modal__factors { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
    .cmm-regime-modal__factor { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm, 0.9rem); color: var(--text-secondary, var(--text-primary)); }
    .cmm-regime-modal__factor i { font-size: 14px; flex-shrink: 0; }
    .cmm-regime-modal__factor.is-on i  { color: var(--bull, #16a34a); }
    .cmm-regime-modal__factor.is-off   { color: var(--text-muted); }
    .cmm-regime-modal__factor.is-off i { color: var(--text-muted); }
    .cmm-regime-modal__mom { display: flex; gap: 18px; margin-bottom: 14px; font-size: var(--fs-sm, 0.9rem); color: var(--text-secondary, var(--text-primary)); font-family: var(--font-mono); }
    .cmm-regime-modal__mom-k { color: var(--text-muted); font-family: inherit; margin-right: 5px; }
    .cmm-regime-modal__note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; font-size: var(--fs-sm, 0.88rem); color: #b45309; background: color-mix(in srgb, #f59e0b 12%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 34%, transparent); }
    .cmm-regime-modal__note i { margin-top: 2px; flex-shrink: 0; }
    .cmm-regime-modal__foot { margin: 0; font-size: var(--fs-xs, 0.78rem); color: var(--text-muted); line-height: 1.55; border-top: 1px solid var(--border-color); padding-top: 12px; }
    @media (prefers-reduced-motion: reduce) {
        .cmm-regime-modal, .cmm-regime-modal__panel { transition: none; }
    }
}

/* --- Hero empty state + HOLD de-emphasis (added 2026-05-11) --- */
.dash-hero__card--empty {
    cursor: default;
    background: var(--surface-card);
    color: var(--text-secondary);
    opacity: 0.85;
}
.dash-hero__card--empty:hover { transform: none; box-shadow: var(--elev-1); }
.dash-hero__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    color: var(--text-muted);
    text-align: center;
    gap: 8px;
    min-height: 120px;
}
.dash-hero__empty i { font-size: 22px; opacity: 0.5; }
.dash-hero__empty p { margin: 0; font-size: 13px; }
/* HOLD/neutral cards: muted accent */
.dash-card[data-dir="neutral"] { opacity: 0.92; }
.dash-card[data-dir="neutral"]::before { background: var(--border-color, #e5e7eb); }
.dash-card[data-dir="neutral"] .dash-card__dir { color: var(--text-muted); }
.dash-card[data-dir="neutral"] .dash-card__pct { color: var(--text-muted); }
/* Locked teaser: the read is withheld with the body, so the row is quiet like neutral. */
.dash-card[data-dir="locked"]::before { background: var(--border-color, #e5e7eb); }
.dash-card[data-dir="locked"] .dash-card__dir { color: var(--text-muted); }

/* Ranked-brief reason tags */
.dash-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.dash-card__tag {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    white-space: nowrap;
}
.dash-card__tag[data-tag="watchlist-match"] { background: var(--brand-50); color: var(--brand-700); }
.dash-card__tag[data-tag="same-sector"]     { background: var(--brand-50); color: var(--brand-700); }
.dash-card__tag[data-tag="breaking"]        { background: var(--bear-soft, var(--surface-sunken)); color: var(--bear-strong, var(--text-secondary)); }
.dash-card__tag[data-tag="high-impact"]     { background: var(--pro-soft, var(--surface-sunken)); color: var(--pro-strong); }
.dash-card__tag[data-tag="pro-brief"]       { background: transparent; color: var(--pro-strong); border: 1px solid var(--pro); }
.dash-card__tag[data-tag="already-moved"]   { color: var(--text-muted); }
.dash-card__tag[data-tag="market-wide"]     { color: var(--text-muted); }

/* ── "Updated" line on a story that moved on after it broke ──────────────
   Unlayered and carrying two classes on every coloured element: theme-dark.css
   resets span/p/a colour with unlayered `html.theme-dark <tag>` rules at
   specificity 0,1,2, so a single class inside @layer components silently loses
   in dark mode and renders as plain body text (CLAUDE.md gotcha 19). */
.dash-card .dash-card__updated {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.dash-card .dash-card__updated > i { color: var(--text-muted); font-size: 0.85em; }
.dash-card .dash-card__updated-label { font-weight: 600; color: var(--text-secondary); }
.dash-card .dash-card__updated-count { color: var(--text-muted); }
.dash-card .dash-card__updated-note {
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Market trend: colours that survive dark mode ───────────────────────
   Unlayered, two classes on every coloured element (CLAUDE.md gotcha 20):
   inside @layer the trend word rendered plain white in dark mode. Shared by
   the rail badge, its modal, the Markets page card and the Performance
   "market this week" sheet. Neutral amber is remapped per theme so it reads
   on both the light and the dark card. */
:root { --cmm-trend-neutral: #b45309; }
html.theme-dark { --cmm-trend-neutral: #fbbf24; }
.rail-regime.rail-regime--up span,
.rail-regime.rail-regime--down span,
.rail-regime.rail-regime--neutral span { color: inherit; }
.rail-regime.rail-regime--neutral { color: var(--cmm-trend-neutral); }
.cmm-regime-modal__hero .cmm-regime-modal__icon { font-size: 18px; width: 20px; text-align: center; }
.cmm-regime-modal__hero--up .cmm-regime-modal__icon,
.cmm-regime-modal__hero--up .cmm-regime-modal__label { color: var(--bull, #16a34a); }
.cmm-regime-modal__hero--down .cmm-regime-modal__icon,
.cmm-regime-modal__hero--down .cmm-regime-modal__label { color: var(--bear, #dc2626); }
.cmm-regime-modal__hero--neutral .cmm-regime-modal__icon,
.cmm-regime-modal__hero--neutral .cmm-regime-modal__label { color: var(--cmm-trend-neutral); }
.cmm-regime-modal__body .cmm-regime-modal__week { margin: 0 0 14px; font-size: var(--fs-sm, 0.9rem); }
.cmm-regime-modal__week .cmm-regime-modal__week-v { font-family: var(--font-mono); font-weight: 700; }
.cmm-regime-modal__week .cmm-regime-modal__week-v.is-bull { color: var(--bull, #16a34a); }
.cmm-regime-modal__week .cmm-regime-modal__week-v.is-bear { color: var(--bear, #dc2626); }
.cmm-regime-modal__factors .cmm-regime-modal__factor.is-off { color: var(--text-muted); }