/*
 * ops-mobile.css — shared mobile floor for the ops pages that are NOT index.html.
 *
 * index.html carries its own @media (max-width: 720px) block. The standalone
 * pages do not, and they are generated by different files
 * (lib/unit-pricing/calculator-page.js, lib/unit-pricing/page.js,
 * public/ops/mileage.html, upgrade-margins.html, sub-outreach.html), so each one
 * had its own idea of mobile. Measured at 390px before this file existed:
 *
 *   /ops/calculator   247px sideways scroll, 59 of 60 controls under 44px
 *   /ops/pricing      253px sideways scroll, 14 of 28 under 44px
 *   /ops/mileage        0px scroll,          35 of 35 under 44px
 *
 * Served at /ops/static/ops-mobile.css. Link it from any new ops page rather
 * than writing a fourth version of these rules.
 *
 * Deliberately narrow: tap size, overflow containment, and a text floor. No
 * colours, no spacing opinions, nothing that would fight a page's own design.
 */
@media (max-width: 760px) {

  /* 1. NOTHING SCROLLS SIDEWAYS.
     A page wider than the phone is the failure people describe as "the mobile
     UI is messed up", because every vertical scroll drifts horizontally. Wide
     tables get their own scroller instead of pushing the document. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-x: auto; }

  /* 2. 44px TAP TARGETS (Apple HIG, WCAG 2.5.5).
     min-height rather than padding: padding sized for one font-size lands short
     at another, which is exactly how a set of these ended up at 38px. */
  button, .btn, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea {
    min-height: 44px;
    /* 16px is the threshold below which iOS zooms the page on focus, which then
       leaves the layout scrolled sideways after the keyboard closes. */
    font-size: 16px;
    max-width: 100%;
  }
  /* Checkboxes and radios are held to WCAG 2.5.8 AA (24px), not the 44px AAA
     figure used above. Forcing 44px here would mean a calculator row of giant
     boxes; 24px is the standard that actually applies to small inline controls,
     and the browser default is closer to 13px. */
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }

  /* Nav and tab links are controls, not prose. The negative margin hands the
     height back to the layout so rows stay as dense as they are on desktop. */
  .ops-nav-tab, .nav-tab, .tab, .trade-link,
  /* The brand link (19px) and Sign out (14px) sit in the top bar of every
     standalone page. Sign out in particular is a destructive-ish action that
     was one of the smallest targets on the page. */
  .nav-brand, .nav-link {
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* 3. TEXT FLOOR. A phone at arm's length on a jobsite in daylight is the worst
     reading condition this app has. */
  body { font-size: 15px; }
  small, .small, .muted, .hint, .note { font-size: 12px; }

  /* 4. Tab rows wrap rather than running off the edge. A tab past the right edge
       of a nowrap row is unreachable, not merely hidden. */
  .nav-tabs, .ops-nav, .tab-row, .tabs { flex-wrap: wrap; row-gap: 2px; }
}

/*
 * KEYBOARD FOCUS RING.
 *
 * Every rule in this app that sets `outline: none` does replace it, but the
 * replacement is a 1px border shifting #ddd -> #0071e3. That satisfies WCAG
 * 2.4.7 and is genuinely hard to see, especially on the inputs sitting inside
 * table cells.
 *
 * :focus-visible, not :focus — the ring appears for keyboard and assistive-tech
 * navigation and stays away when the control is clicked or tapped, so mouse and
 * touch behaviour is unchanged.
 */
:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * DISCLOSURE TRIANGLES.
 *
 * A <summary> is the click target for its <details>, not a label for one, so
 * its own box is the tap target. The ones in this app inherit no padding and
 * come out 18-30px tall. Padding rather than min-height + flex, because
 * display: list-item is what draws the triangle marker.
 *
 * (The 24px checkboxes elsewhere are NOT the same problem: each sits inside a
 * <label> 72px or taller, and clicking a label toggles its checkbox, so the
 * real target is already well over 44px.)
 */
@media (max-width: 720px) {
  summary { padding: 13px 0; }
}