/* The desktop's phone layout (design/desktop.md, Phone). The desktop switches with the .is-phone class
   (laptop-screen/index.js): under 768 px, in portrait, or when the fitted screen would be too small. */
.desktop.is-phone .desk-screen {
  position: fixed; inset: 0; width: auto; height: auto; transform: none; font-size: 15px;
  cursor: auto; border-radius: 0;
}
.desktop.is-phone .desk-screen::after { display: none; }
.desktop.is-phone .desk-back {
  top: 0; bottom: auto; left: 0; z-index: 60; min-height: 44px; border: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 0 var(--space-4); font-size: 15px;
}
.desktop.is-phone .desk-back:focus-visible { box-shadow: var(--focus-ring); } /* the bar drops its shadow, not its focus ring */

/* No blur on phones (costly): the translucent fills at 92% instead (design/desktop.md, Vibrancy). */
.is-phone :is(.desk-top, .dock-list, .menu-panel, .ctx-menu, .sheet) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-phone :is(.desk-top, .dock-list) { background: rgba(246, 246, 246, 0.92); }

/* Top bar: Back to desk, the Apple menu, the time. */
.is-phone .desk-top { height: 44px; padding: 0 var(--space-4) 0 140px; }
.is-phone .menu-top { min-height: 44px; min-width: 44px; justify-content: center; }
.is-phone .menu-top:not([data-menu="arch"]), .is-phone .status-glyphs, .is-phone .btc { display: none; }
.is-phone .clock { font-size: 0; }
.is-phone .clock::after { content: attr(data-short); font-size: 15px; }
.is-phone .menu-panel { top: 42px; }
.is-phone .menu-panel [role="menuitem"] { height: 44px; font-size: 15px; }

/* Home grid: Resume, Vault, then the apps not in the phone Dock. */
.is-phone .desk-icons-host { left: var(--space-4); right: var(--space-4); top: 64px; }
.is-phone .desk-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: var(--space-5); }
.is-phone .desk-cell { width: auto; }
.is-phone .phone-only { display: block; }
.is-phone .desk-icon { width: 100%; min-height: 44px; touch-action: manipulation; }
.is-phone .desk-glyph { width: 60px; height: 60px; }
.is-phone .desk-name { font-size: 15px; }

/* Dock: four apps, 84 px plus the safe area. */
.is-phone .desk-dock { bottom: 0; padding: 0 var(--space-2) env(safe-area-inset-bottom); }
.is-phone .dock-list { height: 84px; gap: var(--space-5); padding: 12px var(--space-5); }
.is-phone .dock-item.not-phone { display: none; }
.is-phone .dock-app { --size: 56px; }
.is-phone .dock-label { display: none; }

/* Apps open full screen, one at a time, under a 52 px bar with the app name and Done. */
.is-phone .desk-windows { z-index: 95; }
.is-phone .win {
  position: fixed; inset: 0 !important; width: auto !important; height: auto !important; z-index: 100 !important;
  grid-template-rows: 52px minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none;
}
.is-phone .win:not(.is-focused), .is-phone .win-lights, .is-phone .win-shield { display: none; }
.desktop.is-phone.has-app .desk-back { display: none; }
.is-phone .win-bar { padding: 0 76px; }
/* Long note titles wrap to two balanced lines inside the bar, clear of Done. */
.is-phone .win-title {
  max-width: 100%; font-size: 16px; line-height: 1.2; text-align: center; white-space: normal; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.is-phone .win-done {
  display: block; position: absolute; right: var(--space-2); top: 4px; min-height: 44px; padding: 0 var(--space-3);
  border: 0; background: none; font: 600 15px / 1 var(--font-body); color: var(--terracotta-ink);
}

/* App contents at phone size: text at least 15 px, targets at least 44 px. */
.is-phone :is(.finder, .notes) { grid-template-columns: 1fr; }
/* Finder keeps the phone's app bar (its desktop shape has none). */
.is-phone .win[data-app="finder"] { grid-template-rows: 52px minmax(0, 1fr); }
.is-phone .win[data-app="finder"] .win-bar { position: relative; height: auto; pointer-events: auto; background: var(--window-bar) !important; }
.is-phone .win[data-app="finder"] .win-title { display: -webkit-box; }
.is-phone .win[data-app="finder"] .win-body { grid-row: 2; }
.is-phone .finder-title { display: none; }
.is-phone :is(.finder-side, .notes-side) { display: none; }
/* No sidebar on the phone: Welcome, then Your note under it, in one scroll. */
.is-phone .notes { display: block; height: auto; }
.is-phone :is(.notes-page, .notes-page[hidden]) { display: block; overflow: visible; }
.is-phone .notes-welcome { min-height: 0; }
.is-phone .notes-text { height: 230px; }
.is-phone .finder-main { grid-template-rows: 48px minmax(0, 1fr) auto; } /* the column heads are hidden */
.is-phone .finder-cols { display: none; }
.is-phone .tool { min-width: 44px; min-height: 44px; }
.is-phone .finder-row { grid-template-columns: 28px minmax(0, 1fr) 44px; height: auto; min-height: 52px; font-size: 15px; }
.is-phone .row-kind { display: none; }
.is-phone .row-more { display: block; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 20px; }
.is-phone :is(.button, .chip, .side-link, .bin-row button) { min-height: 44px; font-size: 15px; }
.is-phone :is(.msg, .gpt-form input, .reader, .set-row, .wp-choice, .term, .browser-omni input, .bookmark a) { font-size: 15px; }
.is-phone :is(.gpt-form input, .browser-omni input) { min-height: 44px; }
.is-phone .browser-tools { height: 52px; }
.is-phone .browser-tab { display: none; }
.is-phone .win[data-app="chrome"] { grid-template-rows: 52px minmax(0, 1fr); }
.is-phone .win[data-app="chrome"] .win-bar { justify-content: center; }
.is-phone .win[data-app="chrome"] .win-title { position: static; width: auto; height: auto; clip: auto; }
/* The tiles list every bookmark, so the phone drops the bar: four tiles a row, the rest centred. */
.is-phone .bookmarks-bar { display: none; }
.is-phone .start-tiles { justify-self: stretch; }
.is-phone .start-tile { width: 25%; }
.is-phone .browser-page { padding: var(--space-5) var(--space-4); }
/* Phone preview: the picture full width at 40% of the screen, the panel below it, a full-width button. */
.is-phone .browser-page:has(> .preview) { padding: 0; }
.is-phone .preview { height: auto; }
.is-phone .preview-frame { flex: none; height: 40vh; margin: 12px 12px 0; }
.is-phone .preview-panel { padding: 16px var(--space-4) var(--space-5); }
.is-phone .preview-actions { flex-direction: column; align-items: stretch; margin-left: 0; }
.is-phone .preview-open { justify-content: center; height: 48px; font-size: 15px; }
.is-phone .start-tile a { min-height: 44px; }
.is-phone .tile-name { font-size: 15px; white-space: normal; text-wrap: balance; }
.is-phone .reader { padding: var(--space-5) var(--space-4); }
.is-phone .resume-window { padding: 0; }
.is-phone .resume-window .resume-page { --mm: 4.724px; /* body 9 pt at 15 px */ width: auto; min-height: 0; padding: 20px; box-shadow: none; }
.is-phone .wp-choices { flex-wrap: wrap; justify-content: center; }
.is-phone .set-row { min-height: 44px; }