/* ===================================================================== */
/* ===== RESPONSIVE ================================================== */
/* ===================================================================== */
@media (max-width: 900px) {
    body.mode-gui, body.mode-cli { overflow: auto; height: auto; }
    .desktop {
        position: static;
        overflow: visible;
        min-height: 100vh;
        padding: 5rem 1rem 3rem;
    }
    /* the home desktop stays a fixed stage even on phones (wallpaper + dock) */
    body.mode-home { overflow: hidden; height: 100vh; }
    #home.desktop {
        position: fixed;
        inset: 0;
        overflow: hidden;
        padding: 0;
        min-height: 0;
    }
    .home-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .dock { gap: 0.4rem; padding: 0.5rem 0.55rem; bottom: 1rem; }
    .dock-ico { width: 44px; height: 44px; }
    .dock-ico svg { width: 24px; height: 24px; }
    .desk-widgets, .desk-icon, .desk-prompt { display: none; }   /* too tight on a phone */
    .dock-app--widget, .dock-app--widget + .dock-sep,
    .dock-sep:has(+ .dock-app--widget) { display: none; }        /* no widgets on mobile → hide their dock toggles */
    .desk-deco .dk-glyph { font-size: 1.1rem; }
    /* mobile: just the app icon, top-left */
    .desk-badge { top: 1rem; left: 1rem; right: auto; }
    .home-greet { font-size: 0.7rem; margin-bottom: 0.6rem; }
    #winHelp.win, #winSettings.win {
        position: fixed !important;
        left: 5% !important;
        top: 8% !important;
        width: 90% !important;
        height: 78% !important;
        margin: 0;
        max-width: none;
    }
    .win {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0;
        margin: 0 auto 1.5rem;
        max-width: 640px;
        box-shadow: var(--shadow-md);
    }
    #winAbout .win-body--editor { min-height: 22rem; }
    #winTerminal .terminal-body { min-height: 62vh; }
    .win-rz { display: none; }
    .win-bar { cursor: default; }
    /* the traffic-light dots are 12px — give them a finger-sized hit area on touch */
    .win-lights { gap: 0.9rem; }
    .l-dot { position: relative; }
    .l-dot::after { content: ''; position: absolute; inset: -16px -7px; }
    .desktop-credit { position: static; display: block; text-align: center; margin-top: 1rem; }
    .site { padding: 2rem 1.5rem 2.5rem; }

    /* Settings: no sidebar to tab through — the left rail hides and every
       section stacks into one long scrolling list instead, same window
       chrome as the Guide (fixed, 90%×78%, see the rule above) */
    .win-body--settings { overflow-y: auto; overflow-x: hidden; }
    .settings { flex-direction: column; height: auto; }
    .set-nav, .set-toggle { display: none; }   /* nothing to collapse — every section is already in the list */
    .set-panes { flex: none; width: 100%; padding: 1.4rem 1.5rem; overflow: visible; }
    .set-pane, .set-pane.is-active { display: block; }   /* every section shows, not just the active one */
    .set-pane + .set-pane { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
    .set-pane-title { display: block; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.9rem; }
}

@media (max-width: 768px) {
    #rail { top: 1rem; right: 1rem; gap: 0.5rem; }
    .glass-btn { width: 42px; height: 42px; }
    .min-chip { width: 42px; height: 42px; }
    .glass-btn svg, .dark-mode-toggle svg { width: 18px; height: 18px; }
    .min-chip svg { width: 18px; height: 18px; }
    .win--terminal .terminal-body { font-size: 0.82rem; padding: 1rem 1.1rem 1.6rem; }
}

@media (max-width: 480px) {
    .win--terminal .terminal-body { font-size: 0.76rem; }
    .ed-files { width: 7.5rem; }
}