/* mobile.css — shared mobile hardening utilities.
   Linked after site_nav.css on every page. All rules live inside media
   queries (or are inert helpers like .table-scroll) so desktop rendering
   is untouched. Selectors are component-scoped on purpose: a bare
   `button { min-height: … }` would distort dense desktop-tuned widgets. */

/* Horizontal-scroll wrapper for wide tables. Inert on desktop. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table { min-width: 100%; }

@media (max-width: 768px) {
  /* The BETA banner is position:fixed and single-line on desktop; on narrow
     screens its text wraps and would overlap the header. Let it scroll away
     as normal flow instead, and drop the fixed-height spacer that follows. */
  #beta-banner { position: static !important; }
  #beta-banner + div { display: none; }

  /* iOS Safari zooms the page when a focused control's font-size is under
     16px. Bump form controls to 16px so focusing an input never zooms. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="month"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Comfortable touch targets for the shared control patterns used across
     pages (segmented toggles, chips, selects, panel buttons). */
  .toggle-group button,
  .chip,
  .hour-select,
  .layers-btn,
  .btn,
  button[type="submit"] {
    min-height: 40px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
  }

  /* A <select> sizes to its longest option, and one long option (e.g. a
     constraint name) otherwise forces the whole page wider than the phone
     screen. Bound it to the viewport; the picker itself still shows the
     full text. */
  select {
    max-width: calc(100vw - 48px);
  }
}