/* FlameGuard's phone design system and phone wizard, copied verbatim. Do not hand-edit: re-run scripts/sync-flameguard.js. */

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/mobile/mobile.css (source sha256 c29c43e1c9cd) ---- */
/* ── Fire Record mobile (phones only, <768px) ─────────────────────────────────
   The visual language comes from the approved "Fire Record Mobile" prototype:
   Home is the menu (no drawer, no tab bar), plain-text buttons, 52px+ targets,
   17px+ text. Built for non-technical users; nothing is icon-only unless the
   meaning is unmistakable.

   All colours ride on the app's existing tokens (index.css) — the prototype
   was drawn with the same palette. --ms is the Large-text scale factor set by
   Settings; every font-size here multiplies by it so the toggle reaches
   everything at once. */

.mob {
  --ms: 1;
  --mob-ink: #1A1A2E;
  --mob-sub: #556070;
  --mob-muted: var(--color-text-muted); /* #5E6B7E */
  --mob-line: var(--color-border);      /* #E2E8F0 */
  --mob-navy: var(--color-primary);     /* #1E3A5F */
  --mob-navy-soft: #E8EEF4;
  --mob-amber: var(--color-accent);     /* #D97706 */
  --mob-amber-deep: #B45309;
  --mob-press: #F4F2EC;

  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--mob-ink);
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
.mob[data-textsize="large"] { --ms: 1.15; }

/* Clear the global fixed offline banner (main.jsx) instead of sitting under it */
.mob.mob-banner-space { padding-top: 54px; }
.mob.mob-banner-space .mob-screen { height: calc(100dvh - 54px); }

.mob button { font-family: inherit; }

/* ── Screen scaffold ── */
.mob-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: relative;
}
.mob-scroll {
  flex: 1;
  min-height: 0; /* lets the list scroll inside the screen instead of growing it */
  overflow-y: auto;
  padding: 4px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mob-scroll > * { flex-shrink: 0; }
/* Room for the sticky bottom action so the last card can scroll clear of it */
.mob-scroll.has-cta { padding-bottom: 120px; }

/* ── Back bar (every screen except Home) ── */
/* The building page in the phone shell (12-10): the back bar replaces its breadcrumb */
.mob-desktop-building .cld-breadcrumb {
  display: none;
}

.mob-backbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
}
.mob-back {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 52px;
  padding: 0 14px 0 8px;
  border: none;
  background: none;
  color: var(--mob-amber);
  font-size: calc(17px * var(--ms));
  font-weight: 700;
  border-radius: 12px;
}
.mob-back:active { background: var(--mob-press); }
.mob-backbar-title {
  font-size: calc(21px * var(--ms));
  font-weight: 800;
  color: var(--mob-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Cards ── */
.mob-card {
  background: var(--color-surface);
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mob-card.pressable:active { background: var(--mob-press); }

/* Full-width tappable row card (clients, notifications, reports) */
.mob-row-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--mob-ink);
}
.mob-row-btn:active { background: var(--mob-press); }

/* ── Buttons ── */
.mob-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  border-radius: 14px;
  border: none;
  font-size: calc(17px * var(--ms));
  font-weight: 700;
}
.mob-btn-amber { background: var(--mob-amber); color: #fff; }
.mob-btn-amber:active { background: var(--mob-amber-deep); }
.mob-btn-navy { background: var(--mob-navy); color: #fff; box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25); }
.mob-btn-navy:active { background: #2D5F8A; }
.mob-btn-plain {
  background: var(--color-surface);
  border: 1.5px solid var(--mob-line);
  color: var(--mob-navy);
}
.mob-btn-plain:active { background: var(--mob-press); }
.mob-btn-danger {
  background: var(--color-surface);
  border: 1.5px solid #FECACA;
  color: var(--color-error);
}
.mob-btn-danger:active { background: #FEF2F2; }
.mob-btn:disabled { opacity: 0.5; }

/* Text-only action (See all, Mark all as read) */
.mob-textbtn {
  border: none;
  background: none;
  font-size: calc(16px * var(--ms));
  font-weight: 700;
  color: var(--mob-amber);
  padding: 8px 0;
}

/* Sticky bottom CTA over a fade so list content never hides behind it */
.mob-cta-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 14px));
  background: linear-gradient(to top, var(--color-bg) 70%, rgba(248, 247, 244, 0));
}
.mob-cta-bar .mob-btn { width: 100%; min-height: 58px; border-radius: 16px; font-size: calc(18px * var(--ms)); }

/* ── Segmented tabs ── */
.mob-tabs {
  display: flex;
  background: #EBE9E3;
  border-radius: 14px;
  padding: 5px;
  gap: 5px;
}
.mob-tab {
  flex: 1;
  min-height: 50px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--mob-sub);
  font-size: calc(14px * var(--ms));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 0 4px;
  min-width: 0;
  /* Backstop: whatever else goes wrong, a tab's content clips inside its own
     bounds instead of overlapping the neighbouring tab. */
  overflow: hidden;
}
.mob-tab.active {
  background: var(--color-surface);
  color: var(--mob-navy);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mob-tab-count {
  font-size: calc(12px * var(--ms));
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 100px;
  background: #DDD9D0;
  color: var(--mob-sub);
}
.mob-tab.active .mob-tab-count { background: var(--mob-navy-soft); color: var(--mob-navy); }

/* The count pills are nice-to-have. When the labels need the room, the pills
   go, never the words: tiny phones always; ordinary phones when Large text
   is on (everything is ~15% wider then). */
@media (max-width: 345px) {
  .mob-tab-count { display: none; }
}
@media (max-width: 460px) {
  .mob[data-textsize="large"] .mob-tab-count { display: none; }
}

/* ── Search ── */
.mob-search { position: relative; }
.mob-search svg { position: absolute; left: 16px; top: 16px; pointer-events: none; }
.mob-search input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  border: 1.5px solid var(--mob-line);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 0 16px 0 46px;
  font-size: calc(17px * var(--ms));
  color: var(--mob-ink);
  outline: none;
}
.mob-search input:focus { border-color: var(--mob-navy); box-shadow: 0 0 0 3px var(--mob-navy-soft); }
.mob-search input::placeholder { color: var(--mob-muted); }

/* ── Chips ── */
.mob-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: calc(14.5px * var(--ms));
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Status chip tones, mapped from the shared getStatusBadge classes */
.mob-chip.tone-info { background: var(--mob-navy-soft); color: var(--mob-navy); border: 1.5px solid #C9D6E2; }
.mob-chip.tone-success { background: #DCFCE7; color: #166534; border: 1.5px solid #BBE7C8; }
.mob-chip.tone-warning { background: #FEF3C7; color: #92400E; border: 1.5px solid #FDE68A; }
.mob-chip.tone-error { background: #FEE2E2; color: #B91C1C; border: 1.5px solid #FECACA; }
.mob-chip.tone-intolerable { background: #7F1D1D; color: #fff; border: 1.5px solid #7F1D1D; }
.mob-chip.tone-neutral { background: #F1F5F9; color: #475569; border: 1.5px solid var(--mob-line); }
.mob-chip.tone-navy { background: var(--mob-navy); color: #fff; border: 1.5px solid var(--mob-navy); }

/* ── Avatars ── */
.mob-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(17px * var(--ms));
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Section headings inside screens ── */
.mob-h2 {
  font-size: calc(18px * var(--ms));
  font-weight: 800;
  color: var(--mob-ink);
}
.mob-kicker {
  font-size: calc(15px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--mob-muted);
  text-transform: uppercase;
}
.mob-note {
  font-size: calc(15px * var(--ms));
  color: var(--mob-muted);
  line-height: 1.5;
}

/* ── Bottom sheet ── */
.mob-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 400;
}
.mob-sheet {
  background: var(--color-surface);
  border-radius: 20px 20px 0 0;
  padding: 26px 22px calc(24px + env(safe-area-inset-bottom, 10px));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 88dvh;
  overflow-y: auto;
}
.mob-sheet-title {
  font-size: calc(22px * var(--ms));
  font-weight: 800;
  color: var(--mob-ink);
}
.mob-sheet-text {
  font-size: calc(16px * var(--ms));
  line-height: 1.55;
  color: var(--mob-sub);
}

/* ── Form fields ── */
.mob-field { display: flex; flex-direction: column; gap: 6px; }
.mob-field-label {
  font-size: calc(15.5px * var(--ms));
  font-weight: 700;
  color: var(--mob-sub);
}
.mob-field input, .mob-field select, .mob-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  border: 1.5px solid var(--mob-line);
  border-radius: 13px;
  background: var(--color-bg);
  padding: 0 16px;
  font-size: calc(17px * var(--ms));
  color: var(--mob-ink);
  outline: none;
}
.mob-field textarea { padding: 14px 16px; resize: vertical; }
.mob-field input:focus, .mob-field select:focus, .mob-field textarea:focus {
  border-color: var(--mob-navy);
  box-shadow: 0 0 0 3px var(--mob-navy-soft);
  background: var(--color-surface);
}
.mob-field-error {
  font-size: calc(14.5px * var(--ms));
  font-weight: 600;
  color: var(--color-error);
}

/* ── Toast ── */
.mob-toast {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  background: #14532D;
  color: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: calc(16px * var(--ms));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 500;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.mob-toast.error { background: #7F1D1D; }

/* ── Offline pill ── */
.mob-offline-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #FEF3E2;
  border: 1.5px solid #F5C97B;
  border-radius: 100px;
  padding: 7px 14px;
}
.mob-offline-pill span {
  font-size: calc(14px * var(--ms));
  font-weight: 700;
  color: var(--mob-amber-deep);
}

/* ── Loading / empty states ── */
.mob-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: calc(17px * var(--ms));
  color: var(--mob-muted);
  line-height: 1.5;
}

/* ── Home ── */
.mob-home-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.mob-home-brand { font-size: calc(18px * var(--ms)); font-weight: 800; color: var(--mob-navy); }
.mob-home-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--mob-navy-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mob-home-logo img { width: 24px; height: 24px; object-fit: contain; }
.mob-greeting {
  font-size: calc(26px * var(--ms));
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mob-resume {
  background: var(--mob-navy);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mob-resume-kicker {
  font-size: calc(13px * var(--ms));
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #9DB4CC;
  text-transform: uppercase;
}
.mob-resume-title { font-size: calc(22px * var(--ms)); font-weight: 700; color: #fff; line-height: 1.25; }
.mob-resume-sub { font-size: calc(16px * var(--ms)); color: #C3D2E2; }
.mob-resume .mob-btn { margin-top: 12px; border-radius: 13px; font-size: calc(18px * var(--ms)); }

.mob-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mob-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface);
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  padding: 16px;
  min-height: 104px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mob-tile:active { background: var(--mob-press); }
.mob-tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--mob-navy-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mob-navy);
}
.mob-tile-label { font-size: calc(17px * var(--ms)); font-weight: 700; color: var(--mob-navy); }
.mob-tile-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 100px;
  background: var(--color-error);
  color: #fff;
  font-size: calc(14px * var(--ms));
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Assessment cards ── */
.mob-assess-card {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mob-assess-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mob-assess-name {
  font-size: calc(20px * var(--ms));
  font-weight: 700;
  color: var(--mob-navy);
  line-height: 1.25;
}
.mob-assess-client { font-size: calc(16px * var(--ms)); color: var(--mob-sub); font-weight: 500; }
.mob-assess-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(16px * var(--ms));
  color: var(--mob-sub);
}
.mob-assess-meta svg { flex-shrink: 0; }
.mob-assess-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.mob-assess-open {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(16px * var(--ms));
  font-weight: 700;
  color: var(--mob-amber);
  border: none;
  background: none;
  min-height: 44px;
  padding: 0 4px;
}
.mob-assess-card.changes { background: #FEF5DC; }

/* Notification rows */
.mob-notif-bubble {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mob-notif-title { font-size: calc(16.5px * var(--ms)); font-weight: 700; color: var(--mob-ink); line-height: 1.35; }
.mob-notif-body { font-size: calc(15px * var(--ms)); color: var(--mob-sub); line-height: 1.4; margin-top: 2px; }
.mob-notif-time { font-size: calc(14px * var(--ms)); color: var(--mob-muted); margin-top: 4px; }
.mob-notif-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-error); flex-shrink: 0; }
.mob-row-btn.read { opacity: 0.75; }

/* ── Settings groups ── */
.mob-group {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  overflow: hidden;
}
.mob-group-title {
  font-size: calc(14px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--mob-muted);
  text-transform: uppercase;
  padding: 16px 18px 8px;
}
.mob-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 18px;
  border: none;
  border-top: 1px solid #F1F5F9;
  background: none;
  text-align: left;
  width: 100%;
}
.mob-group-row:active { background: var(--mob-press); }
.mob-group-row.static:active { background: none; }
.mob-group-label { font-size: calc(16.5px * var(--ms)); font-weight: 600; color: var(--mob-ink); }
.mob-group-value {
  flex: 1;
  font-size: calc(16.5px * var(--ms));
  color: var(--mob-sub);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small segmented control (Standard / Large) */
.mob-seg { display: flex; background: #EBE9E3; border-radius: 11px; padding: 4px; gap: 4px; }
.mob-seg button {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--mob-sub);
  font-size: calc(15px * var(--ms));
  font-weight: 700;
}
.mob-seg button.active { background: var(--color-surface); color: var(--mob-navy); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* Deep-link highlight flash (?highlight=<id>) */
@keyframes mob-flash-kf {
  0%, 60% { box-shadow: 0 0 0 3px var(--mob-amber); }
  100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
}
.mob-flash { animation: mob-flash-kf 2.2s ease-out; }

/* Review-note preview inside a changes-requested card */
.mob-review-note {
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid #FDE68A;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: calc(15px * var(--ms));
  color: var(--mob-sub);
  line-height: 1.45;
  font-style: italic;
}

/* Unsynced marker on assessment cards */
.mob-unsynced {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(14.5px * var(--ms));
  font-weight: 600;
  color: var(--mob-amber-deep);
  margin-top: 2px;
}

/* Add-building style dashed button */
.mob-btn-dashed {
  min-height: 54px;
  border: 2px dashed #C9D6E2;
  border-radius: 14px;
  background: none;
  color: var(--mob-navy);
  font-size: calc(17px * var(--ms));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.mob-btn-dashed:active { background: var(--mob-press); }

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/mobile/wizard/wizard.css (source sha256 f3302aa347a1) ---- */
/* ── Mobile wizard (phone-only, <768px) ─────────────────────────────────────
   Extends the mobile design system in ../mobile.css. Same rules apply:
   every class is prefixed (mobw- here), every font-size multiplies by
   var(--ms) so Large text scales the whole wizard, touch targets stay at
   52px or more, and buttons carry words, never bare icons.

   The .mobw class sits on the same root div as .mob (see MobileWizard.jsx),
   so `.mobw …` selectors can only ever match inside the mobile wizard —
   desktop renders none of this. */

/* Desktop wizard page hosted inside mobile chrome (Setup / Risk / Preview
   and the interim Assessment / Report & Actions). The page scrolls inside
   the fixed-height screen, same shape as DesktopPageInShell. */
.mobw .mobw-desktop-host {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desktop wizard pages assume the AssessmentLayout content width; inside the
   phone shell give them breathing room without touching their own CSS. */
.mobw .mobw-desktop-host > * {
  min-width: 0;
}

/* Setup in the shell: WizardBottomNav goes position:fixed over the viewport
   bottom at <=600px, and nothing reserved its height - so the end of the page
   (the + New Building button in Chad's screenshot) could never scroll clear
   of the Cancel / Start Assessment bar. Reserve the bar's height plus the
   phone's safe area. Scoped to .wizard-page so the Preview host (which has
   no fixed bar) gains no dead space. */
.mobw .mobw-desktop-host .wizard-page {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ── Scroll containment + overlay stability ("jumpy / see the background") ──
   Every inner scroller refuses to chain its overscroll to the layer behind:
   rubber-banding a section screen or a sheet must never drag the grid
   underneath. The document itself gets the same treatment via body.mobw-active
   (set by WizardChrome), because the .mob root cannot reach it. */
.mobw .mob-scroll,
.mobw .mobw-desktop-host,
.mobw .mobw-section-scroll,
.mobw .mob-sheet,
.mobw .sr-photo-modal-body,
.mobw .mobw-swr-list,
.mobw .mobw-unsorted-list {
  overscroll-behavior: contain;
}
body.mobw-active {
  overscroll-behavior-y: none;
}

/* The support bubble is global (rendered outside .mob). In the wizard it must
   never sit on top of the capture footer or a square, and it must stay UNDER
   the section screens (z 300) and sheets (z 400) instead of floating over
   them. The function stays; it just keeps out of the way. */
body.mobw-active .support-fab {
  width: 46px;
  height: 46px;
  right: 10px;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  z-index: 250;
}

/* The back affordance can never be squeezed out by a long title. */
.mobw .mob-back { flex-shrink: 0; }
.mobw .mob-backbar { background: var(--color-bg); }
.mobw .mob-backbar-title { flex: 1; min-width: 0; }

/* ── Top bar: Exit · title · Continue ─────────────────────────────────────── */
.mobw .mobw-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 8px;
}
.mobw .mobw-exit { flex-shrink: 0; }
.mobw .mobw-topbar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(20px * var(--ms));
  font-weight: 800;
  color: var(--mob-ink);
}
.mobw .mobw-continue {
  flex-shrink: 0;
  min-height: 52px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: var(--mob-amber);
  color: #fff;
  font-family: inherit;
  font-size: calc(17px * var(--ms));
  font-weight: 700;
  cursor: pointer;
}
.mobw .mobw-continue:active { background: var(--mob-amber-deep); }
.mobw .mobw-continue:disabled { opacity: 0.5; }

/* ── Progress strip under the top bar ─────────────────────────────────────── */
.mobw .mobw-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 10px;
}
.mobw .mobw-progress-count {
  flex-shrink: 0;
  font-size: calc(15px * var(--ms));
  font-weight: 700;
  color: var(--mob-sub);
  font-variant-numeric: tabular-nums;
}
.mobw .mobw-progress-count.all-done { color: #166534; }
.mobw .mobw-progress-track {
  flex: 1;
  min-width: 40px;
  height: 8px;
  border-radius: 100px;
  background: #E7E4DC;
  overflow: hidden;
}
.mobw .mobw-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--mob-navy);
  transition: width 0.4s ease;
}
.mobw .mobw-save-status {
  flex-shrink: 0;
  min-width: 44px;
  text-align: right;
  font-size: calc(13px * var(--ms));
  font-weight: 600;
  color: var(--mob-muted);
}
/* The upload chip keeps its own styling but gives up the desktop topbar's
   reserved box: here the flexible track absorbs width changes instead. The
   chip may SHRINK and its label truncates — a busy label like "1 note saved
   on device" was 90px off screen at 360 wide (Chad's "the loader goes out of
   the screen"). The full wording is one tap away in the detail panel. */
.mobw .mobw-progress .usc-chip {
  min-width: 0;
  flex-shrink: 1;
  max-width: 46%;
  overflow: hidden;
}
.mobw .mobw-progress .usc-chip .usc-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Banners ──────────────────────────────────────────────────────────────── */
.mobw .mobw-banner {
  border: 1.5px solid var(--mob-line);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 12px 14px;
  font-size: calc(15px * var(--ms));
  line-height: 1.5;
  color: var(--mob-sub);
}
.mobw .mobw-banner strong { color: var(--mob-ink); }
.mobw .mobw-banner-offline {
  background: #FEF3E2;
  border-color: #F5C97B;
  color: #7C4A0B;
}
.mobw .mobw-banner-offline strong { color: #7C4A0B; }
.mobw .mobw-banner-safe {
  background: #F0FDF4;
  border-color: #BBE7C8;
  color: #14532D;
}
.mobw .mobw-banner-safe strong { color: #14532D; }
.mobw .mobw-banner-btn {
  display: inline-block;
  margin-left: 8px;
  border: none;
  background: none;
  color: var(--mob-amber);
  font-family: inherit;
  font-size: calc(15px * var(--ms));
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}

/* ── Unsorted-notes banner (tappable) ─────────────────────────────────────── */
.mobw .mobw-unsorted {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  border: 1.5px solid #C9D6E2;
  border-radius: 14px;
  background: var(--mob-navy-soft);
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mobw .mobw-unsorted:active { background: #DCE6EF; }
.mobw .mobw-unsorted-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(16px * var(--ms));
  font-weight: 800;
  color: var(--mob-navy);
}
.mobw .mobw-unsorted-sub {
  font-size: calc(14px * var(--ms));
  color: var(--mob-sub);
  line-height: 1.45;
}

/* ── The section grid ─────────────────────────────────────────────────────── */
.mobw .mobw-grid {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: long content must not stretch its track or
     the two columns come out unequal. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mobw .mobw-square { min-width: 0; }
.mobw .mobw-square {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-height: 128px;
  border-radius: 16px;
  padding: 13px 13px 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: 2px solid var(--mob-line);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mobw .mobw-square:active { filter: brightness(0.96); }
.mobw .mobw-square-code {
  font-size: calc(13px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mob-sub);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 2px 7px;
}
.mobw .mobw-square-name {
  font-size: calc(16px * var(--ms));
  font-weight: 700;
  line-height: 1.25;
  color: var(--mob-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* A long single word (Compartmentation) must break rather than poke out of
     the square at Large text on 360px screens. */
  overflow-wrap: anywhere;
  max-width: 100%;
}
.mobw .mobw-square-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: calc(13.5px * var(--ms));
  color: var(--mob-sub);
  font-variant-numeric: tabular-nums;
}
.mobw .mobw-square-media { color: var(--mob-muted); }
.mobw .mobw-square-status {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(14px * var(--ms));
  font-weight: 800;
}
.mobw .mobw-square-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Status colours: the square IS the status. */
.mobw .mobw-square.is-done {
  background: #F0FDF4;
  border-color: #86D9A5;
}
.mobw .mobw-square.is-done .mobw-square-status { color: #166534; }
.mobw .mobw-square.is-progress {
  background: #EFF6FF;
  border-color: #A5C6F2;
}
.mobw .mobw-square.is-progress .mobw-square-status { color: #1D4ED8; }
.mobw .mobw-square.is-empty {
  background: #F4F4F2;
  border-color: #DDDDD8;
}
.mobw .mobw-square.is-empty .mobw-square-status { color: #6B7280; }
.mobw .mobw-square.is-empty .mobw-square-name { color: #4B5563; }

@keyframes mobw-flash {
  0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
  25%, 65% { box-shadow: 0 0 0 3px var(--mob-amber); }
}
.mobw .mobw-square-flash { animation: mobw-flash 2.2s ease; }

/* ── Section full screen ──────────────────────────────────────────────────── */
.mobw .mobw-section-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}
.mobw .mobw-section-statusline {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 20px 10px;
  font-size: calc(14.5px * var(--ms));
  font-weight: 700;
}
.mobw .mobw-section-statusline.is-done { color: #166534; }
.mobw .mobw-section-statusline.is-progress { color: #1D4ED8; }
.mobw .mobw-section-statusline.is-empty { color: #6B7280; }
.mobw .mobw-section-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 44px;
}

/* ── Unsorted sheet internals ─────────────────────────────────────────────── */
.mobw-unsorted-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 44dvh;
  overflow-y: auto;
}
.mobw-unsorted-item {
  border: 1.5px solid var(--mob-line);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mobw-unsorted-text {
  font-size: calc(16px * var(--ms));
  line-height: 1.45;
  color: var(--mob-ink);
}
.mobw-unsorted-untitled {
  font-size: calc(15px * var(--ms));
  font-style: italic;
  color: var(--mob-muted);
}
.mobw-unsorted-media { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mobw-unsorted-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--mob-line);
}
.mobw-chip-note {
  font-size: calc(13px * var(--ms));
  font-weight: 700;
  color: var(--mob-sub);
  background: #F1F5F9;
  border: 1px solid var(--mob-line);
  border-radius: 100px;
  padding: 4px 10px;
}
.mobw-unsorted-row { display: flex; gap: 8px; }
.mobw-unsorted-row .mob-btn { min-height: 48px; font-size: calc(15px * var(--ms)); }
.mobw-btn-half { flex: 1; }
.mobw-btn-third { flex: 1; min-width: 0; }

/* Form controls shared across the wizard sheets */
.mobw-textarea {
  width: 100%;
  border: 1.5px solid var(--mob-line);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 12px;
  font-family: inherit;
  font-size: calc(16px * var(--ms)); /* 16px+ stops iOS zooming the focus */
  line-height: 1.5;
  color: var(--mob-ink);
  resize: vertical;
}
.mobw-textarea:focus {
  outline: none;
  border-color: var(--mob-navy);
  box-shadow: 0 0 0 3px var(--mob-navy-soft);
}
.mobw-select {
  min-height: 48px;
  border: 1.5px solid var(--mob-line);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 0 10px;
  font-family: inherit;
  font-size: calc(15px * var(--ms));
  font-weight: 600;
  color: var(--mob-navy);
}

/* ── SectionRow reskin inside the mobile section screen ────────────────────
   The section screen hosts the shared SectionRow (capture mode + popups).
   Below 1280px SectionRow already stacks its cells into a flex column, so the
   phone layout is pure reordering + retargeting — no SectionRow changes. */

/* The header bar already names the section; the id cell would repeat it. */
.mob .mobw-section-body .sr-cell-id { display: none; }

/* Order: Questions, then Photos, then field notes. */
.mob .mobw-section-body .sr-cell-checklist { order: -2; }
.mob .mobw-section-body .sr-cell-photos { order: -1; }

/* The chips become big labelled rows — "Questions 3/6" and "Photos 2" — the
   two taps Chad asked for ("you click photos and boom, pop up"). The cell's
   own floating label is folded into the chip text instead. */
.mob .mobw-section-body .sr-cell-photos[data-label]::before,
.mob .mobw-section-body .sr-cell-checklist[data-label]::before { display: none; }

.mob .mobw-section-body .sr-cell-photos .sr-chip,
.mob .mobw-section-body .sr-cell-checklist .sr-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--mob-line);
  border-radius: 14px;
  background: var(--color-surface);
  font-size: calc(17px * var(--ms));
  font-weight: 700;
  color: var(--mob-navy);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mob .mobw-section-body .sr-cell-photos .sr-chip:active,
.mob .mobw-section-body .sr-cell-checklist .sr-chip:active { background: var(--mob-press); }
.mob .mobw-section-body .sr-cell-photos .sr-chip::before { content: 'Photos'; }
.mob .mobw-section-body .sr-cell-checklist .sr-chip::before { content: 'Questions'; }
.mob .mobw-section-body .sr-chip .sr-chip-chev { margin-left: auto; }
.mob .mobw-section-body .sr-chip-count { font-size: calc(16px * var(--ms)); font-variant-numeric: tabular-nums; }

/* Field notes cell: readable sizes, big add button. */
.mob .mobw-section-body .sr-cell { min-width: 0; }
/* The stacked cells shrink-wrap to their content (the flex column does not
   stretch them); the chip rows must span the screen. */
.mob .mobw-section-body .sr-cell-photos,
.mob .mobw-section-body .sr-cell-checklist,
.mob .mobw-section-body .sr-cell-notes { width: 100%; align-self: stretch; }
.mob .mobw-section-body .sr-add-note-btn {
  min-height: 52px;
  width: 100%;
  font-size: calc(16px * var(--ms));
  border-radius: 14px;
}

/* ── The popups, full screen on a phone ──────────────────────────────────── */
.mob .mobw-section-body .sr-photo-modal-overlay { padding: 0; }
.mob .mobw-section-body .sr-photo-modal {
  /* Fill the fixed overlay itself (inset:0), not the dvh unit: dvh animates
     as the browser chrome collapses on real phones, which made the popup
     resize mid-scroll and read as glitchy. */
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.mob .mobw-section-body .sr-photo-modal-head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.mob .mobw-section-body .sr-photo-modal-title {
  flex: 1;
  min-width: 0;
  /* Wrap rather than ellipsize: the section name is the one thing the head
     must say in full on a phone (Chad's call), and two lines cost nothing. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
/* The count takes only the room its text needs (its base style is flex:1,
   which grabbed the title's space however short the text was), and it drops
   the word "answered" on phones — the title is what must read in full. */
.mob .mobw-section-body .sr-photo-modal-count { flex: 0 0 auto; white-space: nowrap; }
.mob .mobw-section-body .sr-count-word { display: none; }
.mob .mobw-section-body .sr-photo-modal-close { flex-shrink: 0; }
.mob .mobw-section-body .sr-photo-modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.mob .mobw-section-body .sr-photo-modal-head { padding-top: max(12px, env(safe-area-inset-top)); }
.mob .mobw-section-body .sr-photo-modal-title { font-size: calc(16.5px * var(--ms)); }
.mob .mobw-section-body .sr-photo-modal-count { font-size: calc(15px * var(--ms)); }
.mob .mobw-section-body .sr-photo-modal-close {
  min-height: 48px;
  padding: 0 18px;
  font-size: calc(16px * var(--ms));
  font-weight: 700;
}
.mob .mobw-section-body .sr-photo-modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 10px)); }
/* The empty popup's "+ Add Photo" was a small pill floating in white space
   (Chad, 18-08): full width and honest height so it reads as THE action. The
   with-photos add tile is already photo-sized; its label just matches. */
.mob .mobw-section-body .sr-photo-modal-body .evidence-empty,
.mob .mobw-section-body .sr-photo-modal-body .add-photo-container { width: 100%; }
.mob .mobw-section-body .sr-photo-modal-body .add-photo-btn {
  width: 100%;
  min-height: 56px;
  font-size: calc(17px * var(--ms));
  font-weight: 800;
  border-radius: 14px;
}
.mob .mobw-section-body .sr-photo-modal-body .add-photo-tile .add-photo-content { font-size: calc(15px * var(--ms)); font-weight: 700; }
.mob .mobw-section-body .sr-photo-modal-body .add-photo-tile .add-icon { font-size: calc(30px * var(--ms)); }
/* Camera + Gallery in the empty popup: one full-width button each, stacked. */
.mob .mobw-section-body .sr-photo-modal-body .add-photo-pair { display: flex; flex-direction: column; width: 100%; gap: 10px; }
.mob .mobw-section-body .sr-photo-modal-body .add-photo-pair .add-photo-btn { justify-content: center; gap: 10px; }
.mob .mobw-section-body .sr-photo-modal-body .add-photo-tile .add-icon-svg { width: calc(30px * var(--ms)); height: calc(30px * var(--ms)); }

/* Checklist inside the popup: question text and answers at phone sizes.
   Layout per question: the four answer buttons share one full-width row in
   equal parts, then the note button joins "+ Add supporting notes" on a tidy
   second row — no lone pencil floating in dead space. */
.mob .mobw-section-body .question-text { font-size: calc(16px * var(--ms)); line-height: 1.45; }
.mob .mobw-section-body .question-number { font-size: calc(15px * var(--ms)); }
.mob .mobw-section-body .checklist-question { padding: 14px 12px; }
.mob .mobw-section-body .answer-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.mob .mobw-section-body .answer-buttons-inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.mob .mobw-section-body .answer-btn-small {
  min-height: 46px;
  min-width: 0;
  width: 100%;
  padding: 0 4px;
  font-size: calc(15px * var(--ms));
  border-radius: 12px;
}
/* The bare pencil becomes a labelled button beside + Add supporting notes. */
.mob .mobw-section-body .note-btn {
  align-self: flex-end;
  min-height: 40px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--mob-line);
  border-radius: 100px;
  background: var(--color-surface);
  font-size: calc(15px * var(--ms));
}
.mob .mobw-section-body .note-btn::after {
  content: 'Note';
  font-size: calc(13.5px * var(--ms));
  font-weight: 700;
  color: var(--mob-sub);
}
.mob .mobw-section-body .cl-add-just-btn {
  min-height: 40px;
  padding: 6px 14px;
  font-size: calc(13.5px * var(--ms));
  border-radius: 100px;
}
.mob .mobw-section-body .note-editor textarea {
  font-size: calc(16px * var(--ms));
}
/* Save and Cancel under a note (Chad, 18-08): the pair the whole checklist
   note flow ends on. One rule also covers the ToR-reason and Supporting
   Notes editors — same popup, same buttons. */
.mob .mobw-section-body .note-actions .btn-cancel,
.mob .mobw-section-body .note-actions .btn-save {
  min-height: 44px;
  padding: 9px 18px;
  font-size: calc(15px * var(--ms));
  font-weight: 700;
  border-radius: 10px;
}

/* ── Floating footer: Site Walk + Quick Note ─────────────────────────────── */
.mobw .mobw-footer { display: flex; gap: 10px; }
.mobw .mobw-footer .mobw-footer-btn {
  width: auto;
  flex: 1;
  min-width: 0;
  min-height: 58px;
  font-size: calc(17px * var(--ms));
}

/* ── Quick Note sheet internals ──────────────────────────────────────────── */
/* The writing area is the main element of the sheet. */
.mob-sheet .mobw-qn-main { min-height: 128px; }

/* One compact tool row: dictate + camera + gallery, all the same quiet size.
   PhotoCapture's own buttons are full-size product buttons elsewhere; inside
   this sheet they become small pills so they never crowd the writing area. */
.mobw-qn-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mobw-qn-tools .photo-capture { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; }
.mobw-qn-tools .capture-buttons { display: flex; gap: 8px; margin: 0; }
.mobw-qn-tools .capture-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  width: auto;
  padding: 0 14px;
  border: 1.5px solid var(--mob-line);
  border-radius: 100px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: calc(14.5px * var(--ms));
  font-weight: 700;
  color: var(--mob-navy);
  box-shadow: none;
}
.mobw-qn-tools .capture-btn .btn-icon { color: inherit; }
.mobw-qn-tools .capture-btn .btn-icon svg { width: calc(18px * var(--ms)); height: calc(18px * var(--ms)); }
.mobw-qn-tools .capture-btn .btn-label { font-size: inherit; font-weight: inherit; color: inherit; }
.mobw-qn-tools .capture-btn:active { background: var(--mob-press); }
/* Speak it sits with the Camera / Gallery pills, the same shape and type
   (14-10, the recorder lab's phone version A) */
.mobw-qn-tools > .vr { flex: 1 1 100%; }
.mobw-qn-tools .vr-row { margin-top: 0; gap: 8px; }
.mobw-qn-tools .vr-pill {
  min-height: 44px;
  padding: 0 14px;
  gap: 7px;
  border-radius: 100px;
  font-size: calc(14.5px * var(--ms));
  font-weight: 700;
}
.mobw-qn-tools .vr-pill svg { width: calc(18px * var(--ms)); height: calc(18px * var(--ms)); }
.mobw-qn-tools .vr-strip { margin-top: 0; }
.mobw-qn-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: calc(14.5px * var(--ms));
  line-height: 1.45;
  color: var(--mob-sub);
}
.mobw-qn-retry {
  border: none;
  background: none;
  color: var(--mob-amber);
  font-family: inherit;
  font-size: calc(15px * var(--ms));
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
}
.mobw-qn-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.mobw-qn-thumb { position: relative; }
.mobw-qn-thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--mob-line);
  display: block;
}
.mobw-qn-thumb-x {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #1A1A2E;
  color: #fff;
  font-size: calc(16px * var(--ms));
  line-height: 1;
  cursor: pointer;
}
.mobw-qn-section { display: flex; flex-direction: column; gap: 7px; }
.mobw-qn-section label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(15px * var(--ms));
  font-weight: 700;
  color: var(--mob-ink);
}
.mobw-qn-section.required .mobw-select { border-color: var(--mob-amber); }
.mobw-req-chip {
  font-size: calc(12px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mob-amber-deep);
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 100px;
  padding: 2px 8px;
}
.mobw-qn-why {
  margin: 0;
  font-size: calc(14px * var(--ms));
  line-height: 1.5;
  color: var(--mob-sub);
}
.mobw-qn-error {
  font-size: calc(14.5px * var(--ms));
  line-height: 1.5;
  color: #B91C1C;
  background: #FEE2E2;
  border: 1.5px solid #FECACA;
  border-radius: 12px;
  padding: 10px 12px;
}

/* ── Report & Actions ─────────────────────────────────────────────────────── */
.mobw .mobw-rsummary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 10px;
}
.mobw .mobw-rsummary-actions {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: none;
  background: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: calc(15px * var(--ms));
  color: var(--mob-sub);
  cursor: pointer;
  text-align: left;
}
/* The BAFE SP205 check (12-10): a card like the section rows */
.mobw .mobw-sp205-check { margin-bottom: 14px; }
.mobw .mobw-sp205-check .sp2c.sp2c--card {
  margin: 0;
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mobw .mobw-rlist { display: flex; flex-direction: column; gap: 10px; }
.mobw .mobw-rrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  background: var(--color-surface);
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mobw .mobw-rrow:active { background: var(--mob-press); }
.mobw .mobw-rrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mobw .mobw-rrow-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(16px * var(--ms));
  font-weight: 700;
  color: var(--mob-ink);
}
.mobw .mobw-rrow-meta { font-size: calc(13.5px * var(--ms)); color: var(--mob-sub); }
.mobw .mobw-rrow-chev { flex-shrink: 0; color: var(--mob-muted); }
.mobw .mobw-rrow .mob-chip { flex-shrink: 0; }

.mobw .mobw-rkicker {
  font-size: calc(14px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mob-muted);
  padding: 6px 2px 0;
}

/* Report section screen: observation leads, then the two popups, then
   actions; the read-only field notes drop to the end. The id cell stays —
   it carries the compliance chips and the rename for custom sections.
   Code + name sit on ONE line (Chad, 18-08); the compliance chips wrap onto
   their own full-width row beneath. */
.mob .mobw-report-body .sr-cell-id { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; order: -4; width: 100%; }
/* The base rule stretches sr-id-top to width:100%, which alone forces the
   name onto the next line — width:auto is what puts them on one line. */
.mob .mobw-report-body .sr-cell-id .sr-id-top { display: flex; align-items: center; width: auto; }
.mob .mobw-report-body .sr-cell-id .sr-name { font-size: calc(17px * var(--ms)); font-weight: 800; color: var(--mob-ink); }
.mob .mobw-report-body .sr-id-compliance { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.mob .mobw-report-body .sr-cell-obs { order: -3; width: 100%; }
.mob .mobw-report-body .sr-cell-photos { order: -2; }
.mob .mobw-report-body .sr-cell-checklist { order: -1; }
.mob .mobw-report-body .sr-cell-remedial { order: 0; width: 100%; }
.mob .mobw-report-body .sr-cell-notes { order: 1; }
.mob .mobw-report-body .sr-comp-chip { min-height: 46px; font-size: calc(15px * var(--ms)); padding: 8px 14px; }
.mob .mobw-report-body textarea { font-size: calc(16px * var(--ms)); }

/* Bigger working controls (Chad, 18-08): the Rewrite text was small for its
   box, and Create action / Add observation are the two buttons this screen
   lives on. Add observation spans the row so it cannot be missed. */
.mob .mobw-report-body .sr-rewrite-btn { font-size: calc(15px * var(--ms)); min-height: 44px; padding: 9px 14px; }
.mob .mobw-report-body .sr-add-action-btn { font-size: calc(16px * var(--ms)); font-weight: 800; min-height: 48px; padding: 10px 16px; border-radius: 12px; }
.mob .mobw-report-body .sr-obsadd { display: block; width: 100%; margin-top: 10px; }
.mob .mobw-report-body .sr-obsadd-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; }
.mob .mobw-report-body .sr-genpick-head { font-size: calc(13px * var(--ms)); }
.mob .mobw-report-body .sr-genpick-item { min-height: 48px; align-items: center; font-size: calc(15px * var(--ms)); }
.mob .mobw-report-body .sr-genpick-num { width: 24px; height: 24px; font-size: calc(12px * var(--ms)); }

/* The guidance picker keeps its own trigger and its place at the end of the
   section (Chad, 18-08: "bigger and leave at the end") — sized into the
   button family but outlined, not navy: guidance is the deliberately quiet
   "information only" zone and a solid button would compete with Add
   observation right above it. */
.mob .mobw-report-body .sr-guidance .qt-trigger {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: calc(15px * var(--ms));
  font-weight: 800;
  color: var(--mob-navy);
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 10px 16px;
}

/* Each observation box's own working row (Chad, 18-08): Rewrite / Create
   action / Remove at honest touch sizes. */
.mob .mobw-report-body .sr-gnote-polish,
.mob .mobw-report-body .sr-obs-box-remove {
  min-height: 44px;
  font-size: calc(14.5px * var(--ms));
  padding: 9px 14px;
  border-radius: 10px;
}

/* Observations and remedial actions read as two distinct blocks: real
   headings instead of the stacked layout's 11px grey whisper, and a strong
   rule opening the actions block (Chad: "a better separation... a title,
   bigger, colour"). */
.mob .mobw-report-body .sr-cell-obs[data-label]::before {
  font-size: calc(15px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--mob-navy);
  margin-bottom: 8px;
}
.mob .mobw-report-body .sr-cell-remedial {
  border-top: 3px solid #F5C97B;
  margin-top: 14px;
  padding-top: 14px;
}
.mob .mobw-report-body .sr-cell-remedial[data-label]::before {
  content: 'Remedial Actions';
  font-size: calc(15px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--mob-amber-deep);
  margin-bottom: 8px;
}

/* Additional Actions */
.mobw .mobw-extra-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1.5px solid var(--mob-line);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 13px;
}
.mobw .mobw-extra-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mobw .mobw-ptag {
  color: #fff;
  font-size: calc(12.5px * var(--ms));
  font-weight: 800;
  border-radius: 7px;
  padding: 4px 9px;
}
.mobw .mobw-auto-badge {
  font-size: calc(11px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--mob-sub);
  border: 1px solid var(--mob-line);
  border-radius: 5px;
  padding: 2px 6px;
}
.mobw .mobw-extra-section { font-size: calc(14px * var(--ms)); font-weight: 700; color: var(--mob-navy); }
.mobw .mobw-extra-field label {
  display: block;
  font-size: calc(12.5px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mob-muted);
  margin-bottom: 2px;
}
.mobw .mobw-extra-field p {
  margin: 0;
  font-size: calc(15px * var(--ms));
  line-height: 1.5;
  color: var(--mob-ink);
}

/* Priority guide sheet */
.mobw-pguide-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--mob-line); }
.mobw-pguide-row:last-of-type { border-bottom: none; }
.mobw-pguide-row .mobw-ptag { align-self: flex-start; }
.mobw-pguide-time { font-size: calc(14px * var(--ms)); font-weight: 700; color: var(--mob-sub); }
.mobw-pguide-desc { margin: 0; font-size: calc(14.5px * var(--ms)); line-height: 1.5; color: var(--mob-sub); }

/* ── Risk Summary ─────────────────────────────────────────────────────────── */
.mobw .mobw-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1.5px solid var(--mob-line);
  border-radius: 16px;
  background: var(--color-surface);
  padding: 16px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mobw .mobw-card-nudge { border-color: var(--mob-amber); box-shadow: 0 0 0 3px #FDE9C8; }
.mobw .mobw-card-title {
  margin: 0;
  font-size: calc(19px * var(--ms));
  font-weight: 800;
  color: var(--mob-ink);
}
.mobw .mobw-card-sub {
  margin: 0;
  font-size: calc(15px * var(--ms));
  line-height: 1.5;
  color: var(--mob-sub);
}
.mobw .mobw-datefield { display: flex; flex-direction: column; gap: 5px; }
.mobw .mobw-datefield label {
  font-size: calc(16px * var(--ms));
  font-weight: 700;
  color: var(--mob-ink);
}
.mobw .mobw-date-input {
  min-height: 52px;
  border: 1.5px solid var(--mob-line);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 0 12px;
  font-family: inherit;
  font-size: calc(16px * var(--ms));
  color: var(--mob-ink);
  width: 100%;
}
.mobw .mobw-date-input:focus {
  outline: none;
  border-color: var(--mob-navy);
  box-shadow: 0 0 0 3px var(--mob-navy-soft);
}
.mobw .mobw-exec-textarea { min-height: 140px; }

/* ── The risk matrix, readable (Chad: "cannot see the matricks") ──────────
   Scoped .mobw so BOTH hosts get it: the Risk step's card and the matrix
   embedded in the Preview page. Out-specifies RiskMatrix.css's ≤600px shrink
   (which drops the grid to 9-10px type). The switch explainer goes: the two
   buttons say 3x3 / 5x5, the paragraph under them was noise on a phone. */
.mobw .mobw-riskmatrix { min-width: 0; }
.mobw .matrix-switch-hint { display: none; }
.mobw .risk-selector > label { font-size: calc(19px * var(--ms)); font-weight: 800; color: var(--mob-ink); }
.mobw .matrix-switch-btn { min-height: 46px; padding: 10px 20px; font-size: calc(15px * var(--ms)); }
.mobw .option-btn { min-height: 54px; padding: 10px 14px; }
.mobw .option-label { font-size: calc(16px * var(--ms)); }
.mobw .option-desc { font-size: calc(13px * var(--ms)); }
.mobw .matrix-corner,
.mobw .matrix-row-header { width: 64px; font-size: calc(12px * var(--ms)); padding: 8px 6px; }
.mobw .matrix-col-header { font-size: calc(12px * var(--ms)); padding: 10px 2px; }
.mobw .matrix-cell { min-height: 58px; padding: 8px 2px; display: flex; align-items: center; justify-content: center; }
.mobw .cell-label { font-size: calc(13px * var(--ms)); }
/* 5x5 is six columns: as big as 360px honestly allows. */
.mobw .matrix-grid--5x5 .matrix-corner,
.mobw .matrix-grid--5x5 .matrix-row-header { width: 46px; font-size: calc(10px * var(--ms)); }
.mobw .matrix-grid--5x5 .matrix-col-header { font-size: calc(10px * var(--ms)); }
.mobw .matrix-grid--5x5 .cell-label { font-size: calc(10.5px * var(--ms)); }
.mobw .matrix-grid--5x5 .matrix-cell { min-height: 48px; padding: 6px 1px; }
.mobw .risk-badge { font-size: calc(16px * var(--ms)); }
.mobw .risk-description { font-size: calc(14.5px * var(--ms)); }

/* ── Building photos on the capture step ─────────────────────────────────── */
.mobw .mobw-bphotos-row { border-color: #C9D6E2; background: var(--mob-navy-soft); }
.mobw .mobw-bphotos-row:active { background: #DCE6EF; }
.mobw .mobw-bpart-title { margin: 8px 0 10px; font-size: calc(13px * var(--ms)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mob-sub); }
.mobw .mobw-bpart-title.mobw-bpart-notes { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--mob-line); }
.mobw .mobw-bnotes-intro { margin: 0 0 12px; font-size: calc(14px * var(--ms)); line-height: 1.5; color: var(--mob-sub); }
.mobw .mobw-bphotos-body { padding: 4px 14px 44px; }
/* Touch sizes for the shared grid inside the phone screen. Two-up with
   minmax(0,1fr): three overlay buttons per tile need the width, and a bare
   1fr lets content blow the track past the viewport (the squares lesson). */
.mobw .mobw-bphotos-body .photos-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mobw .mobw-bphotos-body .photo-wrapper { min-width: 0; }
.mobw .mobw-bphotos-body .photo-item { width: 100%; overflow: hidden; }
.mobw .mobw-bphotos-body .photo-action { width: 38px; height: 38px; }
.mobw .mobw-bphotos-body .photo-caption,
.mobw .mobw-bphotos-body .bpc-caption {
  font-size: calc(13.5px * var(--ms));
  min-height: 34px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobw .mobw-bphotos-body .photo-caption-input { font-size: 16px; min-height: 40px; width: 100%; }
.mobw .mobw-bphotos-body .bpc-hint { font-size: calc(14.5px * var(--ms)); }
/* The grid's status line (offline / uploading / could not upload) is a fixed
   13px in BuildingPhotoGrid.css; here it carries the offline reassurance, so
   it follows Large text like every other line on the screen. */
.mobw .mobw-bphotos-body .save-status {
  font-size: calc(14.5px * var(--ms));
  line-height: 1.4;
}
/* Camera + Gallery styling lives in BuildingPhotoGrid.css (.bpc-add-row
   scope, both hosts) — the half-applied pill copy that used to sit here left
   the base's stacked emoji showing through (Chad's "tacky" screenshot). */

/* Done at the foot of a report section screen: the same action as the back
   arrow, offered where a long section actually leaves the user. */
.mobw .mobw-section-done {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  border: none;
  border-radius: 14px;
  background: var(--mob-navy);
  color: #fff;
  font-family: inherit;
  font-size: calc(17px * var(--ms));
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mobw .mobw-section-done:active { background: #2D5F8A; }

/* ── Site Walk ────────────────────────────────────────────────────────────── */
.mobw-sw-processing {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.mobw .mobw-sw-pending-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(16px * var(--ms));
}
.mobw .mobw-sw-pending-actions { display: flex; gap: 4px; margin-top: 4px; }
.mobw .mobw-banner-btn-quiet { color: var(--mob-muted); }
.mobw .mobw-banner-btn-quiet:active { color: #B91C1C; }

/* Review, full screen */
.mobw .mobw-swr-title { flex: 1; }
.mobw .mobw-swr-discard {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--mob-muted);
  font-family: inherit;
  font-size: calc(15px * var(--ms));
  font-weight: 700;
  min-height: 52px;
  padding: 0 14px;
  cursor: pointer;
}
.mobw .mobw-swr-discard:active { color: #B91C1C; }
.mobw .mobw-swr-hint {
  margin: 0;
  padding: 0 20px 10px;
  font-size: calc(14.5px * var(--ms));
  line-height: 1.5;
  color: var(--mob-sub);
}
.mobw .mobw-swr-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 140px;
}
.mobw .mobw-swr-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--mob-line);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 13px;
}
.mobw .mobw-swr-needs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(14px * var(--ms));
  color: var(--mob-amber-deep);
}
.mobw .mobw-swr-addone { flex: 2; min-width: 0; min-height: 48px; font-size: calc(15px * var(--ms)); }
.mobw .mobw-swr-cta { display: flex; flex-direction: column; gap: 8px; }
.mobw .mobw-swr-cta-note {
  text-align: center;
  font-size: calc(13.5px * var(--ms));
  color: var(--mob-amber-deep);
}

/* ── Spinners / dots ──────────────────────────────────────────────────────── */
.mobw-spinner {
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(30, 58, 95, 0.2);
  border-top-color: var(--mob-navy);
  border-radius: 50%;
  animation: mobw-spin 0.9s linear infinite;
  flex-shrink: 0;
}
.mobw-spinner-lg { width: 30px; height: 30px; border-width: 3.5px; }
@keyframes mobw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mobw-spinner { animation: none; }
}
.mobw-offline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mob-amber);
  flex-shrink: 0;
}

/* ── Full-screen busy overlay ("Writing up your report") ──────────────────── */
.mobw-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 24px;
}
.mobw-busy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border-radius: 18px;
  padding: 28px 24px;
  max-width: 340px;
  text-align: center;
}
.mobw-busy-title {
  font-size: calc(19px * var(--ms));
  font-weight: 800;
  color: var(--mob-ink);
}
.mobw-busy-sub {
  font-size: calc(15px * var(--ms));
  line-height: 1.5;
  color: var(--mob-sub);
}

/* BAFE SP205 lock (13-10): a step's cards inside the lock's fieldset keep
   the scroll's spacing (the scroll's gap does not reach inside it) */
.mobw .mob-scroll > fieldset.sp2-lockset > * + * {
  margin-top: 14px;
}