/* Phone fit (Naja 11-14: "the more tab and options gets cut off on the phone"; test/phone-fit-ui.spec.mjs walks every
   tab and More item at 360 and 390 px). Loaded last: on a phone every control a thumb uses is at least 44 px tall
   (WCAG 2.5.5), sub-view tabs sit on one row that scrolls sideways inside itself (never wrapping into a wall of pills,
   never past the screen), and form fields are 16 px so iOS Safari does not zoom the page on focus. Layout only: no
   colors, no content. */
@media (max-width: 760px) {
  .v2-btn, .v2-pills > a, .v2-pills > button, .lpx-root .v2-pills > a { min-height: 44px; display: inline-flex; align-items: center; }
  .v2-tbtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .v2-pills.tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    max-width: 100%; min-width: 0; }
  /* The row sits in the briefing's flex column: without min-width 0 its one-line width would widen the page. */
  .v2-brief > div, .v2-page, .lpx-page, .v2-main { min-width: 0; }
  .v2-pills.tabs::-webkit-scrollbar { display: none; }
  .v2-pills.tabs > a, .v2-pills.tabs > button { flex: 0 0 auto; white-space: nowrap; }
  .v2-main select, .lpx-root select, .v2-main input:not([type=checkbox]):not([type=radio]):not([type=range]), .v2-main textarea { min-height: 44px; font-size: 16px; }
  .lpx-chip:has(> select) { min-height: 44px; }
  /* The older kit (app.css .btn and .chip) on the pages still drawn by it: Settings sections, Workflows. */
  button.btn, a.btn, button.chip, a.chip { min-height: 44px; display: inline-flex; align-items: center; }
  .ws-secs, .s4tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ws-secs::-webkit-scrollbar, .s4tabs::-webkit-scrollbar { display: none; }
  .ws-secs > *, .s4tabs > * { flex: 0 0 auto; white-space: nowrap; }
}