/* Touch windows use the available screen. Artwork and type stay at readable sizes. */
.entry-cue-touch { display:none; }
@media (max-width:900px), (pointer:coarse) {
  #journey-stage, #crt-canvas { touch-action:pan-y pinch-zoom; }
  .entry-cue-desktop { display:none; }
  .entry-cue-touch { display:inline; }
  :root {
    --workspace-height:100dvh;
    --workspace-top:0px;
    --workspace-taskbar:calc(54px + env(safe-area-inset-bottom, 0px));
    --workspace-left:max(4px, env(safe-area-inset-left, 0px));
    --workspace-right:max(4px, env(safe-area-inset-right, 0px));
  }
  .portfolio-layer .desktop {
    min-height:0;
    height:calc(var(--workspace-height) - var(--workspace-taskbar));
  }
  .portfolio-layer .window.mobile-app {
    position:fixed;
    top:calc(var(--workspace-top) + 4px) !important;
    left:var(--workspace-left) !important;
    right:var(--workspace-right) !important;
    bottom:auto !important;
    width:auto !important;
    height:calc(var(--workspace-height) - var(--workspace-taskbar) - 8px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    overflow:hidden;
    box-shadow:var(--bevel);
  }
  .window.mobile-app > .titlebar {
    flex:0 0 50px;
    min-height:50px;
    height:50px;
    gap:12px;
    cursor:default;
  }
  .window.mobile-app .titlebar :is(h1,h2) { font-size:16px; }
  .window.mobile-app .window-controls { gap:6px; }
  .window.mobile-app .window-controls button {
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    line-height:1;
  }
  .window.mobile-app .window-controls [data-window-action="desktop"] {
    width:auto;
    min-width:86px;
    padding:0 12px;
    font:16px var(--font-body);
  }
  .window.mobile-app > .resize-handle { display:none; }
  .window.mobile-app .pixel-address { display:none; }
  .window.mobile-app :is(input,textarea,select) { font-size:16px; }
  .window.mobile-app .classic-button { min-height:44px; font-size:16px; }
  .window.mobile-app .project-page-toolbar { padding:4px 8px; gap:8px; }
  .window.mobile-app .project-page-toolbar > span { display:none; }
  .window.mobile-app .project-page { min-width:0; min-height:0; -webkit-overflow-scrolling:touch; }
  .portfolio-layer .project-site-window.mobile-app {
    display:block;
    padding:0;
    border:3px solid var(--window-bg);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .project-site-window.mobile-app > .titlebar { position:sticky; top:0; z-index:5; }
  .project-site-window.mobile-app .project-page { overflow:visible; }
  .project-site-window.mobile-app .sweet-reader-controls { top:50px; }

  /* One scroll surface: search and headings can move out of the way of the work. */
  .mobile-app .archive-shell {
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-app .archive-toolbar {
    flex:0 0 auto;
    flex-wrap:nowrap;
    gap:8px;
    padding:8px;
  }
  .mobile-app .archive-search { min-width:0; }
  .mobile-app .archive-search input { min-height:44px; font-size:16px; }
  .mobile-app .archive-filters { flex:0 0 auto; }
  .mobile-app .archive-page {
    flex:0 0 auto;
    overflow:visible;
    min-height:0;
    padding:16px;
  }
  .mobile-app .archive-heading { margin-bottom:16px; }
  .mobile-app .archive-heading h1 { font-size:32px; }
  .mobile-app .archive-shell > .statusbar { flex:0 0 auto; margin-top:auto; }
  .mobile-app .work-folders { gap:16px; }
  .mobile-app .work-folder { min-height:112px; padding:16px; }
  .mobile-app :is(.project-grid,.experiment-grid) { gap:20px; }
  .mobile-app .thumbnail-title { order:-1; font-size:17px; }
  .mobile-app .thumbnail-meta { font-size:13px; }

  .portfolio-layer .taskbar {
    top:calc(var(--workspace-top) + var(--workspace-height) - var(--workspace-taskbar));
    bottom:auto;
    height:var(--workspace-taskbar);
    padding-bottom:calc(5px + env(safe-area-inset-bottom, 0px));
    padding-left:max(6px, env(safe-area-inset-left, 0px));
    padding-right:calc(160px + env(safe-area-inset-right, 0px));
  }
  .portfolio-layer .taskbar :is(.task-button,.start-button) { min-height:44px; height:44px; }
  .portfolio-layer .taskbar .tray { right:max(6px, env(safe-area-inset-right, 0px)); }
  body.experience-desktop .sound-toggle {
    top:calc(var(--workspace-top) + var(--workspace-height) - var(--workspace-taskbar) + 5px);
    bottom:auto;
    right:calc(76px + env(safe-area-inset-right, 0px));
    min-height:44px;
    height:44px;
    min-width:44px;
  }
  body.experience-desktop .sound-toggle [data-sound-label] { display:none; }
}

@media (max-width:600px) and (orientation:portrait),
       (max-width:900px) and (orientation:portrait) and (pointer:coarse) {
  .portfolio-layer .desktop-icons {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px 8px;
    top:20px !important;
    left:12px !important;
    right:12px !important;
    max-height:calc(var(--workspace-height) - var(--workspace-taskbar) - 100px);
    overflow:auto;
  }
  .portfolio-layer .desktop-icons .desktop-icon {
    width:auto !important;
    min-width:0;
    min-height:96px;
  }
  .portfolio-layer .desktop-icons .desktop-icon > span:not(.shortcut-arrow) { overflow-wrap:normal; }
  .mobile-app :is(.project-grid,.experiment-grid) { grid-template-columns:minmax(0,1fr); }
  body.experience-desktop .taskbar { padding-right:calc(128px + env(safe-area-inset-right, 0px)); }
  .mobile-app .sweet-case :is(.sweet-intro>div>p:not(.sweet-kicker),.sweet-artwork figcaption p) { font-size:16px; }
  .mobile-app .sweet-chapter-nav button { font-size:14px; }
  .mobile-app .sweet-reader-controls button { min-height:44px; font-size:14px; }
}

/* Landscape phones keep folders side by side instead of stacking empty space. */
@media (min-width:600px) and (max-width:900px) and (orientation:landscape),
       (min-width:600px) and (pointer:coarse) and (orientation:landscape) {
  .mobile-app .work-folders { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mobile-app .work-folder {
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    align-content:center;
    gap:6px 16px;
  }
  .mobile-app .work-folder img { grid-row:span 2; }
  .mobile-app .archive-heading { display:flex; align-items:baseline; gap:16px; }
  .mobile-app .archive-heading h1 { margin:0; }
  .mobile-app .archive-request { margin-top:20px; }
}