/*
responsive.css
Role: responsive overrides.
Responsibility: viewport-specific layout, card, and modal adjustments.
Note: Modify only from the latest local file.
*/
@media (max-width: 1180px) {
    .market-grid-portfolio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .reader-shell {
        grid-template-columns: 280px 22px minmax(0, 1fr);
    }

    /* Stale grid-era topbar rules removed (topbar-right-stack, radio grid-column,
       topbar-secondary grid, forced pill wrap) — the new flex two-row layout handles
       narrowing on its own; pills wrap naturally on their own full-width row. */

    .market-grid-markets,
    .market-grid-commodities {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .topbar {
        padding-top: var(--space-md);
    }
    /* radio-player-shell width:100% and title-row wrap removed — they were grid-era
       rules that broke the new flex two-row layout (radio overlapped the title). */
}

/* Topbar widget hides are FIXED WIDTH (not geometry). Weather is leftmost so it hides
   first (<900), radio next (<780). Below 780 the burger replaces the pills row (the JS
   in initTopbarResponsive flips nav-collapsed at the same 780 via matchMedia). Fixed
   widths are required here: phone view (<500) wraps the icons under the title, and any
   trigger that measured those moving icons made the layout oscillate. Keep these in
   sync with the matchMedia breakpoints in shared_ui.js. */
@media (max-width: 950px) {
    #topbar-weather { display: none; }
}
/* Radio stays visible at ALL widths now (no longer hidden <780) — it slims to a compact
   one-row widget on phone instead. Height is reduced in the phone-mode block below. */

@media (max-width: 820px) {
    body {
        overflow: auto;
    }

    .app-wrap {
        height: auto;
        min-height: 100vh;
    }

    .reader-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .source-rail,
    .source-rail-divider {
        display: none;
    }

    .reader-content,
    .debug-content {
        overflow: visible;
        padding-right: 0;
    }

    .loading-shell-card {
        max-width: none;
    }

    /* Wider topbar margin-bottom at this breakpoint. (The status strip no longer
       depends on this — it sits at the live-measured --topbar-h regardless.) */
    :root {
        --topbar-mb: var(--space-md);
    }

    .topbar {
        padding-top: var(--space-sm);
        gap: var(--space-md);
    }

    .top-search-wrap {
        width: 100%;
        max-width: none;
    }

    .market-grid-portfolio {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .story-modal {
        --modal-left: 8px !important;
        --modal-top: 8px !important;
        --modal-width: calc(100vw - 16px) !important;
        --modal-height: calc(100vh - 16px) !important;
    }

    .story-modal-body {
        padding: 14px 16px 20px 16px;
    }

    .story-modal-toolbar {
        padding: var(--space-sm) 52px 0 12px;
    }

    .story-modal-position {
        order: -1;
        justify-self: center;
    }

    .story-modal-close {
        right: 12px;
    }

    .story-modal-title {
        font-size: 1.2rem;
    }

    .mode-pill {
        padding: 8px 11px;
        font-size: 0.8rem;
        min-width: 92px;
    }

    .story-modal-source-card-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .story-modal-signals-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .signal-card-bias-card {
        padding: var(--space-sm);
    }

    .card-meta-block {
        width: 100%;
    }

    .card-meta-line-signals {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .story-modal-image-wrap,
    .story-modal-source-image-wrap {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 var(--space-sm) 0;
    }
}