/* ============================================================
   Phone rules that aren't any one page's business
   ============================================================

   css/mobile-nav.css owns the shell — the bottom bar and the drawer. This
   file is the rest of it: the handful of things that were wrong on a phone
   in the same way on eleven different pages, fixed once here rather than
   eleven times in eleven files.

   Loaded last, after every page's own stylesheet, because that's the whole
   point — these have to win.

   Three problems, in order:

   1. iOS zooms the page whenever you focus an input whose text is under
      16px, and then leaves you zoomed in. Nearly every input in this app is
      13–14px, so tapping any field on the pantry page threw the layout
      sideways. 16px on phones only; the desktop sizes are untouched.

   2. Rows of tabs and pills were written as `display:flex` with no wrap and
      no scroll, which is fine at 1280px and clips at 375px. The pantry tab
      strip lost two of its five tabs that way. They become swipeable rows.

   3. Tap targets. The house style is a 25–30px row button, which is a fine
      mouse target and under Apple's and Google's 44px minimum by a mile.
      The small round row buttons get grown to 40px on touch.

   …and above those, the safe-area block, which is the one part of this file
   that isn't inside the phone breakpoint. */

/* ============================================================
   Safe areas — the notch, the home indicator, the curved corners
   ============================================================

   index.html asks for viewport-fit=cover, which hands the page the whole
   screen including the parts the hardware is standing on. That's the deal
   worth taking — it's the only way env(safe-area-inset-*) reports anything
   but 0, and without those numbers there's no way to know how far in the
   home indicator or a Dynamic Island actually reaches. The price is that
   every element fixed to an edge now has to inset itself, which is what
   this block does. The tokens are in css/tokens.css.

   Not inside a media query on purpose: a phone held sideways is 844px wide,
   so it gets the desktop sidebar rail — and that rail is exactly what ends
   up underneath the notch. The insets are 0 on every desktop browser, so
   these rules cost nothing there.

   The rail grows a transparent border rather than more padding: `box-sizing:
   border-box` is global, so the border eats the inset without disturbing the
   content box, and the background still paints underneath it — the surface
   reaches the physical screen edge, the icons don't. */

.sidebar {
  width: calc(var(--sbw) + var(--safe-l));
  border-left: var(--safe-l) solid transparent;
}
body {
  padding-left: calc(var(--sbw) + var(--safe-l));
  padding-right: var(--safe-r);
}
.page, .overlay {
  left: calc(var(--sbw) + var(--safe-l));
  right: var(--safe-r);
}
/* the header and every routed page start below the island, not under it */
body > header .head-inner { padding-top: calc(12px + var(--safe-t)); }
.page-inner { padding-top: calc(24px + var(--safe-t)); }
/* the two things pinned to a bottom corner */
body #quickScan { right: calc(20px + var(--safe-r)); }
body #toast {
  left: calc(var(--sbw) + 18px + var(--safe-l));
  right: calc(18px + var(--safe-r));
}

@media (max-width: 720px) {

  /* ---------- 1. no more zoom-on-focus ---------- */
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="tel"], input[type="url"], input[type="email"],
  input:not([type]), textarea, select {
    font-size: 16px;
  }

  /* ---------- 2. rows that used to clip, now swipe ----------
     scrollbar hidden because on a phone there's no pointer to grab it with;
     the row is short enough that the cut-off pill is the affordance. */
  .ptabs,
  .pfilters,
  .ing-tools .pfilters,
  .rep-switch,
  .hz-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* a scrolling row needs its own edge padding or the last pill sits
       flush against the screen and looks cut rather than continued */
    padding-bottom: 2px;
  }
  .ptabs::-webkit-scrollbar,
  .pfilters::-webkit-scrollbar,
  .rep-switch::-webkit-scrollbar,
  .hz-scroll::-webkit-scrollbar { display: none; }

  .ptabs > *, .pfilters > *, .rep-switch > *, .hz-scroll > * { flex: none; }

  /* ---------- 3. thumbs, not cursors ---------- */
  .rowbtn, .linkbtn, .ing-edit, .pex-x, .vr-toggle {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* the two real misses: the × that unlinks a product from an ingredient was
     an 11×14 target, and the five rating stars were 21×19 each with 2px
     between them — both fine with a cursor, neither hittable with a thumb */
  .lchip button, .stars button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lchip button {
    min-width: 26px;
    min-height: 26px;
    margin: -6px -5px -6px 0;      /* grow the target, not the chip */
    font-size: 1rem;
  }
  /* ten stars, so they can't just be given a width each — they share the row
     and take their height from it */
  .stars { gap: 2px; width: 100%; }
  .stars button { flex: 1; min-width: 0; min-height: 34px; }

  /* wide-but-short controls: tall enough to hit, not so tall they shout */
  .gsz-act button, .qty-stepper select, .rep-range button, .rep-seg button {
    min-height: 34px;
  }
  /* the tick beside every product, every ingredient and every list line — a
     16px box is a miss with a thumb. Named rather than left to the bare
     element selector because pantry.css and shopping-list.css both set 16px
     with a class in front, and would otherwise win. */
  input[type="checkbox"], input[type="radio"],
  .prow input[type=checkbox],
  .li-item input[type=checkbox] { width: 20px; height: 20px; }

  /* the quiet dashed "add" buttons — a 24px-tall row is a mouse target.
     They also sit at opacity .7 until hover, and a phone has no hover, so
     they're brought up to full on touch too. */
  .cal-add, .ingr-add, .rcp-histbtn {
    min-height: 36px;
    opacity: 1;
  }

  /* ---------- page chrome ---------- */
  /* 24px of side padding on a 375px screen is 13% of it spent on nothing */
  .page-inner { padding-left: 14px; padding-right: 14px; }
  .page-head h2 { font-size: 19px; }

  /* a wide table can't be made narrow — let it scroll inside its own box
     rather than pushing the whole page sideways */
  table { display: block; overflow-x: auto; max-width: 100%; }
}