/* ============================================================
   Blueprint mobile redesign — theme
   blueprintsoftware.ca/blueprint/assets/css/shared/mobile-theme.css

   A reskin of the shipped phone shell. It restyles the existing
   #mobile-app markup only: same DOM, same ids, same .mob-* class
   names, same onclick handlers, same aria semantics. No selector
   in this file matches anything outside #mobile-app, so the
   desktop portal is untouched.

   Requires mobile-design-tokens.css to be loaded first.

   Load in each extracted page's <head>, AFTER the page's own
   inline <style> block so these rules win on equal specificity:

     <link rel="stylesheet" href="/blueprint/assets/css/shared/mobile-design-tokens.css">
     <link rel="stylesheet" href="/blueprint/assets/css/shared/mobile-theme.css">

   !important is used in exactly four documented places, all of
   them overrides of inline style attributes written into the
   shipped markup or by the runtime. Each one is marked
   [!important — unavoidable] and listed in selector-map.md.
   ============================================================ */

/* ── 1. Shell ────────────────────────────────────────────── */

#mobile-app {
  background: var(--mob-bg);
  font-family: var(--mob-font-ui);
  font-weight: var(--mob-fw-body);
  color: var(--mob-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#mobile-app *,
#mobile-app *::before,
#mobile-app *::after { -webkit-tap-highlight-color: transparent; }

/* Focus is never removed. 2px blue ring at 2px offset, keyboard only. */
#mobile-app :focus-visible {
  outline: 2px solid var(--mob-blue);
  outline-offset: 2px;
  border-radius: var(--mob-radius-chip);
}

/* Status bar — the one dark strip that must stay dark: the shipped
   markup hard-codes color:#fff inline on #mob-clock-sm. */
#mobile-app .mob-statusbar {
  background: var(--mob-ink-deep);
  padding: calc(var(--mob-safe-top) + 8px) var(--mob-gutter) 6px;
}
#mobile-app #mob-clock-sm {
  font-family: var(--mob-font-mono);
  letter-spacing: .02em;
}

/* ── 2. Header (brand chrome) ────────────────────────────── */

#mobile-app .mob-header {
  min-height: var(--mob-header-h);
  padding: 10px var(--mob-gutter);
  background: var(--mob-ink);
  border-bottom: 3px solid var(--mob-blue);
  box-shadow: var(--mob-elev-sticky);
  gap: var(--mob-space-3);
}
#mobile-app .mob-logo { gap: var(--mob-space-2); }
#mobile-app .mob-logo-icon {
  width: 32px; height: 32px;
  border-radius: 23%;              /* brand tile radius, tile only */
  background: var(--mob-ink-deep);
  border: 1px solid rgba(243,245,248,.14);
  font-family: var(--mob-font-ui);
  font-weight: var(--mob-fw-display);
}
#mobile-app .mob-logo-text {
  font-size: var(--mob-fs-16);
  font-weight: var(--mob-fw-display);
  letter-spacing: -.02em;
  color: var(--mob-on-dark);
}
#mobile-app .mob-avatar {
  width: 36px; height: 36px;
  background: var(--mob-blue);
  border: 2px solid rgba(243,245,248,.22);
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-13);
  font-weight: var(--mob-fw-title);
  transition: background var(--mob-dur-hover) var(--mob-ease),
              transform var(--mob-dur-press) var(--mob-ease);
}
#mobile-app .mob-avatar:hover  { background: var(--mob-blue-600); }
#mobile-app .mob-avatar:active { background: var(--mob-blue-700); transform: scale(.98); }
/* The header bell and avatar are 22-36px glyphs in the shipped
   markup; give them a 44px hit area without touching the DOM. */
#mobile-app .mob-header > div:last-child > div {
  min-width: var(--mob-tap-min);
  min-height: var(--mob-tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 3. Content + sections ───────────────────────────────── */

#mobile-app .mob-content {
  background: var(--mob-bg);
  padding-bottom: var(--mob-space-4);
  overscroll-behavior-y: contain;
}
#mobile-app .mob-section { padding-bottom: var(--mob-space-2); }

/* BP-43 r1.5 (mobile Home visual parity): the flat-dark `!important`
   override that hid the shipped gradient is retired. The target design
   is a Slate → blue vertical gradient (see section 18 for the
   authoritative rule set), so no forced-flat override is required. The
   inline `background` on `.mob-home-hero` is a fallback for legacy
   WebViews that do not apply the theme; the theme wins on equal
   specificity because it is loaded AFTER the page's own <style>. */
#mobile-app #mob-greeting-label {
  font-size: var(--mob-fs-12);
  font-weight: var(--mob-fw-label);
  letter-spacing: .04em;
  text-transform: uppercase;
}
#mobile-app #mob-greeting-name {
  font-size: var(--mob-fs-26);
  font-weight: var(--mob-fw-display);
  letter-spacing: var(--mob-track-title);
  line-height: 1.15;
}
#mobile-app #mob-date-label { font-size: var(--mob-fs-13); }

/* Section eyebrow labels ("Your tools", "My recent submissions") */
#mobile-app .mob-section > div[style*="uppercase"] {
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-11);
  letter-spacing: .09em;
}

/* Page titles */
#mobile-app .mob-page-header {
  padding: var(--mob-space-5) var(--mob-gutter) var(--mob-space-3);
  font-size: var(--mob-fs-22);
  font-weight: var(--mob-fw-display);
  letter-spacing: var(--mob-track-title);
  color: var(--mob-text);
}

/* ── 4. Bottom tab bar ──────────────────────────────────── */

#mobile-app .mob-bottomnav {
  background: var(--mob-surface);
  border-top: 1px solid var(--mob-border);
  padding: var(--mob-space-1) 0 max(var(--mob-space-1), var(--mob-safe-bottom));
  box-shadow: 0 -1px 0 rgba(40,46,55,.04);
}
#mobile-app .mob-nav-item {
  min-height: var(--mob-tap-min);
  gap: var(--mob-space-1);
  padding: 8px 4px 6px;
  background: none;
  border: none;
  border-radius: var(--mob-radius-ctrl);
  color: var(--mob-text-muted);
  font-family: var(--mob-font-ui);
  transition: color var(--mob-dur-nav) var(--mob-ease),
              background var(--mob-dur-nav) var(--mob-ease);
}
#mobile-app .mob-nav-item:active { opacity: 1; background: var(--mob-hover); }
#mobile-app .mob-nav-label {
  font-size: var(--mob-fs-11);
  font-weight: var(--mob-fw-label);
  letter-spacing: 0;
  color: var(--mob-text-muted);
}
#mobile-app .mob-nav-item.active .mob-nav-label { color: var(--mob-blue); }

/* Emoji nav glyphs are replaced with Lucide-geometry line icons, inlined
   as data URIs so the tab bar needs no extra network request and renders
   identically in older Android WebViews (no CSS mask support required).
   The emoji text node stays in the DOM — it is aria-hidden, the readable
   label lives in .mob-nav-label and in the button's aria-label — it is
   simply not painted. Two colour variants: resting slate, active blue. */
#mobile-app .mob-nav-icon {
  font-size: 0;
  line-height: 0;
  color: transparent;
  width: 24px;
  height: 24px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
#mobile-app #mob-nav-home .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2366707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-announcements .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2366707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v12L3 13z'/%3E%3Cpath d='M11.5 12.5 13 20l-3 1-2.5-7.5'/%3E%3Cpath d='M18 8.5a3 3 0 0 1 0 5'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-documents .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2366707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-forms .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2366707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M8.5 11h7'/%3E%3Cpath d='M8.5 15h7'/%3E%3C/svg%3E"); }
/* BP-43 r1.4: fifth destination is Staff Directory (Lucide `users`), not
   Alerts. Alerts remains reachable through the capability-gated header bell
   and the home launcher; its bottom-nav slot is retired. */
#mobile-app #mob-nav-directory .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2366707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M15 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

#mobile-app #mob-nav-home.active .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c72cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-announcements.active .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c72cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v12L3 13z'/%3E%3Cpath d='M11.5 12.5 13 20l-3 1-2.5-7.5'/%3E%3Cpath d='M18 8.5a3 3 0 0 1 0 5'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-documents.active .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c72cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-forms.active .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c72cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M8.5 11h7'/%3E%3Cpath d='M8.5 15h7'/%3E%3C/svg%3E"); }
#mobile-app #mob-nav-directory.active .mob-nav-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c72cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M15 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

/* ── 5. Cards ───────────────────────────────────────────── */

#mobile-app .mob-card {
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: var(--mob-radius-card);
  margin: var(--mob-space-3) var(--mob-gutter);
  box-shadow: var(--mob-elev-2);
}
#mobile-app .mob-card-header {
  padding: var(--mob-space-3) var(--mob-space-4);
  border-bottom: 1px solid var(--mob-divider);
  background: var(--mob-surface);
  font-size: var(--mob-fs-11);
  font-weight: var(--mob-fw-title);
  letter-spacing: .09em;
  color: var(--mob-text-muted);
}
#mobile-app .mob-card-body { padding: var(--mob-space-3) var(--mob-space-4); }

/* ── 6. Rows ────────────────────────────────────────────── */

#mobile-app .mob-list-item {
  min-height: 48px;
  padding: var(--mob-space-3) var(--mob-space-4);
  gap: var(--mob-space-3);
  border-bottom: 1px solid var(--mob-divider);
  background: var(--mob-surface);
  color: var(--mob-text);
  font-size: var(--mob-fs-14);
  transition: background var(--mob-dur-hover) var(--mob-ease);
}
#mobile-app .mob-list-item:hover  { background: var(--mob-hover); }
#mobile-app .mob-list-item:active { background: var(--mob-hover); }
#mobile-app .mob-list-item:last-child { border-bottom: none; }

/* Runtime-rendered tiles: home launcher and the forms picker. */
#mobile-app #mob-launcher > *,
#mobile-app #mob-forms-picker > * {
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--mob-space-3) var(--mob-space-4);
  border-radius: var(--mob-radius-stat);
  border: 1px solid var(--mob-border);
  background: var(--mob-surface);
  box-shadow: var(--mob-elev-1);
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-14);
  font-weight: var(--mob-fw-label);
  color: var(--mob-text);
  transition: background var(--mob-dur-hover) var(--mob-ease),
              box-shadow var(--mob-dur-hover) var(--mob-ease),
              transform var(--mob-dur-press) var(--mob-ease);
}
#mobile-app #mob-launcher > *:hover,
#mobile-app #mob-forms-picker > *:hover { background: var(--mob-blue-50); }
#mobile-app #mob-launcher > *:active,
#mobile-app #mob-forms-picker > *:active { transform: scale(.98); }
#mobile-app #mob-launcher,
#mobile-app #mob-forms-picker { gap: var(--mob-space-3); }

/* ── 7. Stats ───────────────────────────────────────────── */

#mobile-app .mob-stats { gap: var(--mob-space-3); padding: var(--mob-space-3) var(--mob-gutter); }
#mobile-app .mob-stat {
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-top: 3px solid var(--mob-blue);   /* decorative rule only */
  border-radius: var(--mob-radius-stat);
  padding: var(--mob-space-3);
  box-shadow: var(--mob-elev-1);
}
#mobile-app .mob-stat-label {
  font-size: var(--mob-fs-11);
  font-weight: var(--mob-fw-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mob-text-muted);
  margin-bottom: var(--mob-space-1);
}
#mobile-app .mob-stat-value {
  font-family: var(--mob-font-mono);
  font-size: var(--mob-fs-22);
  font-weight: 600;
  color: var(--mob-text);
  letter-spacing: -.01em;
}

/* ── 8. Status pills ───────────────────────────────────── */

#mobile-app .mob-badge {
  padding: 3px 9px;
  border-radius: var(--mob-radius-pill);
  border: 1px solid transparent;
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-11);
  font-weight: var(--mob-fw-label);
  letter-spacing: .01em;
}
#mobile-app .mob-badge-blue  { background: var(--mob-info-bg);    color: var(--mob-info-fg);    border-color: var(--mob-info-border); }
#mobile-app .mob-badge-green { background: var(--mob-success-bg); color: var(--mob-success-fg); border-color: var(--mob-success-border); }
#mobile-app .mob-badge-amber { background: var(--mob-warning-bg); color: var(--mob-warning-fg); border-color: var(--mob-warning-border); }
#mobile-app .mob-badge-red   { background: var(--mob-danger-bg);  color: var(--mob-danger-fg);  border-color: var(--mob-danger-border); }
#mobile-app .mob-badge-gray  { background: var(--mob-neutral-bg); color: var(--mob-neutral-fg); border-color: var(--mob-neutral-border); }

/* ── 9. Search fields ──────────────────────────────────── */

#mobile-app #mob-doc-search,
#mobile-app #mob-dir-search {
  min-height: var(--mob-tap-min);
  padding: 12px 14px;
  border: 1.5px solid var(--mob-border-strong);
  border-radius: var(--mob-radius-ctrl);
  background: var(--mob-surface);
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-16);        /* 16px: iOS must not zoom */
  font-weight: var(--mob-fw-body);
  color: var(--mob-text);
  transition: border-color var(--mob-dur-hover) var(--mob-ease),
              box-shadow var(--mob-dur-hover) var(--mob-ease);
}
#mobile-app #mob-doc-search::placeholder,
#mobile-app #mob-dir-search::placeholder { color: var(--mob-text-muted); opacity: 1; }
#mobile-app #mob-doc-search:focus,
#mobile-app #mob-dir-search:focus {
  border-color: var(--mob-blue);
  box-shadow: var(--mob-focus-ring);
  outline: none;
}

/* Category filter chips (runtime-rendered into #mob-doc-cats) */
#mobile-app #mob-doc-cats { gap: var(--mob-space-2); }
#mobile-app #mob-doc-cats > * {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--mob-radius-pill);
  border: 1.5px solid var(--mob-border-strong);
  background: var(--mob-surface);
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-13);
  font-weight: var(--mob-fw-label);
  color: var(--mob-text-secondary);
  transition: background var(--mob-dur-nav) var(--mob-ease),
              color var(--mob-dur-nav) var(--mob-ease),
              border-color var(--mob-dur-nav) var(--mob-ease);
}
#mobile-app #mob-doc-cats > *[aria-selected="true"],
#mobile-app #mob-doc-cats > *.active {
  background: var(--mob-blue);
  border-color: var(--mob-blue);
  color: #fff;
}

/* ── 10. Loading / empty / error states ────────────────── */

/* The shipped placeholders and the runtime's centred empty and error
   rows carry an inline color:#9ca3af, which is 2.5:1 on white. Only
   the colour is corrected — the states themselves are untouched.
   [!important — unavoidable: inline style attribute] */
/* BP-43 r1.5: `#mob-home-summary` is retired from the empty-state list —
   the summary card no longer exists in the DOM, so no selector needs to
   target its centred children. */
#mobile-app #mob-announcements > div[style*="center"],
#mobile-app #mob-documents > div[style*="center"],
#mobile-app #mob-form-history > div[style*="center"],
#mobile-app #mob-alerts-list > div[style*="center"],
#mobile-app #mob-directory > div[style*="center"] {
  color: var(--mob-text-muted) !important;
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-13) !important;
  font-weight: var(--mob-fw-body);
}
#mobile-app .loading-bar { color: var(--mob-text-muted); font-size: var(--mob-fs-13); }
#mobile-app .spinner-sm {
  border-color: var(--mob-blue-100);
  border-top-color: var(--mob-blue);
}
#mobile-app .empty-state { color: var(--mob-text-muted); padding: var(--mob-space-6) var(--mob-space-4); }
#mobile-app .empty-state p { font-size: var(--mob-fs-14); }

/* ── 11. Detail panel ──────────────────────────────────── */

#mobile-app .mob-detail-panel {
  background: var(--mob-bg);
  transition: transform var(--mob-dur-sheet) var(--mob-ease-emph);
}
#mobile-app .mob-detail-header {
  min-height: var(--mob-header-h);
  padding: var(--mob-space-3) var(--mob-gutter);
  padding-top: calc(var(--mob-space-3) + var(--mob-safe-top));
  background: var(--mob-ink);
  border-bottom: 3px solid var(--mob-blue);
  color: var(--mob-on-dark);
  font-size: var(--mob-fs-16);
  font-weight: var(--mob-fw-title);
  letter-spacing: var(--mob-track-title);
}
#mobile-app .mob-back-btn {
  min-width: var(--mob-tap-min);
  min-height: var(--mob-tap-min);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--mob-on-dark);
  font-size: var(--mob-fs-20);
  border-radius: var(--mob-radius-ctrl);
  transition: background var(--mob-dur-hover) var(--mob-ease);
}
#mobile-app .mob-back-btn:active { background: rgba(243,245,248,.14); }
#mobile-app .mob-detail-panel :focus-visible { outline-color: #fff; }

/* ── 12. Job preview sheet ─────────────────────────────── */

/* The sheet's scrim is an inline rgba(0,0,0,.5); this system's scrim
   is slate-tinted at .45.
   [!important — unavoidable: inline style attribute] */
#mobile-app #mob-job-sheet { background: var(--mob-scrim) !important; }
/* The sheet panel itself is inline-styled in the shipped markup; only
   the parts that are not carry theme rules. */
#mobile-app #mob-sheet-title {
  font-family: var(--mob-font-ui);
  letter-spacing: var(--mob-track-title);
  color: var(--mob-text);
}
#mobile-app #mob-sheet-timer { font-family: var(--mob-font-mono); }
#mobile-app #mob-sheet-status-badge {
  border-radius: var(--mob-radius-pill);
  font-family: var(--mob-font-ui);
  font-weight: var(--mob-fw-label);
}
#mobile-app #mob-sheet-start,
#mobile-app #mob-sheet-stop,
#mobile-app #mob-sheet-complete {
  min-height: var(--mob-tap-min);
  border-radius: var(--mob-radius-ctrl);
  font-family: var(--mob-font-ui);
  font-weight: var(--mob-fw-label);
}

/* ── 13. Alert dot ─────────────────────────────────────── */

/* The unread dot is inline-positioned; a surface-coloured ring is what
   separates it from the dark header.
   [!important — unavoidable: inline style attribute] */
#mobile-app #mob-alert-dot {
  width: 9px !important;
  height: 9px !important;
  background: var(--mob-danger-fg) !important;
  box-shadow: 0 0 0 2px var(--mob-ink);
}

/* ── 14. Reduced motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #mobile-app *,
  #mobile-app *::before,
  #mobile-app *::after {
    transition-duration: 1ms !important;   /* [!important — unavoidable: must beat the rules above] */
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  #mobile-app .spinner-sm { animation-duration: 1.4s !important; }
  #mobile-app .mob-detail-panel { transition: none !important; }
  #mobile-app .mob-announce-chev { transition: none !important; }
}

/* ── 15. r1.3 Announcement clamp / expand-in-place ──────
   The body clamps to 3 visual lines by default; a delegated click on
   `.mob-announce-toggle` (aria-expanded + aria-controls the paired body)
   removes the clamp. Ephemeral state only — no localStorage, no server
   field, no read-tracking. The posted-by line and the ack control live
   outside the toggle target so they stay visible when collapsed.
   Escape/XSS: all values come through the `bp` tagged template. Native
   <button> semantics provide Enter/Space keyboard activation. */
#mobile-app .mob-announce-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#mobile-app .mob-announce-body--expanded {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
#mobile-app .mob-announce-toggle:focus-visible {
  outline: 2px solid var(--mob-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
#mobile-app .mob-announce-chev {
  display: inline-block;
  transition: transform var(--mob-dur-pop) var(--mob-ease);
  will-change: transform;
}
#mobile-app .mob-announce-toggle[aria-expanded="true"] .mob-announce-chev {
  transform: rotate(180deg);
}

/* ── 16. r1.4 In-app document viewer (PDF + written text) ─────────
   Chrome only. The document body itself is:
     • PDF: an <iframe> whose src is a Blob URL produced by the
       already-validated `bpPdfObjectUrl` (BP-33). No JS renderer,
       no remote dependency, no custom page-step/search claim.
     • Written: a <pre> filled via textContent — no HTML, no
       Markdown, no scripts/links/styles are interpreted.
   The overlay is appended INSIDE #mobile-app (falling back to the
   document body only if the shell root is unavailable). Selectors
   here are scoped under `#mobile-app` so this file continues to
   have zero effect outside the mobile shell. */
#mobile-app .mob-docviewer {
  font-family: var(--mob-font-ui);
  color: var(--mob-text);
}
#mobile-app .mob-docviewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  padding-top: calc(11px + var(--mob-safe-top, 0px));
  background: var(--mob-surface, #fff);
  border-bottom: 1px solid var(--mob-border, #e5e7eb);
}
#mobile-app .mob-docviewer-back {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: var(--mob-radius-ctrl, 10px);
  background: var(--mob-surface-inset, #f3f4f6);
  color: var(--mob-text-secondary, #374151);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mobile-app .mob-docviewer-back:focus-visible {
  outline: 2px solid var(--mob-blue, #0c72cb);
  outline-offset: 2px;
}
#mobile-app .mob-docviewer-titlewrap {
  flex: 1;
  min-width: 0;
}
#mobile-app .mob-docviewer-title {
  font-size: var(--mob-fs-15, 15px);
  font-weight: var(--mob-fw-title, 700);
  color: var(--mob-text, #1f2937);
  letter-spacing: var(--mob-track-title, -0.1px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mobile-app .mob-docviewer-meta {
  font-size: var(--mob-fs-11, 11px);
  color: var(--mob-text-muted, #9ca3af);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
#mobile-app .mob-docviewer-close {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--mob-border, #e5e7eb);
  border-radius: var(--mob-radius-ctrl, 10px);
  background: #fff;
  color: var(--mob-text, #1f2937);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#mobile-app .mob-docviewer-close:focus-visible {
  outline: 2px solid var(--mob-blue, #0c72cb);
  outline-offset: 2px;
}
#mobile-app .mob-docviewer-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--mob-surface-inset, #f3f4f6);
}
#mobile-app .mob-docviewer-stage--pdf {
  display: flex;
}
#mobile-app .mob-docviewer-frame {
  flex: 1;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: #fff;
}
#mobile-app .mob-docviewer-stage--notes {
  padding: 18px 16px 24px;
}
#mobile-app .mob-docviewer-notes {
  margin: 0;
  padding: 18px 16px;
  background: var(--mob-surface, #fff);
  border: 1px solid var(--mob-border, #e5e7eb);
  border-radius: 6px;
  box-shadow: var(--mob-elev-1, 0 1px 2px rgba(15, 23, 42, .06));
  font-family: var(--mob-font-ui);
  font-size: var(--mob-fs-14, 14px);
  color: var(--mob-text-secondary, #374151);
  line-height: var(--mob-lh-body, 1.55);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
#mobile-app .mob-docviewer-notes:focus-visible {
  outline: 2px solid var(--mob-blue, #0c72cb);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #mobile-app .mob-docviewer-stage { scroll-behavior: auto; }
}

/* ── 17. r1.4 Slice 2 Today's Events (home card) ──────────────
   Visual chrome only. Server-authoritative per-category View gating
   lives in the runtime (mobLoadToday) + the /api/v1/mobile-today
   endpoint — this file only styles what the runtime chooses to render.
   The whole section is `hidden` (attribute, not display:none-only) when
   the actor has no authorised categories. Rows are 44px minimum tap
   height, non-actionable by design in this slice (no invented mobile
   destination); the digest overflow button is a real <button>. */
#mobile-app .mob-today {
  padding: 10px 14px 4px;
}
#mobile-app .mob-today[hidden] { display: none; }
#mobile-app .mob-today-heading {
  margin: 0 0 6px;
  font-size: var(--mob-fs-12, 12px);
  font-weight: 700;
  color: var(--mob-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#mobile-app .mob-today-card {
  margin: 0;
  background: var(--mob-surface, #fff);
  border: 1px solid var(--mob-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
}
#mobile-app .mob-today-row {
  min-height: 44px;
}
/* The last row's border-bottom is drawn by the row itself; suppress it
   when there is no digest button following, so the card's bottom edge
   is not double-stroked. */
#mobile-app .mob-today-row:last-child {
  border-bottom: 0;
}
#mobile-app .mob-today-digest:focus-visible {
  outline: 2px solid var(--mob-blue, #0c72cb);
  outline-offset: -2px;
}

/* ── 18. r1.5 Mobile Home visual parity ─────────────────────
   Aligns the shipped Home with the owner-approved Home reference
   mockup: slate → blue gradient hero, no statistics card, Today's
   Events with a right-aligned muted date and line-icon rows tinted
   per kind, and a 2×2 line-icon launcher (Announcements, Documents,
   Forms, Staff directory — Alerts is not a launcher tile in r1.5
   and remains reachable ONLY through the capability-gated header
   bell). Every icon is painted from a local Lucide-geometry SVG
   data URI; no remote fetch. Scope is #mobile-app throughout so
   nothing here escapes the mobile shell. */

/* Hero */
#mobile-app .mob-home-hero {
  background: linear-gradient(180deg, #222933 0%, #0c72cb 100%);
  color: var(--mob-on-dark, #f3f5f8);
  padding: var(--mob-space-5, 18px) var(--mob-gutter, 16px) var(--mob-space-6, 22px);
  border-bottom: 1px solid rgba(243, 245, 248, 0.10);
}
#mobile-app .mob-home-hero-eyebrow {
  font-size: var(--mob-fs-13, 13px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
}
#mobile-app .mob-home-hero-name {
  font-size: var(--mob-fs-26, 26px);
  font-weight: var(--mob-fw-display, 800);
  letter-spacing: var(--mob-track-title, -0.2px);
  line-height: 1.15;
  color: #fff;
}
#mobile-app .mob-home-hero-date {
  font-size: var(--mob-fs-12, 12px);
  color: rgba(255, 255, 255, 0.60);
  margin-top: 4px;
}

/* Section eyebrows on Home ("YOUR TOOLS", "TODAY'S EVENTS") */
#mobile-app .mob-home-tools-eyebrow {
  padding: 6px 14px 2px;
  font-size: var(--mob-fs-12, 12px);
  font-weight: 700;
  color: var(--mob-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#mobile-app .mob-today-headrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 6px;
}
#mobile-app .mob-today-headrow .mob-today-heading {
  margin: 0;
}
#mobile-app .mob-today-headdate {
  font-size: var(--mob-fs-12, 12px);
  color: var(--mob-blue, #0c72cb);
  font-weight: 600;
  white-space: nowrap;
}

/* Today rows: tinted line-icon tile per kind. Chevron rendered only
   when the runtime resolved an authorised destination (see
   mob-today-row is a <button>). Inert (non-navigable) rows are <div>
   with the .mob-today-row-inert class. */
#mobile-app .mob-today-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 52px;
  border-bottom: 1px solid var(--mob-divider, #f3f4f6);
  background: var(--mob-surface, #fff);
  color: inherit;
  font-family: inherit;
  text-align: left;
}
#mobile-app button.mob-today-row {
  border: 0;
  cursor: pointer;
  width: 100%;
}
#mobile-app button.mob-today-row:focus-visible {
  outline: 2px solid var(--mob-blue, #0c72cb);
  outline-offset: -2px;
}
#mobile-app .mob-today-row-text {
  flex: 1;
  min-width: 0;
}
#mobile-app .mob-today-row-title {
  display: block;
  font-size: var(--mob-fs-14, 14px);
  font-weight: 600;
  color: var(--mob-text, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mobile-app .mob-today-row-meta {
  display: block;
  font-size: var(--mob-fs-11, 11px);
  color: var(--mob-text-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mobile-app .mob-today-row-chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--mob-text-muted, #9ca3af);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Today row icon tiles: 30px rounded square with tinted background,
   Lucide-geometry glyph painted via CSS mask. Colours per kind. */
#mobile-app .mob-today-icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#mobile-app .mob-today-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
#mobile-app .mob-today-icon-schedule {
  background: var(--mob-blue-50, #eff6ff);
  color: var(--mob-blue, #0c72cb);
}
#mobile-app .mob-today-icon-schedule::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
}
#mobile-app .mob-today-icon-event {
  background: var(--mob-blue-50, #eff6ff);
  color: var(--mob-blue, #0c72cb);
}
#mobile-app .mob-today-icon-event::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}
#mobile-app .mob-today-icon-birthday {
  background: #fef3c7;
  color: #b45309;
}
#mobile-app .mob-today-icon-birthday::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h11z' transform='translate(-1 6)'/%3E%3Cpath d='M8 3a3 3 0 0 1 6 0'/%3E%3Cpath d='M17 11.5c0-3 5-3 5 0 0 5-5 4.5-5 0z' transform='translate(-4 -7)'/%3E%3Cpath d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3Crect x='3' y='9' width='18' height='4' rx='1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h11z' transform='translate(-1 6)'/%3E%3Cpath d='M8 3a3 3 0 0 1 6 0'/%3E%3Cpath d='M17 11.5c0-3 5-3 5 0 0 5-5 4.5-5 0z' transform='translate(-4 -7)'/%3E%3Cpath d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3Crect x='3' y='9' width='18' height='4' rx='1'/%3E%3C/svg%3E");
}
#mobile-app .mob-today-icon-anniversary {
  background: #ede9fe;
  color: #6d28d9;
}
#mobile-app .mob-today-icon-anniversary::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M4 11c0-5 4-8 8-8s8 3 8 8-4 10-8 10S4 16 4 11z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M4 11c0-5 4-8 8-8s8 3 8 8-4 10-8 10S4 16 4 11z'/%3E%3C/svg%3E");
}

/* Digest row */
#mobile-app .mob-today-digest {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--mob-surface-inset, #f9fafb);
  border: 0;
  border-top: 1px solid var(--mob-divider, #f3f4f6);
  color: var(--mob-text-secondary, #374151);
  font-family: inherit;
  font-size: var(--mob-fs-12, 12px);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
#mobile-app .mob-today-digest-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mobile-app .mob-today-digest-preview {
  color: var(--mob-text-muted, #6b7280);
  font-weight: 500;
}
#mobile-app .mob-today-digest-chev {
  flex: none;
  font-size: 16px;
  color: var(--mob-text-muted, #9ca3af);
}

/* r1.5 Launcher (2×2 grid, line-icon tiles) — the runtime paints exactly
   four buttons (Announcements/Documents/Forms/Staff directory). Alerts
   is NOT a launcher tile in this revision. */
#mobile-app .mob-launcher-grid {
  padding: 8px 14px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#mobile-app .mob-launch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 92px;
  padding: 16px;
  background: var(--mob-surface, #fff);
  border: 1px solid var(--mob-border, #e5e7eb);
  border-radius: 14px;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--mob-elev-1, 0 1px 2px rgba(15, 23, 42, .06));
}
#mobile-app .mob-launch:focus-visible {
  outline: 2px solid var(--mob-blue, #0c72cb);
  outline-offset: 2px;
}
#mobile-app .mob-launch-label {
  font-size: var(--mob-fs-14, 14px);
  font-weight: 700;
  color: var(--mob-text, #1f2937);
}
#mobile-app .mob-launch-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--mob-blue-50, #eff6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#mobile-app .mob-launch-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--mob-blue, #0c72cb);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
#mobile-app .mob-launch-announcements .mob-launch-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v12L3 13z'/%3E%3Cpath d='M11.5 12.5 13 20l-3 1-2.5-7.5'/%3E%3Cpath d='M18 8.5a3 3 0 0 1 0 5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v12L3 13z'/%3E%3Cpath d='M11.5 12.5 13 20l-3 1-2.5-7.5'/%3E%3Cpath d='M18 8.5a3 3 0 0 1 0 5'/%3E%3C/svg%3E");
}
#mobile-app .mob-launch-documents .mob-launch-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
}
#mobile-app .mob-launch-forms .mob-launch-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M8.5 11h7'/%3E%3Cpath d='M8.5 15h7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M8.5 11h7'/%3E%3Cpath d='M8.5 15h7'/%3E%3C/svg%3E");
}
#mobile-app .mob-launch-directory .mob-launch-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M15 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M15 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* r1.5 Header bell — line-style Lucide `bell`, painted from a local SVG
   data URI. The button is the ONLY entry point to Alerts in r1.5;
   mobApplyViewControls hides it (display:none + aria-hidden + tabindex=-1
   + disabled) when mobCanView('alerts') is false. The retained emoji
   text node is aria-hidden (a legacy accessibility fallback) and is
   invisible in the shipped design. */
#mobile-app .mob-alert-btn {
  position: relative;
  width: var(--mob-tap-min, 44px);
  height: var(--mob-tap-min, 44px);
  border: 0;
  background: transparent;
  color: var(--mob-on-dark, #f3f5f8);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
#mobile-app .mob-alert-btn:focus-visible {
  outline: 2px solid var(--mob-on-dark, #f3f5f8);
  outline-offset: 2px;
  border-radius: 8px;
}
#mobile-app .mob-alert-icon {
  font-size: 0;
  line-height: 0;
  color: transparent;
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* The dot's own display is toggled by the runtime through the inline
   `style` attribute (see mobLoadAlerts). We only style position + shape
   here; leaving `display` unset means the inline style is authoritative
   AND the initial DOM state (inline `display:none` on the span, set by
   the shipped markup) hides the dot at parse time. */
#mobile-app .mob-alert-btn #mob-alert-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
}
