/* Phone shell: home screen and full-screen apps. Active below 740px. */

.phone {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ---------- Status bar ---------- */

.phone-statusbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(30px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  z-index: 400;
  pointer-events: none;
}

.phone-statusbar-glyphs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-statusbar-glyphs svg { display: block; }

.phone-statusbar.is-over-home {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.phone-statusbar.is-over-home svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }

.phone-statusbar.is-over-light { color: #1d1d1f; }
.phone-statusbar.is-over-dark { color: #f5f5f7; }

/* Installed to the home screen, the device draws its own clock and glyphs
   over this bar. Ours go; the bar keeps its height and the safe-area inset
   above it. */
@media (display-mode: standalone) {
  .phone-clock,
  .phone-statusbar-glyphs { display: none; }
}

/* ---------- Home screen ---------- */

.phone-home {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 6px calc(10px + env(safe-area-inset-bottom, 0px));
}

.phone-home-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Home-screen widgets */

.phone-widgets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 14px 20px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.phone-widgets .widget { border-radius: 22px; }
.phone-widgets .widget-row { gap: 16px; }

.phone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 4px;
  padding: 8px 12px;
  align-content: start;
}

.phone-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.phone-app-icon {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.phone-app-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.phone-app:active .phone-app-icon {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)) brightness(0.75);
}

.phone-app-label {
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.01em;
  max-width: 76px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-bottom { display: flex; flex-direction: column; gap: 10px; }

/* The page dot and the search pill share the row the dot used to have alone. */
.phone-page-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
}

.phone-search-pill {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.phone-search-pill svg { width: 12px; height: 12px; display: block; }
.phone-search-pill:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.phone-page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.phone-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 0 8px;
  padding: 13px 6px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  backdrop-filter: saturate(180%) blur(26px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
}

.phone-dock .phone-app { gap: 0; }

/* ---------- Full-screen app ---------- */

.phone-app-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  color: var(--ink);
  z-index: 200;
  will-change: transform;
}

.phone-app-screen.is-dark-app {
  --surface: #1c1c1e;
  --surface-2: #161618;
  --surface-3: #2c2c2e;
  --ink: #f5f5f7;
  --ink-2: #98989d;
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --accent: #0a84ff;
  --accent-selection: rgba(10, 132, 255, 0.24);
  --up: #30d158;
  --down: #ff453a;
  --sidebar-bg: rgba(36, 36, 38, 0.82);
}

.phone-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: calc(74px + env(safe-area-inset-top, 0px));
  padding: calc(30px + env(safe-area-inset-top, 0px)) 6px 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-app-screen.is-collapsed .phone-nav,
.phone-app-screen.is-drilled .phone-nav {
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 var(--hairline);
}

.phone-back {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px 10px 10px;
  font-size: 17px;
  color: var(--accent);
}

.phone-back-chevron { display: flex; }
.phone-back-chevron svg { display: block; }

.phone-nav-title {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  white-space: nowrap;
}

.phone-app-screen.is-collapsed .phone-nav-title,
.phone-app-screen.is-drilled .phone-nav-title { opacity: 1; }

.phone-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(74px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.phone-large-title {
  margin: 6px 20px 10px;
  font-size: 34px;
  /* Fixed so an app that fills the screen can subtract it: 6 + 40 + 10. */
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Drilled views read on the plain surface. */
.phone-app-screen.is-drilled .phone-scroll { background: var(--surface); }

/* ---------- Grouped content ---------- */

.phone-pad { padding: 4px 16px 24px; }

.phone-group {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px var(--hairline);
  margin: 0 16px 18px;
}

.phone-pad .phone-group { margin: 0 0 18px; }

.phone-group > * {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
}

.phone-group > * + * { box-shadow: 0 -0.5px 0 var(--hairline); }

/* ---------- App interiors on phone ---------- */

.phone .sidebar-group-label { margin: 4px 32px 6px; }
.phone .phone-pad .sidebar-group-label { margin: 4px 16px 6px; }
.phone .sidebar-empty { margin: 0 32px 16px; font-size: 14px; }

.phone .notes-item { border-radius: 0; padding: 11px 16px; }
.phone .notes-item:hover { background: none; }
.phone .notes-item:active { background: rgba(127, 127, 132, 0.14); }
.phone .notes-item-title { font-size: 17px; font-weight: 600; }
.phone .notes-item-preview { font-size: 14px; margin-top: 2px; }

.phone .note-view { padding: 14px 20px 60px; max-width: none; }
.phone .note-title { font-size: 26px; }
.phone .note-view p { font-size: 17px; line-height: 1.6; }
.phone .note-timeline li { grid-template-columns: 50px 1fr; font-size: 16px; }

.phone .app-sidebar {
  width: auto;
  box-shadow: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 16px;
  overflow: visible;
}

.phone .stocks-caption { margin: 4px 16px 8px; }

.phone .stocks-row {
  background: var(--surface);
  border-radius: 10px;
  padding: 13px 14px;
  box-shadow: 0 0 0 0.5px var(--hairline);
}

.phone .stocks-row + .stocks-row { margin-top: 8px; }
.phone .stocks-symbol { font-size: 16px; }
.phone .stocks-name { font-size: 13px; }

.phone .stocks-detail { padding: 12px 20px 48px; }
.phone .stocks-events li { font-size: 15.5px; }

.phone .gc-root { padding: 4px 16px 32px; background: transparent; }
.phone .gc-grid { grid-template-columns: 1fr; }
.phone .gc-trophy { max-width: none; }
.phone .gc-trophy-title { font-size: 20px; }

.phone .press-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
.phone .press-card { background: var(--surface); padding: 12px; }
.phone .press-card-title { font-size: 15px; }
.phone .press-card-excerpt { font-size: 13.5px; }
.phone .press-card-domain { font-size: 12.5px; }

.phone .reader { padding: 22px 4px 40px; max-width: none; }
.phone .reader-title { font-size: 24px; }
.phone .reader-excerpt p { font-size: 17px; line-height: 1.6; }
.phone .reader-hero { max-height: 240px; margin: 16px 0; }
.phone .reader-hero.is-tall { max-height: 60vh; }
.phone .reader-note { font-size: 15px; }
.phone .reader-meta { font-size: 14px; }
.phone .reader-rule { margin: 28px 0; }
.phone .reader-open { font-size: 15px; padding: 10px 20px; }
.phone .reader-published { font-size: 13px; }

.phone .player { padding: 8px 0 32px; max-width: none; }
.phone .player-title { font-size: 18px; }

.phone .reading-item { padding: 11px 16px; border-radius: 0; }
.phone .reading-item-title { font-size: 16px; }
.phone .reading-item-source { font-size: 13px; }

.phone .contacts-card { padding: 8px 0 24px; text-align: center; }
.phone .contacts-name { font-size: 22px; }
.phone .contacts-line { font-size: 15px; }
.phone .contact-field { padding: 11px 16px; }
.phone .contact-field-value { font-size: 16px; }
.phone .contact-field-label { font-size: 12px; }

.phone .music-main { padding: 0; }
.phone .music-head { margin: 4px 0 20px; }
.phone .music-art { width: 104px; height: 104px; }
.phone .music-title { font-size: 22px; }
.phone .music-row { padding: 12px 4px; }

.phone .books-root { padding: 0 0 16px; background: transparent; }

.phone .tv-root { padding: 0 0 24px; background: transparent; }
.phone .tv-collection-list { columns: 1; font-size: 15px; }
.phone .tv-collection-panel { padding: 14px 16px; }

.phone .books-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 16px; }

/* Three up against the record's two, so the intent shelf is visibly smaller
   on a narrow screen rather than only dimmer. */
.phone .books-grid.is-intent { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
.phone .books-now .book-face { width: 112px; }
.phone .books-now-title { font-size: 18px; }
.phone .book-title { font-size: 14px; }
.phone .book-meta { font-size: 12.5px; }
.phone .tv-heading { display: none; }
.phone .tv-sub { margin-top: 2px; }
.phone .tv-hero-card { max-width: none; }
.phone .tv-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The shell already shows the app name, but the empty state must survive. */
.phone .books-heading { display: none; }
.phone .books-sub { font-size: 15px; margin-bottom: 18px; }
.phone .book-note { font-size: 14px; }

.phone .about-root { padding: 8px 0 24px; background: transparent; }
.phone .about-specs { max-width: none; font-size: 15px; margin: 0; }
.phone .about-name { font-size: 22px; }
.phone .about-role { font-size: 15px; }
.phone .about-specs div { padding: 9px 2px; }

/* ---------- Maps on phone: map fills the screen, list is a sheet ---------- */

.phone .map-root.is-phone {
  position: relative;
  height: 100%;
  min-height: 0;
}

/* A phone is never wider than the minimum, so the map fits the screen instead. */
.phone .map-surface {
  min-width: 0;
  min-height: 0;
}

.phone .map-pane {
  position: absolute;
  inset: 0 0 var(--sheet-h, 45%) 0;
  transition: bottom 0.24s var(--ease-out);
}

.phone .map-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 -1px 0 var(--hairline), 0 -12px 34px rgba(0, 0, 0, 0.22);
  transition: height 0.24s var(--ease-out);
  z-index: 3;
}

.phone .map-root.is-dragging .map-sheet,
.phone .map-root.is-dragging .map-pane { transition: none; }

.phone .map-sheet-grip {
  flex: none;
  width: 100%;
  padding: 10px 0 6px;
  display: grid;
  place-items: center;
  touch-action: none;
}

.phone .map-sheet-bar {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: rgba(127, 127, 132, 0.5);
}

.phone .map-sheet .map-list {
  padding: 0 8px calc(20px + env(safe-area-inset-bottom, 0px));
}

.phone .map-count { padding: 0 18px 10px; }
.phone .map-count-title { font-size: 22px; }
.phone .map-count-line { font-size: 14px; }
.phone .map-row { padding: 10px; }
.phone .map-row-city { font-size: 16px; }
.phone .map-row-kind { font-size: 12.5px; }
.phone .map-country { font-size: 12px; padding: 7px 10px; }
.phone .map-back { font-size: 14px; padding: 6px 12px; }

/* On phone the card rides at the top of the sheet, so the list can never cover it. */
.phone .map-sheet .map-card {
  position: static;
  pointer-events: auto;
  width: auto;
  margin: 0 10px 12px;
  box-shadow: 0 0 0 0.5px var(--hairline);
  background: var(--surface-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.phone .map-sheet .map-card-slot:empty { display: none; }

/* ---------- Posts (phone) ---------- */

.phone-app-icon { position: relative; }

/* Truthful or absent: this only ever renders when there are unseen posts. */
.phone-app-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ff3b30;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}

/* The whole screen is X's surface here, not a tile on ours. */
.phone .posts-root {
  --x-secondary: #71767b;
  --x-link: #1d9bf0;
  min-height: 100%;
  padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  background: #000;
  color: #fff;
}

.phone .x-card { font-size: 15px; }

/* X's own profile shape: a banner, and the portrait hung over its lower edge. */
.phone .x-banner {
  height: 96px;
  margin: -12px -16px 0;
  background: linear-gradient(150deg, #1d2b46, #101725);
}

.phone .x-head {
  align-items: flex-end;
  margin-top: -48px;
  gap: 12px;
}

.phone .x-avatar {
  width: 144px;
  height: 144px;
  box-shadow: 0 0 0 4px #000;
}

.phone .x-identity { padding-bottom: 8px; }

.phone .x-name { font-size: 17px; }
.phone .x-handle { font-size: 15px; }
.phone .x-bio { font-size: 15px; }
.phone .x-meta { font-size: 14px; }
.phone .x-post-text { font-size: 15px; }

/* Everything after the newest one, newest first, each divided from the last. */
.phone .x-feed {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.phone .x-feed .x-post {
  padding-top: 14px;
  padding-bottom: 4px;
}


/* On the phone it sits above the home indicator, clear of the dock and grid. */
.phone .sky-caption {
  position: static;
  text-align: center;
  font-size: 11px;
  color: #ffffff;
  opacity: 0.78;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  margin-bottom: 2px;
}

/* Keynote on the phone: one column of documents, and a document that is swiped
   rather than navigated by a strip. */
.phone .kn-root { padding: 0 0 24px; background: transparent; }

.phone .kn-root.is-doc { display: block; overflow: visible; }

.phone .kn-gallery { grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* A one-slide document is the whole document, so it sits in the middle of the
   screen rather than at the top of a mostly empty one. */
.phone .kn-doc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68vh;
}

.phone .kn-stage { display: block; }

/* One slide at a time, snapped, with the page dots following the swipe. */
.kn-swipe {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 12px;
}

.kn-swipe::-webkit-scrollbar { display: none; }

.kn-swipe-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

.kn-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 2px;
}

.kn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(127, 127, 132, 0.4);
}

.kn-dot.is-current { background: var(--ink-2); }

.phone .kn-notes { padding: 16px 2px 0; box-shadow: none; }


/* ---------- Spotlight, full screen ---------- */

.spotlight.is-phone {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--surface);
  color: var(--ink);
}

.spotlight.is-phone .spot-panel {
  position: absolute;
  inset: 0;
  transform: none;
  width: auto;
  max-height: none;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.spotlight.is-phone .spot-field {
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px;
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}

.spotlight.is-phone .spot-input { font-size: 17px; }

.spot-close {
  display: flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(127, 127, 132, 0.18);
  color: var(--ink-2);
  align-items: center;
  justify-content: center;
}

.spot-close svg { width: 14px; height: 14px; }
.spot-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.spotlight.is-phone .spot-list {
  flex: 1;
  min-height: 0;
  padding: 6px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: none;
}

.spotlight.is-phone .spot-title { font-size: 16px; }
.spotlight.is-phone .spot-sub { font-size: 13px; }

/* Terminal: the screen is the window. The wrapper takes the scroll pane's
   height less the large title above it, the output scrolls inside, and the
   prompt sits at the foot, where the keyboard will meet it. */
.phone .term-phone { display: flex; flex-direction: column; height: calc(100% - 56px); padding: 0; }
.phone .term-root { font-size: 13px; }
.phone .term-line { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Messages: the screen is the thread's frame. The thread scrolls inside it
   and the chips stay put at the foot, above the home indicator. */
.phone .msg-phone { display: flex; flex-direction: column; height: calc(100% - 56px); min-height: 0; }
.phone .msg-root { flex: 1; min-height: 0; overflow: hidden; }
.phone .msg-chips { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.phone .msg-bubble { font-size: 16px; max-width: 82%; }
.phone .msg-chip { font-size: 15px; padding: 9px 14px; }

/* Photos on the phone: albums two across, an album three across, and the
   picture at the width of the screen with its caption beneath. */
.phone .ph-root { background: transparent; overflow: visible; }
.phone .ph-albums { padding: 0; overflow: visible; }
.phone .ph-heading { display: none; }
.phone .ph-album-head .ph-heading { display: block; font-size: 24px; }
.phone .ph-album-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
.phone .ph-album-title { font-size: 15px; }
.phone .ph-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -16px; }
.phone .ph-thumb { border-radius: 0; }
.phone .ph-viewer { margin: 0 -16px; }
.phone .ph-stage { min-height: 46vh; max-height: 64vh; }
.phone .ph-arrow { opacity: 1; width: 34px; height: 34px; }
.phone .ph-caption { padding: 12px 16px 20px; }
.phone .ph-caption-text { font-size: 15px; }

/* News on the phone: one card per row, then the pages at screen width. */
.phone .nw-root { background: transparent; }
.phone .nw-feed { padding: 0; overflow: visible; }
.phone .nw-heading { display: none; }
.phone .nw-cards { grid-template-columns: 1fr; gap: 14px; }
.phone .nw-card-title { font-size: 18px; }
.phone .nw-article { display: block; }
.phone .nw-head { margin: 4px 0 14px; }
.phone .nw-title { font-size: 24px; }
.phone .nw-line { font-size: 15px; }
.phone .nw-pages { gap: 14px; margin: 0 -16px; }
.phone .nw-page { box-shadow: none; }