/* BIG SCREENS (2026-11-01) — tablets and computers.
   The app is laid out for a phone; on anything 700px or wider the content
   sits in a centred column (up to --wide-col) instead of stretching edge to
   edge. Backgrounds (header, map, scrims) still fill the screen; what's
   pinned to the screen edges (header contents, ticker, FAB) lines up with
   the column; the tab bar becomes a centred pill; sheets get a readable
   width; Home's cards get fixed sizes so a lane shows several side by side.
   Phones never match, so nothing here changes the phone app. Loaded last. */
@media (min-width: 700px) {
    :root {
        --wide-col: 1000px;
        /* what's left either side of the column (0 on a tablet) */
        --wide-gut: max(0px, calc((100vw - var(--wide-col)) / 2));
    }

    /* ── the column ─────────────────────────────────────────────────── */
    /* Padding, not a narrower panel: the panel is the scroller, so the
       wheel still scrolls over the gutters and the scrollbar stays at the
       screen edge. Departures stays full width — it's a map. */
    #tab-dpad, #tab-shop {
        padding-left: calc(var(--wide-gut) + 20px);
        padding-right: calc(var(--wide-gut) + 20px);
    }
    /* passport-tab.css sets this panel's padding with !important */
    #tab-passport {
        padding-left: var(--wide-gut) !important;
        padding-right: var(--wide-gut) !important;
    }

    /* ── pinned to the edges → pinned to the column ─────────────────── */
    /* The header's bar keeps its full-width background; each control in
       it is absolutely placed from an edge, so each moves in by the gutter. */
    .currency-header > .profile-btn { left: calc(var(--wide-gut) + 12px); }
    .currency-header > .app-update-dot { left: calc(var(--wide-gut) + 37px); }
    .currency-header > .header-help-btn { left: calc(var(--wide-gut) + 56px); }
    .currency-header > .currency-pair { right: calc(var(--wide-gut) + 12px); }
    .currency-header > .header-boost-btn { right: calc(var(--wide-gut) + 105px); }
    .currency-header > .radio-toggle-btn { right: calc(var(--wide-gut) + 100px); }
    .nv-strip, .bf-strip { padding-left: calc(var(--wide-gut) + 14px); padding-right: calc(var(--wide-gut) + 14px); }
    #fabMenuWrapper { right: calc(var(--wide-gut) + 16px); left: auto; }
    #acPill { left: calc(var(--wide-gut) + 14px); right: calc(var(--wide-gut) + 14px); }

    /* The tab bar: a centred pill rather than a full-width strip. */
    #tabBar {
        left: 0; right: 0;
        margin-left: auto; margin-right: auto;
        max-width: 560px;
    }

    /* Sheets that slide up from the bottom: a readable width, centred. */
    #stamp-drawer, #radio-drawer, #hb-sheet, .catalogue-drawer, .bottom-sheet {
        left: 0; right: 0;
        margin-left: auto; margin-right: auto;
        max-width: 640px;
    }
    html body.dt-sv-sheet.dt-series-active .dt-series-view {
        margin-left: auto; margin-right: auto; max-width: 640px;
    }
    /* The app's pop-up windows (Your miles, friends, help, wallet…) were
       allowed to grow to 1200px. */
    .dpad-modal .modal-container { max-width: 720px; }
    /* panels that sit inside their own full-screen scrim */
    .card-detail-panel, .genre-lib-panel {
        width: 100%; max-width: 640px;
        margin-left: auto; margin-right: auto;
    }

    /* ── Home: cards a size, not a share of the screen ─────────────── */
    #home-board .hbs-hero { padding-left: 16px; padding-right: 16px; }
    #home-board .hbs-hero .hbs-hc.hbs-card { width: 560px; }
    #home-board .hbs-st.hbs-card { width: 420px; }
    #home-board .hbs-st { width: 200px; }
    #home-board .hbs-grid .hbs-st,
    #home-board .hbs-grid-cards .hbs-st.hbs-card { width: auto; }
    #home-board .hb-card { width: 420px; }
    #home-board .hb-lane.feat .hb-card { width: 460px; }
    #home-board .hb-lane .hb-card.exp { width: 560px; }
    #home-board .hb-card:only-child,
    #home-board .hb-lane .hb-card.exp:only-child { width: 100%; }
}