/* Phones (and the "My MCP" home-screen app). Every rule sits inside a phone media query so desktop never changes.
   Loaded last so it can tidy up after the page stylesheets. */

@media (max-width: 899px) {
  /* iOS: no text inflation on rotate; no grey flash on tap */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }

  /* Safe areas (viewport-fit=cover): keep the top bar clear of the notch / status bar and the sides clear of the
     notch in landscape; leave room under the last content for the home indicator. */
  .topbar { padding-top: max(4px, env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); }
  .side { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); }
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  #toast { bottom: calc(16px + env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); }
  .wa-launch { top: calc(var(--strip, 0px) + 6px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .wa-restore { top: calc(var(--strip, 0px) + 10px + env(safe-area-inset-top)); }
  .wa-tray { top: calc(var(--strip, 0px) + 54px + env(safe-area-inset-top)); }

  /* Top bar: the Menu button never squashes ("Men/u") when a long page title fades in beside it */
  .menubtn { flex: none; white-space: nowrap; }
  .topbar b { flex: 1 1 auto; }
  .topbar { padding-right: calc(56px + env(safe-area-inset-right)); } /* clear of the assistant button that sits in the bar */

  /* iOS zooms into any field under 16px when it's focused. 16px on phones stops the jump. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }

  /* Long order numbers, emails and links wrap instead of pushing the page sideways */
  #main { overflow-wrap: break-word; }
  #main a, .umail { overflow-wrap: anywhere; }

  /* Menu: 44px rows for thumbs */
  .side .navlink { min-height: 44px; }
  .side .userbox .sline { min-height: 44px; }

  /* Tap targets: small buttons and text links that act like buttons */
  .btn.small, .file, .backset, .lxsm, .lxacts .btn.lxsm { min-height: 44px; }
  .backset { align-items: center; }
  .tkchip, .tksplit .tkkinds .tkchip { min-height: 40px; }
  .swview .tab { min-height: 40px; }
  .mltabs .mlrefresh, .tkrefresh { min-width: 44px; justify-content: center; }
  .tpl { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .tpgroup { min-height: 44px; }
  .wqfree .link, .kstartrow .kallt, .sechd .link, .kit .link, .card.step .small .link, .inline .link { display: inline-flex; align-items: center; min-height: 44px; }
  .kask .link.quiet.small, .tplinks .link.quiet.small { min-height: 44px; }
  .mltabs .mlfbtn { min-width: 44px; justify-content: center; }

  /* Tiny labels up to a readable 12px */
  .pgopen, .cltag { font-size: 0.75rem; }

  /* Ask-the-assistant bottom sheet clears the home indicator */
  .wa-panel { padding-bottom: env(safe-area-inset-bottom); }
}