/* Touch dragging is limited to window chrome; document content still scrolls. */
.title-bar, .resize-handle { touch-action: none; }

@media (max-width: 600px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { height: 100dvh; }
    #desktop {
        top: max(12px, env(safe-area-inset-top));
        left: 12px;
        right: 12px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }
    #desktop .icon-container { width: 100%; height: 88px; }
    .icon-container img { width: 40px; height: 40px; }
    .icon-container span { font-size: 11px; line-height: 1.25; }
    .title-bar { min-height: 30px; padding: 3px 4px; flex-shrink: 0; }
    .title-bar-controls button { min-width: 30px; min-height: 28px; }
    .title-bar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .content.text-content { padding: 12px; font-size: 14px; line-height: 1.55; }
    .content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .retro-window.show-content .content { min-height: 0; }
    .resize-handle { display: none; }
    [data-window-type="display"] .retro-window.show-content .display-content,
    [data-window-type="display"] .retro-window.measure-display .display-content { padding: 8px; }
    form.display-properties { letter-spacing: 0.5px; }
    .display-monitor { width: 160px; padding: 12px 12px 8px; }
    .display-monitor-light { margin-top: 6px; }
    .display-monitor-base { margin-bottom: 10px; }
    .display-page { padding: 10px; margin-bottom: 10px; }
    .display-properties button,
    .display-properties button.display-choice-control,
    .display-properties button.display-choice-control:active,
    .display-properties .display-tabs button { min-height: 36px; }
    .display-choice-menu [role="option"] { padding: 10px 6px; }
    .display-choice-menu { max-height: 180px; overflow-y: auto; }
    .display-effect-selects { gap: 8px; }
    .display-effect-row { grid-template-columns: 106px minmax(0, 1fr) 30px; gap: 5px; }
    .display-effect-row input { min-width: 0; width: 100%; min-height: 32px; }
    .display-actions { position: sticky; bottom: -8px; background: silver; padding: 8px 0; }
    .display-actions button { flex: 1; min-width: 0; }
}

@media (max-width: 600px) and (max-height: 600px) {
    .display-monitor, .display-monitor-base { display: none; }
}

@media (max-width: 600px) {
    #desktop .icon-container span {
        max-width: 100%;
        text-wrap: wrap;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
    .title-bar-controls button[aria-label="Close"] { background-position: center; }
}

/* Center mobile windows within safe-area gutters; height follows their content. */
@media (max-width: 600px), (pointer: coarse) and (max-width: 1000px) {
    html, body { width: 100%; max-width: 100%; overflow: hidden; }
    #backgroundCanvas, #rainCanvas, #crtCanvas { position: fixed; width: 100vw; height: 100dvh; }
    body .window-container, body .window-container:has(.admin-login) {
        position: fixed !important;
        left: max(6px, env(safe-area-inset-left)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        top: max(6px, env(safe-area-inset-top)) !important;
        --window-available-height: calc(100dvh - max(6px, env(safe-area-inset-top)) - max(calc(var(--desktop-taskbar-height, 0px) + 6px), env(safe-area-inset-bottom)));
        width: min(var(--window-preferred-width, 440px), calc(100% - max(6px, env(safe-area-inset-left)) - max(6px, env(safe-area-inset-right)))) !important;
        margin-inline: auto;
        height: auto !important;
        max-height: var(--window-available-height);
    }
    body .window-container:has(.admin-login) {
        width: min(360px, calc(100% - max(6px, env(safe-area-inset-left)) - max(6px, env(safe-area-inset-right)))) !important;
    }
    .window-container .retro-window { box-sizing: border-box; width: 100%; height: auto; max-height: var(--window-available-height); }
    .window-container .retro-window.show-content { display: flex; flex-direction: column; }
    .window-container .retro-window.show-content .content { flex: 0 1 auto; min-height: 0; height: auto; max-height: none; overflow: auto; }
    .window-container .admin-content > .admin-program:has(.admin-footnote) { height: auto; }
    .window-container .admin-log .admin-output { flex: none; height: 135px; }
    .window-container .cipher-lab { height: auto; min-height: 0; }
    .window-container .title-bar { flex-shrink: 0; min-height: 30px; }
    .window-container .title-bar-controls button { min-width: 30px; min-height: 28px; }
    .window-container .title-bar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .window-container .resize-handle { display: none; }
}

/* Explicit colours prevent mobile browser button tints and disabled washout. */
@media (max-width: 600px), (pointer: coarse) and (max-width: 1000px) {
  body button, body input[type="button"], body input[type="submit"], body input[type="reset"] { color: #111 !important; -webkit-text-fill-color: #111; opacity: 1; }
  body button:disabled, body input[type="button"]:disabled, body input[type="submit"]:disabled, body input[type="reset"]:disabled { color: #555 !important; -webkit-text-fill-color: #555; opacity: 1; }
}

@media (max-width: 600px), (pointer: coarse) and (max-width: 1000px) {
  body .display-choice-control:focus > span:first-child { -webkit-text-fill-color: #fff; }
}