/* pwa-polish.css — the install card, the offline pill and the "update ready"
   pill. Loaded by all three shells after system.css, so every colour, shadow,
   radius and weight here is a --sys-* token (2026-09-05 restyle): the install
   card is a white borderless card lifted by the sheet shadow, its primary button
   is the accent, the offline pill is the status red, and the update pill keeps
   the dark ink pill because that is the app's toast vocabulary. The font is the
   phone's own (--sys-font); no Inter. Positions and sizes are untouched. */
.pwa-install-card,
.pwa-network-pill,
.pwa-refresh-card {
  position: fixed;
  z-index: 80;
  font-family: var(--sys-font);
}

.pwa-install-card {
  left: max(14px, var(--sys-safe-l));
  right: max(14px, var(--sys-safe-r));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: none;
  max-width: 520px;
  margin: 0 auto;
  border: 0;
  border-radius: var(--sys-r-card);
  background: var(--sys-panel);
  color: var(--sys-ink);
  box-shadow: var(--sys-shadow-sheet);
  padding: 12px;
}

.pwa-install-card.show { display: grid; }
.pwa-install-main { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 11px; align-items: center; }
.pwa-install-card img { width: 48px; height: 48px; border-radius: 14px; background: var(--sys-fill); padding: 5px; object-fit: contain; }
.pwa-install-card strong { display: block; font-size: 14px; font-weight: var(--sys-w-semibold); line-height: 1.15; }
.pwa-install-card span { display: block; margin-top: 3px; color: var(--sys-muted); font-size: 12px; font-weight: var(--sys-w-medium); line-height: 1.25; }
.pwa-install-actions { display: flex; gap: 8px; }
/* Secondary button, contract section 2: white pill, accent text, the soft
   shadow, and the 44px floor (it was 38 with a hairline border). 2026-09-06 w2. */
.pwa-install-card button {
  min-height: var(--sys-tap);
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-accent);
  box-shadow: var(--sys-shadow-btn);
  padding: 0 13px;
  font: inherit;
  font-size: var(--sys-t-body);
  font-weight: var(--sys-w-semibold);
}
.pwa-install-card .pwa-primary { background: var(--sys-accent); color: #fff; box-shadow: none; }
.pwa-install-help {
  display: none;
  margin-top: 10px;
  border-top: 1px solid var(--sys-line);
  padding-top: 10px;
  color: var(--sys-muted);
  font-size: 12px;
  font-weight: var(--sys-w-medium);
  line-height: 1.35;
}
.pwa-install-help strong,
.pwa-install-help span {
  display: block;
}
.pwa-install-help ol {
  margin: 9px 0 10px;
  padding-left: 20px;
}
.pwa-install-help li {
  margin: 5px 0;
}
.pwa-install-card .pwa-copy-link {
  width: 100%;
  border-color: var(--sys-line);
}
.pwa-install-card.help-open .pwa-install-help { display: block; }

/* ON THE NAV'S TOP EDGE, in the gap between two rows of buttons (UI-186, then
   its review, 2026-09-30). Fixed 10px under the top inset it sat on every
   screen's heading ("Good afternoon, Jesus") for as long as there was no signal.
   Moved to --sys-bar-bottom, where the toast floats, it sat on "Submit work" —
   the crew's docked bar lives in that band — and, being a box that took taps,
   swallowed a quarter of the one button a mover presses in a basement. The
   toast gets away with that band because it is gone in two seconds; this pill
   stays as long as the signal does.
   The one strip no control ever uses is the 18px either side of the nav's top
   edge: the nav's buttons start 8px under it (1px ring + 7px padding, system.css
   THE NAV) and a docked bar's buttons end 10px over it (.form .bottom-bar and
   .detail-sticky-actions sit ON the edge with 10px of padding). A 16px pill
   straddling the edge, 7px down and 9px up, touches neither, and it is measured
   from --sys-nav-top, so it follows the nav at every inset.
   pointer-events:none on top of that, as the toast has: it says a state and is
   not a control, so whatever it ever lands on, a tap goes through it.
   ONE STEP ABOVE THE NAV AND UNDER EVERYTHING ELSE, not the 80 the install card
   keeps. The strip is only free while the nav is there. The house drawer, the
   inventory sheets and every bottom sheet (--sys-z-sheet, 60) hide the nav and
   put their own content in that strip: in the drawer, a long pull list scrolled
   to its end has "Keep pulling" exactly there. Drawn under them, the pill goes
   where the nav goes — under whatever covers the page. */
.pwa-network-pill {
  bottom: calc(var(--sys-nav-top, 78px) - 7px);
  left: var(--sys-center-x);
  display: none;
  transform: translateX(-50%);
  z-index: calc(var(--sys-z-nav, 40) + 1);
  pointer-events: none;
  border-radius: var(--sys-r-pill);
  background: var(--sys-red-ink);
  color: #fff;
  box-shadow: var(--sys-shadow-pill);
  padding: 2px 9px;
  font-size: var(--sys-t-caption);
  line-height: 12px;
  font-weight: var(--sys-w-semibold);
}
body.pwa-offline .pwa-network-pill { display: block; }
/* It goes when the nav goes. With the keyboard up the docked Submit bar rides
   8px above the keys and the nav fades (employee-field-app.css "And the nav
   goes", bento.css the same), so an edge the pill hangs on is no longer there
   and where it would hang is the Submit bar. Same pointer query as those rules,
   for the reason system.css gives. */
@media (hover: none) and (pointer: coarse) {
  html.kb-open .pwa-network-pill,
  html.kb-typing .pwa-network-pill { opacity: 0; }
}
/* MANAGER HOME: IN THE PAGE'S TOP MARGIN, NOT ON THE NAV (2026-10-12). The 9px
   the pill hangs over the nav's edge is page, and Home's page is tiles wall to
   wall, scrolling under the nav: whatever row rests on that edge is under the
   pill, and which row that is depends on everything above it. "Good afternoon,
   Mario" is two lines on a phone where "Good morning" is one, and that 34px put
   it on "＋ New house" every afternoon (Coming up's 1 to 10 rows, a board post
   or a two-line Activity tile do the same). No spot on the nav is free there:
   its own buttons start 8px under the edge and everything above is the page.
   Home has one strip nothing can move into: the 32px above the date line (main's
   12px top padding, index.html, and the hub header's 20px, bento.css), above
   everything whose height changes. The pill sits in it, 8px down and centred as
   on the nav, and it is absolute, not fixed, so it scrolls with that strip and is
   never over a tile at any length or any scroll. Every other screen keeps the
   nav's edge. qa:offline-pill reads all three numbers and sweeps Home's length. */
html[data-ui="bento"] body.manager-page-home .pwa-network-pill {
  position: absolute;
  top: calc(var(--sys-safe-t, 0px) + 8px);
  bottom: auto;
}
/* CREW HOME: THE SAME REASON, SINCE HIS COMING UP IS ON HER HOME TOO (2026-10-12).
   Her Home now carries the team's today and tomorrow over the board, 1 to 8 rows,
   so which control rests on the nav's edge depends on the day — with a short day it
   was the board's "Post to the team". Her Home has no 32px margin above its date
   line (main starts at the top, the greeting row 12px down), but the greeting row's
   right side is empty at every length: the date and "Hi, <name>" are on the left,
   and the only control in that row ("‹", his view of her profile) is on the left
   too. The pill sits there, level with the date line, absolute so it scrolls with
   the row and is never over a card. */
body.crew-page-home .pwa-network-pill {
  position: absolute;
  top: calc(var(--sys-safe-t, 0px) + 18px);
  bottom: auto;
  left: auto;
  right: 18px;
  transform: none;
}
/* Where the iOS shell has already paid the top inset (native-inset.js), not twice. */
html.ni-top body.crew-page-home .pwa-network-pill { top: 18px; }

/* The dark ink pill on purpose: it is a toast, and the toast is the one dark
   surface the restyle keeps. */
.pwa-refresh-card {
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: none;
  transform: translateX(-50%);
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-ink);
  color: #fff;
  box-shadow: var(--sys-shadow-sheet);
  padding: 8px 9px 8px 14px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: var(--sys-w-semibold);
}
.pwa-refresh-card.show { display: flex; }
.pwa-refresh-card button {
  min-height: var(--sys-tap);
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-ink);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: var(--sys-w-semibold);
}

body.pwa-standalone {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
}

@media (min-width: 760px) {
  .pwa-install-card { left: auto; right: 18px; width: 420px; }
}

/* ===== "Sending 3 photos…" (2026-10-23) =====
   The offline pill above, borrowed by pull-list.js while pull-list
   photos are still on this phone. body.pl-photos shows it where body.pwa-offline
   would; the sending state wears the watch colour, the parked state keeps the red
   and is the one state that takes a tap (the retry). Position, size and the
   keyboard rule stay pwa-polish.css's. */
body.pl-photos .pwa-network-pill { display: block; }
.pwa-network-pill.pl-sending { background: var(--sys-orange, #A85900); }
.pwa-network-pill.pl-parked { pointer-events: auto; cursor: pointer; }