/* Loaded only at <=768px. Keep desktop layout and permission-driven visibility intact. */
@media (max-width: 768px) {
    body { min-width: 0; }
    .header { position: relative; padding: .75rem; gap: .65rem; flex-wrap: wrap; }
    .header h1 { white-space: normal; overflow-wrap: anywhere; font-size: 1.15rem; }
    .header-controls, .header-right { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: .5rem; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
        font-size: 16px !important; min-height: 44px; max-width: 100%; min-width: 0;
    }
    button, .back-link, .header a, .pdf-download, .filter-btn, .seg-tab {
        min-height: 44px; touch-action: manipulation;
    }
    .header a, .back-link, .pdf-download { display: inline-flex; align-items: center; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
    [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    /* Player reports: full-width search, with secondary tools behind a disclosure. */
    [data-page="reports"] .header h1 { flex: 1 0 100%; }
    #mobileToolsToggle { display: inline-flex !important; font-size: .9rem; }
    #reportToolbar {
        display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
        width: 100%; gap: .5rem !important;
    }
    #reportToolbar > * { min-width: 0; max-width: 100%; }
    #reportToolbar > :not(.search-box):not(#viewToggle):not(#authCornerBtn) { grid-column: 1 / -1; }
    .header:not(.mobile-tools-open) #reportToolbar > :not(.search-box):not(#viewToggle):not(#authCornerBtn),
    .header:not(.mobile-tools-open) .search-box > label { display: none !important; }
    #reportToolbar .search-box { grid-column: 1 / -1; grid-row: 1; width: 100%; flex-wrap: wrap; }
    #reportToolbar .search-box::before { top: 22px; }
    #reportToolbar #searchInput { flex: 1 0 100% !important; width: 100%; padding: .6rem .75rem .6rem 2.25rem; }
    #reportToolbar .search-box > label { width: 100%; justify-content: space-between; font-size: .9rem !important; }
    #minHandsInput { width: 90px !important; }
    #reportToolbar #sourceSelect, #reportToolbar .filter-select { max-width: 100%; width: 100%; }
    #reportToolbar #viewToggle { grid-row: 2; }
    #viewToggle button { flex: 1; font-size: .85rem; padding: .5rem .35rem; }
    #reportToolbar #authCornerBtn { grid-row: 2; font-size: .9rem !important; margin-left: 0 !important; }
    #reportToolbar .pop-btn { font-size: .9rem; padding: .5rem .75rem; }
    /* Restore useful links/actions hidden by the old blanket mobile CTA rule.
       Inline display:none continues to enforce authentication/capability gates. */
    #reportToolbar .cta-btn, #reportToolbar .help-btn { display: inline-flex; align-items: center; justify-content: center; }
    #reportToolbar .help-btn { width: auto; font-size: 1rem; }
    #reportToolbar .help-btn::after { content: " Help"; white-space: pre; }
    #reportToolbar #sourceLabel { font-size: .95rem; }

    /* Scroll the data, not pagination or the whole document. Keep player names in view. */
    [data-page="reports"] .table-wrap { padding: .5rem .5rem 1.5rem; min-width: 0; overflow: visible; }
    .mobile-table-hint { display: block !important; color: var(--text-secondary); font-size: .8rem; padding: .25rem .25rem .65rem; }
    .player-table-scroll { display: block !important; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
    table.players { font-size: .85rem; border-collapse: separate; border-spacing: 0; }
    table.players th, table.players td { font-size: .85rem; padding: .65rem .6rem; white-space: nowrap; height: 48px; }
    table.players thead th { position: static; top: auto; }
    table.players th:first-child, table.players td:first-child {
        position: sticky; left: 0; z-index: 2; background: var(--bg-primary);
        min-width: 145px; max-width: 155px; white-space: normal; overflow-wrap: anywhere;
        border-right: 1px solid var(--border);
    }
    table.players th:first-child { background: var(--bg-card); z-index: 3; }
    table.players td button { min-width: 44px; }
    .pagination { gap: .5rem; padding: 1rem .25rem; flex-wrap: wrap; }
    .pagination .page-info { flex: 1; min-width: 100px; text-align: center; }

    /* One scroll container per report, with a close action that stays reachable. */
    [data-page="reports"] .modal-backdrop { padding: 0; overflow: hidden; }
    [data-page="reports"] .modal {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        min-height: 0; height: 100%; height: 100dvh; max-height: 100%;
        border-radius: 0; display: flex; flex-direction: column; overflow: hidden; animation: none;
    }
    [data-page="reports"] .modal-header { flex-shrink: 0; padding: 1rem 4rem 1rem .85rem; max-height: 40%; overflow-y: auto; }
    [data-page="reports"] .modal-header h2 { font-size: 1.2rem; overflow-wrap: anywhere; min-width: 0; }
    [data-page="reports"] .modal-close { width: 44px; height: 44px; top: .5rem; right: .5rem; }
    [data-page="reports"] .modal-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .85rem; }
    [data-page="reports"] .modal-body > * { flex-shrink: 0; }
    [data-page="reports"] .modal-body > div:first-child { gap: .5rem !important; padding: .5rem !important; }
    .two-col, .stats-grid, .section-card, .sc-body { min-width: 0; }
    .sc-body { overflow-x: auto; }
    .m-table th, .m-table td { font-size: .8rem; padding: .45rem; }
    .seg-tabs { width: 100%; }
    .seg-tab { flex: 1 1 auto; }
    #authGate, #companionDialog, #uploadDialog, #extensionDialog {
        padding: .75rem; overflow-y: auto; overscroll-behavior: contain;
        align-items: flex-start !important;
    }
    #authGate > div, #companionDialog > div, #uploadDialog > div, #extensionDialog > div {
        width: 100% !important; min-width: 0; flex-shrink: 0; margin: auto;
        max-height: none; overflow: visible !important;
    }
    #authGate > div { padding: 1.25rem !important; }
    #companionDialog > div > div, #uploadDialog > div > div, #extensionDialog > div > div { padding: 1rem !important; }
    #companionDialog h2, #uploadDialog h2, #extensionDialog h2 { padding-right: 2.5rem; }
    #companionDialog button, #uploadDialog button, #extensionDialog button { min-width: 44px; }
    #regCountry { flex: 0 0 95px; }
    #companionDialog .companion-title { font-size: 1.35rem !important; }
    #companionDialog .cta-btn { min-height: 44px; font-size: .95rem !important; padding: .65rem 1.2rem !important; }
    #companionDialog summary { min-height: 44px; padding: .5rem 0; }

    .plo5-hero, .plo5-grid.two, .plo5-form { grid-template-columns: minmax(0, 1fr); }
    .plo5-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plo5-result { overflow-x: auto; }

    /* Strategy pages: readable forms and charts at phone and small tablet widths. */
    [data-page="exploits"] .header-controls, [data-page="type-exploits"] .header-controls { width: 100%; }
    [data-page="exploits"] #player-input { flex: 1 0 100%; width: 100%; }
    .main-content, .nodes-container, .node-card, .top-exploits { min-width: 0; max-width: 100%; }
    [data-page="exploits"] .main-content, [data-page="type-exploits"] .container { padding: 1rem .75rem 2rem; }
    .header-controls select { flex: 1; }
    .node-card { padding: .75rem; overflow-wrap: anywhere; }
    .sizing-grid { grid-template-columns: 50px minmax(0, 1fr) 35px 4px minmax(0, 1fr) 35px; gap: .25rem; }
    .street-tabs { flex-wrap: wrap; }
    .group-node-details > summary { min-height: 44px; padding: .5rem 0; }
    .group-node-details .node-card { margin-top: .75rem; }

    /* Documentation, publications and help retain their existing content. */
    [data-page="docs"] .header-right, [data-page="publications"] .header-right { width: 100%; }
    [data-page="docs"] .grid { grid-template-columns: minmax(0, 1fr); padding: 0 .75rem 1.5rem; }
    [data-page="docs"] .card { min-width: 0; overflow-wrap: anywhere; }
    [data-page="docs"] .stats-bar { flex-wrap: wrap; }
    [data-page="docs"] .modal-overlay { padding: 0; overflow: hidden; }
    [data-page="docs"] .modal { height: 100%; height: 100dvh; display: flex; flex-direction: column; border-radius: 0; }
    [data-page="docs"] .modal-header { flex-shrink: 0; padding: .65rem; border-radius: 0; gap: .5rem; }
    [data-page="docs"] .modal-header h2 { min-width: 0; overflow-wrap: anywhere; font-size: 1rem; }
    [data-page="docs"] .modal-close { min-width: 44px; }
    [data-page="docs"] .modal-body { min-height: 0; overflow: auto; padding: 1rem; overscroll-behavior: contain; }
    [data-page="publications"] .container { padding: 1rem .75rem; }
    [data-page="publications"] .intro { padding: 1rem; }
    .pdf-item { flex-direction: column; align-items: stretch; padding: 1rem; }
    .pdf-info { min-width: 0; overflow-wrap: anywhere; }
    .pdf-meta { flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
    [data-page="help"] .page-header { flex-wrap: wrap; gap: .75rem; }
    [data-page="help"] .page { padding: 1rem .75rem 2rem; overflow-wrap: anywhere; }
}