/* ============================================================
   CTRI v2.0 — Design System
   Inspired by Apple HIG. Tokens → Primitives → Components.
   Loaded BEFORE main.css; main.css overrides where needed
   for legacy screens not yet migrated.
============================================================ */

/* ── Typography: Inter as system fallback for SF Pro ── */
@import url('https://rsms.me/inter/inter.css');

:root {
  /* ───── Color: brand ───── */
  --c-brand-900: #0f1a3d;
  --c-brand-800: #1a2352;
  --c-brand-700: #2c386d;     /* primary */
  --c-brand-600: #3a4d8f;
  --c-brand-500: #5468b8;
  --c-brand-100: #e8ecf7;
  --c-brand-50:  #f4f6fc;

  /* Accent (healthcare/community teal) */
  --c-accent-700: #2e8fc2;
  --c-accent-600: #3fa3d9;
  --c-accent-100: #e3f2fb;

  /* Semantic */
  --c-success-600: #16a34a;
  --c-success-100: #dcfce7;
  --c-warning-600: #d97706;
  --c-warning-100: #fef3c7;
  --c-danger-600:  #dc2626;
  --c-danger-100:  #fee2e2;
  --c-info-600:    #2563eb;
  --c-info-100:    #dbeafe;

  /* Neutrals — Apple-ish gray ramp */
  --c-ink-950: #0a0a0c;
  --c-ink-900: #111827;
  --c-ink-800: #1f2937;
  --c-ink-700: #374151;
  --c-ink-600: #4b5563;
  --c-ink-500: #6b7280;
  --c-ink-400: #9ca3af;
  --c-ink-300: #d1d5db;
  --c-ink-200: #e5e7eb;
  --c-ink-100: #f3f4f6;
  --c-ink-50:  #f8fafc;
  --c-white:   #ffffff;

  /* Surfaces (light) */
  --c-bg:          #ffffff;
  --c-bg-elev:     #ffffff;
  --c-bg-subtle:   #f6f7fb;
  --c-bg-muted:    #eef0f6;
  --c-surface:     #ffffff;
  --c-surface-2:   #f8fafc;
  --c-border:      #e5e7eb;
  --c-border-soft: #eef0f4;
  --c-text:        #0f172a;
  --c-text-muted:  #6b7280;
  --c-text-soft:   #9ca3af;
  --c-primary:     var(--c-brand-700);
  --c-primary-ink: #ffffff;
  --c-overlay:     rgba(15, 23, 42, 0.5);

  /* ───── Type ───── */
  --font-sans: 'Inter','SF Pro Text','system-ui',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display: 'Hanken Grotesk','SF Pro Display',var(--font-sans);
  --font-mono: ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;   /* iOS body */
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-34: 2.125rem;    /* iOS large title */
  --fs-40: 2.5rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-base:  0;
  --ls-wide:  0.02em;

  /* ───── Space (4pt grid) ───── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ───── Radius ───── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ───── Shadow (soft, Apple-ish) ───── */
  --sh-xs: 0 1px 2px rgba(15,23,42,0.04);
  --sh-sm: 0 2px 8px rgba(15,23,42,0.06);
  --sh-md: 0 6px 18px rgba(15,23,42,0.08);
  --sh-lg: 0 18px 40px rgba(15,23,42,0.12);
  --sh-xl: 0 32px 64px rgba(15,23,42,0.18);
  --sh-focus: 0 0 0 4px rgba(44,56,109,0.18);

  /* ───── Motion ───── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 640ms;

  /* ───── Layout ───── */
  --container: 480px;     /* mobile-first cap */
  --tap-target: 44px;     /* iOS HIG min */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Legacy aliases (so existing main.css references continue to work) */
  --primary: var(--c-primary);
  --primary-light: var(--c-brand-600);
  --bg-light: var(--c-bg-subtle);
  --bg-card: var(--c-surface);
  --text-dark: var(--c-text);
  --text-muted: var(--c-text-muted);
  --border-color: var(--c-border);
  --radius-lg: var(--r-xl);
}

/* ───── Dark mode ───── */
body.dark-mode {
  --c-bg:          #0b0d12;
  --c-bg-elev:     #14171f;
  --c-bg-subtle:   #0f1218;
  --c-bg-muted:    #1a1f2b;
  --c-surface:     #14171f;
  --c-surface-2:   #1a1f2b;
  --c-border:      #232938;
  --c-border-soft: #1d2230;
  --c-text:        #f3f4f6;
  --c-text-muted:  #9ca3af;
  --c-text-soft:   #6b7280;
  --c-overlay:     rgba(0, 0, 0, 0.6);

  --bg-light: var(--c-bg);
  --bg-card:  var(--c-surface);
  --text-dark: var(--c-text);
  --text-muted: var(--c-text-muted);
  --border-color: var(--c-border);
}

/* ============================================================
   GLOBAL RESET — narrow scope, additive to main.css
============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

@supports (font-variation-settings: normal) {
  body { font-family: 'InterVariable', var(--font-sans); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
============================================================ */
.t-largeTitle {
  font-family: var(--font-display);
  font-size: var(--fs-34);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.t-title    { font-size: var(--fs-28); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.t-headline { font-size: var(--fs-22); font-weight: var(--fw-semi); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
.t-body     { font-size: var(--fs-17); font-weight: var(--fw-regular); line-height: var(--lh-base); }
.t-callout  { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: var(--lh-base); }
.t-subhead  { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--c-text-muted); }
.t-footnote { font-size: var(--fs-13); color: var(--c-text-muted); }
.t-caption  { font-size: var(--fs-12); color: var(--c-text-soft); letter-spacing: var(--ls-wide); }

/* ============================================================
   BUTTONS — v2
============================================================ */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-target);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--dur-1) var(--ease-std),
              background var(--dur-2) var(--ease-std),
              box-shadow var(--dur-2) var(--ease-std),
              opacity var(--dur-2) var(--ease-std);
  width: 100%;
}
.btn-v2:active { transform: scale(0.98); }
.btn-v2:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn-v2[disabled] { opacity: 0.5; pointer-events: none; }

.btn-v2.is-primary {
  background: var(--c-primary);
  color: var(--c-primary-ink);
  box-shadow: 0 8px 24px rgba(44,56,109,0.28);
}
.btn-v2.is-primary:hover { background: var(--c-brand-800); }

.btn-v2.is-secondary {
  background: var(--c-bg-muted);
  color: var(--c-text);
}
.btn-v2.is-secondary:hover { background: var(--c-ink-200); }

.btn-v2.is-ghost {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
}
.btn-v2.is-ghost:hover { background: var(--c-bg-subtle); }

.btn-v2.is-text {
  background: transparent;
  color: var(--c-primary);
  min-height: auto;
  padding: 8px 12px;
  width: auto;
}

.btn-v2.is-sm { min-height: 36px; padding: 8px 16px; font-size: var(--fs-14); }
.btn-v2.is-lg { min-height: 56px; font-size: var(--fs-17); }

.btn-v2.is-loading { pointer-events: none; opacity: 0.85; }
.btn-v2.is-loading::after {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ============================================================
   FORM FIELDS — v2 (floating-label vibe, iOS-clean)
============================================================ */
.field {
  display: block;
  position: relative;
  margin: 0 0 14px;
}
.field > label.field-label {
  display: block;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--c-text-muted);
  margin: 0 0 6px 2px;
  letter-spacing: var(--ls-wide);
}
.field > .field-hint {
  display: block;
  font-size: var(--fs-12);
  color: var(--c-text-soft);
  margin-top: 6px;
  padding-left: 2px;
}
.field.has-error > .field-hint { color: var(--c-danger-600); }

.input-v2,
.select-v2 {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-2) var(--ease-std),
              box-shadow var(--dur-2) var(--ease-std),
              background var(--dur-2) var(--ease-std);
}
.input-v2::placeholder { color: var(--c-text-soft); }
.input-v2:focus,
.select-v2:focus {
  border-color: var(--c-primary);
  box-shadow: var(--sh-focus);
}
.field.has-error .input-v2,
.field.has-error .select-v2 {
  border-color: var(--c-danger-600);
}

.select-v2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

/* Inline duo (e.g. Month / Year side-by-side) */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   APP CHROME
============================================================ */
.app-screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  overflow: hidden;
}
.app-screen.is-active { display: flex; }

.app-screen.is-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.app-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: max(var(--s-6), var(--sal));
  padding-right: max(var(--s-6), var(--sar));
}

.app-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--sat) + 10px) var(--s-4) 10px;
  min-height: calc(56px + var(--sat));
  background: transparent;
}
.app-topbar.has-divider { border-bottom: 1px solid var(--c-border-soft); background: var(--c-surface); }

.iconbtn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
  box-shadow: var(--sh-xs);
}
.iconbtn:active { transform: scale(0.94); background: var(--c-bg-muted); }
.iconbtn svg { width: 20px; height: 20px; }

.iconbtn.is-bare {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ============================================================
   SPLASH v2 — same warm hero as onboarding slide 1
============================================================ */
.splash-v2 {
  background: radial-gradient(120% 80% at 50% -10%, #FFE0D4 0%, #FFF1EC 38%, #FFFFFF 75%);
  color: var(--c-ink-900);
  align-items: center;
  justify-content: center;
  padding-left: max(24px, var(--sal));
  padding-right: max(24px, var(--sar));
}
.splash-v2 .splash-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: splashIn 700ms var(--ease-out) both;
}
.splash-v2 .splash-tile {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF7A59 0%, #FF3D7F 100%);
  box-shadow:
    0 22px 44px -10px rgba(255,61,127,0.35),
    0 8px 16px -6px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.45);
  color: #fff;
}
.splash-v2 .splash-tile img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.splash-v2 .splash-wordmark {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.18em;
  color: var(--c-ink-900);
  margin-top: 4px;
}
.splash-v2 .splash-foot {
  position: absolute;
  bottom: calc(var(--sab) + 28px);
  font-size: var(--fs-13);
  color: var(--c-ink-500);
  letter-spacing: 0.04em;
  animation: splashIn 900ms 200ms var(--ease-out) both;
}
@keyframes splashIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   ONBOARDING v2 — Apple Health / Fitness aesthetic
   Hero gradient + iOS-rounded icon tile + bold large title.
   Mobile-first, scales to tablet (centered phone column).
============================================================ */
.onb {
  background: var(--c-bg);
  color: var(--c-text);
  /* inherits position:fixed; inset:0 from .app-screen — don't override */
  overflow: hidden;
}
/* Per-slide gradient overlay sits behind the slide column. */
.onb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  transition: background var(--dur-4) var(--ease-out);
  pointer-events: none;
}

/* Decorative floating blobs (subtle motion, behind content) */
.onb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  transition: background var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out);
  will-change: transform;
}
.onb-blob.b1 { top: 6%;  left: -15%; width: 60vw; height: 60vw; max-width: 480px; max-height: 480px; animation: blobFloat 14s ease-in-out infinite; }
.onb-blob.b2 { top: 18%; right: -22%; width: 70vw; height: 70vw; max-width: 540px; max-height: 540px; animation: blobFloat 18s ease-in-out -4s infinite reverse; }
.onb-blob.b3 { top: 30%; left: 10%; width: 50vw; height: 50vw; max-width: 380px; max-height: 380px; animation: blobFloat 22s ease-in-out -8s infinite; }
@keyframes blobFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0, 28px, 0) scale(1.06); }
}

.onb-track {
  flex: 1;
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}
.onb-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Topbar (back/skip) clears ~64px below safe-area top, then breathing room */
  padding: calc(var(--sat) + 88px) max(20px, var(--sal)) 32px max(20px, var(--sar));
  opacity: 0;
  visibility: hidden;
  transition: opacity 380ms var(--ease-out);
  pointer-events: none;
  /* Short viewports (iPhone SE, landscape) scroll instead of clipping */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.onb-slide::-webkit-scrollbar { display: none; }
.onb-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hero — large iOS-style app icon tile with depth */
.onb-hero {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
}
.onb-tile {
  width: 130px;
  height: 130px;
  border-radius: 500px;        /* iOS continuous-corner-ish */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 24px 48px -12px rgba(15,23,42,0.28),
    0 8px 16px -6px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.45);
  color: #fff;
}
.onb-tile svg { width: 72px; height: 72px; }

/* External-image hero (when SLIDES[i].hero.type === 'image') */
.onb-art {
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(15,23,42,0.18));
}
.onb-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.32), rgba(255,255,255,0) 60%);
  pointer-events: none;
}

/* Decorative satellite chips around the tile (per-slide) */
.onb-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12), 0 2px 4px rgba(15,23,42,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--c-ink-800);
  white-space: nowrap;
  animation: chipFloat 6s ease-in-out infinite;
}
.onb-chip svg { width: 16px; height: 16px; }
.onb-chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.onb-chip.c1 { top: 8%; left: 0; animation-delay: -1.5s; }
.onb-chip.c2 { top: 52%; right: -4%; animation-delay: -3s; }
.onb-chip.c3 { bottom: 4%; left: 6%; animation-delay: -4.5s; }
@keyframes chipFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-8px,0); }
}

/* Text — Apple Large Title */
.onb-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-align: center;
  margin: 0 0 14px;
  color: var(--c-ink-900);
  max-width: 420px;
}
.onb-title em {
  font-style: normal;
  color: var(--c-primary);
}
.onb-body {
  font-size: clamp(0.95rem, 4vw, 1.0625rem);
  color: var(--c-ink-600);
  line-height: 1.55;
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}

/* Bottom action region. Frosted glass card. Respects iOS home indicator. */
.onb-actions {
  position: relative;
  z-index: 3;
  padding-top: 18px;
  padding-left: max(20px, var(--sal));
  padding-right: max(20px, var(--sar));
  padding-bottom: max(20px, calc(16px + var(--sab)));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 28%, rgba(255,255,255,1) 60%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.onb-dots {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.onb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(15,23,42,0.18);
  cursor: pointer;
  transition: width var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std);
}
.onb-dot.is-active {
  width: 24px;
  background: var(--c-ink-900);
  border-radius: 4px;
}
/* Top bar — Skip pinned right, respects safe area */
.onb-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--sat) + 12px) max(16px, var(--sal)) 0 max(16px, var(--sar));
  pointer-events: none;
}
.onb-topbar > * { pointer-events: auto; }
.onb-spacer { display: block; width: 40px; height: 40px; }

.onb-skip {
  background: rgba(255,255,255,0.85);
  border: none;
  color: var(--c-ink-900);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Primary forward circle button (brand navy) */
.onb-circle {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(44,56,109,0.30);
  transition: transform var(--dur-1) var(--ease-std),
              background var(--dur-2) var(--ease-std),
              box-shadow var(--dur-2) var(--ease-std);
}
.onb-circle:active { transform: scale(0.94); }
.onb-circle:hover  { background: var(--c-brand-800); }
.onb-circle:focus-visible { outline: none; box-shadow: var(--sh-focus); }

/* Secondary back as quiet text link */
.onb-text-btn {
  background: transparent;
  border: none;
  padding: 12px 4px;
  cursor: pointer;
  color: var(--c-ink-700);
  font: inherit;
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  transition: color var(--dur-1) var(--ease-std);
}
.onb-text-btn:hover { color: var(--c-ink-900); }
.onb-text-btn[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; }

/* Entrance flourish */
.onb-slide.is-active .onb-tile  { animation: heroIn 700ms var(--ease-spring) both; }
.onb-slide.is-active .onb-chip  { animation: chipIn 600ms var(--ease-out) both, chipFloat 6s ease-in-out 600ms infinite; }
.onb-slide.is-active .onb-chip.c2 { animation-delay: 90ms, 690ms; }
.onb-slide.is-active .onb-chip.c3 { animation-delay: 180ms, 780ms; }
.onb-slide.is-active .onb-title { animation: textIn 600ms 140ms var(--ease-out) both; }
.onb-slide.is-active .onb-body  { animation: textIn 600ms 220ms var(--ease-out) both; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px) scale(0.86) rotate(-3deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes textIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tablet+ → constrain to a phone-shaped column, centered */
@media (min-width: 640px) {
  .onb-track,
  .onb-actions { max-width: 480px; margin-left: auto; margin-right: auto; }
  .onb-slide { padding-top: calc(var(--sat) + 96px); }
  .onb-tile  { width: 144px; height: 144px; border-radius: 50%; }
  .onb-tile svg { width: 78px; height: 78px; }
}
@media (min-width: 1024px) {
  .onb-actions { background: transparent; }
}

/* ============================================================
   SOCIAL AUTH BUTTONS  (used on Get Started, Login, Register)
============================================================ */
.sso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  cursor: pointer;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink-900);
  transition: transform var(--dur-1) var(--ease-std),
              background var(--dur-2) var(--ease-std),
              border-color var(--dur-2) var(--ease-std);
}
.sso-btn:active { transform: scale(0.98); }
.sso-btn:hover  { background: var(--c-bg-subtle); }
.sso-btn svg    { width: 20px; height: 20px; flex-shrink: 0; }

.sso-btn.is-apple {
  background: #000;
  border-color: #000;
  color: #fff;
}
.sso-btn.is-apple:hover { background: #1a1a1a; border-color: #1a1a1a; }

.sso-btn.is-google {
  background: #fff;
  border-color: var(--c-border);
  color: var(--c-ink-900);
}

/* Apple HIG requires a text label alongside the logo (e.g. "Sign in with Apple").
   Both providers are full-width stacked so they read clearly. */
.sso-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Legacy `.sso-pill` class kept as a no-op alias so old markup still works. */
.sso-pill { font-size: var(--fs-15); padding: 12px 20px; }

/* "or continue with email" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--c-text-soft);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ============================================================
   GET STARTED v2
============================================================ */
.gs {
  background: radial-gradient(120% 80% at 50% -10%, #FFE0D4 0%, #FFF1EC 38%, #FFFFFF 75%);
  position: relative;
  overflow: hidden;
}
.gs-hero {
  flex: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* left-aligned text feels more editorial */
  justify-content: flex-end;        /* anchor to bottom of hero, near actions */
  padding: calc(var(--sat) + 64px) max(var(--s-6), var(--sal)) 24px max(var(--s-6), var(--sar));
  text-align: left;
  gap: 12px;
  box-sizing: border-box;
}

.gs-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(44,56,109,0.08);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 4px;
}

.gs-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 3rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--c-ink-900);
  max-width: 420px;
}
.gs-hero p {
  font-size: clamp(1rem, 4.2vw, 1.125rem);
  color: var(--c-ink-600);
  line-height: 1.55;
  max-width: 360px;
  margin: 0;
}
.gs-actions {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: max(var(--s-6), var(--sal));
  padding-right: max(var(--s-6), var(--sar));
  padding-top: 28px;
  padding-bottom: max(20px, calc(16px + var(--sab)));
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.gs-fine {
  text-align: center;
  font-size: var(--fs-12);
  color: var(--c-text-soft);
  padding: 6px 20px 0;
  line-height: 1.5;
}
.gs-signin-row {
  text-align: center;
  margin-top: 14px;
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}
.gs-signin-row .linklike {
  color: var(--c-primary);
  font-weight: var(--fw-semi);
  cursor: pointer;
}

/* ============================================================
   AUTH v2 (login/register/forgot)
============================================================ */
.auth-v2 {
  background: var(--c-bg);
  overflow-y: auto;
}
.auth-v2 .auth-head {
  padding: calc(var(--sat) + 8px) var(--s-4) 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-v2 .auth-body {
  padding: 8px var(--s-6) calc(40px + var(--sab));
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.auth-v2 h1.auth-h {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin: 8px 0 8px;
}
.auth-v2 .auth-sub {
  font-size: var(--fs-15);
  color: var(--c-text-muted);
  margin: 0 0 28px;
  line-height: var(--lh-loose);
}
.auth-v2 .auth-submit-row {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-v2 .auth-meta {
  text-align: center;
  margin-top: 22px;
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}
.auth-v2 .auth-meta a,
.auth-v2 .auth-meta .linklike {
  color: var(--c-primary);
  font-weight: var(--fw-semi);
  cursor: pointer;
  text-decoration: none;
}
.auth-v2 .forgot-link {
  display: inline-block;
  margin: -4px 0 14px;
  color: var(--c-primary);
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

/* ============================================================
   HOME v2  —  search + Google Maps + featured card + tab bar
============================================================ */
.home-v2 {
  flex-direction: column;
  background: var(--c-bg);
  overflow: hidden;
}

/* ─── Top bar: pill search + menu ─────────────────────── */
.home-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--sat) + 10px) max(16px, var(--sal)) 10px max(16px, var(--sar));
  pointer-events: none;
}
.home-topbar > * { pointer-events: auto; }

.home-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  height: 52px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.04);
}
.home-search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--c-ink-500);
}
.home-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-15);
  color: var(--c-ink-900);
}
.home-search input::placeholder { color: var(--c-ink-500); }
.home-search-mic {
  background: var(--c-primary);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(44,56,109,0.30);
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-2) var(--ease-std);
}
.home-search-mic:hover  { background: var(--c-brand-800); }
.home-search-mic:active { transform: scale(0.92); }
.home-search-mic.is-listening {
  background: var(--c-danger-600);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.20), 0 4px 12px rgba(220,38,38,0.30);
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220,38,38,0.20), 0 4px 12px rgba(220,38,38,0.30); }
  50%      { box-shadow: 0 0 0 10px rgba(220,38,38,0.05), 0 4px 12px rgba(220,38,38,0.30); }
}

.home-menu {
  width: 52px; height: 52px;
  background: #fff;
  color: var(--c-ink-900);
  border: none;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.04);
  transition: transform var(--dur-1) var(--ease-std);
}
.home-menu:active { transform: scale(0.94); }

/* ─── Map container ──────────────────────────────────── */
#map-container {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
}
#map { width: 100%; height: 100%; }
.map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-14);
}

/* ─── Map status (only visible on error) ──────────────── */
.map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-subtle);
  padding: 40px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-14);
  line-height: 1.5;
  z-index: 1;
}
.map-status[hidden] { display: none; }
.map-status strong { color: var(--c-ink-900); display: block; margin-bottom: 6px; }

/* ─── Bottom sheet — vertical scrollable list of resources ───
   Mobile-first: sheet occupies the lower half of the screen,
   internally scrolls. No drag handle, no visible scrollbar. */
.home-featured {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(64px + var(--sab));     /* sit on top of the tab bar */
  z-index: 4;
  height: 48vh;                        /* mobile-first default */
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 32px rgba(15,23,42,0.10), 0 -2px 6px rgba(15,23,42,0.05);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  min-height: 0;
  padding-top: 14px;
}
@media (min-width: 640px) {
  .home-featured { height: 42vh; max-width: 480px; margin: 0 auto; }
}

.rcard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px max(14px, var(--sal)) max(16px, var(--sab)) max(14px, var(--sar));
  pointer-events: auto;
}
.rcard-list::-webkit-scrollbar { display: none; }
.rcard-list .rcard {
  width: 100%;
  max-width: 100%;
}
.rcard-empty {
  margin: 8px max(14px, var(--sal));
  padding: 14px 16px;
  background: var(--c-bg-subtle);
  border-radius: 14px;
  color: var(--c-text-muted);
  font-size: var(--fs-13);
  text-align: center;
}

.rcard {
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  transition: transform var(--dur-1) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.rcard:active { transform: scale(0.99); }

.rcard-img {
  width: 72px;
  align-self: stretch;        /* match body row height */
  border-radius: 14px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--c-bg-muted);
  display: flex; align-items: center; justify-content: center;
}
.rcard-img img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder SVG: render at a small, centered, muted icon — not stretched */
.rcard-img img[src$="placeholder-resource.svg"] {
  width: 44%;
  height: 44%;
  object-fit: contain;
  opacity: 0.5;
  color: var(--c-ink-500);
}
/* Category badge in the bottom-left corner of the image, matching the
   listing card reference. */
.rcard-pin {
  position: absolute;
  left: 6px; bottom: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,0.25);
}
.rcard-pin svg { width: 16px; height: 16px; }

.rcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 3px;
}
.rcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.rcard-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chip, var(--c-primary));
  background: color-mix(in srgb, var(--chip, var(--c-primary)) 12%, transparent);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  line-height: 1.3;
}
.rcard-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.rcard-line {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11.5px;
  color: var(--c-accent-700);
  line-height: 1.25;
}
.rcard-ic {
  display: inline-flex;
  color: var(--c-accent-700);
  flex-shrink: 0;
}
.rcard-ic svg { width: 14px; height: 14px; }
.rcard-addr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--fw-medium);
}
.rcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
/* Open/Closed status pill with colored dot + next-state hint */
.rcard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-ink-700);
  min-width: 0;
}
.rcard-status strong {
  font-weight: var(--fw-bold);
}
.rcard-status.is-open strong  { color: var(--c-success-600); }
.rcard-status.is-closed strong { color: var(--c-danger-600); }
.rcard-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--c-ink-300);
}
.rcard-status.is-open  .rcard-status-dot { background: var(--c-success-600); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.rcard-status.is-closed .rcard-status-dot { background: var(--c-danger-600); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.rcard-status-next {
  color: var(--c-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rcard-dist {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  background: var(--c-brand-50);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.3;
}

/* ─── Bottom tab bar ──────────────────────────────────── */
.home-tabs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 8px max(8px, var(--sal)) calc(8px + var(--sab)) max(8px, var(--sar));
  background: #fff;
  border-top: 1px solid var(--c-border-soft);
  min-height: 64px;
}
.home-tab {
  position: relative;
  background: transparent;
  border: none;
  padding: 8px 4px 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--c-ink-400);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.home-tab:hover  { color: var(--c-ink-700); }
.home-tab:active { transform: scale(0.94); }
.home-tab.is-active { color: var(--c-primary); }

.home-tab-ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.home-tab-label {
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.home-tab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-danger-600);
  border: 2px solid #fff;
}

/* Centered flagship button (AI Navigator) — sits raised above the bar. */
.home-tab-fab {
  width: 56px;
  height: 56px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(44,56,109,0.35);
  align-self: center;
  justify-self: center;
  margin: -22px auto 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-tab-fab > svg { display: block; }
.home-tab-fab:hover { background: var(--c-brand-800); color: #fff; }

/* ============================================================
   FILTER SHEET (categories)
============================================================ */
.filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.filter-sheet[hidden] { display: none; }
.filter-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.45);
  animation: fsFade 200ms var(--ease-out);
}
.filter-sheet-card {
  position: relative;
  width: 100%;
  max-width: var(--container);
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 8px max(20px, var(--sal)) calc(20px + var(--sab)) max(20px, var(--sar));
  box-shadow: 0 -12px 40px rgba(15,23,42,0.18);
  animation: fsSlide 280ms var(--ease-out);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.filter-sheet-grab {
  width: 40px;
  height: 4px;
  background: var(--c-ink-200);
  border-radius: 2px;
  margin: 6px auto 12px;
}
.filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.filter-sheet-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin: 0;
}
.filter-sheet-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--c-bg-muted);
  color: var(--c-ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.filter-sheet-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 12px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.filter-row:hover { border-color: var(--c-primary); background: var(--c-brand-50); }
.filter-row.is-checked {
  border-color: var(--c-primary);
  background: var(--c-brand-50);
}
.filter-row-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.filter-row-ic svg { width: 18px; height: 18px; }
.filter-row-name {
  flex: 1;
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  color: var(--c-ink-900);
}
.filter-row-count {
  font-size: var(--fs-13);
  color: var(--c-text-muted);
}
.filter-row-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all var(--dur-1) var(--ease-std);
}
.filter-row.is-checked .filter-row-check {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.filter-sheet-foot {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-soft);
}

@keyframes fsFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fsSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================================
   SETTINGS SCREEN
============================================================ */
.settings-v2 {
  background: var(--c-bg-subtle);
  color: var(--c-text);
}
.settings-v2 .auth-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--sat) + 12px) max(16px, var(--sal)) 4px max(16px, var(--sar));
  box-sizing: border-box;
}
.settings-title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin: 0;
}
.settings-body {
  width: 100%;
  max-width: 640px;          /* generous cap for tablet/desktop, fluid below */
  margin: 0 auto;
  padding: 12px max(16px, var(--sal)) calc(40px + var(--sab)) max(16px, var(--sar));
  box-sizing: border-box;
}
.settings-userhead {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 22px;
  box-shadow: var(--sh-xs);
}
.settings-userhead .user-profile-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  font-family: var(--font-display);
  margin: 0;
  flex-shrink: 0;
}
.settings-userinfo h2 {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  margin: 0 0 2px;
  color: var(--c-ink-900);
}
.settings-userinfo p { margin: 0; }

.settings-group { margin-bottom: 22px; }
.settings-group-title {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 14px 8px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--c-border-soft);
  padding: 14px 16px;
  font: inherit;
  font-size: var(--fs-15);
  color: var(--c-ink-900);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-1) var(--ease-std);
}
.settings-row:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.settings-row:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); border-bottom: none; }
.settings-row:only-child  { border-radius: var(--r-lg); border-bottom: none; }
.settings-row:hover  { background: var(--c-bg-subtle); }
.settings-row:active { background: var(--c-bg-muted); }
.settings-row-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--c-brand-50);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-row-ic svg { width: 18px; height: 18px; }
.settings-row-label { flex: 1; font-weight: var(--fw-medium); }
.settings-row-chev {
  display: inline-flex;
  color: var(--c-ink-300);
}
.settings-row-chev svg { width: 16px; height: 16px; }

.settings-logout {
  margin-top: 12px;
  width: 100%;
  background: #fff;
  color: var(--c-danger-600);
  border: 1px solid var(--c-danger-100);
  border-radius: var(--r-lg);
  font: inherit;
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  padding: 14px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std);
}
.settings-logout:hover { background: var(--c-danger-100); }

/* ============================================================
   RESOURCE DETAIL — refined iOS production quality
============================================================ */
.rdetail {
  background: var(--c-bg-subtle);
  color: var(--c-text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rdetail-back,
.rdetail-action {
  position: fixed;
  top: calc(var(--sat) + 12px);
  z-index: 6;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,23,42,0.18), 0 1px 2px rgba(15,23,42,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.rdetail-back { left: max(16px, var(--sal)); }
.rdetail-action { right: max(16px, var(--sar)); }
.rdetail-back:active,
.rdetail-action:active { transform: scale(0.92); }
.rdetail-action.is-saved { background: var(--c-primary); color: #fff; }

/* ── Hero image ── */
.rdetail-hero {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--c-bg-muted);
}
.rdetail-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder gets the same small-icon treatment as the cards */
.rdetail-hero img[src$="placeholder-resource.svg"] {
  width: 33%;
  height: 33%;
  object-fit: contain;
  opacity: 0.45;
  margin: auto;
  position: absolute;
  inset: 0;
}
.rdetail-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.20) 0%, rgba(15,23,42,0) 40%, rgba(15,23,42,0) 80%, rgba(15,23,42,0.04) 100%);
  pointer-events: none;
}

/* ── Content ── */
.rdetail-body {
  margin-top: -22px;
  background: var(--c-bg-subtle);
  border-radius: 22px 22px 0 0;
  padding: 18px max(18px, var(--sal)) calc(36px + var(--sab)) max(18px, var(--sar));
  position: relative;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.rdetail-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-brand-50);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.rdetail-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 1.875rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--c-ink-900);
}

/* status + distance in one quiet row */
.rdetail-substats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: var(--fs-13);
}
.rdetail-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-ink-700);
}
.rdetail-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--c-ink-300);
}
.rdetail-status.is-open   .rdetail-status-dot   { background: var(--c-success-600); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.rdetail-status.is-closed .rdetail-status-dot   { background: var(--c-danger-600);  box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.rdetail-status.is-open   .rdetail-status-title { color: var(--c-success-600); font-weight: var(--fw-bold); }
.rdetail-status.is-closed .rdetail-status-title { color: var(--c-danger-600);  font-weight: var(--fw-bold); }
.rdetail-status-next { color: var(--c-text-muted); margin-left: 2px; }
.rdetail-substats .rdetail-dist {
  margin-left: auto;
  font-weight: var(--fw-semi);
  color: var(--c-ink-700);
}

/* Primary CTA */
.rdetail-cta {
  margin-bottom: 12px;
  text-decoration: none;
}
.rdetail-cta svg { stroke: currentColor; }

/* Secondary 4-up icon strip */
.rdetail-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 22px;
}
.rdetail-s {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  color: var(--c-ink-900);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.rdetail-s:active { transform: scale(0.97); background: var(--c-bg-muted); }
.rdetail-s[hidden] { display: none; }
.rdetail-s-ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* iOS-style grouped list */
.rdetail-group { margin-bottom: 18px; }
.rdetail-group-title {
  margin: 0 4px 8px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.rdetail-rows {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--c-border-soft);
  overflow: hidden;
}
.rdetail-row {
  display: grid;
  grid-template-columns: 28px 92px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: var(--fs-14);
  color: var(--c-ink-900);
  border-bottom: 1px solid var(--c-border-soft);
}
.rdetail-row:last-child { border-bottom: none; }
.rdetail-row[hidden] { display: none; }
.rdetail-row-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--c-bg-muted);
  color: var(--c-ink-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rdetail-row-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  text-transform: uppercase;
}
.rdetail-row-value {
  color: var(--c-ink-900);
  font-weight: var(--fw-medium);
  text-align: right;
  word-break: break-word;
}

/* Verification footer card */
.rdetail-verifycard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-success-600) 10%, white), white);
  border: 1px solid color-mix(in srgb, var(--c-success-600) 22%, transparent);
  border-radius: 14px;
}
.rdetail-verifycard-tick {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-success-600);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rdetail-verifycard strong {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
}
.rdetail-verifycard p {
  margin: 2px 0 0;
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

/* ============================================================
   SCREEN ENTER ANIMATIONS  (iOS production-style)
============================================================ */
/* Default: subtle fade-up for every app screen the moment it becomes active */
.app-screen.is-active {
  animation: screenFadeUp 240ms var(--ease-out) both;
}

/* Resource detail = slide-up modal sheet (iOS pattern) */
#resource-detail-screen.is-active {
  animation: sheetSlideUp 360ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* Settings / Saved / sub-screens = horizontal slide from right (iOS push) */
#settings-screen.is-active,
#saved-screen.is-active {
  animation: screenSlideRight 280ms var(--ease-out) both;
}

/* Onboarding / Get Started / Auth / Splash skip the heavier animation
   (they already have their own choreography). */
#splash-screen.is-active,
#onboarding-screen.is-active,
#get-started-screen.is-active,
#register-screen.is-active,
#login-screen.is-active,
#forgot-password-screen.is-active,
#reset-password-screen.is-active {
  animation: none;
}

@keyframes screenFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sheetSlideUp {
  from { opacity: 0.85; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes screenSlideRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-screen.is-active,
  #resource-detail-screen.is-active,
  #settings-screen.is-active,
  #saved-screen.is-active { animation: none !important; }
}

/* ============================================================
   NAVIGATION SCREEN — in-app turn-by-turn
============================================================ */
/* Hard override of legacy V1 #navigation-screen rules in main.css that
   used top:100% + .active. V2 uses .is-active and standard inset:0.
   !important on every property — legacy rules have the same single-ID
   specificity and load later, so without !important they win. */
#navigation-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--c-bg-subtle) !important;
  transition: none !important;
  border-radius: 0 !important;
  display: none !important;
}
#navigation-screen.is-active {
  display: flex !important;
  flex-direction: column !important;
}

.nav-v2 {
  background: var(--c-bg-subtle);
  color: var(--c-ink-900);
}

.nav-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--sat) + 10px) max(14px, var(--sal)) 12px max(14px, var(--sar));
  background: #fff;
  z-index: 6;
  border-bottom: 1px solid var(--c-border-soft);
  flex-shrink: 0;
}
.nav-close {
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--c-bg-muted);
  color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-1) var(--ease-std);
}
.nav-close:active { transform: scale(0.94); }
.nav-top-text { flex: 1; min-width: 0; }
.nav-top-label {
  font-size: var(--fs-12);
  color: var(--c-text-muted);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
}
.nav-top-title {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.nav-mode-toggle {
  display: flex;
  background: var(--c-bg-muted);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.nav-mode {
  width: 36px; height: 32px;
  border: none;
  background: transparent;
  color: var(--c-ink-500);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
.nav-mode:hover { color: var(--c-ink-800); }
.nav-mode.is-active {
  background: #fff;
  color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}

.nav-map-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.nav-map { width: 100%; height: 100%; }
.nav-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-subtle);
  color: var(--c-text-muted);
  padding: 30px;
  text-align: center;
  font-size: var(--fs-14);
  z-index: 2;
}
.nav-status[hidden] { display: none; }
.nav-status strong { display: block; color: var(--c-ink-900); margin-bottom: 6px; }

/* ── Bottom sheet with summary + steps ── */
.nav-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 28px rgba(15,23,42,0.08);
  padding: 14px max(16px, var(--sal)) calc(20px + var(--sab)) max(16px, var(--sar));
  max-height: 46vh;
  display: flex;
  flex-direction: column;
}

.nav-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--c-border-soft);
}
.nav-summary-eta { flex: 0 0 auto; }
.nav-summary-time {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-black);
  color: var(--c-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav-summary-block { flex: 1; min-width: 0; }
.nav-summary-num {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: 1;
}
.nav-summary-label {
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-top: 3px;
}
.nav-summary-sep {
  width: 1px;
  align-self: stretch;
  background: var(--c-border-soft);
}

.nav-steps {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
}
.nav-steps::-webkit-scrollbar { display: none; }
.nav-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--c-border-soft);
}
.nav-step:last-child { border-bottom: none; }
.nav-step-ic {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-step-body { flex: 1; min-width: 0; }
.nav-step-text {
  font-size: var(--fs-14);
  color: var(--c-ink-900);
  line-height: 1.35;
}
.nav-step-meta {
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

/* ============================================================
   STREET VIEW SCREEN
============================================================ */
.sv-v2 {
  background: #000;
  color: #fff;
  position: fixed;
  inset: 0;
}
.sv-back {
  position: fixed;
  top: calc(var(--sat) + 12px);
  left: max(16px, var(--sal));
  z-index: 6;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
}
.sv-title {
  position: fixed;
  top: calc(var(--sat) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-panel { width: 100%; height: 100%; }

/* Lightweight fade for nav (sheet-slide caused stuck-state on some devices) */
#navigation-screen.is-active { animation: screenFadeUp 220ms var(--ease-out) both; }
#streetview-screen.is-active { animation: screenFadeUp 220ms var(--ease-out) both; }

/* ============================================================
   NAVIGATION v3 — premium full-screen, Apple/Google/Waze style
============================================================ */
.navx {
  background: #e8eaed;
  color: var(--c-ink-900);
  overflow: hidden;
}

/* Override legacy main.css that hijacks #navigation-screen */
#navigation-screen.navx {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #e8eaed !important;
  transition: none !important;
  border-radius: 0 !important;
  display: none !important;
}
#navigation-screen.navx.is-active {
  display: block !important;
}

/* Full-bleed map */
.navx-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Status overlay (loading / error) */
.navx-status {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  background: rgba(255,255,255,0.96);
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.18);
  text-align: center;
  font-size: var(--fs-14);
  max-width: 280px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navx-status[hidden] { display: none; }
.navx-status strong { display: block; margin-bottom: 4px; color: var(--c-ink-900); }

/* ── Back chip (preview state only) ── */
.navx-back {
  position: absolute;
  top: calc(var(--sat) + 14px);
  left: max(14px, var(--sal));
  z-index: 20;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,23,42,0.18), 0 1px 2px rgba(15,23,42,0.08);
  transition: transform var(--dur-1) var(--ease-std);
}
.navx-back:active { transform: scale(0.92); }
.navx.is-navigating .navx-back { display: none; }

/* ── Top maneuver card (navigating state) ── */
.navx-maneuver {
  position: absolute;
  top: calc(var(--sat) + 12px);
  left: max(12px, var(--sal));
  right: max(12px, var(--sar));
  z-index: 20;
  background: var(--c-primary);
  color: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(44,56,109,0.32), 0 2px 8px rgba(15,23,42,0.10);
  max-width: 480px;
  margin: 0 auto;
}
.navx-maneuver[hidden] { display: none; }
.navx-maneuver-ic {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.navx-maneuver-body { flex: 1; min-width: 0; }
.navx-maneuver-distance {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.navx-maneuver-text {
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navx-maneuver-next {
  font-size: var(--fs-12);
  opacity: 0.75;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Right-rail floating action buttons ── */
.navx-fabs {
  position: absolute;
  z-index: 18;
  right: max(12px, var(--sar));
  top: calc(var(--sat) + 70px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.navx.is-navigating .navx-fabs {
  top: calc(var(--sat) + 110px);
}
.navx-fab {
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink-800);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,23,42,0.16), 0 1px 2px rgba(15,23,42,0.08);
  transition: transform var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.navx-fab:active { transform: scale(0.92); }
.navx-fab.is-active { color: var(--c-primary); }
.navx-fab.is-on { background: var(--c-primary); color: #fff; }

/* ── Live speed chip (navigating state) ── */
.navx-speed {
  position: absolute;
  left: max(14px, var(--sal));
  bottom: calc(var(--sab) + 200px);
  z-index: 18;
  background: #fff;
  border-radius: 18px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 14px rgba(15,23,42,0.18);
  min-width: 64px;
}
.navx-speed[hidden] { display: none; }
.navx-speed-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-ink-900);
}
.navx-speed-unit {
  font-size: 10px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  margin-top: 3px;
}

/* ── Bottom sheet ── */
.navx-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 19;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 36px rgba(15,23,42,0.12), 0 -1px 4px rgba(15,23,42,0.04);
  padding: 8px max(18px, var(--sal)) calc(20px + var(--sab)) max(18px, var(--sar));
  max-width: 540px;
  margin: 0 auto;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.navx-sheet-grab {
  width: 40px;
  height: 4px;
  background: var(--c-ink-200);
  border-radius: 2px;
  margin: 6px auto 12px;
  cursor: grab;
}

/* PREVIEW STATE inside sheet */
.navx-preview { display: block; }
.navx.is-navigating .navx-preview { display: none; }

.navx-dest-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.navx-dest-pin {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-brand-50);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.navx-dest-info { flex: 1; min-width: 0; }
.navx-dest-name {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navx-dest-addr {
  font-size: var(--fs-13);
  color: var(--c-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mode pills with per-mode time */
.navx-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--c-bg-muted);
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.navx-mode {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--c-ink-500);
  cursor: pointer;
  font: inherit;
  transition: background var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
.navx-mode.is-active {
  background: #fff;
  color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.navx-mode-time {
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}

/* Trip summary */
.navx-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  margin-bottom: 14px;
}
.navx-stat { flex: 1; text-align: center; }
.navx-stat-val {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: 1.1;
}
.navx-stat-lbl {
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-top: 4px;
}
.navx-stat-sep {
  width: 1px;
  align-self: stretch;
  background: var(--c-border-soft);
  margin: 0 8px;
}

/* Start nav button (full pill) */
.navx-start {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 17px 22px;
  font: inherit;
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(44,56,109,0.32);
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-2) var(--ease-std);
  margin-bottom: 14px;
}
.navx-start:active { transform: scale(0.98); background: var(--c-brand-800); }

/* Quick action row — pill buttons */
.navx-quick-row {
  display: flex;
  gap: 10px;
}
.navx-quick {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  color: var(--c-ink-900);
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std);
}
.navx-quick:hover  { background: var(--c-bg-subtle); border-color: var(--c-ink-300); }
.navx-quick:active { transform: scale(0.97); }
.navx-quick svg    { color: var(--c-ink-700); width: 16px; height: 16px; }

/* NAVIGATING STATE inside sheet */
.navx-nav { display: none; }
.navx.is-navigating .navx-nav { display: block; }

.navx-nav-stats {
  display: flex;
  align-items: center;
  padding: 8px 4px 16px;
}
.navx-nav-stat { flex: 1; text-align: center; }
.navx-nav-val {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: 1.1;
}
.navx-nav-val.navx-nav-val-primary {
  font-size: 26px;
  color: var(--c-primary);
  letter-spacing: -0.02em;
}
.navx-nav-lbl {
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-top: 4px;
}

.navx-nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.navx-nav-pause,
.navx-nav-end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 15px 20px;
  font: inherit;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-2) var(--ease-std);
}
.navx-nav-pause {
  background: var(--c-bg-muted);
  color: var(--c-ink-900);
}
.navx-nav-pause:active { transform: scale(0.98); background: var(--c-ink-200); }
.navx-nav-end {
  background: var(--c-danger-600);
  color: #fff;
  box-shadow: 0 6px 18px rgba(220,38,38,0.30);
}
.navx-nav-end:active { transform: scale(0.98); background: #b91c1c; }

/* ── Custom marker animations ── */
@keyframes navxPulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}
.navx-user-marker {
  position: relative;
  width: 22px; height: 22px;
}
.navx-user-marker .core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #1e7eff;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(30,126,255,0.55);
}
.navx-user-marker .pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(30,126,255,0.45);
  animation: navxPulse 1.8s ease-out infinite;
}
.navx-user-marker .heading {
  position: absolute; left: 50%; top: -7px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #1e7eff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  opacity: 0;
}
.navx-user-marker.has-heading .heading { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   PHASE 3 — Crisis / Availability / Verification / Feedback
════════════════════════════════════════════════════════════ */

/* SOS button on home topbar */
.home-sos {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: #dc2626;
  border: 1.5px solid #fecaca;
  border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(220,38,38,0.10);
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.home-sos:hover  { background: #fef2f2; }
.home-sos:active { transform: scale(0.94); }

/* Generic Phase-3 pills */
.cmty-pill,
.cmty-pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 18px;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std);
  background: #fff;
  color: var(--c-ink-900);
  border: 1.5px solid var(--c-border);
}
.cmty-pill:hover         { background: var(--c-bg-subtle); border-color: var(--c-ink-300); }
.cmty-pill:active        { transform: scale(0.97); }
.cmty-pill.is-primary    { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.cmty-pill.is-primary:hover  { background: var(--c-brand-800); }
.cmty-pill.is-warn       { color: #b91c1c; border-color: #fecaca; }
.cmty-pill.is-warn:hover { background: #fef2f2; }
.cmty-pill-ghost         { background: transparent; border-color: transparent; color: var(--c-primary); padding: 6px 0; }
.cmty-pill-ghost:hover   { color: var(--c-brand-800); }

/* ── Availability section on detail ── */
.cmty-avail { padding: 14px 16px; background: #fff; border-radius: 14px; border: 1px solid var(--c-border-soft); }
.cmty-avail-row { display: flex; align-items: center; gap: 10px; }
.cmty-avail-dot { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 4px rgba(0,0,0,0.04); }
.cmty-avail-label { font-weight: var(--fw-bold); color: var(--c-ink-900); }
.cmty-avail-cap { margin-left: auto; font-size: var(--fs-13); color: var(--c-text-muted); }
.cmty-avail-note { margin: 8px 0 0; font-size: var(--fs-14); color: var(--c-ink-700); }
.cmty-avail-updated { margin: 6px 0 10px; font-size: 12px; color: var(--c-text-muted); }

/* ── Verification card ── */
.cmty-verify { padding: 14px 16px; background: #fff; border-radius: 14px; border: 1px solid var(--c-border-soft); }
.cmty-verify-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.cmty-verify-tick {
  width: 36px; height: 36px; border-radius: 50%;
  background: #ecfdf5; color: #16a34a;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cmty-verify-head strong { font-size: var(--fs-15); display: block; color: var(--c-ink-900); }
.cmty-verify-head p { font-size: 12.5px; color: var(--c-text-muted); margin: 2px 0 0; }
.cmty-verify-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Feedback ── */
.cmty-feedback { padding: 14px 16px; background: #fff; border-radius: 14px; border: 1px solid var(--c-border-soft); }
.cmty-rating-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cmty-rating-num   { font-family: var(--font-display); font-size: 28px; font-weight: var(--fw-bold); color: var(--c-ink-900); }
.cmty-rating-stars { color: #f59e0b; letter-spacing: 2px; font-size: 16px; }
.cmty-rating-count { margin-left: auto; font-size: 12.5px; color: var(--c-text-muted); }
.cmty-reviews { list-style: none; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px solid var(--c-border-soft); }
.cmty-review { padding: 12px 0; border-bottom: 1px solid var(--c-border-soft); }
.cmty-review:last-child { border-bottom: 0; }
.cmty-review header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cmty-review-stars { color: #f59e0b; letter-spacing: 1px; font-size: 13px; }
.cmty-review header strong { font-size: var(--fs-13); color: var(--c-ink-900); }
.cmty-review header time   { font-size: 11.5px; color: var(--c-text-muted); margin-left: auto; }
.cmty-review p { margin: 4px 0 8px; font-size: var(--fs-14); color: var(--c-ink-800); line-height: 1.45; }
.cmty-review-helpful {
  border: none; background: transparent; padding: 4px 0;
  font: inherit; font-size: 12.5px; color: var(--c-primary); cursor: pointer; font-weight: var(--fw-semi);
}
.cmty-review-helpful:disabled { color: var(--c-text-muted); cursor: default; }

/* ── Sheets (availability + review) ── */
.cmty-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.cmty-sheet[hidden] { display: none; }
.cmty-sheet-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; transition: opacity var(--dur-2) var(--ease-std); }
.cmty-sheet.is-open .cmty-sheet-backdrop { opacity: 1; }
.cmty-sheet-card {
  position: relative;
  width: 100%; max-width: 480px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 12px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
}
.cmty-sheet.is-open .cmty-sheet-card { transform: translateY(0); }
.cmty-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--c-ink-300); margin: 4px auto 14px; }
.cmty-sheet-card h2 { font-family: var(--font-display); font-size: var(--fs-19); margin: 0 0 4px; color: var(--c-ink-900); }
.cmty-sheet-sub    { font-size: var(--fs-13); color: var(--c-text-muted); margin: 0 0 14px; }
.cmty-sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.cmty-sheet-actions .cmty-pill { flex: 1; }

.cmty-status-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cmty-status {
  flex: 1 1 calc(50% - 4px);
  padding: 12px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-border);
  background: #fff;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--c-ink-800);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std);
}
.cmty-status:hover     { background: var(--c-bg-subtle); }
.cmty-status.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.cmty-field { display: block; margin-top: 4px; }
.cmty-field span { display: block; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--c-ink-700); margin-bottom: 6px; }
.cmty-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  font: inherit; font-size: var(--fs-14);
  color: var(--c-ink-900);
  background: var(--c-bg-subtle);
  resize: vertical;
  min-height: 60px;
}
.cmty-field textarea:focus { outline: none; border-color: var(--c-primary); background: #fff; }

.cmty-stars-input { display: flex; gap: 6px; justify-content: center; margin: 8px 0 16px; }
.cmty-stars-input button {
  width: 44px; height: 44px;
  border: none; background: transparent;
  font-size: 32px; line-height: 1;
  color: #e5e7eb; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
.cmty-stars-input button.is-active { color: #f59e0b; }
.cmty-stars-input button:active    { transform: scale(0.9); }

/* ── Crisis screen ── */
#crisis-screen.crisis { background: #fafafa; }
.crisis-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 8px;
  background: #fff; border-bottom: 1px solid var(--c-border-soft);
  position: sticky; top: 0; z-index: 2;
}
.crisis-back {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--c-bg-subtle); color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.crisis-head h1 { font-family: var(--font-display); font-size: var(--fs-19); margin: 0; color: var(--c-ink-900); }

.crisis-body { padding: 16px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.crisis-911 {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: #dc2626; color: #fff;
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(220,38,38,0.32);
  margin-bottom: 16px;
}
.crisis-911-ic {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.crisis-911-text strong { display: block; font-size: var(--fs-17); font-family: var(--font-display); font-weight: var(--fw-bold); }
.crisis-911-text small  { font-size: 12.5px; opacity: 0.92; }
.crisis-911-num { margin-left: auto; font-family: var(--font-display); font-size: 28px; font-weight: var(--fw-bold); letter-spacing: -0.02em; }

.crisis-lede { font-size: var(--fs-14); color: var(--c-text-muted); margin: 0 4px 14px; line-height: 1.45; }

.crisis-list { display: flex; flex-direction: column; gap: 10px; }
.crisis-row {
  background: #fff; border: 1px solid var(--c-border-soft);
  border-radius: 16px; padding: 14px 16px;
}
.crisis-row header strong { font-size: var(--fs-15); color: var(--c-ink-900); }
.crisis-row header small  { display: block; font-size: 12.5px; color: var(--c-text-muted); margin-top: 2px; }
.crisis-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.crisis-row-call,
.crisis-row-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px;
  text-decoration: none; font-size: var(--fs-13); font-weight: var(--fw-semi);
}
.crisis-row-call { background: var(--c-primary); color: #fff; }
.crisis-row-link { background: var(--c-bg-subtle); color: var(--c-ink-900); border: 1px solid var(--c-border); }
.crisis-row-sms  { font-size: 12.5px; color: var(--c-text-muted); padding: 8px 0; }

.crisis-foot { margin-top: 24px; }
.crisis-foot h3 { font-family: var(--font-display); font-size: var(--fs-15); color: var(--c-ink-900); margin: 0 4px 10px; }
.crisis-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.crisis-quick .cmty-pill { flex: 0 0 auto; }

.cmty-loading, .cmty-empty { padding: 24px; text-align: center; color: var(--c-text-muted); font-size: var(--fs-14); }

/* ── Toast ── */
.cmty-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px);
  background: var(--c-ink-900); color: #fff;
  padding: 12px 18px; border-radius: 999px;
  font-size: var(--fs-13); font-weight: var(--fw-semi);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);
  z-index: 300; max-width: 80%;
}
.cmty-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ════════════════════════════════════════════════════════════
   PHASE 4 — AI Navigator (chat)
════════════════════════════════════════════════════════════ */
#navigator-screen.navai {
  display: none;
  position: fixed; inset: 0;
  flex-direction: column;
  background: #fafafa;
}
#navigator-screen.navai.is-active { display: flex; }

.navai-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--c-border-soft);
}
.navai-back, .navai-clear {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--c-bg-subtle); color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.navai-back:hover, .navai-clear:hover { background: var(--c-ink-200); }
.navai-back:active, .navai-clear:active { transform: scale(0.94); }
.navai-title { flex: 1; line-height: 1.15; }
.navai-title strong { display: block; font-family: var(--font-display); font-size: var(--fs-17); color: var(--c-ink-900); font-weight: var(--fw-bold); }
.navai-title small  { display: block; font-size: 12px; color: var(--c-text-muted); }

.navai-thread {
  flex: 1; overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}

/* Welcome card */
.navai-welcome {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 20px;
  padding: 22px 18px;
  text-align: center;
  margin: 6px 4px 12px;
}
.navai-welcome-ic {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(44,56,109,0.08);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.navai-welcome h2 {
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.navai-welcome p { font-size: var(--fs-14); color: var(--c-text-muted); margin: 0 0 16px; line-height: 1.5; }
.navai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navai-chip {
  border: 1.5px solid var(--c-border);
  background: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit; font-size: 13px; font-weight: var(--fw-semi);
  color: var(--c-ink-800);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.navai-chip:hover  { background: var(--c-bg-subtle); border-color: var(--c-ink-300); }
.navai-chip:active { transform: scale(0.97); }

/* Messages */
.navai-msg { display: flex; }
.navai-msg.is-user      { justify-content: flex-end; }
.navai-msg.is-assistant { justify-content: flex-start; }
.navai-bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: var(--fs-14);
  line-height: 1.5;
  word-wrap: break-word;
}
.navai-msg.is-user .navai-bubble {
  background: var(--c-primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.navai-msg.is-assistant .navai-bubble {
  background: #fff;
  color: var(--c-ink-900);
  border: 1px solid var(--c-border-soft);
  border-bottom-left-radius: 6px;
}
.navai-bubble p { margin: 0 0 8px; }
.navai-bubble p:last-child { margin: 0; }

/* Typing indicator */
.navai-typing .navai-bubble { display: inline-flex; gap: 4px; padding: 14px 16px; }
.navai-typing .navai-bubble span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-ink-400);
  animation: navaiDot 1s infinite;
}
.navai-typing .navai-bubble span:nth-child(2) { animation-delay: 0.15s; }
.navai-typing .navai-bubble span:nth-child(3) { animation-delay: 0.30s; }
@keyframes navaiDot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* Recommendation cards */
.navai-recs {
  display: flex; flex-direction: column; gap: 8px;
  margin: 4px 0 8px;
  padding-left: 4px;
}
.navai-rec {
  text-align: left;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.navai-rec:hover  { border-color: var(--c-ink-300); }
.navai-rec:active { transform: scale(0.99); }
.navai-rec-cat {
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-primary);
}
.navai-rec strong  { font-size: var(--fs-14); color: var(--c-ink-900); font-weight: var(--fw-bold); }
.navai-rec small   { font-size: 12.5px; color: var(--c-text-muted); }
.navai-rec-meta    { display: flex; gap: 8px; margin-top: 4px; align-items: center; }
.navai-rec-status  { font-size: 11.5px; font-weight: var(--fw-semi); color: var(--c-text-muted); }
.navai-rec-status.is-open { color: #16a34a; }
.navai-rec-dist    { font-size: 11.5px; color: var(--c-text-muted); margin-left: auto; }
.navai-empty       { padding: 8px; color: var(--c-text-muted); font-size: 13px; }

/* Composer */
.navai-composer {
  display: flex; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--c-border-soft);
}
#navai-input {
  flex: 1;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg-subtle);
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit; font-size: var(--fs-15);
  color: var(--c-ink-900);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
#navai-input:focus { border-color: var(--c-primary); background: #fff; }
#navai-send {
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(44,56,109,0.28);
  transition: transform var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
#navai-send:hover  { background: var(--c-brand-800); }
#navai-send:active { transform: scale(0.94); }

/* ════════════════════════════════════════════════════════════
   DARK MODE — component-level overrides
   (Tokens flip in body.dark-mode, but components that hard-code
    #fff / #fafafa need explicit dark-mode rules.)
════════════════════════════════════════════════════════════ */
body.dark-mode {
  background: var(--c-bg);
  color: var(--c-text);
}

/* Home top-bar */
body.dark-mode .home-topbar     { background: var(--c-bg); }
body.dark-mode .home-search     { background: var(--c-surface); border-color: var(--c-border); }
body.dark-mode .home-search input { color: var(--c-text); }
body.dark-mode .home-search input::placeholder { color: var(--c-text-muted); }
body.dark-mode .home-search-icon,
body.dark-mode .home-search-mic { color: var(--c-text-muted); }
body.dark-mode .home-menu,
body.dark-mode .home-sos        { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }

/* Filter sheet */
body.dark-mode .filter-sheet-card { background: var(--c-surface); color: var(--c-text); }

/* Bottom tab bar */
body.dark-mode .home-tabs       { background: var(--c-surface); border-top: 1px solid var(--c-border); }
body.dark-mode .home-tab        { color: var(--c-text-muted); }
body.dark-mode .home-tab.is-active { color: var(--c-text); }

/* Resource cards / list */
body.dark-mode .home-featured,
body.dark-mode .rcard,
body.dark-mode .rcard-list      { background: var(--c-surface); color: var(--c-text); }
body.dark-mode .rcard           { border-color: var(--c-border-soft); }
body.dark-mode .rcard small,
body.dark-mode .rcard .meta     { color: var(--c-text-muted); }

/* Resource detail */
body.dark-mode .rdetail,
body.dark-mode #resource-detail-screen { background: var(--c-bg); color: var(--c-text); }
body.dark-mode .rdetail-body    { background: var(--c-bg); }
body.dark-mode .rdetail-back,
body.dark-mode .rdetail-action  { background: var(--c-surface); color: var(--c-text); }
body.dark-mode .rdetail-group   { color: var(--c-text); }
body.dark-mode .rdetail-rows,
body.dark-mode .rdetail-row,
body.dark-mode .rdetail-strip,
body.dark-mode .rdetail-s       { background: var(--c-surface); border-color: var(--c-border-soft); color: var(--c-text); }
body.dark-mode .rdetail-row-label { color: var(--c-text-muted); }

/* Settings */
body.dark-mode #settings-screen,
body.dark-mode #saved-screen,
body.dark-mode .settings-v2,
body.dark-mode .settings-body { background: var(--c-bg); color: var(--c-text); }
body.dark-mode .settings-row,
body.dark-mode .settings-group  { background: var(--c-surface); border-color: var(--c-border-soft); color: var(--c-text); }
body.dark-mode .settings-row-label { color: var(--c-text); }
body.dark-mode .settings-group-title { color: var(--c-text-muted); }
body.dark-mode .settings-title  { color: var(--c-text); }

/* Phase 3 — community */
body.dark-mode .cmty-avail,
body.dark-mode .cmty-verify,
body.dark-mode .cmty-feedback   { background: var(--c-surface); border-color: var(--c-border-soft); color: var(--c-text); }
body.dark-mode .cmty-pill       { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .cmty-pill:hover { background: var(--c-bg-muted); }
body.dark-mode .cmty-sheet-card { background: var(--c-surface); color: var(--c-text); }
body.dark-mode .cmty-status     { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .cmty-field textarea { background: var(--c-bg-muted); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .cmty-field textarea:focus { background: var(--c-surface); }
body.dark-mode .cmty-review     { border-bottom-color: var(--c-border-soft); }
body.dark-mode .cmty-review p   { color: var(--c-text); }
body.dark-mode .cmty-toast      { background: var(--c-surface); color: var(--c-text); }

/* Crisis */
body.dark-mode #crisis-screen.crisis { background: var(--c-bg); }
body.dark-mode .crisis-head      { background: var(--c-surface); border-bottom-color: var(--c-border); }
body.dark-mode .crisis-head h1   { color: var(--c-text); }
body.dark-mode .crisis-back      { background: var(--c-bg-muted); color: var(--c-text); }
body.dark-mode .crisis-row       { background: var(--c-surface); border-color: var(--c-border-soft); }
body.dark-mode .crisis-row header strong { color: var(--c-text); }
body.dark-mode .crisis-row-link  { background: var(--c-bg-muted); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .crisis-lede,
body.dark-mode .crisis-row header small { color: var(--c-text-muted); }
body.dark-mode .crisis-foot h3   { color: var(--c-text); }

/* Phase 4 — AI Navigator */
body.dark-mode #navigator-screen.navai { background: var(--c-bg); }
body.dark-mode .navai-head        { background: var(--c-surface); border-bottom-color: var(--c-border); }
body.dark-mode .navai-back,
body.dark-mode .navai-clear       { background: var(--c-bg-muted); color: var(--c-text); }
body.dark-mode .navai-title strong { color: var(--c-text); }
body.dark-mode .navai-welcome     { background: var(--c-surface); border-color: var(--c-border-soft); }
body.dark-mode .navai-welcome h2  { color: var(--c-text); }
body.dark-mode .navai-welcome p   { color: var(--c-text-muted); }
body.dark-mode .navai-chip        { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
body.dark-mode .navai-chip:hover  { background: var(--c-bg-muted); }
body.dark-mode .navai-msg.is-assistant .navai-bubble {
  background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-soft);
}
body.dark-mode .navai-rec         { background: var(--c-surface); border-color: var(--c-border-soft); color: var(--c-text); }
body.dark-mode .navai-rec strong  { color: var(--c-text); }
body.dark-mode .navai-rec small   { color: var(--c-text-muted); }
body.dark-mode .navai-composer    { background: var(--c-surface); border-top-color: var(--c-border); }
body.dark-mode #navai-input       { background: var(--c-bg-muted); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode #navai-input:focus { background: var(--c-surface); }

/* ════════════════════════════════════════════════════════════
   PHASE 5 — ECM (Caseload + Client detail)
════════════════════════════════════════════════════════════ */
#caseload-screen.ecm,
#client-screen.ecm     { background: #fafafa; }

.ecm-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: #fff; border-bottom: 1px solid var(--c-border-soft);
  position: sticky; top: 0; z-index: 2;
}
.ecm-back, .ecm-add {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--c-bg-subtle); color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.ecm-back:hover, .ecm-add:hover { background: var(--c-ink-200); }
.ecm-back:active, .ecm-add:active { transform: scale(0.94); }
.ecm-add { background: var(--c-primary); color: #fff; }
.ecm-add:hover { background: var(--c-brand-800); }
.ecm-title  { flex: 1; line-height: 1.15; }
.ecm-title strong { display: block; font-family: var(--font-display); font-size: var(--fs-17); color: var(--c-ink-900); font-weight: var(--fw-bold); }
.ecm-title small  { display: block; font-size: 12px; color: var(--c-text-muted); }

.ecm-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; margin: 12px 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text-muted);
}
.ecm-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: var(--fs-14); color: var(--c-ink-900);
}

.ecm-body { padding: 0 14px calc(40px + env(safe-area-inset-bottom)); }

/* Client list */
.ecm-list { display: flex; flex-direction: column; gap: 8px; }
.ecm-clientrow {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.ecm-clientrow:hover  { border-color: var(--c-ink-300); }
.ecm-clientrow:active { transform: scale(0.99); }
.ecm-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(44,56,109,0.10);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 14px;
  flex-shrink: 0;
}
.ecm-cli-text { flex: 1; min-width: 0; }
.ecm-cli-text strong { display: block; font-size: var(--fs-14); color: var(--c-ink-900); }
.ecm-cli-text small  { display: block; font-size: 12.5px; color: var(--c-text-muted); }
.ecm-cli-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ecm-pill-count {
  background: rgba(217,119,6,0.12); color: #b45309;
  font-size: 11px; font-weight: var(--fw-bold);
  padding: 3px 8px; border-radius: 999px;
}
.ecm-cli-when { font-size: 11px; color: var(--c-text-muted); }

.ecm-empty, .ecm-loading {
  padding: 32px 16px; text-align: center;
  color: var(--c-text-muted); font-size: var(--fs-14);
}

/* Client detail card */
.ecm-clientcard {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ecm-clientcard-row { display: flex; align-items: center; gap: 10px; }
.ecm-row-ic { color: var(--c-ink-700); flex-shrink: 0; }
.ecm-row-label { font-size: var(--fs-14); color: var(--c-ink-900); }

/* Tabs */
.ecm-tabs {
  display: flex; gap: 4px;
  background: var(--c-bg-subtle);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 14px;
}
.ecm-tab {
  flex: 1;
  border: none; background: transparent;
  padding: 9px 12px;
  border-radius: 999px;
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semi);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
.ecm-tab.is-active { background: #fff; color: var(--c-ink-900); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

.ecm-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-primary); color: #fff;
  border: none; border-radius: 999px;
  padding: 10px 18px;
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold);
  cursor: pointer; margin-bottom: 12px;
  transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.ecm-cta:hover  { background: var(--c-brand-800); }
.ecm-cta:active { transform: scale(0.97); }

/* Referrals */
.ecm-referrals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ecm-referral {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  padding: 12px 14px;
}
.ecm-referral header { display: flex; align-items: center; gap: 8px; }
.ecm-referral strong { font-size: var(--fs-14); color: var(--c-ink-900); flex: 1; }
.ecm-ref-status {
  font-size: 11px; font-weight: var(--fw-bold);
  padding: 4px 9px; border-radius: 999px;
}
.ecm-ref-cat  { font-size: 12px; color: var(--c-text-muted); margin: 4px 0 0; }
.ecm-ref-note { font-size: 13px; color: var(--c-ink-800); margin: 8px 0 0; line-height: 1.4; }
.ecm-referral footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ecm-referral footer a,
.ecm-referral footer button {
  font: inherit; font-size: 12.5px; font-weight: var(--fw-semi);
  text-decoration: none;
  background: var(--c-bg-subtle); color: var(--c-ink-900);
  border: 1px solid var(--c-border);
  padding: 6px 12px; border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std);
}
.ecm-referral footer a:hover,
.ecm-referral footer button:hover { background: var(--c-ink-200); }
.ecm-referral footer .is-danger { color: #b91c1c; border-color: #fecaca; }
.ecm-referral footer .is-danger:hover { background: #fef2f2; }

/* Notes */
.ecm-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ecm-note {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  padding: 12px 14px;
}
.ecm-note header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.ecm-note header strong { font-size: var(--fs-13); color: var(--c-ink-900); }
.ecm-note header time   { font-size: 11.5px; color: var(--c-text-muted); }
.ecm-note p { margin: 0; font-size: var(--fs-14); color: var(--c-ink-800); line-height: 1.45; }

/* Reusing cmty-field for inputs/textareas, but ECM also needs <input> styling */
.cmty-field input[type="text"],
.cmty-field input[type="tel"],
.cmty-field input[type="email"] {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  font: inherit; font-size: var(--fs-14);
  color: var(--c-ink-900);
  background: var(--c-bg-subtle);
  outline: none;
}
.cmty-field input:focus { border-color: var(--c-primary); background: #fff; }

/* Resource suggest list inside referral sheet */
.ecm-suggest {
  list-style: none; padding: 6px 0 0; margin: 0;
  max-height: 200px; overflow: auto;
}
.ecm-suggest li {
  padding: 9px 10px; border-radius: 10px;
  cursor: pointer;
}
.ecm-suggest li:hover { background: var(--c-bg-subtle); }
.ecm-suggest strong { display: block; font-size: var(--fs-14); color: var(--c-ink-900); }
.ecm-suggest small  { display: block; font-size: 12px; color: var(--c-text-muted); }

/* Dark mode for ECM */
body.dark-mode #caseload-screen.ecm,
body.dark-mode #client-screen.ecm  { background: var(--c-bg); }
body.dark-mode .ecm-head           { background: var(--c-surface); border-bottom-color: var(--c-border); }
body.dark-mode .ecm-back,
body.dark-mode .ecm-clientrow,
body.dark-mode .ecm-clientcard,
body.dark-mode .ecm-referral,
body.dark-mode .ecm-note,
body.dark-mode .ecm-search         { background: var(--c-surface); border-color: var(--c-border-soft); color: var(--c-text); }
body.dark-mode .ecm-search input,
body.dark-mode .cmty-field input   { background: var(--c-bg-muted); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .ecm-tabs           { background: var(--c-bg-muted); }
body.dark-mode .ecm-tab.is-active  { background: var(--c-surface); color: var(--c-text); }
body.dark-mode .ecm-title strong   { color: var(--c-text); }
body.dark-mode .ecm-clientrow strong,
body.dark-mode .ecm-row-label,
body.dark-mode .ecm-referral strong,
body.dark-mode .ecm-note header strong,
body.dark-mode .ecm-note p         { color: var(--c-text); }
body.dark-mode .ecm-referral footer a,
body.dark-mode .ecm-referral footer button { background: var(--c-bg-muted); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .ecm-suggest li:hover { background: var(--c-bg-muted); }

/* ════════════════════════════════════════════════════════════
   PHASE 5.5 — Admin Console
════════════════════════════════════════════════════════════ */
.admin-hub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}
.admin-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.admin-tile:hover  { border-color: var(--c-ink-300); }
.admin-tile:active { transform: scale(0.99); }
.admin-tile-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.admin-tile-text       { flex: 1; min-width: 0; line-height: 1.25; }
.admin-tile-text strong{ display: block; font-family: var(--font-display); font-size: var(--fs-15); color: var(--c-ink-900); font-weight: var(--fw-bold); }
.admin-tile-text small { display: block; font-size: 12.5px; color: var(--c-text-muted); margin-top: 2px; }
.admin-tile-chev       { color: var(--c-text-muted); flex-shrink: 0; }

/* Dark mode */
body.dark-mode .admin-tile        { background: var(--c-surface); border-color: var(--c-border-soft); }
body.dark-mode .admin-tile-text strong { color: var(--c-text); }

/* ════════════════════════════════════════════════════════════
   PHASE 6 — Alerts feed + i18n
════════════════════════════════════════════════════════════ */

/* Unread tab badge */
.home-tab-badge {
  position: absolute;
  top: 4px; right: 18%;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.home-tab-badge.is-on { display: inline-flex; }

/* Alert rows — reuse ecm-referral but soften when read */
.alert-item.is-read           { opacity: 0.65; }
.alert-item.is-read strong    { font-weight: 600; }
.alert-item { cursor: pointer; }

/* Language selector */
.settings-select {
  margin-left: auto;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg-subtle);
  border-radius: 999px;
  padding: 6px 30px 6px 12px;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--c-ink-900);
  outline: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
}
.settings-select:focus { border-color: var(--c-primary); background-color: #fff; }

/* RTL adjustments */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .ecm-back,
html[dir="rtl"] .navai-back,
html[dir="rtl"] .crisis-back,
html[dir="rtl"] .rdetail-back { transform: scaleX(-1); }
html[dir="rtl"] .settings-row-chev,
html[dir="rtl"] .admin-tile-chev { transform: scaleX(-1); }
html[dir="rtl"] .home-search-icon { left: auto; right: 12px; }

/* Dark mode */
body.dark-mode .alert-item.is-read { opacity: 0.55; }
body.dark-mode .settings-select   { background-color: var(--c-bg-muted); color: var(--c-text); border-color: var(--c-border); }
body.dark-mode .settings-select:focus { background-color: var(--c-surface); }

/* ════════════════════════════════════════════════════════════
   PHASE 7 — Analytics + SDOH overlay
════════════════════════════════════════════════════════════ */

/* ── Analytics dashboard ── */
.an-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0 10px;
}
.an-kpi {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.an-kpi strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.an-kpi span { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; font-weight: var(--fw-semi); }
.an-kpi small{ font-size: 11px; color: var(--c-text-muted); margin-top: 2px; opacity: 0.85; }

.an-card {
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 12px 0;
}
.an-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  color: var(--c-ink-900);
  margin: 0 0 10px;
  font-weight: var(--fw-bold);
}
.an-card.an-forecast header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.an-card.an-forecast header h3 { margin: 0; }

.an-chart { width: 100%; height: 180px; color: var(--c-ink-700); }
.an-svg   { width: 100%; height: 100%; display: block; }

.an-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--c-text-muted); }
.an-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.an-bars { list-style: none; padding: 0; margin: 0; }
.an-bars li {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
@media (max-width: 380px) {
  .an-bars li { grid-template-columns: 1fr 70px auto; }
}
.an-bar-label { font-size: var(--fs-13); color: var(--c-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-track {
  background: var(--c-bg-subtle);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.an-bar-fill {
  display: block;
  height: 100%;
  background: var(--c-primary);
  border-radius: 999px;
}
.an-bar-val { font-size: 12px; color: var(--c-text-muted); min-width: 0; text-align: right; }

.an-forecast-body { font-size: var(--fs-14); color: var(--c-ink-800); line-height: 1.55; }
.an-forecast-body p { margin: 0 0 10px; }
.an-forecast-body p:last-child { margin: 0; }

/* ── SDOH controls (home map) ── */
.sdoh-controls {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 76px);
  right: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.sdoh-fab {
  width: 42px; height: 42px;
  border: none; border-radius: 50%;
  background: #fff;
  color: var(--c-ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
  transition: transform var(--dur-1) var(--ease-std);
}
.sdoh-fab:active { transform: scale(0.94); }
.sdoh-fab.is-open { background: var(--c-primary); color: #fff; }
.sdoh-menu {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
}
.sdoh-menu[hidden] { display: none; }
.sdoh-menu button {
  border: none; background: transparent;
  text-align: left;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--c-ink-900);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std);
}
.sdoh-menu button:hover { background: var(--c-bg-subtle); }
.sdoh-menu button[data-metric="off"] { color: var(--c-text-muted); }

.sdoh-legend {
  position: absolute;
  left: 12px;
  bottom: 96px;
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  font-size: 11px;
  color: var(--c-ink-800);
  z-index: 4;
  pointer-events: none;
}
.sdoh-legend strong { font-size: 11px; font-weight: var(--fw-bold); display: block; margin-bottom: 4px; color: var(--c-ink-900); }
.sdoh-legend-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; }
.sdoh-legend-bar span { flex: 1; }
.sdoh-legend-ticks { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10px; color: var(--c-text-muted); }

/* Dark mode */
body.dark-mode .an-kpi,
body.dark-mode .an-card     { background: var(--c-surface); border-color: var(--c-border-soft); }
body.dark-mode .an-kpi strong,
body.dark-mode .an-card h3,
body.dark-mode .an-bar-label { color: var(--c-text); }
body.dark-mode .an-bar-track { background: var(--c-bg-muted); }
body.dark-mode .sdoh-fab     { background: var(--c-surface); color: var(--c-text); }
body.dark-mode .sdoh-menu    { background: var(--c-surface); }
body.dark-mode .sdoh-menu button { color: var(--c-text); }
body.dark-mode .sdoh-menu button:hover { background: var(--c-bg-muted); }
body.dark-mode .sdoh-legend  { background: rgba(20,23,31,0.92); color: var(--c-text); }
body.dark-mode .sdoh-legend strong { color: var(--c-text); }

/* ════════════════════════════════════════════════════════════
   PROFILE / ABOUT / PRIVACY / SUPPORT (v2 redesign)
════════════════════════════════════════════════════════════ */

/* ── Profile hero ── */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0 4px;
}
.profile-avatar-wrap {
  position: relative;
  width: 96px; height: 96px;
  margin-bottom: 12px;
}
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  display: none;
}
.profile-avatar-fallback {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(44,56,109,0.10);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--fw-bold);
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.profile-avatar-edit {
  position: absolute;
  right: -2px; bottom: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-primary);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  transition: transform var(--dur-1) var(--ease-std);
}
.profile-avatar-edit:active { transform: scale(0.94); }
#profile-display-name {
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  display: block;
}
#profile-display-email { font-size: 13px; color: var(--c-text-muted); }

.profile-danger { border-color: #fecaca !important; }
.profile-danger h3 { color: #b91c1c !important; }

/* ── About hero ── */
.about-hero { text-align: center; padding: 16px 4px 4px; }
.about-logo {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: rgba(44,56,109,0.10);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.about-hero h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.about-hero p {
  font-size: var(--fs-14);
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0 6px;
}
.about-list { list-style: none; padding: 0; margin: 4px 0 0; }
.about-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border-soft);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--c-ink-800);
}
.about-list li:last-child { border-bottom: 0; }
.about-list li strong { color: var(--c-ink-900); }
.about-version {
  font-size: 12px;
  color: var(--c-text-muted);
  text-align: center;
  margin-top: 10px !important;
}
.about-link { color: var(--c-primary); font-weight: var(--fw-semi); text-decoration: none; }
.about-link:hover { text-decoration: underline; }

/* ── Support cards ── */
.support-hero { text-align: center; padding: 16px 4px 4px; }
.support-hero h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.support-hero p {
  font-size: var(--fs-14);
  color: var(--c-text-muted);
  line-height: 1.55;
  margin: 0 6px 8px;
}
.support-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 10px 0;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.support-card:hover  { border-color: var(--c-ink-300); }
.support-card:active { transform: scale(0.99); }
.support-card-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.support-card-text { flex: 1; min-width: 0; }
.support-card-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-15);
  color: var(--c-ink-900);
  font-weight: var(--fw-bold);
}
.support-card-text small {
  display: block;
  font-size: 12.5px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.support-card-chev { color: var(--c-text-muted); }

.support-faq details {
  border-bottom: 1px solid var(--c-border-soft);
  padding: 10px 0;
}
.support-faq details:last-of-type { border-bottom: 0; }
.support-faq summary {
  cursor: pointer;
  font-size: var(--fs-14);
  font-weight: var(--fw-semi);
  color: var(--c-ink-900);
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -1px;
  font-size: 18px;
  color: var(--c-text-muted);
  transition: transform var(--dur-1) var(--ease-std);
}
.support-faq details[open] summary::after { transform: rotate(45deg); }
.support-faq details p {
  font-size: 13.5px;
  color: var(--c-ink-700);
  line-height: 1.55;
  margin: 8px 0 0;
}

/* Dark mode */
body.dark-mode .profile-avatar,
body.dark-mode .profile-avatar-fallback { border-color: var(--c-surface); }
body.dark-mode .about-list li { border-bottom-color: var(--c-border-soft); color: var(--c-text); }
body.dark-mode .about-list li strong { color: var(--c-text); }
body.dark-mode .support-card { background: var(--c-surface); border-color: var(--c-border-soft); }
body.dark-mode .support-card-text strong { color: var(--c-text); }
body.dark-mode .support-faq summary { color: var(--c-text); }
body.dark-mode .support-faq details { border-bottom-color: var(--c-border-soft); }
body.dark-mode .support-faq details p { color: var(--c-text-muted); }
body.dark-mode #profile-display-name { color: var(--c-text); }

/* ════════════════════════════════════════════════════════════
   PROFILE INPUT POLISH (v2.13.1)
════════════════════════════════════════════════════════════ */

/* Apply the styled-input look to ALL textual inputs inside cmty-field */
.cmty-field input[type="password"],
.cmty-field input[type="number"],
.cmty-field input[type="search"],
.cmty-field input[type="url"],
.cmty-field input[type="date"],
.cmty-field input[type="datetime-local"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  font: inherit;
  font-size: var(--fs-14);
  color: var(--c-ink-900);
  background: var(--c-bg-subtle);
  outline: none;
}
.cmty-field input[type="password"]:focus,
.cmty-field input[type="number"]:focus,
.cmty-field input[type="search"]:focus,
.cmty-field input[type="url"]:focus,
.cmty-field input[type="date"]:focus,
.cmty-field input[type="datetime-local"]:focus {
  border-color: var(--c-primary);
  background: #fff;
}

/* Bump padding on text/tel/email too, to match */
.cmty-field input[type="text"],
.cmty-field input[type="tel"],
.cmty-field input[type="email"] {
  padding: 12px 14px;
}

/* DOB Month/Year row */
.profile-dob-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.profile-dob-select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 32px 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg-subtle);
  font: inherit;
  font-size: var(--fs-14);
  color: var(--c-ink-900);
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  outline: none;
}
.profile-dob-select:focus { border-color: var(--c-primary); background-color: #fff; }

/* Delete account button in Settings */
.settings-delete {
  display: block;
  width: 100%;
  margin: 10px 0 calc(env(safe-area-inset-bottom) + 8px);
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid #fecaca;
  background: #fff;
  color: #b91c1c;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.settings-delete:hover  { background: #fef2f2; }
.settings-delete:active { transform: scale(0.98); }

/* Dark mode */
body.dark-mode .cmty-field input[type="password"],
body.dark-mode .cmty-field input[type="number"],
body.dark-mode .cmty-field input[type="search"],
body.dark-mode .cmty-field input[type="url"],
body.dark-mode .cmty-field input[type="date"],
body.dark-mode .cmty-field input[type="datetime-local"],
body.dark-mode .profile-dob-select {
  background-color: var(--c-bg-muted);
  color: var(--c-text);
  border-color: var(--c-border);
}
body.dark-mode .cmty-field input[type="password"]:focus,
body.dark-mode .profile-dob-select:focus {
  background-color: var(--c-surface);
}
body.dark-mode .settings-delete {
  background: var(--c-surface);
  border-color: #7f1d1d;
  color: #fca5a5;
}
body.dark-mode .settings-delete:hover { background: rgba(220,38,38,0.12); }

/* ════════════════════════════════════════════════════════════
   v2.14 fixes — Global tab bar + profile/settings polish
════════════════════════════════════════════════════════════ */

/* ── Tab bar is now a global element. Hidden by default; shown on body.is-tabnav ── */
.home-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 50;
  display: none !important;
}
body.is-tabnav .home-tabs { display: grid !important; }

/* Make sure scrollable screens leave room for the tab bar */
body.is-tabnav .app-screen.is-scroll { padding-bottom: calc(64px + var(--sab)); }
body.is-tabnav #home-screen          { padding-bottom: 0; }

/* ── Settings: equalize Sign out + Delete heights ── */
.settings-logout,
.settings-delete {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.settings-logout { margin: 16px 0 8px; }
.settings-delete { margin: 0 0 calc(env(safe-area-inset-bottom) + 8px); }

/* ── Profile avatar: keep image and fallback aligned, never collapse ── */
.profile-avatar-wrap { display: inline-block; }
.profile-avatar,
.profile-avatar-fallback {
  position: absolute !important;
  inset: 0;
  width: 96px !important;
  height: 96px !important;
  margin: 0 !important;
}
.profile-avatar { object-fit: cover; }

/* ── Profile: breathing room between last input and the action button ── */
.an-card > .cmty-pill { margin-top: 14px; }
.an-card .cmty-field + .cmty-pill { margin-top: 18px; }

/* ── Resource detail: respect notch + side safe areas ── */
.rdetail-back,
.rdetail-action {
  /* Push further from the dynamic island */
  top: calc(var(--sat) + 18px) !important;
}
#resource-detail-screen.rdetail {
  /* Side safe-area padding so content does not run under rounded corners */
  padding-left: var(--sal);
  padding-right: var(--sar);
}
.rdetail-hero {
  /* Pull the hero outside the safe-area padding so it remains full bleed */
  margin-left: calc(-1 * var(--sal));
  margin-right: calc(-1 * var(--sar));
  width: auto;
}

/* ── Global: ensure body and html truly fill the viewport horizontally ── */
html, body { width: 100%; min-width: 100vw; margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════
   PWA HOME-SCREEN FULL-BLEED FIX (v2.14.1)
════════════════════════════════════════════════════════════ */

/* Use dynamic viewport units so iOS PWA fills the screen even when
   the URL bar / home bar resize the layout. 100vh on iOS Safari is wrong. */
html, body {
  height: 100dvh;
  min-height: 100dvh;
  width: 100vw;
  margin: 0;
  padding: 0;
  /* Extend whatever colour is behind the status bar on PWA installs */
  background: #fff;
}
body.dark-mode { background: var(--c-bg); }

/* The fixed app-screens must also fill the dynamic viewport */
.app-screen {
  height: 100dvh;
  min-height: 100dvh;
}

/* When running as a PWA (no browser chrome), iOS uses status-bar-style
   "black-translucent" which makes the system overlay sit on top of our
   content. The safe-area-inset values are non-zero, and our existing
   headers already pad for them. This block just makes sure no element
   is white-rectangling the status-bar area on iPhones with notches. */
@media (display-mode: standalone) {
  html, body { background: #fff; }
  body.dark-mode { background: var(--c-bg); }
}

/* Two-column field row used in resource edit sheet */
.cmty-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }