/* web/mobile.css: the older screens on a phone, the new view only (release 349; owner, 2026-10-29, grill answers 14
   "Calm, LinkedIn-adjacent: one design system, one blue accent, 14px base" and 18 "Fully mobile-first").
   Loaded last, after shell.css. EVERY rule is scoped to html[data-ux="new"] and sits inside the phone query (640 px),
   so the Classic view and the desktop are exactly as they were. Theme tokens only, so light and dark both follow.
   Screens: Calendar, Compose (the drawer), the Network tabs, Engagement, Contacts and a person's page, Settings, Import.
   Measured at 390 x 844 (scratch rig pw349/phone.mjs): no sideways scroll, 44 px targets, 14 px reading text,
   16 px side gutters, nothing under the bottom bar, dialogs and side panels the whole screen. */

@media (max-width: 640px) {

  /* ---- The bottom bar: the area's tab is lit by its tint alone (studio-v2.css draws the desktop's left stripe) ---- */
  html[data-ux="new"] .appnav .nav-item.active::before { display: none; }

  /* ---- No sideways scroll: nothing wider than the screen; long words and links wrap ---- */
  html[data-ux="new"] section.view { min-width: 0; max-width: 100%; box-sizing: border-box; }
  html[data-ux="new"] section.view img,
  html[data-ux="new"] section.view video,
  html[data-ux="new"] section.view canvas { max-width: 100%; }
  html[data-ux="new"] section.view .card,
  html[data-ux="new"] section.view .hint,
  html[data-ux="new"] section.view .card-sub { overflow-wrap: anywhere; }
  html[data-ux="new"] section.view pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* the sub-tab rows scroll inside themselves, never the page */
  html[data-ux="new"] #vg-subnav { max-width: 100%; min-width: 0; }
  html[data-ux="new"] #vg-subnav .vg-tabs { max-width: 100%; flex-wrap: nowrap; }
  html[data-ux="new"] #vg-subnav .vg-tab { flex: 0 0 auto; }

  /* ---- Reading text: 14 px for the lines that explain (they were 12 to 13) ---- */
  html[data-ux="new"] section.view .hint,
  html[data-ux="new"] section.view .card-sub,
  html[data-ux="new"] .sg-sub,
  html[data-ux="new"] .np-touch-sub,
  html[data-ux="new"] .pv-sub,
  html[data-ux="new"] .np-auto-line,
  html[data-ux="new"] .np-boost-nevernames,
  html[data-ux="new"] .np-boost-neversub,
  html[data-ux="new"] .np-cmt-auto-status,
  html[data-ux="new"] .cm-auto__status,
  html[data-ux="new"] .pp-about,
  html[data-ux="new"] .pp-note,
  html[data-ux="new"] .pp-draft-say,
  html[data-ux="new"] .pp-disclaimer,
  html[data-ux="new"] .imp-drop-sub,
  html[data-ux="new"] section.view .banner,
  html[data-ux="new"] .np-touch-why,
  html[data-ux="new"] .pv-read,
  html[data-ux="new"] .pv-headline,
  html[data-ux="new"] .cu-occ-text,
  html[data-ux="new"] .cm-auto__switch,
  html[data-ux="new"] .np-cmt-auto-switch,
  html[data-ux="new"] .np-boost-neverh { font-size: 14px; line-height: 1.45; }
  html[data-ux="new"] section.view .btn,
  html[data-ux="new"] .modal .btn { font-size: 14px; }
  html[data-ux="new"] .modal-sub,
  html[data-ux="new"] .modal .hint { font-size: 14px; }

  /* ---- Fingers: 44 px targets the shared rules missed (these out-rank the screens' own, and phone-a11y.css) ---- */
  html[data-ux="new"] section.view .btn,
  html[data-ux="new"] section.view .btn--sm,
  html[data-ux="new"] .np-drawer .btn,
  html[data-ux="new"] .pp-dialog .btn { min-height: 44px; }
  html[data-ux="new"] section.view .btn--icon { min-width: 44px; }
  html[data-ux="new"] section.view select,
  html[data-ux="new"] .np-auto-sel,
  html[data-ux="new"] .np-touch-perday-sel { min-height: 44px; }
  html[data-ux="new"] .np-drawer-close,
  html[data-ux="new"] .np-touch-toggle { min-width: 44px; min-height: 44px; }
  html[data-ux="new"] .cl-chip { min-height: 44px; min-width: 44px; }
  html[data-ux="new"] .np-touch-name,
  html[data-ux="new"] .pv-name { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ux="new"] .sg-links li { padding: 0; }
  html[data-ux="new"] .sg-links a { display: flex; align-items: center; min-height: 44px; }

  /* Touch's switches (Stay in touch / Profile viewers / Catch up): the name over its box, the box the full width */
  html[data-ux="new"] .np-auto-row { flex-direction: column; align-items: stretch; gap: 10px; }
  html[data-ux="new"] .np-auto-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
  html[data-ux="new"] .np-auto-item > .np-auto-sel { flex: 1 1 100%; width: 100%; }

  /* ---- Nothing under the bottom bar: what sits fixed at the foot of the screen rises above it ---- */
  html[data-ux="new"] .lq-undo,
  html[data-ux="new"] .version-banner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  html[data-ux="new"] .ng-dock { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  html[data-ux="new"] .toast-host { left: 16px; right: 16px; max-width: none; }

  /* ---- Dialogs and side panels: the whole screen on a phone (they sit above the bottom bar) ---- */
  html[data-ux="new"] .modal-overlay { padding: 0; align-items: stretch; }
  html[data-ux="new"] .modal,
  html[data-ux="new"] .modal.modal--sm,
  html[data-ux="new"] .modal.modal--lg { max-width: none; min-height: 100%; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
  html[data-ux="new"] .modal-head { align-items: center; padding: 12px 16px; }
  html[data-ux="new"] .modal-body { flex: 1 1 auto; max-height: none; padding: 16px; }
  html[data-ux="new"] .modal-foot { flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  html[data-ux="new"] .np-drawer,
  html[data-ux="new"] .pp-dialog,
  html[data-ux="new"] .np-rw-panel { width: 100vw; max-width: 100vw; border-left: 0; }
  /* the contact drawer's head: Previous, Next, Open full page and the close on one line (it wrapped the close alone) */
  html[data-ux="new"] .np-drawer-head { flex-wrap: nowrap; gap: 6px; padding: 8px 12px; }
  html[data-ux="new"] .np-drawer-head .btn { padding-left: 12px; padding-right: 12px; }
  html[data-ux="new"] .np-drawer-head .np-drawer-page { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html[data-ux="new"] .np-drawer-close { flex: 0 0 auto; }
  html[data-ux="new"] .wr-root { padding: 0; align-items: stretch; }
  html[data-ux="new"] .wr-dialog { max-width: none; min-height: 100%; margin: 0; border: 0; border-radius: 0; padding: 20px 16px; }
  html[data-ux="new"] .cr--full { padding-left: 16px; padding-right: 16px; }
}