/* Mobile/tablet Start drawer and compact topbar (OSM-03).
   Extracted from os-shell.css. Phones (<=430px) and tablets (<=900px).
   Loaded after os-taskbar.css and before components.css in _shell.php. */

/* ============ Start menu -- mobile/tablet drawer (OSM-03) ============
   Phones (cover Fold6 ~323-430px) and tablets (inner Fold6 ~742-864px)
   render the Start menu as a bottom sheet anchored above the taskbar,
   instead of a floating desktop panel. Desktop layout preserved >920px. */
.os-start-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: calc(var(--z-startmenu) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.os-start-backdrop[hidden] { display: none; }
.os-start-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 920px) {
    .os-start-menu {
        bottom: var(--os-taskbar-h);
        inset-inline-start: 0;
        inset-inline-end: 0;
        width: 100dvw;
        max-width: 100dvw;
        min-height: 0;
        max-height: min(86dvh, calc(100dvh - var(--os-taskbar-h) - env(safe-area-inset-top) - 8px));
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(100%);
        opacity: 1;
    }
    .os-start-menu.show { transform: translateY(0); }

    .start-menu-side {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        padding: 0.6rem 0.75rem;
        border-inline-end: 0;
        border-bottom: 1px solid var(--os-border);
        flex-shrink: 0;
    }
    .start-menu-side-spacer { display: none; }
    .start-menu-profile-card {
        flex: 1;
        min-width: 0;
        padding: 0.45rem 0.6rem;
        gap: 0.55rem;
    }
    .start-menu-profile-card .avatar { width: 36px; height: 36px; font-size: 0.95rem; }
    .start-menu-profile-card strong { font-size: 0.85rem; }
    .start-menu-role { font-size: 0.62rem; }

    .start-menu-actions {
        margin-top: 0;
        gap: 0.35rem;
        flex-shrink: 0;
    }
    .start-menu-actions .action-btn {
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }

    .start-menu-main { min-height: 0; flex: 1 1 auto; }
    .start-menu-search { padding: 0.55rem 0.75rem; }
    .start-menu-scroll-area {
        padding: 0.6rem 0.6rem calc(0.85rem + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }
    .start-menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.35rem;
    }
    .menu-item {
        min-height: 92px;
        padding: 0.6rem 0.25rem 0.5rem;
    }
    .menu-item-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .start-menu-grid { grid-template-columns: repeat(3, 1fr); }
    .menu-item { min-height: 88px; }
}

@media (max-width: 360px) {
    .start-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
    .menu-item { min-height: 84px; padding: 0.55rem 0.2rem 0.45rem; }
    .menu-item-icon { width: 46px; height: 46px; font-size: 1.4rem; }
    .menu-item-label { font-size: 0.7rem; }
    .start-menu-profile-card { padding: 0.4rem 0.5rem; gap: 0.45rem; }
    .start-menu-profile-card .avatar { width: 34px; height: 34px; }
    .start-menu-actions .action-btn { width: 42px; min-width: 42px; height: 42px; }
}

/* Mobile top-bar: keep narrow cover screen overflow-free. */
@media (max-width: 430px) {
    .os-top-bar { padding: 0 0.45rem; gap: 0.35rem; }
    .active-module-header { gap: 0.55rem; min-width: 0; flex: 1 1 auto; }
    .active-module-info { min-width: 0; }
    .active-module-title {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .top-bar-right { gap: 0.25rem; flex-shrink: 0; }
    .top-bar-btn { padding: 0 0.5rem; min-width: 36px; height: 36px; }
}

/* OSM-09: Mobile Home button — hide kbd/fullscreen, enlarge Home tap target.
   Applies on narrow screens and on any touch/coarse-pointer device. */
@media (max-width: 920px), (hover: none) and (pointer: coarse) {
    #osKbdBtn,
    #topbarFullscreen { display: none !important; }

    #topbarHome {
        min-width: 48px;
        min-height: 48px;
        height: 48px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
    }

    #topbarHome .top-bar-home-label { display: none; }
}