/* Shared styles for PWA-flavoured customer pages (packages, notifications,
 * home dashboard). Loaded everywhere so the design reads consistently in
 * both regular-browser and standalone modes — the look is the look,
 * regardless of which shell is wrapping it.
 *
 * Token palette mirrors the "Manifest" variant from the design canvas:
 *   ink     #0E1116
 *   paper   #F4F4F2  (already the body bg on desktop)
 *   blue    #1158E8
 *   rule    #DADAD5
 *   muted   #7A7872
 */

:root {
  --pwa-blue: #1158E8;
  --pwa-rule: #DADAD5;
  --pwa-rule-strong: #B7B6B0;
  --pwa-paper: #F4F4F2;
  --pwa-paper-2: #ECECE8;
  --pwa-ink-muted: #7A7872;
}

.pwa-page-title {
  font: 700 30px/1.05 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.028em;
  color: var(--ink, #0E1116);
  margin: 0 0 18px;
}
@media (max-width: 480px) {
  .pwa-page-title { font-size: 26px; }
}

.pwa-page-muted {
  font: 500 11px/1.1 "SF Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pwa-ink-muted);
}

/* Branded loader. Drop `.aircrate-loader` on an empty <div> and the
 * :empty selector renders the pulsing "Aircrate." wordmark. As soon
 * as JS sets textContent (e.g. on error), :empty no longer matches,
 * the pseudo-elements disappear, and the text shows normally. Pairs
 * with .pwa-page-muted so existing call sites get both behaviours. */
.aircrate-loader {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1px;
  padding: 32px 0;
}
.aircrate-loader:empty::before,
.aircrate-loader:empty::after {
  font: 800 22px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.025em;
  color: var(--ink, #0E1116);
  animation: aircrate-loader-pulse 1.4s ease-in-out infinite;
}
/* Package-card loading line — used inside the skeleton package row
 * on the home page. Mirrors the aircrate-loader pulse but with the
 * wordmark inline followed by a sentence so the card carries its own
 * message ("Aircrate. is loading your packages") instead of just the
 * bare brand. */
.pwa-pkg-loading {
  text-align: center;
  font: 500 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--pwa-ink-muted, #8A8F99);
  padding: 6px 0;
  animation: aircrate-loader-pulse 1.4s ease-in-out infinite;
}
.pwa-pkg-loading-mark {
  font: 800 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.025em;
  color: var(--ink, #0E1116);
  margin-right: 3px;
}
.pwa-pkg-loading-mark .dot { color: var(--pwa-blue, #1158E8); }
body.is-pwa.is-dark .pwa-pkg-loading-mark { color: #F4F4F2; }
@media (prefers-reduced-motion: reduce) {
  .pwa-pkg-loading { animation: none; opacity: 0.7; }
}

.aircrate-loader:empty::before { content: "Aircrate"; }
.aircrate-loader:empty::after {
  content: ".";
  color: var(--pwa-blue, #1158E8);
  animation-delay: 0.3s;
}
body.is-pwa.is-dark .aircrate-loader:empty::before { color: #F4F4F2; }
@keyframes aircrate-loader-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aircrate-loader:empty::before,
  .aircrate-loader:empty::after {
    animation: none;
    opacity: 0.65;
  }
}

.pwa-empty {
  margin-top: 24px;
  padding: 20px;
  background: #fff;
  border: 1px dashed var(--pwa-rule-strong);
  border-radius: 10px;
  font-size: 14px;
  color: var(--pwa-ink-muted);
}
.pwa-empty a {
  color: var(--pwa-blue);
  text-decoration: none;
  font-weight: 600;
}

.pwa-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#notif-list.pwa-list { gap: 34px; }

.pwa-card {
  display: block;
  background: #fff;
  border: 1px solid var(--pwa-rule);
  border-radius: 10px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.pwa-card:active { transform: scale(0.997); }

.pwa-muted {
  color: var(--pwa-ink-muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Filter chip row (packages page) ──────────────────────────────── */
.pwa-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pwa-chip {
  appearance: none;
  cursor: pointer;
  font: 600 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--pwa-rule);
  background: #fff;
  color: var(--ink, #0E1116);
  -webkit-tap-highlight-color: transparent;
}
.pwa-chip.is-active {
  background: var(--ink, #0E1116);
  color: #fff;
  border-color: transparent;
}

/* ── Package row ─────────────────────────────────────────────────── */
.pwa-pkg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pwa-pkg-left { flex: 1; min-width: 0; }
.pwa-pkg-title {
  font: 700 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink, #0E1116);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.pwa-pkg-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.pwa-pkg-right { text-align: right; flex-shrink: 0; }
.pwa-pkg-weight {
  font: 700 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink, #0E1116);
  letter-spacing: -0.01em;
}
.pwa-sticker {
  display: inline-flex;
  align-items: center;
  background: #FFFCEB;
  border: 1px solid currentColor;
  padding: 4px 7px;
  font: 700 9px/1 "SF Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Tracker (4-stage progress) ──────────────────────────────────── */
.pwa-tracker-wrap { margin-top: 12px; }
.pwa-tracker {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pwa-tracker-node {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--pwa-paper-2);
  border: 1px solid var(--pwa-rule);
  flex-shrink: 0;
}
.pwa-tracker-node.is-done {
  background: var(--pwa-blue);
  border-color: var(--pwa-blue);
}
.pwa-tracker-line {
  flex: 1;
  height: 2px;
  background: var(--pwa-rule);
}
.pwa-tracker-line.is-done { background: var(--pwa-blue); }
.pwa-tracker-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.pwa-tracker-labels span {
  font: 500 8.5px/1 "SF Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pwa-ink-muted);
  flex: 1;
  text-align: center;
}
.pwa-tracker-labels span:first-child { text-align: left; }
.pwa-tracker-labels span:last-child { text-align: right; }
.pwa-tracker-labels span.is-on { color: var(--ink, #0E1116); }

/* Dark-mode pending tracker dots — lift the contrast from the lower
 * override block (see "Dark variant overrides" further down) so the
 * pending stages read clearly against the dark card. */

/* ── Notification row ────────────────────────────────────────────── */
.pwa-notif {
  display: flex;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.pwa-notif.is-highlight::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--pwa-blue);
}
.pwa-notif-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: #ECECE8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pwa-ink-muted);
}
.pwa-notif.is-highlight .pwa-notif-icon {
  background: #E6EEFD;
  color: var(--pwa-blue);
}
.pwa-notif-icon svg {
  width: 18px; height: 18px;
}
.pwa-notif-body { flex: 1; min-width: 0; }
.pwa-notif-title {
  font: 600 14px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink, #0E1116);
  letter-spacing: -0.01em;
}
.pwa-notif-sub { margin-top: 5px; }
.pwa-notif-time { margin-top: 3px; font-size: 9px; }

/* ── Home dashboard styles ───────────────────────────────────────── */
.pwa-home {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pwa-address-card {
  background: #fff;
  border: 1px solid var(--pwa-rule);
  border-radius: 12px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  /* Tile press = subtle scale + lift drop. Mirrors the canvas Manifest
   * paper feel, no bright iOS tap flash. */
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pwa-address-card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 0 rgba(14, 17, 22, 0.04);
}
.pwa-address-head {
  padding: 12px 14px;
  border-bottom: 1px dashed var(--pwa-rule-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pwa-address-head .mono-blue {
  color: var(--pwa-blue);
}

/* Embossed M+ subscriber seal — canvas "04 · Embossed seal".
 * Ink (black) in light mode flips to paper (white) in dark mode so
 * the seal always reads against the card. Blue accents (rings,
 * SUBSCRIBER label, "+") stay constant in both modes. */
.pwa-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  border-radius: 999px;
  background: #0E1116;
  color: #F4F4F2;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(14, 17, 22, 0.18);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pwa-seal:active {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(14, 17, 22, 0.18);
}
body.is-pwa.is-dark .pwa-seal {
  background: #F4F4F2;
  color: #0E1116;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.pwa-address-body {
  padding: 14px;
}
.pwa-address-name {
  font: 700 20px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink, #0E1116);
  margin: 0 0 6px;
}
.pwa-address-name .pwa-ac {
  color: var(--pwa-blue);
}
.pwa-address-lines {
  font: 400 13px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1A1F26;
  margin: 0;
}
.pwa-address-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Address-card buttons stretch full-width and read bigger than the
 * default .pwa-btn — they're the home screen's primary action surface,
 * not the tight inline buttons used inside dense lists. */
.pwa-address-actions .pwa-btn {
  flex: 1 1 auto;
  justify-content: center;
  padding: 14px 16px;
  font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 8px;
}
.pwa-btn {
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  font: 600 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.pwa-btn.is-primary {
  background: var(--ink, #0E1116);
  color: #fff;
}
.pwa-btn.is-ghost {
  background: var(--pwa-paper-2);
  color: var(--ink, #0E1116);
  border: 1px solid var(--pwa-rule);
}

.pwa-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
}
.pwa-section-head h2 {
  font: 700 20px/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink, #0E1116);
  margin: 0;
}

.pwa-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.pwa-tile {
  background: #fff;
  border: 1px solid var(--pwa-rule);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pwa-tile.is-wide { grid-column: 1 / -1; }
/* Paper tile — for primary actions (Pre-declare, Quick quote). Reads
 * one notch darker than the white package cards above so it doesn't
 * disappear into the page bg; the dotted texture sells the canvas
 * Manifest aesthetic. Pressed state dims slightly. */
.pwa-tile.is-paper {
  background:
    radial-gradient(circle at 1px 1px, rgba(122, 120, 114, 0.16) 1px, transparent 1px) 0 0 / 10px 10px,
    #ECECE8;
  border-color: #C8C6BF;
}
.pwa-tile.is-paper:active {
  background:
    radial-gradient(circle at 1px 1px, rgba(122, 120, 114, 0.2) 1px, transparent 1px) 0 0 / 10px 10px,
    #DEDCD5;
}
body.is-pwa.is-dark .pwa-tile.is-paper {
  background:
    radial-gradient(circle at 1px 1px, rgba(122, 120, 114, 0.18) 1px, transparent 1px) 0 0 / 10px 10px,
    #1F232B;
  border-color: #353A45;
}
.pwa-tile-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #E6EEFD;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-tile-icon svg { width: 22px; height: 22px; }
.pwa-tile-label {
  font: 700 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink, #0E1116);
  letter-spacing: -0.01em;
}

.pwa-member-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--pwa-rule);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pwa-member-badge {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--ink, #0E1116);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 "SF Mono", monospace;
  flex-shrink: 0;
}
.pwa-member-body { flex: 1; min-width: 0; }
.pwa-member-title {
  font: 600 13px/1.15 "Helvetica Neue";
  color: var(--ink, #0E1116);
}

.pwa-balance-call {
  background: #FFFDF4;
  border: 1px dashed #B7791F;
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
/* Stack multiple call-outs (one per outstanding order) with breathing
 * room — earlier we only ever rendered one. */
.pwa-balance-call + .pwa-balance-call { margin-top: 10px; }
.pwa-balance-call .pwa-balance-amt {
  font: 800 22px/1 "Helvetica Neue";
  letter-spacing: -0.025em;
  color: var(--ink, #0E1116);
}

/* "Don't see your order?" claim strip — quiet by default, expands to a
 * compact form on tap. Sits below the Your-packages list so it doesn't
 * compete for attention when everything is already attached. */
.pwa-claim-strip {
  margin-top: 12px;
  text-align: center;
}
.pwa-claim-trigger {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--pwa-rule-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font: 500 12px/1.2 "SF Mono", monospace;
  letter-spacing: 0.04em;
  color: var(--pwa-ink-muted);
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.pwa-claim-form {
  background: #fff;
  border: 1px solid var(--pwa-rule);
  border-radius: 10px;
  padding: 12px;
  text-align: left;
}
.pwa-claim-row { display: flex; gap: 8px; }
.pwa-claim-input {
  flex: 1; min-width: 0; box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--pwa-rule);
  border-radius: 8px;
  padding: 12px 14px;
  font: 600 14px/1.2 "SF Mono", monospace;
  letter-spacing: 0.04em;
  color: #0E1116;
  -webkit-appearance: none; appearance: none;
}
.pwa-claim-input::placeholder { color: #B7B6B0; }
.pwa-claim-input:focus { outline: 2px solid var(--pwa-blue); outline-offset: -2px; }
.pwa-claim-btn {
  appearance: none; cursor: pointer; border: 0;
  background: #0E1116; color: #fff;
  border-radius: 8px;
  padding: 0 18px;
  font: 700 13px/1 "Helvetica Neue";
  -webkit-tap-highlight-color: transparent;
}
.pwa-claim-btn:disabled { opacity: 0.5; cursor: progress; }
.pwa-claim-msg { margin-top: 8px; font: 500 12px/1.4 "Helvetica Neue"; }
.pwa-claim-msg.is-ok  { color: #157A3A; }
.pwa-claim-msg.is-err { color: #C04A3C; }
body.is-pwa.is-dark .pwa-claim-trigger {
  border-color: #404552;
  color: #8A8F99;
}
body.is-pwa.is-dark .pwa-claim-form {
  background: #1A1E26;
  border-color: #2A2F39;
}
body.is-pwa.is-dark .pwa-claim-input {
  border-color: #2A2F39;
  color: #F4F4F2;
  -webkit-text-fill-color: #F4F4F2;
}
body.is-pwa.is-dark .pwa-claim-btn { background: #F4F4F2; color: #0E1116; }

/* ── Logged-out hero ─────────────────────────────────────────────── */
.pwa-hero {
  padding: 24px 0 14px;
}
.pwa-hero-word {
  font: 800 48px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.045em;
  color: var(--ink, #0E1116);
}
.pwa-hero-word .dot { color: var(--pwa-blue); }
.pwa-hero-tag {
  margin-top: 14px;
  font: 400 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1A1F26;
}
.pwa-hero-cta {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pwa-hero-cta .pwa-btn {
  justify-content: center;
  padding: 14px 16px;
  font-size: 15px;
}

/* ── Onboarding overlay ──────────────────────────────────────────── */
#pwa-onboarding {
  position: fixed;
  inset: 0;
  /* Tab bar + topbar sit at z-index 10000 (set in pwa-shell.css to escape
   * PayPal iframes). The onboarding modal must cover them or the
   * "Next" / "Get started" button hides behind the tab bar. */
  z-index: 10100;
  background: var(--pwa-paper);
  display: none;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-y: auto;
}
body.is-pwa.is-dark #pwa-onboarding { background: #0E1116; }
body.is-pwa.is-dark #pwa-onboarding .pwa-onb-title { color: #F4F4F2; }
body.is-pwa.is-dark #pwa-onboarding .pwa-onb-sub { color: #B7B6B0; }
body.is-pwa.is-dark #pwa-onboarding .pwa-onb-next { background: #F4F4F2; color: #0E1116; }
#pwa-onboarding.is-visible { display: flex; }
#pwa-onboarding .pwa-onb-top {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#pwa-onboarding .pwa-onb-skip {
  appearance: none;
  border: 0; background: none; cursor: pointer;
  font: 600 13px/1 "Helvetica Neue";
  color: var(--pwa-ink-muted);
  padding: 8px 8px 8px 12px;
  margin-right: -8px;
}
#pwa-onboarding .pwa-onb-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  min-height: 0;
}
#pwa-onboarding .pwa-onb-step {
  font: 500 11px/1.1 "SF Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pwa-blue);
}
#pwa-onboarding .pwa-onb-title {
  /* Scale with viewport so the headline fits on iPhone SE (320px) all
   * the way up to iPad without wrapping awkwardly. */
  font: 700 clamp(24px, 8vw, 32px) / 1.05 "Helvetica Neue";
  letter-spacing: -0.03em;
  color: var(--ink, #0E1116);
}
#pwa-onboarding .pwa-onb-sub {
  font: 400 clamp(14px, 4.2vw, 16px) / 1.45 "Helvetica Neue";
  color: #1A1F26;
  max-width: 320px;
}
#pwa-onboarding .pwa-onb-bottom {
  /* Push above the home indicator + give the Next button breathing
   * room. flex-shrink: 0 prevents the bottom row from being squashed
   * out of view on short screens. */
  padding: 14px 0 max(28px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#pwa-onboarding .pwa-onb-dots {
  display: flex;
  gap: 6px;
}
#pwa-onboarding .pwa-onb-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--pwa-rule-strong);
  transition: width 0.2s ease, background 0.2s ease;
}
#pwa-onboarding .pwa-onb-dot.is-active {
  width: 22px;
  background: var(--pwa-blue);
}
#pwa-onboarding .pwa-onb-next {
  appearance: none; cursor: pointer; border: 0;
  background: var(--ink, #0E1116);
  color: #fff;
  border-radius: 8px;
  padding: 14px 22px;
  font: 700 14px/1 "Helvetica Neue";
  letter-spacing: -0.01em;
}

/* ── PWA quote flow ──────────────────────────────────────────────────
 * /quote and /checkout are the marketing-form pages that double as the
 * customer's payment funnel. Inside the PWA the desktop two-column grid
 * + sticky explainer aside reads as wasted space; collapse to a single
 * column, hide the duplicate explainer (the form already states the
 * rate), and tighten the controls so they fit a phone naturally.
 */
body.is-pwa main[style*="grid-template-columns"] {
  display: block !important;
  padding-block: 18px !important;
}
body.is-pwa main > aside { display: none !important; }

body.is-pwa .meta-strip {
  margin-bottom: 8px !important;
  font-size: 10px;
}
body.is-pwa .eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--pwa-blue) !important;
}

/* Stack inline 2-column grids that quote.html uses for name/email,
 * phone/address. They squish to 6-char fields on a phone otherwise. */
body.is-pwa form > div[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* Flow toggle (ship-only / full-service) — canvas ModeRow style: two
 * stacked tiles, big titles, the selected one outlined in blue with a
 * blue "OPTION A · SELECTED" kicker. PWA-only — desktop /quote keeps
 * the segmented-tab .flow-toggle from app.css. */
body.is-pwa .flow-toggle {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body.is-pwa .flow-toggle label {
  display: block !important;
  padding: 14px !important;
  background: #FFFFFF !important;
  color: #0E1116 !important;
  border: 1px solid #DADAD5 !important;
  border-right: 1px solid #DADAD5 !important;
  border-radius: 10px !important;
  text-align: left !important;
  font: 400 14px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.is-pwa .flow-toggle label .mode-tag {
  display: block;
  font: 500 11px/1.1 "SF Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7A7872;
}
body.is-pwa .flow-toggle label .mode-title {
  display: block;
  margin-top: 4px;
  font: 700 16px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.01em;
  color: #0E1116;
}
body.is-pwa .flow-toggle label .sub {
  margin-top: 4px !important;
  font: 400 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #7A7872 !important;
  display: block !important;
}
body.is-pwa .flow-toggle label:has(input:checked) {
  background: #FFFFFF !important;
  color: #0E1116 !important;
  border: 2px solid #1158E8 !important;
  padding: 13px !important;
}
body.is-pwa .flow-toggle label:has(input:checked) .mode-tag::after {
  content: ' · SELECTED';
  color: #1158E8;
}
body.is-pwa .flow-toggle label:has(input:checked) .mode-tag {
  color: #1158E8;
}
body.is-pwa.is-dark .flow-toggle label {
  background: #1A1E26 !important;
  color: #F4F4F2 !important;
  border-color: #2A2F39 !important;
}
body.is-pwa.is-dark .flow-toggle label .mode-title { color: #F4F4F2; }
body.is-pwa.is-dark .flow-toggle label:has(input:checked) {
  background: #1A1E26 !important;
  color: #F4F4F2 !important;
}

/* Step kicker — Mono uppercase ruled-off header between form sections. */
.quote-step-kicker {
  font: 500 11px/1.1 "SF Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1158E8;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  margin-top: 16px;
  border-bottom: 1px dashed #B7B6B0;
}
body.is-pwa.is-dark .quote-step-kicker { border-bottom-color: #404552; }
body.is-pwa.is-dark .flow-toggle label {
  background: #1A1E26 !important;
  color: #F4F4F2 !important;
  border-color: #2A2F39 !important;
}
body.is-pwa.is-dark .flow-toggle label:has(input:checked) {
  background: #1A1E26 !important;
  color: #F4F4F2 !important;
}

/* Canvas kicker (Mono uppercase) above the form title. The existing
 * markup uses .eyebrow on /quote — re-style it to match. */
body.is-pwa .eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: var(--pwa-blue) !important;
}
body.is-pwa form#inquiry-form > section:first-of-type > h1,
body.is-pwa h1.display-section {
  font-size: 26px !important;
  line-height: 1.05 !important;
}

/* Items list rows in PWA mode — turn each row into a paste card with
 * a prominent PASTE-ish styling, matching canvas paste field. The
 * left-side seq stays small + monospace. */
body.is-pwa .items-list {
  gap: 8px !important;
}
body.is-pwa .item-row {
  background: #FFFFFF !important;
  border: 1px solid var(--pwa-rule) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
}
body.is-pwa .item-row .seq {
  font: 500 11px/1 "SF Mono", monospace !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--pwa-blue) !important;
  width: auto !important;
  text-align: left !important;
}
body.is-pwa .item-row .row-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font: 500 14px/1.3 "SF Mono", monospace !important;
  color: #0E1116 !important;
  outline: none !important;
}
body.is-pwa.is-dark .item-row {
  background: #1A1E26 !important;
  border-color: #2A2F39 !important;
}
body.is-pwa.is-dark .item-row .row-input {
  color: #F4F4F2 !important;
  -webkit-text-fill-color: #F4F4F2;
}

/* Delivery zone variant — make the third (full-width) tile sit on its
 * own row with no awkward right-border gap. */
body.is-pwa .delivery-zones label:nth-child(3) {
  border-top: 1px solid var(--pwa-rule) !important;
}

/* Multi-item URL rows: shrink sequence column, give the row a paper
 * card feel so taps register clearly. */
body.is-pwa .items-list { gap: 8px !important; }
body.is-pwa .item-row {
  grid-template-columns: 24px 1fr 36px !important;
  gap: 8px !important;
}
body.is-pwa .item-row .row-input {
  font-size: 14px !important;
  padding: 12px !important;
}
body.is-pwa .item-row .remove {
  width: 36px !important; height: 40px !important;
}
body.is-pwa .add-item-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 13px;
  border: 1px dashed var(--pwa-rule-strong);
  background: transparent;
  border-radius: 8px;
  color: var(--pwa-ink-muted);
}

/* Primary submit on quote/checkout — full-width, bigger touch target. */
body.is-pwa #submit-btn,
body.is-pwa #preview-confirm,
body.is-pwa #preview-edit,
body.is-pwa #manual-form button[type="submit"] {
  width: 100%;
  justify-content: center;
  padding: 16px !important;
  font-size: 15px !important;
}
body.is-pwa #preview-card > div,
body.is-pwa #manual-modal > div {
  padding-block: 12px !important;
}

/* Field labels: tighter caps, paper-aesthetic mono. */
body.is-pwa .field { margin-bottom: 16px !important; }
body.is-pwa .field > label {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--pwa-ink-muted) !important;
  font-family: "SF Mono", ui-monospace, Menlo, monospace !important;
  margin-bottom: 6px !important;
}
body.is-pwa .field-help {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* ── PWA checkout (review & pay) ─────────────────────────────────────
 * The checkout article is a giant white card on desktop; on a phone we
 * want it more like a receipt — paper bg shows through, dashed rules
 * between sections. The dt/dd ledger keeps its desktop styling because
 * that pattern reads well at any width.
 */
body.is-pwa #quote-card,
body.is-pwa #paid-card {
  padding: 16px !important;
  border-radius: 12px !important;
}
body.is-pwa #quote-card .meta-strip,
body.is-pwa #paid-card .meta-strip {
  font-size: 10px !important;
  margin-bottom: 12px !important;
}
/* Origin → Destination strip: stack to one row, shrink the giant arrow. */
body.is-pwa #quote-card > div[style*="align-items:center"][style*="justify-content:space-between"] {
  margin-bottom: 14px !important;
}
body.is-pwa #quote-card #product-host,
body.is-pwa #quote-card > div[style*="align-items:center"] > div > div[style*="font-display"] {
  font-size: 15px !important;
}

/* Coupon + credit blocks need vertical breathing room on mobile. */
body.is-pwa #coupon-block,
body.is-pwa #credit-block,
body.is-pwa #zone-block {
  margin-top: 14px !important;
  padding-top: 14px !important;
}
body.is-pwa #coupon-apply,
body.is-pwa #credit-apply {
  white-space: nowrap;
}

/* Pay-at-pickup CTA: full-width on PWA so it doesn't get lost. */
body.is-pwa #pref-pickup-btn,
body.is-pwa #pref-online-btn {
  width: 100%;
  justify-content: center;
}

/* PayPal Smart Button container: PayPal renders an iframe at whatever
 * width it likes; ensure it has full width on PWA. */
body.is-pwa #paypal-button-container {
  width: 100%;
  margin-top: 18px !important;
}

/* Manual-entry fallback cards (when scraper misses fields). */
body.is-pwa .manual-item {
  padding: 12px !important;
  border-radius: 10px !important;
}
body.is-pwa .manual-item .inputs {
  grid-template-columns: 1fr 1fr !important;
}

/* ── PWA membership ──────────────────────────────────────────────────
 * The compare card grid auto-fits on desktop; inside the PWA we want
 * the member tier to lead so we explicitly stack with member on top,
 * and shrink the bullet list font for phone reading. */
body.is-pwa main > div[style*="grid-template-columns: repeat(auto-fit"] {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
body.is-pwa main > div[style*="grid-template-columns: repeat(auto-fit"] > div:first-child {
  order: 2;
}
body.is-pwa main > div[style*="grid-template-columns: repeat(auto-fit"] > div:last-child {
  order: 1;
}
body.is-pwa #anon-block,
body.is-pwa #member-block,
body.is-pwa #subscribe-block {
  padding: 16px !important;
  border-radius: 12px !important;
}
body.is-pwa #cycle-toggle {
  border-radius: 10px !important;
}
body.is-pwa #paypal-button-container {
  min-height: 50px;
}

/* ── PWA login ───────────────────────────────────────────────────────
 * Form sits inside a paper card on a paper bg — boost contrast with a
 * white card + dashed rule so it doesn't disappear. */
body.is-pwa #login-form,
body.is-pwa #sent-card {
  padding: 16px !important;
  border-radius: 12px !important;
}
body.is-pwa #login-form #submit-btn {
  width: 100%;
  justify-content: center;
  padding: 14px !important;
  font-size: 15px !important;
}
body.is-pwa #login-form #google-btn {
  padding: 14px !important;
  font-size: 14px !important;
}

/* ── PWA /account ────────────────────────────────────────────────────
 * The account page hosts the dark "shipper card", membership block,
 * orders, profile editor, and the sign-out. Each lives in its own
 * white card; on phone we tighten the padding, force the stats card
 * to read on one line at smaller widths, and stack the bottom button
 * row so "Sign out" doesn't crowd "Help" + "Settings". */
body.is-pwa #content > section { padding: 16px !important; border-radius: 12px !important; margin-top: 14px !important; }
body.is-pwa #content > section:first-of-type { margin-top: 14px !important; }
body.is-pwa #content > .meta-strip { margin-bottom: 6px; }
body.is-pwa #content > h1 { font-size: clamp(24px, 6vw, 30px) !important; margin-top: 6px !important; margin-bottom: 0 !important; }

/* Dark "shipper" stats card on /account: shrink padding + restack the
 * three stats so they don't collide on a phone. */
body.is-pwa #stats-block { padding: 16px !important; }
body.is-pwa #stats-block > div[style*="margin-top: 18px"] {
  flex-wrap: wrap;
  gap: 14px !important;
}
body.is-pwa #stats-block > div[style*="margin-top: 18px"] > div {
  min-width: 80px;
}

/* Membership block inside /account — render the renew/cancel CTAs
 * full-width inside the PWA so members can find the cancel link
 * without scrolling sideways. */
body.is-pwa #member-block .btn,
body.is-pwa #referral-block .btn {
  width: 100%;
  justify-content: center;
  padding: 12px !important;
  margin-top: 8px;
}

/* Bottom action row (Help / Settings / Sign out) — wrap nicely. */
body.is-pwa #content > div[style*="margin-top: var(--s-6)"]:last-of-type {
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
body.is-pwa #content > div[style*="margin-top: var(--s-6)"]:last-of-type > div {
  flex-direction: column !important;
  gap: 8px !important;
  width: 100%;
}
body.is-pwa #content > div[style*="margin-top: var(--s-6)"]:last-of-type a.btn,
body.is-pwa #content > div[style*="margin-top: var(--s-6)"]:last-of-type button.btn {
  width: 100%;
  justify-content: center;
  padding: 12px !important;
  font-size: 14px !important;
}

/* Profile editor inputs: full-width Save / Cancel + breathing room. */
body.is-pwa #profile-form > div[style*="display: flex"]:last-child {
  flex-direction: column !important;
  align-items: stretch !important;
}
body.is-pwa #profile-form #profile-save,
body.is-pwa #profile-form #profile-cancel {
  width: 100%;
  justify-content: center;
  padding: 12px !important;
  font-size: 14px !important;
}

/* Onboarding modal: collapse padding so a phone keyboard doesn't push
 * the buttons offscreen. */
body.is-pwa #onboard-modal > div {
  margin-top: 16px !important;
  padding: 18px !important;
}
body.is-pwa #onboard-form > div[style*="display: flex"]:last-child {
  flex-direction: column !important;
  align-items: stretch !important;
}
body.is-pwa #onboard-form #onboard-save,
body.is-pwa #onboard-form #onboard-skip {
  width: 100%;
  justify-content: center;
  padding: 12px !important;
}

/* ── PWA /status (tracking page) ─────────────────────────────────────
 * The status submit-card + lookup card and the eventual order summary
 * are all built from var(--surface) divs that already paper-style.
 * Tighten padding and bump the tracker label sizes. */
body.is-pwa #submitted-card,
body.is-pwa #lookup,
body.is-pwa main section[style*="background: var(--surface)"] {
  padding: 16px !important;
  border-radius: 12px !important;
}

/* ── PWA dark variant ────────────────────────────────────────────────
 * Activated by adding `is-dark` to the body (handled in pwa-shell.js
 * based on the saved theme pref + system preference). Every shared
 * widget — card, ledger, sticker, chip, tracker, notification row,
 * timeline, statement, pickup option, pay method — needs an explicit
 * dark token here so the screen reads consistently. Manifest-dark
 * palette mirrors `acTheme('manifest', dark)` from pwa-theme.jsx.
 */
body.is-pwa.is-dark {
  --pwa-paper: #0E1116;
  --pwa-paper-2: #1A1E26;
  --pwa-rule: #2A2F39;
  --pwa-rule-strong: #404552;
  --pwa-ink-muted: #8A8F99;
}

body.is-pwa.is-dark .pwa-page-title { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-page-muted { color: #8A8F99; }
body.is-pwa.is-dark .pwa-empty {
  background: #1A1E26;
  border-color: #404552;
  color: #8A8F99;
}
body.is-pwa.is-dark .pwa-card {
  background: #1A1E26;
  border-color: #2A2F39;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pwa-muted { color: #8A8F99; }
body.is-pwa.is-dark .pwa-chip {
  background: #1A1E26;
  border-color: #2A2F39;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pwa-chip.is-active {
  background: #F4F4F2;
  color: #0E1116;
}
body.is-pwa.is-dark .pwa-pkg-title { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-pkg-weight { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-sticker {
  background: #26201B;
  border-color: currentColor;
}
body.is-pwa.is-dark .pwa-tracker-node {
  /* Beige outline + paper-light fill so pending stages stay legible
   * against the dark card (earlier #2A2F39/#6E727B disappeared on
   * OLED screens at low brightness). */
  background: #4A4F59;
  border-color: #B7B6B0;
}
body.is-pwa.is-dark .pwa-tracker-node.is-done {
  background: var(--pwa-blue);
  border-color: var(--pwa-blue);
}
body.is-pwa.is-dark .pwa-tracker-line { background: #4A4F59; }
body.is-pwa.is-dark .pwa-tracker-line.is-done { background: var(--pwa-blue); }
body.is-pwa.is-dark .pwa-tracker-labels span { color: #ECECE8; }
body.is-pwa.is-dark .pwa-tracker-labels span.is-on { color: #F4F4F2; }

/* Founder member card in dark mode — flip from black-on-black to
 * a warm beige paper with ink text so it reads against the dark
 * page bg. Matches the "Paper" tone of the brand collateral. */
body.is-pwa.is-dark .member-card.founder {
  background: #ECECE8;
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(14,17,22,0.06) 5px 6px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  color: #0E1116;
}
body.is-pwa.is-dark .member-card.founder .member-card-brand,
body.is-pwa.is-dark .member-card.founder .member-card-name,
body.is-pwa.is-dark .member-card.founder .member-card-value,
body.is-pwa.is-dark .member-card.founder .you-card-stats .stat .val { color: #0E1116; }
body.is-pwa.is-dark .member-card.founder .member-card-tag,
body.is-pwa.is-dark .member-card.founder .member-card-label,
body.is-pwa.is-dark .member-card.founder .you-card-stats .stat .lbl { color: #7A7872; }
body.is-pwa.is-dark .member-card.founder .member-card-value .sep,
body.is-pwa.is-dark .member-card.founder .member-card-brand .dot { color: #1158E8; }
/* Plate becomes an ink block on the paper card (was metallic gold). */
body.is-pwa.is-dark .member-card.founder .member-card-plate {
  background: #0E1116;
  background-image: none;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
body.is-pwa.is-dark .pwa-notif-icon {
  background: #222732;
  color: #8A8F99;
}
body.is-pwa.is-dark .pwa-notif.is-highlight .pwa-notif-icon {
  background: rgba(17,88,232,0.2);
  color: #1158E8;
}
body.is-pwa.is-dark .pwa-notif-title { color: #F4F4F2; }

/* Home dashboard surfaces */
body.is-pwa.is-dark .pwa-address-card,
body.is-pwa.is-dark .pwa-member-strip,
body.is-pwa.is-dark .pwa-tile {
  background: #1A1E26;
  border-color: #2A2F39;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pwa-address-head { border-bottom-color: #404552; }
body.is-pwa.is-dark .pwa-address-name { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-address-lines { color: #E2E1DC; }
body.is-pwa.is-dark .pwa-tile-icon { background: rgba(17,88,232,0.18); }
body.is-pwa.is-dark .pwa-tile-label { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-member-badge { background: #F4F4F2; color: #0E1116; }
body.is-pwa.is-dark .pwa-member-title { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-balance-call {
  background: #26201B;
  border-color: #B7791F;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pwa-balance-call .pwa-balance-amt { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-section-head h2 { color: #F4F4F2; }
body.is-pwa.is-dark .pwa-btn.is-primary { background: #F4F4F2; color: #0E1116; }
body.is-pwa.is-dark .pwa-btn.is-ghost {
  background: #222732;
  color: #F4F4F2;
  border-color: #2A2F39;
}

/* Buttons inside paper screens (pickup option / flow-toggle / etc) */
body.is-pwa.is-dark .pu-option,
body.is-pwa.is-dark .pay-method,
body.is-pwa.is-dark .pay-statement,
body.is-pwa.is-dark .pkg-items-list,
body.is-pwa.is-dark .qr-card,
body.is-pwa.is-dark .qr-cta {
  background: #1A1E26 !important;
  border-color: #2A2F39 !important;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pu-option-tag {
  background: #222732;
  color: #8A8F99;
}
body.is-pwa.is-dark .pu-option.is-selected .pu-option-tag {
  background: #F4F4F2;
  color: #0E1116;
}
body.is-pwa.is-dark .pu-cal button {
  background: #1A1E26;
  border-color: #2A2F39;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pu-cal button.is-closed {
  color: #595E69;
}
body.is-pwa.is-dark .pu-slots button {
  background: #1A1E26;
  border-color: #2A2F39;
  color: #F4F4F2;
}
body.is-pwa.is-dark .pu-slots button.is-selected {
  background: rgba(17,88,232,0.18);
  color: #1158E8;
}
body.is-pwa.is-dark .pu-cta {
  background: #1A1E26;
  border-color: #2A2F39;
}

/* Pay statement rows */
body.is-pwa.is-dark .pay-statement .row { border-bottom-color: #2A2F39; }
body.is-pwa.is-dark .pay-statement .row .title { color: #F4F4F2; }
body.is-pwa.is-dark .pay-statement .v { color: #F4F4F2; }
body.is-pwa.is-dark .pay-statement .v.paid { color: #595E69; }
body.is-pwa.is-dark .pay-dashed-rule { border-top-color: #404552; }
body.is-pwa.is-dark .pay-method.is-selected { border-color: #1158E8 !important; }
body.is-pwa.is-dark .pay-method .icon { background: #222732; color: #8A8F99; }
body.is-pwa.is-dark .pay-method.is-selected .icon {
  background: rgba(17,88,232,0.18);
  color: #1158E8;
}
body.is-pwa.is-dark .pay-method .label { color: #F4F4F2; }
body.is-pwa.is-dark .pay-pickup-confirm {
  background: #26201B;
  border-color: #B7791F;
  color: #E2E1DC;
}

/* Package detail */
body.is-pwa.is-dark .pkg-title { color: #F4F4F2; }
body.is-pwa.is-dark .pkg-stats .stat .v { color: #F4F4F2; }
body.is-pwa.is-dark .pkg-stats .vsep { border-left-color: #404552; }
body.is-pwa.is-dark .pkg-map {
  background: #1A1E26;
  border-color: #404552;
}
body.is-pwa.is-dark .pkg-map svg text { fill: #E2E1DC !important; }
body.is-pwa.is-dark .pkg-items-list .row { border-bottom-color: #2A2F39; }
body.is-pwa.is-dark .pkg-tl-entry::before,
body.is-pwa.is-dark .pkg-timeline::before { background: #2A2F39; }
body.is-pwa.is-dark .pkg-tl-entry .dot { background: #F4F4F2; }
body.is-pwa.is-dark .pkg-tl-entry.current .dot {
  background: #1158E8;
  border-color: #0E1116;
}
body.is-pwa.is-dark .pkg-tl-entry .label { color: #F4F4F2; }
body.is-pwa.is-dark .pkg-tl-entry .sub { color: #8A8F99; }
body.is-pwa.is-dark .pkg-sticker { background: #26201B; }

/* Quote result */
body.is-pwa.is-dark .qr-hero { color: #F4F4F2; }
body.is-pwa.is-dark .qr-hero .sub { color: #8A8F99; }
body.is-pwa.is-dark .qr-validity { color: #8A8F99; }
body.is-pwa.is-dark .qr-validity b { color: #F4F4F2; }
body.is-pwa.is-dark .qr-card .top .title { color: #E2E1DC; }
body.is-pwa.is-dark .qr-stamp { background: rgba(17,88,232,0.18); }
body.is-pwa.is-dark .qr-dashed { border-top-color: #404552; }
body.is-pwa.is-dark .qr-line .k { color: #E2E1DC; }
body.is-pwa.is-dark .qr-line .v { color: #F4F4F2; }
body.is-pwa.is-dark .qr-total-row .amount { color: #F4F4F2; }
body.is-pwa.is-dark .qr-total-row .eta { color: #F4F4F2; }
body.is-pwa.is-dark .qr-breakdown .bar { background: #222732; }