/* --- Page Background --- */
    body {
        background-color: #f4f6f8;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* --- Content Card --- */
    .content-card {
        background-color: #ffffff;
        border-radius: 16px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.03);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .content-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    /* --- Interactive Card (Replicates Calculators UI) --- */
    .interactive-card {
        cursor: pointer;
        position: relative;
        border: 1px solid transparent;
        transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    .interactive-card:hover {
        transform: translateY(-5px);
        border-color: #f7931a;
        box-shadow: 0 8px 20px rgba(247, 147, 26, 0.15) !important;
    }



    /* --- Alternate Background Variant (Gray Card) --- */
    .bg-alt {
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

    /* --- Typography --- */
    /* UPDATED: Converted to target h2 for semantic SEO */
    h2.section-title {
        font-size: 1.1em;
        font-weight: 700;
        color: #212529;
        margin-bottom: 5px;
        text-align: center;
        margin-top: 0;
    }

    /* --- Orange Divider --- */
    .divider-orange {
        width: 50px;
        margin: 15px auto;
        border-top: 2px solid #f7931a;
        opacity: 1;
    }

    /* --- Modern Pagination (Pills) --- */
    .page-link-modern {
        border-radius: 50px !important;
        margin: 2px;
        border: 1px solid transparent;
        font-weight: 500;
        transition: all 0.2s;
        padding: 6px 14px;
        font-size: 0.85rem;
    }

    .page-link-modern:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* --- CAPTION STYLING --- */
    .custom-caption {
        caption-side: top;
        text-align: center;
        font-size: 0.9em;
        margin-bottom: 10px;
        color: #6c757d;
        font-weight: 600;
    }

    /* --- STANDARD CHART TABLE (Desktop Default) --- */
    .table-chart th,
    .table-chart td {
        font-size: 0.8em;
        padding: 8px;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* --- ASSETS TABLE (Super Compact Desktop) --- */
    .table-super-compact {
        width: 100%;
        font-size: 0.8rem;
    }

    .table-super-compact th {
        font-weight: 700;
        color: #495057;
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        vertical-align: bottom !important;
        text-align: center;
        white-space: normal;
        padding: 8px 4px;
        line-height: 1.1;
    }

    .table-super-compact td {
        vertical-align: middle !important;
        padding: 8px 4px;
        border-top: 1px solid #f1f3f5;
        white-space: nowrap;
    }

    .col-symbol {
        font-weight: 600;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- POWER LAW CARD STYLES (#107 Part B) --- */
    .pl-card-headline {
        font-family: monospace;
        font-weight: 700;
        color: #212529;
        line-height: 1.1;
        white-space: nowrap;
        /* #133 follow-up: at 1.4rem this text wraps to 2 lines on every
           tested viewport, including desktop — the card's own column width
           (~299-312px content area at desktop 3-card / 390 / 844x390,
           measured with canvas.measureText, monospace bold) is narrower
           than the ~336-350px "X.XX yrs ahead of support" needs, and
           desktop's 3-column squeeze (col-lg-4 of a 1250px max container)
           is actually the TIGHTEST of the tested widths, not the roomiest —
           a plain mobile-only breakpoint would have missed it. clamp()
           floor/ceiling picked with margin against the worst case
           (2-digit years, "ahead" is the longer of the two suffixes) at
           each tested width; verified by direct DOM measurement (not just
           this formula) — measurement table on PR #133
           (github.com/RACOMAX/rmxbitcoin/pull/133). */
        font-size: clamp(0.95rem, 4.5vw, 1.1rem);
    }

    .pl-card-phase-label {
        font-size: 0.95rem;
        font-weight: 700;
        margin-top: 4px;
        /* #128 follow-up: the label text itself stays the page's default
           dark color (inherited) rather than phase_color — on the card's
           white background, phase_color as TEXT fails WCAG AA for every
           ramp tone (sky 2.14:1, emerald 2.54:1, slate 2.56:1, amber
           2.15:1, red 3.76:1; the old neutral grey it replaced passed at
           4.69:1). The tone is carried by the dot below instead, which has
           no text-contrast requirement. */
    }

    .pl-phase-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 4px;
    }

    .pl-phase-bar {
        position: relative;
        display: flex;
        width: 100%;
        height: 10px;
        border-radius: 6px;
        overflow: hidden;
        margin-top: 12px;
    }

    .pl-phase-band {
        height: 100%;
    }

    .pl-phase-marker {
        position: absolute;
        top: -3px;
        width: 2px;
        height: 16px;
        background: #212529;
        transform: translateX(-1px);
        box-shadow: 0 0 0 2px #fff;
    }

    .pl-sigma-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 50px;
        /* #128: white text fails WCAG AA (2.1-3.8:1) against every tone in
           the platform's valuation ramp, including the current red
           (#ef4444, 3.76:1) — a regression from the old red (#dc3545,
           4.53:1) this fix replaces. Pure black clears AA (>=4.5:1) against
           all five ramp colors; #212529 (the card's usual near-black)
           falls just short on red (4.10:1), so this uses true black
           instead. */
        color: #000;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    /* --- HALVING TRACKER STYLES --- */
    .halving-stat-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #adb5bd;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .halving-stat-val {
        font-family: monospace;
        font-size: 1.2rem;
        font-weight: 700;
        color: #212529;
    }

    .halving-progress-bg {
        width: 100%;
        height: 12px;
        background-color: #e9ecef;
        border-radius: 6px;
        overflow: hidden;
        margin: 20px 0 10px 0;
    }

    .halving-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #f7931a 0%, #ffb347 100%);
        width: 0%;
        transition: width 1.5s ease-in-out;
    }

    /* --- SIGNALS BRIEFING CARD (#134, redesigned #207) ---
       Scoped tokens: one type scale, one spacing scale, one set of
       state tones — everything below draws from these instead of picking
       new numbers per rule (#207 addendum 5848735502, "Consistency"). */
    .signals-card {
        padding: 18px 25px;
        --signals-fs-xs: 0.7rem;
        --signals-fs-sm: 0.78rem;
        --signals-fs-md: 0.88rem;
        --signals-fs-lg: 1rem;
        --signals-sp-1: 4px;
        --signals-sp-2: 8px;
        --signals-sp-3: 12px;
        --signals-sp-4: 18px;
        --signals-ink: #212529;
        --signals-ink-soft: #495057;
        --signals-ink-muted: #5d6470;
        --signals-border: #e9ecef;
        --signals-tap: 44px;
        --signals-up: #146c43;
        --signals-up-bg: #e6f4ec;
        --signals-down: #b02a37;
        --signals-down-bg: #fbe7e9;
        --signals-neutral: #495057;
        --signals-neutral-bg: #eceef0;
        --signals-warn: #a15c00;
        --signals-warn-bg: #fdf1e0;
    }

    .signals-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--signals-sp-2);
        cursor: pointer;
        list-style: none;
        min-height: var(--signals-tap);
        min-width: 0;
    }

    .signals-summary::-webkit-details-marker {
        display: none;
    }

    .signals-summary-line {
        /* PR #146 review 5323944281: nowrap+ellipsis used to clip the
           changed-today count, the fetched/staleness marker and the
           unavailable reason at 375px — the only things a phone user sees
           on this card. Wrapping (not truncating) is what keeps them
           readable at any width, never horizontally scrollable. */
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--signals-sp-1) var(--signals-sp-2);
        font-weight: 600;
        font-size: var(--signals-fs-md);
        color: var(--signals-ink);
        min-width: 0;
    }

    .signals-summary-group {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--signals-sp-1) var(--signals-sp-2);
        min-width: 0;
    }

    .signals-label {
        font-weight: 700;
    }

    .signals-sep {
        color: #ced4da;
        margin: 0 2px;
    }

    .signals-glyph {
        font-weight: 700;
    }

    /* --- The asset is the anchor, everywhere it appears: summary bar and
       column heading alike (#207 addendum 5849626125, item 1). --- */
    .signals-ticker {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-variant-numeric: tabular-nums;
        color: var(--signals-ink);
    }

    /* Ticker + status chip travel as one unit so they wrap together, never
       splitting the asset from its own verdict (addendum item 2). */
    .signals-verdict {
        display: inline-flex;
        align-items: center;
        gap: var(--signals-sp-1);
        white-space: nowrap;
    }

    /* Meta reads quieter than the asset/status pair beside it, set apart by
       a visible divider (addendum item 3). */
    .signals-summary-meta {
        font-size: var(--signals-fs-sm);
        font-weight: 400;
        color: var(--signals-ink-muted);
        padding-left: var(--signals-sp-2);
        border-left: 1px solid var(--signals-border);
    }

    .signals-asof {
        color: var(--signals-ink-muted);
        font-weight: 500;
        white-space: nowrap;
    }

    .signals-asof.signals-stale {
        color: var(--signals-warn);
        font-weight: 700;
    }

    .signals-new-marker {
        display: none;
        color: var(--signals-warn);
        font-weight: 700;
        font-size: var(--signals-fs-xs);
        border-radius: 3px;
    }

    .signals-new-marker.show {
        display: inline;
    }

    .signals-expand-hint {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .signals-details-label {
        font-size: var(--signals-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--signals-ink-muted);
    }

    .signals-chevron {
        flex: 0 0 auto;
        display: inline-block;
        transition: transform 0.2s ease;
        color: var(--signals-ink-muted);
    }

    #signalsBriefingDetails[open] .signals-chevron {
        transform: rotate(90deg);
    }

    .signals-expanded {
        margin-top: var(--signals-sp-4);
        padding-top: 15px;
        border-top: 1px solid var(--signals-border);
    }

    .signals-col {
        margin-bottom: 20px;
    }

    /* --- Hierarchy (#207 addendum 5848735502): asset + verdict pill is the
       largest, first thing in a column; everything under it steps down. --- */
    .signals-col-head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--signals-sp-2);
        margin-bottom: var(--signals-sp-1);
    }

    .signals-col-title {
        font-size: var(--signals-fs-lg);
        font-weight: 800;
        color: var(--signals-ink);
        margin: 0;
    }

    /* --- One shared pill component for every state/verdict/badge, so a
       colour is never the only carrier — the word is always in the pill
       too (#207 addendum 5848735502, item 4). --- */
    .signals-verdict-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--signals-fs-md);
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        background: var(--signals-neutral-bg);
        color: var(--signals-neutral);
    }

    .signals-verdict-pill-up { background: var(--signals-up-bg); color: var(--signals-up); }
    .signals-verdict-pill-down { background: var(--signals-down-bg); color: var(--signals-down); }
    .signals-verdict-pill-flat,
    .signals-verdict-pill-mixed,
    .signals-verdict-pill-no_live_signal { background: var(--signals-neutral-bg); color: var(--signals-neutral); }

    .signals-stale-badge {
        font-size: var(--signals-fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--signals-warn-bg);
        color: var(--signals-warn);
        cursor: help;
    }

    .signals-col-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--signals-sp-1);
        margin-bottom: var(--signals-sp-2);
        min-width: 0;
    }

    .signals-mnav {
        font-size: var(--signals-fs-sm);
        font-weight: 600;
        margin-bottom: var(--signals-sp-3);
    }

    /* --- Rows with light dividers, one visual level — no boxes inside
       boxes (#207 addendum 5848735502, "Hierarchy"). Padding is
       sp-1 (not sp-2): the 44px tap floor on each reading already gives
       every row its own breathing room, so a second full spacing unit here
       just added dead space that made BTC's multi-chip column read far
       taller than MSTR's (design review 5327310185, item 5). --- */
    .signals-chip,
    .signals-chip-empty {
        border-bottom: 1px solid var(--signals-border);
        padding: var(--signals-sp-1) 0;
    }

    .signals-chip:last-child,
    .signals-chip-empty:last-child {
        border-bottom: none;
    }

    .signals-chip-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        min-height: var(--signals-tap);
    }

    .signals-chip-name {
        font-weight: 700;
        font-size: var(--signals-fs-sm);
    }

    /* #208: links to the public /signals explainer — deliberately quiet,
       never competing with the ticker/status hierarchy above it. */
    .signals-learn-more {
        font-size: var(--signals-fs-xs);
        font-weight: 500;
        color: var(--signals-ink-muted);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .signals-what-are-these {
        white-space: nowrap;
    }

    .signals-card [data-bs-toggle="tooltip"] {
        text-decoration: underline dotted;
        text-decoration-color: #adb5bd;
        text-underline-offset: 2px;
        cursor: help;
    }

    .signals-chip-status {
        font-size: var(--signals-fs-xs);
        text-transform: uppercase;
        color: var(--signals-ink-muted);
        font-weight: 700;
    }

    .signals-chip-empty {
        font-size: var(--signals-fs-sm);
        display: flex;
        align-items: center;
        min-height: var(--signals-tap);
    }

    .signals-reading {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px;
        font-size: var(--signals-fs-sm);
        color: var(--signals-ink-soft);
        /* Half signals-tap (design review round 2): this row isn't its own
           tap target — the chip head above it already is one — so
           Daily/Weekly don't need a full 44px each. Tightening this is
           what "keeping the dividers between groups" contrasts against:
           .signals-chip's own border/padding between signals is untouched. */
        min-height: calc(var(--signals-tap) / 2);
    }

    /* Daily/Weekly line up in their own column across every row and every
       column (#207 addendum 5848735502, "Consistency"). Small/muted/
       uppercase distinguishes the row label from its value, the chip or
       plain text beside it (#207 addendum 5849626125, item 4). */
    .signals-reading-tf {
        display: inline-block;
        min-width: 48px;
        font-size: var(--signals-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--signals-ink-muted);
    }

    .signals-reading-state {
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 8px;
        background: var(--signals-neutral-bg);
        color: var(--signals-neutral);
    }

    .signals-reading-state[data-tone="up"] { background: var(--signals-up-bg); color: var(--signals-up); }
    .signals-reading-state[data-tone="down"] { background: var(--signals-down-bg); color: var(--signals-down); }

    .signals-flip-badge {
        display: inline-block;
        background: #f7931a;
        color: #fff;
        font-size: var(--signals-fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 4px;
        padding: 1px 6px;
        cursor: help;
    }

    .signals-weekly-exit {
        border-top: 1px dashed var(--signals-border);
        margin-top: 2px;
        padding-top: 2px;
        width: 100%;
    }

    /* Fired/not-fired is a binary, not a state vocabulary — one pill, one
       word, colour is never the only carrier (review round 2: drop the
       "EXIT ... exit signal" repetition, put the mechanism in the tooltip
       instead of a second visible label). */
    .signals-exit-pill {
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 8px;
        background: var(--signals-neutral-bg);
        color: var(--signals-neutral);
    }

    .signals-exit-pill-fired {
        background: var(--signals-down-bg);
        color: var(--signals-down);
    }

    .signals-candidates {
        margin-top: var(--signals-sp-1);
    }

    .signals-candidates > summary {
        font-size: var(--signals-fs-sm);
        color: var(--signals-ink-muted);
        cursor: pointer;
        min-height: var(--signals-tap);
        display: flex;
        align-items: center;
    }

    /* --- Keyboard focus (#207 addendum 5848735502, "Touch and access"):
       every tooltip trigger and toggle in this card gets a visible ring —
       never relies on the browser default alone. --- */
    .signals-card summary:focus-visible,
    .signals-card [tabindex="0"]:focus-visible {
        outline: 2px solid #f7931a;
        outline-offset: 2px;
        border-radius: 3px;
    }

    @media (max-width: 576px) {
        .signals-summary-group {
            flex: 1 1 100%;
        }

        .signals-chip-head,
        .signals-reading {
            flex-wrap: wrap;
        }
    }

    /* --- MOBILE STYLES --- */
    @media (max-width: 576px) {
        .content-card {
            padding: 20px 10px;
        }

        .custom-caption {
            text-align: center;
            padding-left: 0;
        }

        .pagination {
            flex-wrap: wrap;
        }

        /* Chart Table Mobile Grid */
        .table-mobile-cards thead {
            display: none;
        }

        .table-mobile-cards tr {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 10px;
        }

        .table-mobile-cards tr:last-child {
            border-bottom: none;
        }

        .table-mobile-cards td {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 33.33%;
            border: none;
            padding: 10px 2px;
            font-size: 0.9em;
        }

        .table-mobile-cards td::before {
            content: attr(data-label);
            font-size: 0.7em;
            font-weight: 700;
            color: #adb5bd;
            margin-bottom: 4px;
            display: block;
        }

        /* Assets Table Mobile Cards */
        .table-assets-mobile-cards {
            display: block;
        }

        .table-assets-mobile-cards thead {
            display: none;
        }

        .table-assets-mobile-cards tbody {
            display: block;
        }

        .table-assets-mobile-cards tr {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            margin-bottom: 20px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            gap: 0 10px;
            position: relative;
        }

        .table-assets-mobile-cards tr::after {
            content: "";
            grid-column: 1 / -1;
            grid-row: 2;
            align-self: end;
            border-bottom: 1px solid #e9ecef;
            width: 100%;
            margin-bottom: 10px;
            pointer-events: none;
        }

        /* Asset Info */
        .table-assets-mobile-cards td[data-label="Symbol"] {
            grid-column: 1 / 3;
            grid-row: 1;
            font-size: 1.2em;
            font-weight: 800;
            color: #212529;
            text-align: left;
            border: none;
            padding: 0;
            display: flex;
            align-items: flex-end;
        }

        .table-assets-mobile-cards td[data-label="Symbol"]::before {
            display: none;
        }

        .table-assets-mobile-cards td[data-label="Price"] {
            grid-column: 1 / 3;
            grid-row: 2;
            font-size: 1.2em;
            font-weight: 600;
            font-family: monospace;
            text-align: left;
            border: none;
            padding: 2px 0 15px 0;
            margin-bottom: 10px;
        }

        .table-assets-mobile-cards td[data-label="Price"]::before {
            display: none;
        }

        /* Body Metrics — every other column (MTD/YTD/Div YTD/Last dividend/
           Declared rate/Forward yield) renders as a plain label:value row
           spanning half the card width. */
        .table-assets-mobile-cards td:not([data-label="Symbol"]):not([data-label="Price"]) {
            grid-column: span 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 5px;
            border: none;
            border-bottom: 1px solid #f8f9fa;
            font-size: 0.9em;
        }

        .table-assets-mobile-cards td:nth-of-type(odd) {
            border-right: 1px solid transparent;
        }

        .table-assets-mobile-cards td:not([data-label="Symbol"]):not([data-label="Price"])::before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
            margin-right: 5px;
            font-size: 0.85em;
        }
    }

/* --- STANDARD MODAL COMPONENT (Mirrors Calculators UI exactly) --- */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-bottom: 1px solid #f1f3f5;
    padding: 25px 30px;
    background-color: #e9ecef;
    border-radius: 16px 16px 0 0;
}

.modal-title {
    font-weight: 800;
    color: #212529;
}

.modal-body {
    padding: 30px;
    font-size: 1rem;
    line-height: 1.7;
    color: #495057;
}

.modal-footer {
    border-top: none;
    padding: 20px 30px;
}