/* ── Mobile Adaptation ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Panel as bottom sheet */
    .panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: auto;
        max-height: 85vh;
        min-height: 60px;
        border-left: none;
        border-top: 1px solid var(--bd);
        border-radius: 18px 18px 0 0;
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    /* Drag handle */
    .panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 2px;
        margin: 8px auto;
        flex-shrink: 0;
    }

    /* Collapsed state */
    .panel.collapsed {
        transform: translateY(calc(100% - 110px));
    }

    /* Map fills viewport */
    #map {
        height: 100vh;
        height: 100dvh;
    }

    /* Toolbar repositioned */
    .map-toolbar {
        top: auto;
        bottom: 120px;
        left: 10px;
        flex-direction: column;
        gap: 6px;
    }

    .tb-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    /* Card touch targets */
    .inf h3 { font-size: 14px; }
    .inf .ad { font-size: 11px; }
    .inf .metro { font-size: 10px; }
    .pa button { padding: 8px 14px; font-size: 10px; min-height: 36px; }
    .tab { padding: 14px 10px; font-size: 13px; }
    .search { padding: 12px 14px 12px 36px; font-size: 13px; }
    .iw { height: 180px; }

    /* Partner logos smaller on mobile */
    .partner-logo { height: 24px; max-width: 90px; }

    /* Full-screen modal on mobile */
    .modal-overlay { padding: 0; }
    .modal {
        border-radius: 0;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .modal-img { height: 200px; }
    .modal-body { padding: 16px; }
    .modal-title { font-size: 16px; }
    .modal-desc-edit { font-size: 14px; }

    /* Route navigation */
    .nav-leg-head { padding: 12px; }
    .nav-leg-name { font-size: 13px; }
    .nav-leg-meta { font-size: 10px; }
    .nav-walk-step { font-size: 10px; padding: 4px 0; }
    .bt { padding: 14px; font-size: 13px; }

    /* Popups */
    .leaflet-popup-content-wrapper { max-width: 260px !important; }
    .pt { font-size: 13px; }
    .pb { padding: 8px 16px; font-size: 12px; }

    /* Header compact */
    .ph { padding: 10px 14px 8px; }
    .ph img { width: 40px; height: 40px; }
    .ph-t h1 { font-size: 14px; }

    /* History table horizontal scroll */
    .history-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .history-table { min-width: 600px; }
    .history-table th, .history-table td { font-size: 10px; padding: 8px 6px; }
}

@media (max-width: 480px) {
    .panel.collapsed {
        transform: translateY(calc(100% - 90px));
    }

    .map-toolbar {
        bottom: 100px;
    }

    .ph img { width: 36px; height: 36px; }
    .ph-t h1 { font-size: 13px; }
    .ph-t .sub { font-size: 7px; }
}