/* ═══════════════════════════════════════════════════════════════════════════
   THE PHONE. Measured across every page on 2026-09-17 at 375px.

   The layout is fine. No page scrolls sideways, no table escapes its
   scroller, and the field tools were built for a phone from the start. What
   was broken was smaller and worse: the CONTROLS.

   1. iOS Safari ZOOMS THE WHOLE PAGE when a focused input is under 16px, and
      the man holding the phone has to pinch back out every single time.
      Measured: 9px on the punchlist project picker, 11px on the blockers
      filter, 13.3px on the warehouse scan box, 13.1px on the operations date
      and project filters, 15px on all three timeclock fields. This is not a
      taste question, it is the one rule that decides whether a form is usable
      one-handed on a site.

      It carries !important on purpose, and only here: dozens of pages set a
      font-size on their own inputs inline or in a page <style>, and every one
      of them predates anybody testing on a phone. A platform constraint has
      to win over a page's preference.

   2. A thumb needs about 40px. Measured: 9px selects, 14px links, 22 to 29px
      buttons. Height only, so nothing gets wider and no row can overflow.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* No zoom on focus. Range, checkbox and radio are excluded: they carry no
     text, and forcing a size on them only fights the browser's own control. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea { font-size: 16px !important; }

  /* Room for a thumb. Height only. */
  button,
  .btn,
  select,
  input[type="submit"],
  input[type="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea { min-height: 40px; }

  /* A checkbox at 13px is a coin toss with a work glove on. */
  input[type="checkbox"],
  input[type="radio"] { min-width: 22px; min-height: 22px; }

  /* A button that is now taller needs its label centred rather than sitting
     against the top edge. */
  button, .btn, input[type="submit"], input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DASHBOARD, measured 2026-09-18 at 412px with the crushed-column probe.

   Two blocks were wider than the phone and made .page-content scroll
   sideways, and neither overflowed by any rule a width check could see. The
   mechanism is a CSS grid trap: a `1fr` track means minmax(auto, 1fr), so a
   column grows to its content's MINIMUM width. The Needs Your Attention list
   forced its column to 519px; a project card's four-column category strip
   forced its column to 461px. min-width:0 on the grid children lets the track
   shrink and the text inside wrap.

   These live here and not in perennial.css for two reasons: 53 pages link
   that file as ?v=7.5 and the browser serves the cached copy, and the base
   .proj-cats rule sits LATER in that file than its own phone rule, so the
   3-column version never applied at any width. The extra .page-content
   ancestor wins that ordering fight on specificity rather than on luck.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .page-content .dash-grid > *,
  .page-content .projects-grid > *,
  .page-content .be-two-col > * { min-width: 0; }
}

@media (max-width: 700px) {
  /* Four category tiles across a phone-width card were 100px each with the
     label wrapping five lines deep. Two across. */
  /* perennial.css forces 4 columns at 768px and 3 at 400px, both with
     !important, so this has to carry it too. */
  .page-content .proj-cats { grid-template-columns: repeat(2, 1fr) !important; }

  /* .ceo-today-card is flex:1, and flex:1 has a basis of 0, so the row never
     wraps: it just shrinks, and "0 On Site Now" ended up 48px wide. A 45%
     basis puts two on a line at about 186px each. */
  .page-content .ceo-today-card { flex: 1 1 45%; }
}

/* The mobile header cancels .page-content's padding with negative margins,
   and those were fixed at 18px while the padding is 12px under 600 and 8px
   under 400. Six pixels of sideways scroll on every page that has the bar. */
@media (max-width: 600px) { .page-content .mobile-header { margin-left: -12px; margin-right: -12px; } }
@media (max-width: 400px) { .page-content .mobile-header { margin-left: -8px;  margin-right: -8px;  } }

/* A <select> is as wide as its longest option. Two pages (Operations, the
   report project picker at 400px; Timesheets, the job picker at 434px) let one
   push .page-content wider than the phone. No control gets to do that. */
@media (max-width: 768px) {
  .page-content select { max-width: 100%; min-width: 0; }
}