/* mobile.css — every proof-creator page, on every size of screen.
 *
 * Macrae, 29 Sep 2026: "make the proof creator mobile friendly for all sort of
 * mobile devices. not just iphones or samsungs". So nothing here keys on a
 * device or a user agent: it is width (and, for landscape phones, height)
 * alone, down to the 320 px of the smallest phones still in use.
 *
 * WHY ONE SHARED FILE AND NOT AN EDIT TO EACH PAGE. index.html and
 * commercial.html carry their marks as inline base64 and are not re-sent
 * through the contents API (tools/build-nav.mjs says why). build-nav puts
 * <link rel="stylesheet" href="/mobile.css"> just before </head> on every
 * page, so these rules come after each page's own <style> and win at equal
 * specificity. The only !important here is against inline style attributes
 * (the staff and shop-settings buttons draw themselves that way).
 *
 * WHAT WAS WRONG. The section tab bar is 470 px wide and never wrapped, and
 * the header put the status pill, who-is-signed-in and Shop settings on the
 * same row, so every page was 480–1000 px wide on a phone: the browser either
 * scrolled sideways or shrank the whole page to unreadable. Form fields at
 * 13–14 px also make iPhones zoom in on every tap.
 */

/* ────── everywhere: nothing may be wider than the screen */
img, svg, canvas, video, iframe { max-width: 100%; }
dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow: auto; }
pre, code { overflow-wrap: anywhere; }

/* ────── tablets and down: the header wraps, the tab bar gets its own row */
@media (max-width: 900px) {
  header { flex-wrap: wrap !important; row-gap: 8px !important; column-gap: 10px !important; padding: 10px 14px !important; }
  header .titles { flex: 1 1 auto; min-width: 0; }
  header #status, header #clock { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #spwho, #spshop { margin-left: 0 !important; flex: 0 0 auto; }

  /* The tab bar: a full-width row that scrolls sideways inside itself if six
     tabs do not fit, instead of pushing the page wider than the phone. */
  nav.modes { order: 10; flex: 1 1 100%; width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
  nav.modes::-webkit-scrollbar { display: none; }
  nav.modes a { flex: 0 0 auto; padding: 9px 14px; min-height: 38px; display: inline-flex; align-items: center;
    scroll-snap-align: start; }
}

/* ────── phones */
@media (max-width: 640px) {
  header .sub { display: none; }
  header h1 { font-size: 15px; }
  main { padding-left: 10px !important; padding-right: 10px !important; }
  /* A grid track of `1fr` will not shrink below its widest child; minmax(0,…)
     lets the cards take the screen's width instead of pushing past it. */
  main { grid-template-columns: minmax(0, 1fr) !important; }
  main > *, .card { min-width: 0; }
  /* Rows of chips and labels wrap rather than run off the edge. */
  .pickhead, .actions, .toolbar { flex-wrap: wrap; }

  /* The residential form (index.html): the chosen product reads on a line of
     its own under its label, the search box takes the full width, and the
     three-across rows become two-across with the widest field on its own. */
  .pickhead #chosen { flex: 1 1 100%; order: 3; min-width: 0; }
  .pickhead input { flex: 1 1 100%; max-width: none !important; margin-left: 0 !important; order: 4; }
  .row3 { grid-template-columns: 1fr 1fr !important; }
  .row3 > :first-child { grid-column: 1 / -1; }
  .row.wsides { grid-template-columns: 1fr 1fr !important; }
  .row.wsides > :last-child { grid-column: 1 / -1; }

  /* 16 px stops iOS zooming into a field on every tap; Android keeps it
     readable in bright light. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px !important; }

  /* Buttons a thumb can hit. */
  button.go, a.ghost, button.ghost, .filters input, .filters select { min-height: 40px; }

  /* Wide tables scroll inside themselves. */
  table { display: block; max-width: 100%; overflow-x: auto; }

  /* The staff and shop-settings buttons: initials only, no long name. */
  #spwho button, #spshop button { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ────── the smallest phones (320–359 px) */
@media (max-width: 359px) {
  header { padding: 8px 10px !important; }
  nav.modes a { padding: 9px 11px; font-size: 12.5px; }
}

/* ────── phones on their side: short screens, dialogs must still fit */
@media (max-height: 480px) and (orientation: landscape) {
  dialog { max-height: calc(100dvh - 12px); }
  header { padding-top: 6px !important; padding-bottom: 6px !important; }
}