/* =============================================================================
   lab-mobile.css — the phone layer for every Lab Carriers page (2026-11-12)

   Loaded last in the <head> of all pages. It does not restyle anything; it
   removes the things that make a web page feel like a web page on a phone:
   the grey tap flash, slow taps, the page zooming into a small input, bars
   sitting under the notch / home indicator, lists that drag the page behind
   them, and layouts that stick out past a 390 px screen.

   Hover styles are NOT here: every :hover rule on the site now lives inside
   `@media (hover: hover) and (pointer: fine)` in its own file, so only a real
   mouse gets it (a phone keeps a hover "stuck" after a tap).

   Rules:
   - capability queries only (hover / pointer / env()), never device sniffing;
   - zoom is never locked — small inputs are made 16 px instead;
   - layout fixes are `screen` only, so printed BOLs / invoices / pay stubs /
     labels come out exactly as before;
   - `!important` appears only where it has to beat the older phone rules in
     styles.css / lc-mobile.css (which are themselves !important) or an inline style.
   ============================================================================= */

/* ---------- 1. Taps ---------- */

/* No grey/blue flash on tap; no font inflation in landscape. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* These never double-tap-zoom, so the browser can fire the tap at once. */
a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
}

/* A long press on a control must not select its label or pop the link callout.
   Controls only — addresses, order numbers and messages stay selectable. */
button, [role="button"], summary, a[class*="btn"], .nav-cta, .nav-toggle {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* The flash is gone, so a finger needs its own answer the moment it lands.
   Touch only: with a mouse the hover styles already do this job. */
@media (hover: none) {
  a:active,
  button:not(:disabled):active,
  [role="button"]:active,
  summary:active,
  input[type="submit"]:not(:disabled):active,
  input[type="button"]:not(:disabled):active {
    opacity: 0.62;
    transition-duration: 0s;
  }
}

/* ---------- 2. Typing ---------- */

/* iOS zooms the page into any field under 16 px and never zooms back out. */
@media screen and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="color"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------- 3. Notch, rounded corners, home indicator ---------- */
/* The viewport tag now says viewport-fit=cover, so backgrounds paint edge to
   edge and the content is padded back in. All of these are 0 on a phone held
   upright in the browser; they matter sideways and when the site is opened
   from the home screen. */
html {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}

/* Things that float over the page (added by chat.js, ux.js, the client-request watcher and the pages' own
   toasts). A margin moves each one in from the notch / home indicator without touching its own position — on
   most Lab pages the chat button sits inside the top bar, where changing right/bottom would move it. */
#lcChatLauncher { margin-right: env(safe-area-inset-right, 0px); margin-bottom: env(safe-area-inset-bottom, 0px); }
.lcc-toast-host, #ux-toasts, #toastHost, #lcSubmissionBannerHost { margin-top: env(safe-area-inset-top, 0px); }

/* Lab pages: Pixy's button and panel sit in the bottom-right corner (pixy-widget.js places them inline at
   18 px). A margin moves them in from the home indicator without touching the widget's own numbers. The
   client portal already lifts them above its phone tab bar, home indicator included. */
#pixyFab, #pixyPanel {
  margin-right: env(safe-area-inset-right, 0px);
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
@media screen and (max-width: 640px) {
  body[data-nav] #pixyFab, body[data-nav] #pixyPanel { margin-bottom: 0; }
}
/* Billing pages: the side rail (a drawer on a phone) and its round menu button. */
.bn-rail { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.bn-toggle { margin-left: env(safe-area-inset-left, 0px); margin-bottom: env(safe-area-inset-bottom, 0px); }
/* Billing pages: the "View only" bar and its error toast float above the home indicator. */
.bl-bar, .bl-toast { margin-bottom: env(safe-area-inset-bottom, 0px); }
/* Sign-in and reset pages: the round light/dark button in the top corner. */
.lc-themebtn, .rp-themebtn { margin-top: env(safe-area-inset-top, 0px); margin-right: env(safe-area-inset-right, 0px); }

/* ---------- 4. Scrolling ---------- */
/* A list, sheet or wide table that reaches its end must not start dragging the
   page behind it. (The pages themselves are documents: the root is left alone,
   so pull-to-refresh keeps working.) No effect on anything that does not scroll. */
[class*="modal"], [class*="Modal"], [class$="-bg"], [class*="-sheet"], [class*="drawer"],
[class*="tablewrap"], [class*="table-wrap"], [class*="-scroll"],
.lcc-list, .lcc-msgs, .lc-notif-panel, .lc-notif-list, .nav-dropdown-menu,
#pixyPanel, .bn-scroll {
  overscroll-behavior: contain;
}

/* ---------- 5. Small screens: nothing sticks out, nothing is too small to hit ---------- */

@media screen and (max-width: 768px) {
  /* styles.css forces these grids to one `1fr` column on phones. A bare
     `1fr` may not shrink below its widest child, so one long table or address
     stretched the whole page sideways. Let the children shrink instead. */
  [class$="-grid"] > *, [class$="-cards"] > *, [class$="-kpis"] > *, [class$="-hero"] > *,
  [class$="-row"] > *, [class$="-cols"] > * {
    min-width: 0;
  }

  /* Wide tables scroll inside their own box instead of pushing the page. */
  .card:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Number tiles: two per row reads faster than a tall single column
   (styles.css stacks them one per row under 480 px). */
@media screen and (min-width: 340px) and (max-width: 480px) {
  [class$="-kpis"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Fingers, not cursors: the smallest controls grow to something a thumb can hit. */
@media screen and (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}

/* ---------- 6. Page by page: what still stuck out at 390 px ---------- */

@media screen and (max-width: 640px) {
  /* Client portal — Request a pickup: a stop's address box is 16 px on a phone (so iOS does not zoom into
     it), which made it wider than the stop column and pushed the row off the screen. The column may shrink. */
  .stop-item { grid-template-columns: 34px minmax(0, 1fr); }
  .stop-field .addr { min-width: 0; width: 100%; }

  /* Manual BOL: the toolbar's last button (Download PDF) ran off the screen. */
  .mb-bar .actions { flex-wrap: wrap; }

  /* Client home: Pixy's "Bye! Sleep well" bubble opens to the right of the mood icon, which sits at the
     right edge of a phone, so for a few seconds the page could be dragged sideways. On a phone it opens to
     the left instead (the bubble is built with inline styles in portal-home-art.js, hence !important). */
  #mood-slot :is([style*="bottom:100%"], [style*="bottom: 100%"]) { left: auto !important; right: 50%; transform-origin: 100% 100% !important; }
  #mood-slot :is([style*="bottom:100%"], [style*="bottom: 100%"]) > [style*="nowrap"] { border-radius: 16px 16px 4px 16px !important; }
}