/* ============================================================
   TESSERA MOBILE v2 — Porcelain + Midnight, iOS-native
   Light-first · system type stack · frosted chrome ·
   spring motion. Legacy --m-* token names kept and re-pointed
   (--m-gold now resolves to midnight navy).
   ============================================================ */

:root,
[data-theme="light"] {
  --m-bg:           #FAFAF8;   /* porcelain */
  --m-surface:      #FFFFFF;
  --m-elevated:     #F1F2F0;   /* input / pressed fills */
  --m-border:       #E5E5E1;
  --m-text:         #16181D;
  --m-muted:        #6E7480;
  --m-accent:       #3B6FE0;   /* cobalt interactive */
  --m-accent-dim:   #EBF1FD;
  --m-gold:         #1C2B4A;   /* legacy name — now midnight navy */
  --m-gold-dim:     #14203A;
  --m-success:      #1F9D5B;
  --m-warning:      #C77E0A;
  --m-danger:       #DA3C2E;

  /* Extended neutrals (match hub) */
  --m-faint:        #9CA1AB;   /* hub --text-muted — lighter than --m-muted */
  --m-border-subtle:#EFEFEC;   /* hairline separators */
  --m-border-strong:#D2D2CC;

  /* Property-type accents (match hub, iOS-tuned hues) */
  --m-office:       #0A6CDB;
  --m-industrial:   #C07A0E;
  --m-retail:       #0E8A52;
  --m-multifamily:  #7355C9;
  --m-flex:         #0D8A9C;

  /* Signal type colors (iOS-tuned) */
  --m-sig-cmbs:     #DA3C2E;
  --m-sig-nod:      #C77E0A;
  --m-sig-lease:    #3B6FE0;
  --m-sig-hot:      #1F9D5B;
  --m-sig-permit:   #7355C9;
  --m-sig-stale:    #6E7480;

  /* Signal tint backgrounds (badges) */
  --m-sig-cmbs-bg:   #FCEAE8;
  --m-sig-nod-bg:    #FBF2DF;
  --m-sig-lease-bg:  #EBF1FD;
  --m-sig-hot-bg:    #E7F6EE;
  --m-sig-permit-bg: #F1EDFB;
  --m-sig-stale-bg:  #F1F2F0;

  /* Type stacks identical to hub (--font-ui / --font-display / --font-mono) */
  --m-font:         -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --m-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --m-font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --m-radius:       12px;   /* was 14 — match hub --radius-md */
  --m-radius-sm:    8px;    /* was 10 — match hub control radius */
  --m-radius-lg:    16px;   /* was 20 — match hub --radius-lg (cards) */
  --m-radius-full:  999px;
  --m-nav-height:   64px;
  --m-topbar:       52px;

  --m-shadow-xs:    0 1px 2px rgba(20,32,58,0.05);
  --m-shadow-sm:    0 1px 3px rgba(20,32,58,0.06), 0 1px 2px rgba(20,32,58,0.04);
  --m-shadow-md:    0 4px 12px rgba(20,32,58,0.08), 0 1px 3px rgba(20,32,58,0.05);
  --m-shadow-lg:    0 12px 28px rgba(20,32,58,0.12), 0 2px 8px rgba(20,32,58,0.06);
  --m-shadow-xl:    0 24px 60px rgba(20,32,58,0.18), 0 4px 16px rgba(20,32,58,0.08);

  --m-ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --m-spring:       cubic-bezier(0.34, 1.36, 0.64, 1);
  --m-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  /* Named transitions — match hub --transition / -md / -lg */
  --m-transition:    180ms var(--m-ease);
  --m-transition-md: 280ms var(--m-ease);
  --m-transition-lg: 380ms var(--m-ease-out);

  --m-glass:        rgba(250, 250, 248, 0.82);
  --m-glass-border: rgba(20, 32, 58, 0.08);

  /* ── Glass Bubble system (2026-07 UI redesign SP4) ──
     NEW surface layer mirroring the hub --gb-* tokens (Tessera-hub/styles/
     base.css) with the --m-* prefix. Does NOT replace --m-glass (topbar/nav
     chrome) or any legacy alias (--m-gold etc.). Container-level frosting only. */
  --m-gb-surface:        rgba(255,255,255,0.62);
  --m-gb-blur:           blur(18px) saturate(160%);
  --m-gb-border:         rgba(255,255,255,0.70);
  --m-gb-radius:         24px;
  --m-gb-shadow:         0 8px 24px rgba(20,32,58,0.10);
  --m-gb-control-radius: 999px;
  --m-gb-wash:           radial-gradient(120% 120% at 100% 0%, rgba(59,111,224,0.10) 0%, rgba(59,111,224,0) 60%);
}

/* ── Dark theme (secondary) ────────────────────────────────── */
[data-theme="dark"] {
  --m-bg:          #0E1116;
  --m-surface:     #161A21;
  --m-elevated:    #1C212A;
  --m-border:      #262C37;
  --m-text:        #F2F3F5;
  --m-muted:       #9AA3B2;
  --m-accent:      #5B8DEF;
  --m-accent-dim:  #16243E;
  --m-gold:        #5B8DEF;   /* midnight is invisible on dark — flip to cobalt */
  --m-gold-dim:    #3B6FE0;
  --m-success:     #34C77B;
  --m-warning:     #E5A33C;
  --m-danger:      #ED6A5E;
  --m-faint:       #6E7480;
  --m-border-subtle:#1F242E;
  --m-border-strong:#323A47;

  --m-sig-cmbs:     #ED6A5E;
  --m-sig-nod:      #E5A33C;
  --m-sig-lease:    #5B8DEF;
  --m-sig-hot:      #34C77B;
  --m-sig-permit:   #9B82E0;
  --m-sig-stale:    #9AA3B2;

  --m-sig-cmbs-bg:   #3D1612;
  --m-sig-nod-bg:    #3A2C10;
  --m-sig-lease-bg:  #16243E;
  --m-sig-hot-bg:    #11331F;
  --m-sig-permit-bg: #221A38;
  --m-sig-stale-bg:  #1C212A;

  --m-shadow-xs:   0 1px 2px rgba(0,0,0,0.25);
  --m-shadow-sm:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --m-shadow-md:   0 4px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
  --m-shadow-lg:   0 12px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  --m-shadow-xl:   0 24px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);

  --m-glass:        rgba(14, 17, 22, 0.78);
  --m-glass-border: rgba(255, 255, 255, 0.08);

  /* Glass Bubble — dark (surface on #0E1116 base), mirrors hub base.css */
  --m-gb-surface: rgba(22,26,33,0.55);
  --m-gb-border:  rgba(255,255,255,0.08);
  --m-gb-shadow:  0 8px 24px rgba(0,0,0,0.40);
  --m-gb-wash:    radial-gradient(120% 120% at 100% 0%, rgba(91,141,239,0.14) 0%, rgba(91,141,239,0) 60%);
}

/* ── Reset ─────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* was an invalid selector — never applied */
}

html, body {
  height: 100%;
  overflow-x: hidden;
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: 14px;
  letter-spacing: -0.006em;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  transition: background 0.25s var(--m-ease), color 0.25s var(--m-ease);
}

body {
  max-width: 430px;
  margin: 0 auto;
  /* top safe-area lives INSIDE the frosted topbar (see #mobile-topbar)
     so the status-bar/notch zone is glass, not a flat porcelain seam */
  padding: 0 0 env(safe-area-inset-bottom);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

button, textarea, input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; }
textarea { resize: vertical; outline: none; }
input { outline: none; }

/* ── App shell ─────────────────────────────────────────────── */
#mobile-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Topbar ────────────────────────────────────────────────── */
#mobile-topbar {
  height: calc(var(--m-topbar) + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) 18px 0;
  background: var(--m-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--m-glass-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.m-topbar-logo {
  font-family: var(--m-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--m-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-topbar-mark {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 18px;
  height: 18px;
}
.m-topbar-mark span {
  background: var(--m-gold);
  border-radius: 2.5px;
}
.m-topbar-mark span:nth-child(2),
.m-topbar-mark span:nth-child(3) {
  opacity: 0.3;
}

.m-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.m-api-dot, .m-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m-muted);
  transition: background 0.2s;
  cursor: pointer;
}
.m-api-dot.connected, .m-sync-dot.connected   { background: var(--m-success); }
.m-api-dot.disconnected, .m-sync-dot.disconnected { background: var(--m-warning); }

/* ── Content area ──────────────────────────────────────────── */
#mobile-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--m-nav-height) + env(safe-area-inset-bottom) + 16px);
  background: var(--m-bg);
}

/* ── Bottom nav ────────────────────────────────────────────── */
#mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--m-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: row;
  background: var(--m-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--m-glass-border);
  z-index: 80;
  max-width: 430px;
  margin: 0 auto;
  align-items: stretch;
  touch-action: none;  /* touches on the bar are gestures/taps, never page scroll */
}

/* SP4: align the nav frost to the Glass Bubble blur strength. */
#mobile-nav {
  -webkit-backdrop-filter: var(--m-gb-blur);
  backdrop-filter: var(--m-gb-blur);
}

/* ── SP4 nav: group buttons are phone-only; the tablet rail lists every
   destination directly (js/mobile-app.js _buildRailNav). ── */
.m-nav-btn.m-nav-group { display: flex; }
@media (min-width: 768px) {
  .m-nav-btn.m-nav-group { display: none; }
}

.m-nav-btn {
  background: transparent;
  border: none;
  color: var(--m-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  cursor: pointer;
  transition: color 0.2s var(--m-ease), transform 0.12s var(--m-ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.m-nav-btn:active { transform: scale(0.94); }

.m-nav-btn.active {
  color: var(--m-accent);
}

.m-nav-icon {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-nav-icon svg {
  width: 22px;
  height: 22px;
}

.m-nav-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--m-font);
}
.m-nav-btn.active .m-nav-label { font-weight: 600; }

/* ── Dispatch hero nav button ──────────────────────────────── */
.m-nav-btn.dispatch-hero {
  position: relative;
  flex: 1.2;
}

.m-nav-btn.dispatch-hero .m-nav-dispatch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  margin-top: -21px;
}

.m-nav-dispatch-bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2A4070 0%, var(--m-gold) 55%, #14203A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(28, 43, 74, 0.35), 0 2px 6px rgba(28, 43, 74, 0.2);
  border: 3px solid var(--m-bg);
  transition: transform 0.25s var(--m-spring), box-shadow 0.2s var(--m-ease);
}

.m-nav-btn.dispatch-hero:active .m-nav-dispatch-bubble {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(28, 43, 74, 0.3);
}

.m-nav-btn.dispatch-hero.active .m-nav-dispatch-bubble {
  box-shadow: 0 6px 22px rgba(59, 111, 224, 0.45);
}

.m-nav-btn.dispatch-hero .m-nav-label {
  color: var(--m-gold);
  font-size: 10px;
  font-weight: 600;
}

/* ── Screens ───────────────────────────────────────────────── */
.m-screen {
  padding: 0 0 20px;
}

.m-screen-header {
  padding: 20px 16px 14px;
  border-bottom: none;
}

.m-screen-title {
  font-family: var(--m-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--m-text);
  line-height: 1.1;
}

.m-screen-subtitle {
  font-size: 13px;
  color: var(--m-muted);
  margin-top: 4px;
}

.m-section-label {
  font-family: var(--m-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-muted);
  padding: 16px 16px 6px;
}

/* legacy alias */
.m-section-title {
  font-family: var(--m-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-muted);
  padding: 16px 16px 6px;   /* aligned to the 16px screen gutter */
  border-bottom: none;
}

/* ── KPI grid ──────────────────────────────────────────────── */
.m-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 16px;
}

.m-kpi {
  background: var(--m-surface);
  border: 1px solid var(--m-border-subtle);
  border-radius: var(--m-radius);
  padding: 15px 6px 13px;
  text-align: center;
  box-shadow: var(--m-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--m-ease), box-shadow 0.18s var(--m-ease);
}
.m-kpi:active { transform: scale(0.97); box-shadow: var(--m-shadow-xs); }

/* Signature hairline accent strip — ported from hub .metric-card::before */
.m-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--m-kpi-c, var(--m-accent)), transparent);
  opacity: 0.9;
}
/* Per-tile accent so the strip + figure carry meaning, like the hub KPIs */
.m-kpi:nth-child(1) { --m-kpi-c: var(--m-accent); }
.m-kpi:nth-child(2) { --m-kpi-c: var(--m-success); }
.m-kpi:nth-child(3) { --m-kpi-c: var(--m-danger); }
.m-kpi:nth-child(4) { --m-kpi-c: var(--m-multifamily); }

.m-kpi-val {
  font-family: var(--m-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  line-height: 1.05;
  color: var(--m-kpi-c, var(--m-accent));   /* solid fallback — figure always visible */
}
/* Animated color-shift figure — ported from hub .kpi-figure / kpiShift */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .m-kpi-val {
    background-image: linear-gradient(100deg,
      var(--m-kpi-c, var(--m-accent)) 0%,
      color-mix(in srgb, var(--m-kpi-c, var(--m-accent)) 45%, #ffffff) 50%,
      var(--m-kpi-c, var(--m-accent)) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: mKpiShift 4.5s var(--m-ease) infinite;
  }
}
@keyframes mKpiShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) { .m-kpi-val { animation: none; } }

.m-kpi-label {
  font-family: var(--m-font);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m-muted);
  margin-top: 4px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.m-card {
  background: var(--m-surface);
  border: 1px solid var(--m-border-subtle);   /* hairline edge + shadow = crisp on porcelain (matches hub .card) */
  border-radius: var(--m-radius-lg);
  margin: 0 14px 12px;
  box-shadow: var(--m-shadow-sm);
  overflow: hidden;
}

.m-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--m-border);
}

.m-card-title {
  font-family: var(--m-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--m-text);
}

.m-card-body { padding: 16px; }

/* ── Inputs ────────────────────────────────────────────────── */
.m-input {
  width: 100%;
  background: var(--m-elevated);
  border: 1px solid transparent;
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--m-radius-sm);
  display: block;
  transition: border-color 0.2s var(--m-ease), box-shadow 0.2s var(--m-ease), background 0.2s var(--m-ease);
}
.m-input:focus {
  border-color: var(--m-accent);
  background: var(--m-surface);
  box-shadow: 0 0 0 3.5px rgba(59, 111, 224, 0.12);
}
textarea.m-input { line-height: 1.55; }

/* ── Buttons ───────────────────────────────────────────────── */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  font-family: var(--m-font);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.006em;
  border-radius: var(--m-radius-sm);
  min-height: 44px;
  border: none;
  transition: opacity 0.15s var(--m-ease), transform 0.12s var(--m-ease), background 0.15s var(--m-ease);
}
.m-btn:active { transform: scale(0.97); }

.m-btn-primary {
  background: var(--m-accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(59, 111, 224, 0.25);
}
.m-btn-primary:active { filter: brightness(0.92); }

/* legacy name — dispatch / hero button, now midnight */
.m-btn-gold {
  background: var(--m-gold);
  color: #fff;
  box-shadow: 0 2px 10px rgba(28, 43, 74, 0.25);
}
.m-btn-gold:active { background: var(--m-gold-dim); }

.m-btn-secondary {
  background: var(--m-elevated);
  border: 1px solid transparent;  /* lets inline border-color selection show */
  color: var(--m-text);
}
.m-btn-secondary:active { filter: brightness(0.95); }

.m-btn-ghost {
  background: none;
  border: none;
  color: var(--m-muted);
  font-family: var(--m-font);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--m-radius-sm);
}

.m-btn-danger {
  background: var(--m-sig-cmbs-bg);
  border: none;
  color: var(--m-danger);
  border-radius: var(--m-radius-sm);
}
.m-btn-danger:active { filter: brightness(0.95); }

.m-btn-full { width: 100%; }

/* ── Badges ────────────────────────────────────────────────── */
.m-badge {
  display: inline-block;
  font-family: var(--m-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0;
  padding: 3px 9px;
  border: none;
  border-radius: var(--m-radius-full);
  color: var(--m-muted);
  background: var(--m-elevated);
}
.m-badge-success { color: var(--m-success); background: var(--m-sig-hot-bg); }
.m-badge-warning { color: var(--m-warning); background: var(--m-sig-nod-bg); }
.m-badge-danger  { color: var(--m-danger);  background: var(--m-sig-cmbs-bg); }
.m-badge-accent  { color: var(--m-accent);  background: var(--m-sig-lease-bg); }
.m-badge-gold    { color: #fff; background: var(--m-gold); }

/* ── List items ────────────────────────────────────────────── */
.m-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--m-border);
  cursor: pointer;
  /* UITableViewCell feel: highlight snaps in, fades out on release */
  transition: background 0.3s var(--m-ease);
}
.m-list-item:active { background: var(--m-elevated); transition-duration: 0.05s; }

.m-list-item-content { flex: 1; min-width: 0; }

.m-list-item-title {
  font-size: 14px;
  font-weight: 550;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-list-item-meta {
  font-size: 11px;
  color: var(--m-muted);
  margin-top: 2px;
}

.m-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--m-gold);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Chips ─────────────────────────────────────────────────── */
.m-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 14px;
}

.m-chip {
  padding: 7px 14px;
  /* transparent (not none): screens mark the selected chip by setting
     border-color inline — with border:none that never rendered */
  border: 1px solid transparent;
  border-radius: var(--m-radius-full);
  font-family: var(--m-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--m-muted);
  background: var(--m-elevated);
  min-height: 34px;
  transition: color 0.2s var(--m-ease), background 0.2s var(--m-ease);
  white-space: nowrap;
}
.m-chip:active,
.m-chip.active {
  color: var(--m-accent);
  background: var(--m-accent-dim);
}

/* ── Filter pills (horizontal scroll) ─────────────────────── */
.m-filter-bar {
  display: flex;
  gap: 7px;
  padding: 10px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--m-border);
  scrollbar-width: none;
}
.m-filter-bar::-webkit-scrollbar { display: none; }

.m-filter-pill {
  flex-shrink: 0;
  padding: 7px 14px;
  font-family: var(--m-font);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m-muted);
  border: none;
  background: var(--m-elevated);
  border-radius: var(--m-radius-full);
  cursor: pointer;
  transition: all 0.2s var(--m-ease);
}
.m-filter-pill.active {
  color: #fff;
  background: var(--m-gold);
}
[data-theme="dark"] .m-filter-pill.active {
  color: var(--m-accent);
  background: var(--m-accent-dim);
}

/* ── Signal cards ──────────────────────────────────────────── */
.m-signal-card {
  display: flex;
  gap: 12px;
  padding: 13px 14px 13px 0;
  margin: 0 14px 8px;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
}
.m-signal-card:active { transform: scale(0.98); }

.m-signal-stripe {
  width: 4px;
  flex-shrink: 0;
  background: var(--m-muted);
}
.m-signal-stripe.cmbs   { background: var(--m-sig-cmbs); }
.m-signal-stripe.nod    { background: var(--m-sig-nod); }
.m-signal-stripe.lease  { background: var(--m-sig-lease); }
.m-signal-stripe.hot    { background: var(--m-sig-hot); }
.m-signal-stripe.permit { background: var(--m-sig-permit); }
.m-signal-stripe.stale  { background: var(--m-sig-stale); }

.m-signal-body { flex: 1; min-width: 0; }

.m-signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.m-signal-address {
  font-size: 13px;
  font-weight: 500;
  color: var(--m-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-signal-type-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0;
  padding: 3px 9px;
  border-radius: var(--m-radius-full);
  flex-shrink: 0;
  background: var(--m-elevated);
  border: none;
}
.m-signal-type-badge.cmbs   { color: var(--m-sig-cmbs);   background: var(--m-sig-cmbs-bg); }
.m-signal-type-badge.nod    { color: var(--m-sig-nod);    background: var(--m-sig-nod-bg); }
.m-signal-type-badge.lease  { color: var(--m-sig-lease);  background: var(--m-sig-lease-bg); }
.m-signal-type-badge.hot    { color: var(--m-sig-hot);    background: var(--m-sig-hot-bg); }
.m-signal-type-badge.permit { color: var(--m-sig-permit); background: var(--m-sig-permit-bg); }
.m-signal-type-badge.stale  { color: var(--m-sig-stale);  background: var(--m-sig-stale-bg); }

.m-signal-detail {
  font-size: 11px;
  color: var(--m-muted);
  line-height: 1.45;
  margin-bottom: 6px;
}

.m-signal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-signal-score {
  font-size: 10px;
  font-family: var(--m-font);
  color: var(--m-muted);
}
.m-signal-score strong {
  font-size: 12px;
  color: var(--m-text);
}

/* ── Dispatch states ───────────────────────────────────────── */
.m-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--m-muted);
  padding: 12px;
  text-align: center;
}
/* small circular spinner while the Copilot is processing */
.m-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--m-border-strong);
  border-top-color: var(--m-accent);
  border-radius: 50%;
  animation: m-spin 0.7s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .m-loading::before { animation: none; }
}

.m-empty {
  font-size: 12px;
  color: var(--m-muted);
  padding: 24px 16px;
  text-align: center;
  line-height: 1.6;
}

.m-ai-result {
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-text);
}

/* ── Pipeline kanban ───────────────────────────────────────── */
.m-kanban-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
.m-kanban-col {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 12px;
  min-width: 100%;
}
.m-kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--m-border);
  margin-bottom: 10px;
}
.m-kanban-col-title {
  font-family: var(--m-font);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-text);
}
.m-kanban-col-count { font-size: 10px; color: var(--m-muted); }

.m-deal-card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--m-shadow-sm);
}
.m-deal-title { font-size: 13px; font-weight: 500; color: var(--m-text); margin-bottom: 4px; }
.m-deal-meta { font-size: 11px; color: var(--m-muted); margin-bottom: 8px; }

.m-prob-bar { height: 4px; background: var(--m-border); border-radius: 2px; overflow: hidden; }
.m-prob-fill { height: 100%; background: var(--m-accent); transition: width 0.3s; }

.m-stage-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0; }
.m-stage-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--m-border); }
.m-stage-dot.active { background: var(--m-accent); }

/* ── Bottom sheet ──────────────────────────────────────────── */
.m-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 44, 0.42);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--m-ease);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.m-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.m-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 78vh;
  max-height: 78dvh;          /* tracks the dynamic viewport (keyboard) */
  background: var(--m-surface);
  border-top: none;
  border-radius: 24px 24px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;          /* no scroll-chain to the page */
  scroll-padding-bottom: 80px;           /* focused inputs clear the keyboard */
  transform: translateY(100%);
  /* close = quick ease-out; open springs (see .open below) */
  transition: transform 0.32s var(--m-ease-out);
  z-index: 110;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  max-width: 430px;
  margin: 0 auto;
  box-shadow: var(--m-shadow-lg);
}
.m-sheet.open {
  transform: translateY(0);
  transition: transform 0.46s var(--m-spring);
}

.m-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--m-border);
  border-radius: 2px;
  margin: 10px auto 6px;
}

.m-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 12px;
  border-bottom: 1px solid var(--m-border);
}

.m-sheet-title {
  font-family: var(--m-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--m-text);
}

.m-sheet-body { padding: 16px 18px; }

.m-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--m-border);
  font-size: 12px;
  gap: 12px;
}
.m-detail-row:last-child { border-bottom: none; }
.m-detail-label {
  color: var(--m-muted);
  text-transform: none;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.m-detail-value { color: var(--m-text); text-align: right; }

.m-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 18px 0;
}

/* ── Search bar ────────────────────────────────────────────── */
.m-search-wrap {
  padding: 10px 14px;
  border-bottom: 1px solid var(--m-border);
}
.m-search {
  width: 100%;
  background: var(--m-elevated);
  border: 1px solid transparent;   /* match .m-input treatment */
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--m-radius-sm);
  transition: border-color 0.2s var(--m-ease), box-shadow 0.2s var(--m-ease), background 0.2s var(--m-ease);
}
.m-search:focus {
  border-color: var(--m-accent);
  background: var(--m-surface);
  box-shadow: 0 0 0 3.5px rgba(59, 111, 224, 0.12);
}

/* ── Alerts / news items ───────────────────────────────────── */
.m-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--m-border);
  background: var(--m-surface);
}
.m-alert.unread { border-left: 3px solid var(--m-accent); }
.m-alert-icon {
  width: 30px;
  height: 30px;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--m-muted);
  flex-shrink: 0;
}
.m-alert-body { flex: 1; min-width: 0; }
.m-alert-text { font-size: 12px; color: var(--m-text); margin-bottom: 4px; line-height: 1.45; }
.m-alert-meta { font-size: 10px; color: var(--m-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── News items ────────────────────────────────────────────── */
.m-news-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--m-border);
  background: var(--m-surface);
}
.m-news-source {
  font-family: var(--m-font);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-muted);
}
.m-news-headline { font-size: 13px; font-weight: 500; color: var(--m-text); line-height: 1.35; }
.m-news-summary { font-size: 11px; color: var(--m-muted); line-height: 1.5; margin-top: 2px; }

/* ── Settings / forms ──────────────────────────────────────── */
.m-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--m-border);
  background: var(--m-surface);
}
.m-toggle-label { font-size: 13px; color: var(--m-text); font-weight: 500; }
.m-toggle-desc { font-size: 11px; color: var(--m-muted); margin-top: 2px; line-height: 1.4; }

/* iOS switch */
.m-toggle {
  width: 51px;
  height: 31px;
  border: none;
  background: var(--m-border);
  border-radius: var(--m-radius-full);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s var(--m-ease);
  padding: 0;
}
.m-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
  transition: transform 0.25s var(--m-spring);
}
.m-toggle.on { background: var(--m-success); }
.m-toggle.on::after { transform: translateX(20px); }

.m-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-muted); flex-shrink: 0; }
.m-status-dot.ok  { background: var(--m-success); }
.m-status-dot.err { background: var(--m-warning); }

.m-card-section {
  background: var(--m-surface);
  border-top: 1px solid var(--m-border);
  border-bottom: 1px solid var(--m-border);
  margin-bottom: 12px;
}
.m-form-group { padding: 12px 16px; border-bottom: 1px solid var(--m-border); }
.m-form-group:last-child { border-bottom: none; }
.m-form-label {
  display: block;
  font-family: var(--m-font);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m-muted);
  margin-bottom: 6px;
}

.m-list-body { flex: 1; min-width: 0; }
.m-list-title { font-size: 13px; font-weight: 500; color: var(--m-text); }
.m-list-sub { font-size: 11px; color: var(--m-muted); margin-top: 3px; line-height: 1.4; }

/* ── More grid ─────────────────────────────────────────────── */
.m-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
}
.m-more-card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 16px 13px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 72px;
  cursor: pointer;
  box-shadow: var(--m-shadow-sm);
  transition: border-color 0.15s;
}
.m-more-card:active { transform: scale(0.97); }
.m-more-card-icon { font-size: 18px; margin-bottom: 2px; color: var(--m-gold); }
.m-more-card-icon svg { display: block; }
.m-more-card-title { font-size: 13px; font-weight: 500; color: var(--m-text); }
.m-more-card-sub { font-size: 11px; color: var(--m-muted); line-height: 1.4; }

/* ── FAB ───────────────────────────────────────────────────── */
.m-fab {
  position: fixed;
  bottom: calc(var(--m-nav-height) + env(safe-area-inset-bottom) + 16px);
  right: 16px;
  width: 54px;
  height: 54px;
  background: var(--m-gold);
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(28, 43, 74, 0.35);
  transition: transform 0.25s var(--m-spring);
}
.m-fab:active { transform: scale(0.92); }

/* ── Version link footer ───────────────────────────────────── */
.m-version-link {
  text-align: center;
  padding: 14px;
  font-size: 10px;
  color: var(--m-muted);
}
.m-version-link a {
  color: var(--m-accent);
  text-decoration: none;
  font-weight: 500;
  text-transform: none;
}

/* ── Auth screens (login · signup · Face ID lock) ──────────── */
.m-auth-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--m-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.m-auth-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.m-auth-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
}
.m-auth-mark span {
  border-radius: 7px;
  background: var(--m-gold);
}
.m-auth-mark span:nth-child(2),
.m-auth-mark span:nth-child(3) { opacity: 0.25; }

.m-auth-title {
  font-family: var(--m-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--m-text);
  margin-bottom: 4px;
}
.m-auth-sub {
  font-size: 14px;
  color: var(--m-muted);
  margin-bottom: 22px;
  line-height: 1.5;
}
.m-auth-card .m-input { text-align: left; width: 100%; }
.m-auth-card .m-btn-full { width: 100%; }
.m-auth-error {
  min-height: 18px;
  font-size: 13px;
  color: var(--m-danger);
  margin-bottom: 10px;
  line-height: 1.45;
}
.m-auth-toggle {
  margin-top: 14px;
  font-size: 13px;
  color: var(--m-accent);
}
.m-auth-bio-icon {
  color: var(--m-gold);
  margin-bottom: 14px;
}
.m-auth-bio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--m-muted);
  cursor: pointer;
  text-align: left;
}
.m-auth-bio-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--m-gold);
}
.m-onboard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 14px;
}

/* ── Swipe-to-delete rows ──────────────────────────────────── */
.m-swipe-wrap {
  position: relative;
  overflow: hidden;
}
.m-swipe-del {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 84px;
  background: var(--m-danger);
  color: #fff;
  border: none;
  font-family: var(--m-font);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.m-swipe-row {
  position: relative;
  background: var(--m-bg);
  transition: transform 0.28s var(--m-ease-out);
  touch-action: pan-y;
  will-change: transform;
}

/* ── Property photos ───────────────────────────────────────── */
.m-photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.m-photo-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-text);
}
.m-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-family: var(--m-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--m-accent);
  background: var(--m-accent-dim);
  border: none;
  border-radius: var(--m-radius-full);
  transition: transform 0.12s var(--m-ease);
}
.m-photo-btn:active { transform: scale(0.95); }

.m-photo-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.m-photo-strip::-webkit-scrollbar { display: none; }

.m-photo-thumb {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: var(--m-radius-sm);
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--m-shadow-sm);
}
.m-photo-empty {
  font-size: 12px;
  color: var(--m-muted);
  padding: 8px 0;
}

.m-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 14, 22, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px calc(env(safe-area-inset-bottom) + 24px);
  opacity: 0;
  transition: opacity 0.22s var(--m-ease);
}
.m-photo-viewer.open { opacity: 1; }
.m-photo-viewer img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-lg);
}
.m-photo-viewer-bar {
  display: flex;
  gap: 10px;
}

/* ── Separator ─────────────────────────────────────────────── */
.m-sep {
  height: 1px;
  background: var(--m-border);
  margin: 4px 0;
}

/* Tablet split-view detail pane — JS-injected next to #mobile-content;
   hidden on phones, activated by the ≥768px tier below. */
#m-detail-pane { display: none; }

/* ── Ink (stylus markup viewer + quick-note scribble) ──────── */
.m-ink-viewer { gap: 12px; }

.m-ink-stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;       /* pinch/pan are ours, never page scroll */
  overflow: hidden;
}
.m-ink-frame {
  position: relative;
  transform-origin: center;
}
.m-ink-frame img {
  display: block;
  max-width: none;          /* sized explicitly by the markup code */
  max-height: none;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-lg);
}
.m-ink-canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
  border-radius: var(--m-radius);
}

.m-ink-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-ink-colors {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m-ink-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--m-glass-border);
  padding: 0;
  transition: transform 0.15s var(--m-spring), box-shadow 0.15s var(--m-ease);
}
.m-ink-color.active {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--m-accent);
}
.m-ink-tool { font-size: 13px; }
.m-ink-viewer .m-ink-tool { color: #fff; }   /* tools sit on the dark glass */

.m-scribble-canvas {
  display: block;
  width: 100%;
  height: 200px;
  background: #FFFFFF;      /* notes save on paper-white in both themes */
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  touch-action: none;
}

/* ════════════════════════════════════════════════════════════
   TABLET / WIDE LAYOUT (≥768px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Compact icon rail first (tablet portrait); the ≥1024px tier below
     expands it to icons + side labels (tablet landscape / desktop). */
  :root { --m-sidebar-width: 84px; }

  body { max-width: 100%; margin: 0; }

  #mobile-app { margin-left: var(--m-sidebar-width); }

  #mobile-nav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--m-sidebar-width);
    height: 100dvh;
    max-width: none;
    margin: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: none;
    border-right: 1px solid var(--m-border);
    padding: 16px 0 calc(env(safe-area-inset-bottom) + 8px);
    justify-content: flex-start;
    align-items: stretch;
  }

  .m-nav-btn {
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 4px;
    font-size: 11px;
    border-top: none;
    border-left: 3px solid transparent;
    min-height: 58px;
    width: 100%;
  }

  .m-nav-btn.active {
    border-top-color: transparent;
    border-left-color: var(--m-accent);
  }

  /* Dispatch hero flattened in rail mode */
  .m-nav-btn.dispatch-hero {
    flex: 0 0 auto;
  }
  .m-nav-btn.dispatch-hero .m-nav-dispatch-wrap {
    flex-direction: column;
    margin-top: 0;
    gap: 4px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .m-nav-dispatch-bubble {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border: none;
    box-shadow: none;
  }
  .m-nav-btn.dispatch-hero .m-nav-label {
    font-size: 10px;
  }

  .m-nav-icon { font-size: 14px; }
  .m-nav-label { font-size: 10px; }

  /* The rail has room — the swipe-up drag zone retires (its gesture
     targets a bottom bar that no longer exists here). */
  #m-nav-drag-zone { display: none; }

  #mobile-topbar { padding: env(safe-area-inset-top) 24px 0; }
  #mobile-content { padding-bottom: 32px; }

  .m-sheet {
    left: var(--m-sidebar-width);
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
  }

  .m-kanban-col { flex: 0 0 300px; min-width: 300px; }
  .m-stage-dots { display: none; }
  .m-more-grid { grid-template-columns: repeat(3, 1fr); }
  .m-card { margin: 0 20px 12px; }
  .m-screen-title { font-size: 30px; }
  .m-kpi-val { font-size: 24px; }
  .m-screen-header { padding: 22px 24px 16px; }
  .m-section-label, .m-section-title { padding: 16px 20px 8px; }
  .m-chip-row { padding: 14px 20px; }
  .m-filter-bar { padding: 12px 20px; }
  .m-search-wrap { padding: 12px 20px; }
  .m-kpi-row { padding: 16px 20px; gap: 10px; }
  .m-quick-grid { padding: 14px 20px; }
  .m-dispatch-hero { padding: 16px 20px 0; }
  .m-more-grid { padding: 14px 20px; }
  .m-signal-card { margin: 0 20px 10px; }

  /* ── Split view: master list + persistent detail pane ─────── */
  :root { --m-master-width: 320px; }

  body[data-m-split] #mobile-app {
    display: grid;
    grid-template-columns: var(--m-master-width) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
  }
  body[data-m-split] #mobile-topbar { grid-column: 1 / -1; grid-row: 1; }
  body[data-m-split] #mobile-content {
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto;
    border-right: 1px solid var(--m-border);
    padding-bottom: 96px;   /* clears the master-pane FAB */
  }
  body[data-m-split] #m-detail-pane {
    display: block;
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--m-bg);
    padding: 0 8px calc(env(safe-area-inset-bottom) + 24px);
  }

  .m-pane-detail {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-sm);
    margin: 16px auto;
    max-width: 640px;
    animation: m-screen-in 0.26s var(--m-ease-out) both;
  }
  .m-pane-header  { padding: 18px 18px 12px; }
  .m-pane-actions { padding-bottom: 18px; }

  .m-pane-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--m-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px;
  }

  /* Selected master row mirrors the open detail */
  body[data-m-split] .m-list-item.m-sel { background: var(--m-accent-dim); }
  body[data-m-split] .m-deal-card.m-sel { border-color: var(--m-accent); }

  /* FAB belongs to the master column in split view */
  body[data-m-split] .m-fab {
    left: calc(var(--m-sidebar-width) + var(--m-master-width) - 70px);
    right: auto;
    bottom: 24px;
  }

  /* ── Gesture menu becomes a floating card (opened from More) ── */
  .m-gmenu {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    width: 430px;
    max-width: calc(100vw - var(--m-sidebar-width) - 48px);
    margin: 0;
    border-radius: var(--m-radius-lg);
    padding: 16px 16px 12px;
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
    transition: transform 0.3s var(--m-spring), opacity 0.22s var(--m-ease);
  }
  .m-gmenu.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .m-gmenu-handle { display: none; }

  /* ── Sheets → popovers for small content (confirmations etc.) ── */
  .m-sheet.m-popover {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 400px;
    max-width: calc(100vw - 48px);
    max-height: 70dvh;
    margin: 0;
    border-radius: var(--m-radius-lg);
    padding-bottom: 20px;
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
    transition: transform 0.32s var(--m-ease-out), opacity 0.22s var(--m-ease);
  }
  .m-sheet.m-popover.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.46s var(--m-spring), opacity 0.22s var(--m-ease);
  }
  .m-sheet.m-popover .m-sheet-handle { display: none; }

  /* ── Form/edit sheets → centered modal (not a right-shifted bottom
     sheet). Wider + taller than a popover to hold real forms. ── */
  .m-sheet.m-formsheet {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(620px, calc(100vw - var(--m-sidebar-width) - 48px));
    max-width: none;
    max-height: 86dvh;
    margin: 0;
    border-radius: var(--m-radius-lg);
    padding-bottom: 20px;
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.97);
    transition: transform 0.32s var(--m-ease-out), opacity 0.22s var(--m-ease);
  }
  .m-sheet.m-formsheet.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.46s var(--m-spring), opacity 0.22s var(--m-ease);
  }
  .m-sheet.m-formsheet .m-sheet-handle { display: none; }

  /* ── Dashboard: two balanced columns ───────────────────────── */
  .m-home-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    align-items: start;
  }
}

/* Wider tier (tablet landscape / desktop window): roomier master pane,
   expanded rail with side-by-side icon + label */
@media (min-width: 1024px) {
  :root {
    --m-master-width: 360px;
    --m-sidebar-width: 200px;
  }

  .m-nav-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 20px;
    min-height: 48px;
  }
  .m-nav-label { font-size: 11px; }

  .m-nav-btn.dispatch-hero .m-nav-dispatch-wrap {
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
  }
  .m-nav-dispatch-bubble { width: 24px; height: 24px; font-size: 13px; }
  .m-nav-btn.dispatch-hero .m-nav-label { font-size: 11px; }
}

/* ── Offline banner ─────────────────────────────────────────── */
#m-offline-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #B45309;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s var(--m-ease), padding 0.25s var(--m-ease);
  font-family: var(--m-font);
}
#m-offline-bar.visible {
  max-height: 44px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
}

/* ── Swipe-up drag zone (real element, owns the gesture) ───── */
#m-nav-drag-zone {
  position: fixed;
  bottom: calc(var(--m-nav-height) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  height: 44px;            /* tall enough to clear the 18px dispatch bubble */
  max-width: 430px;
  margin: 0 auto;
  z-index: 82;
  touch-action: none;
  cursor: ns-resize;
}

/* Pill handle removed — it floated across the dispatch bubble.
   The pulsing chevron (::after) remains as the swipe-up affordance. */

/* Chevron — floats at the top of the zone, well above the dispatch
   bubble. Border-drawn (not a text glyph) so it's crisp at 2x/3x and
   renders identically across platforms. */
#m-nav-drag-zone::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-left: 1.5px solid var(--m-accent);
  border-top: 1.5px solid var(--m-accent);
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0.3;
  animation: m-nav-chevron 3s ease-in-out 2s infinite;
}

@keyframes m-nav-chevron {
  0%, 55%, 100% { opacity: 0.3;  transform: translateX(-50%) translateY(0) rotate(45deg); }
  25%            { opacity: 0.7;  transform: translateX(-50%) translateY(-3px) rotate(45deg); }
}

/* ── Gesture menu ──────────────────────────────────────────── */
.m-gmenu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 44, 0.42);   /* match .m-sheet-overlay */
  z-index: 980;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--m-ease);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.m-gmenu-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Drags on the menu or backdrop are gestures, never page scroll */
.m-gmenu-overlay, .m-gmenu {
  touch-action: none;
  overscroll-behavior: contain;
}

.m-gmenu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 430px;
  margin: 0 auto;
  background: var(--m-surface);
  border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
  box-shadow: var(--m-shadow-lg);
  z-index: 981;
  /* top padding + bottom padding clears the nav bar + safe area */
  padding: 12px 16px calc(var(--m-nav-height) + env(safe-area-inset-bottom) + 8px);
  transform: translateY(100%);
  transition: transform 0.3s var(--m-spring);
}
.m-gmenu.open {
  transform: translateY(0);
}

/* SP4: More sheet reads as a frosted Glass Bubble panel. */
.m-gmenu {
  background: var(--m-gb-surface);
  border: 1px solid var(--m-gb-border);
  box-shadow: var(--m-gb-shadow);
  -webkit-backdrop-filter: var(--m-gb-blur);
  backdrop-filter: var(--m-gb-blur);
}
@supports not (backdrop-filter: blur(1px)) { .m-gmenu { background: var(--m-surface); } }

.m-gmenu-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--m-radius-full);
  background: var(--m-border);
  margin: 0 auto 14px;
}

.m-gmenu-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 2px;
}

.m-gmenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.m-gmenu-item {
  background: var(--m-elevated);
  border: none;
  border-radius: var(--m-radius);
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.15s var(--m-ease), transform 0.12s var(--m-ease);
  -webkit-tap-highlight-color: transparent;
}
.m-gmenu-item:active {
  background: var(--m-accent-dim);
  transform: scale(0.95);
}

.m-gmenu-icon {
  color: var(--m-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-gmenu-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--m-text);
  text-align: center;
}

.m-gmenu-sub {
  font-size: 10px;
  color: var(--m-muted);
  text-align: center;
}

.m-gmenu-actions {
  border-top: 1px solid var(--m-border);
  padding-top: 6px;
}

.m-gmenu-action-btn {
  width: 100%;
  background: transparent;
  border: none;
  padding: 13px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 400;
  color: var(--m-text);
  cursor: pointer;
  border-bottom: 1px solid var(--m-border);
  -webkit-tap-highlight-color: transparent;
}
.m-gmenu-action-btn:last-child { border-bottom: none; }
.m-gmenu-action-btn { transition: opacity 0.3s var(--m-ease); }
.m-gmenu-action-btn:active { opacity: 0.6; transition-duration: 0.05s; }

/* ════════════════════════════════════════════════════════════
   MOTION — iOS navigation + press feel (2026-06-12 polish pass)
   Transform/opacity only; respects prefers-reduced-motion below.
   ════════════════════════════════════════════════════════════ */

/* Screen entrance — applied by MAPP.go() on real navigations only,
   never on in-place re-renders (search keystrokes, filter taps).
   Horizontal slide + fade (phone-swipe feel): forward enters from the
   right, back from the left. Transform/opacity only; GPU-accelerated. */
#mobile-content.m-screen-anim > .m-screen {
  animation: m-screen-in 0.26s var(--m-ease-out) both;
}
#mobile-content.m-screen-anim-back > .m-screen {
  animation: m-screen-in-back 0.26s var(--m-ease-out) both;
}
@keyframes m-screen-in {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes m-screen-in-back {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

/* Dispatch live-result card rises in whenever it's un-hidden
   (CSS animations restart on display:none → block). */
#m-dispatch-result-card { animation: m-rise-in 0.24s var(--m-ease-out); }
@keyframes m-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Row press states for tappables that had none */
.m-result-item,
.m-news-item,
.m-alert { transition: background 0.3s var(--m-ease); }
.m-result-item:active,
.m-news-item:active,
.m-alert:active { background: var(--m-elevated); transition-duration: 0.05s; }

.m-deal-card { transition: transform 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease); }
.m-deal-card:active { transform: scale(0.98); transition-duration: 0.08s; }

.m-card[onclick] { transition: transform 0.25s var(--m-ease); }
.m-card[onclick]:active { transform: scale(0.985); transition-duration: 0.08s; }

/* ── Skeleton shimmer (sync/loading placeholders) ───────────── */
.m-skel {
  position: relative;
  overflow: hidden;
  background: var(--m-elevated);
  border-radius: var(--m-radius-sm);
}
.m-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: m-shimmer 1.4s var(--m-ease) infinite;
}
[data-theme="dark"] .m-skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}
@keyframes m-shimmer { to { transform: translateX(100%); } }
.m-skel-thumb { width: 86px; height: 86px; flex-shrink: 0; }
.m-skel-line  { height: 12px; margin: 8px 0; }

/* ── Toast (transient confirmations) ────────────────────────── */
.m-toast {
  position: fixed;
  bottom: calc(var(--m-nav-height) + env(safe-area-inset-bottom) + 18px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--m-gold);
  color: #fff;
  padding: 9px 18px;
  font-family: var(--m-font);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--m-radius-full);
  box-shadow: var(--m-shadow-lg);
  z-index: 999;
  max-width: 300px;
  text-align: center;
  animation: m-toast-in 0.3s var(--m-spring);
  transition: opacity 0.25s var(--m-ease), transform 0.25s var(--m-ease);
}
.m-toast.hide { opacity: 0; transform: translateX(-50%) translateY(8px); }
@keyframes m-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

/* ════════════════════════════════════════════════════════════
   iPad BESPOKE LAYER  (2026-07-04)
   Additive tablet refinement. Everything here is gated ≥768px and
   layered AFTER the original tablet blocks so it wins by source order
   without editing them — the phone layout (<768px) is untouched.

   Two tiers, keyed to real iPad geometry:
     • NARROW  768–1023px  → most iPad portrait: full-width panes,
                              master-detail becomes a push flow.
     • WIDE    ≥1024px     → iPad landscape / large portrait: true
                              3-pane (rail · master · detail).
   ════════════════════════════════════════════════════════════ */

/* ── 1 · Full-navigation sidebar ─────────────────────────────
   The rail has room for every destination, so the phone's "More"
   sheet retires on tablet: mobile-app.js injects the secondary
   destinations + a pinned Settings foot. Hidden on phones. */
.m-nav-btn.m-nav-secondary,
.m-nav-btn.m-nav-foot,
.m-nav-div { display: none; }

@media (min-width: 768px) {
  /* Full list replaces the More entry point on the rail. */
  .m-nav-btn.m-nav-secondary { display: flex; }
  .m-nav-btn.m-nav-foot      { display: flex; margin-top: auto; }

  /* Divider between the primary tabs and the rest of the rail */
  .m-nav-div {
    display: block;
    flex: 0 0 auto;
    height: 1px;
    background: var(--m-border);
    margin: 8px 14px 6px;
  }

  /* A touch tighter than the primary tabs so the whole set fits an
     iPad portrait rail without scrolling; rail still scrolls if not. */
  .m-nav-btn.m-nav-secondary,
  .m-nav-btn.m-nav-foot { min-height: 52px; }
  .m-nav-label { white-space: nowrap; }

  /* Settings foot gets a hairline above it so it reads as pinned */
  .m-nav-btn.m-nav-foot {
    border-top: 1px solid var(--m-border);
    margin-left: 0; margin-right: 0;
  }
}

/* ── 2 · Adaptive master–detail ──────────────────────────────
   The original @768 block makes ALL split screens a 3-column grid.
   That is right for WIDE, cramped for NARROW. Below we (a) narrow the
   push flow for portrait and (b) let the detail breathe on wide. */

/* NARROW (portrait): list is full width; detail slides over it. */
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-m-split] #mobile-app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;         /* topbar fixed, list scrolls internally */
  }
  body[data-m-split] #mobile-content {
    grid-column: auto;
    grid-row: auto;
    border-right: none;
    padding-bottom: 96px;
  }

  body[data-m-split] #m-detail-pane {
    display: block;
    position: fixed;
    top: calc(var(--m-topbar) + env(safe-area-inset-top));
    left: var(--m-sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 55;
    background: var(--m-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 10px calc(env(safe-area-inset-bottom) + 24px);
    transform: translateX(100%);
    transition: transform 0.32s var(--m-ease-out);
    will-change: transform;
    box-shadow: -14px 0 40px -24px rgba(20, 28, 44, 0.45);
  }
  body[data-m-split].m-detail-open #m-detail-pane { transform: none; }

  /* Detail fills the pushed pane rather than floating in a 640 card */
  body[data-m-split] .m-pane-detail { max-width: 760px; margin: 14px auto; }

  /* Any master-column FAB returns to the viewport corner in push mode */
  body[data-m-split] .m-fab { left: auto; right: 22px; bottom: 24px; }
}

/* Back control — only meaningful in the push (narrow) flow */
.m-pane-back {
  display: none;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--m-accent);
  font-family: var(--m-font);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 6px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-pane-back svg { width: 18px; height: 18px; }
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-m-split] .m-pane-back { display: inline-flex; }
}

/* WIDE (landscape / large portrait): give the detail more reading width
   and a hairline gutter so the 3-pane reads as one continuous surface. */
@media (min-width: 1024px) {
  body[data-m-split] #m-detail-pane { padding-left: 14px; padding-right: 14px; }
  .m-pane-detail { max-width: 720px; }
}

/* ── 3 · Shared bespoke-layout helpers ───────────────────────
   Screens opt into these for canvas-filling grids (used by the
   per-screen section that follows). Auto-fill so columns scale with
   the available width across both tiers and on rotation. */
@media (min-width: 768px) {
  .m-tgrid       { display: grid; gap: 12px; align-items: start; }
  .m-tgrid-auto  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .m-tgrid-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-tgrid-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Comfortable reading measure for inherently single-stream screens */
  .m-tread { max-width: 720px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .m-tgrid-w3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-tgrid-w4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 4 · Per-screen bespoke layouts ──────────────────────────
   Scoped with body[data-screen="…"] (set by MAPP.go). All ≥768px only;
   phones keep every single-column screen byte-for-byte. */

/* HOME — a centered dashboard instead of a top-left column beside a
   void. KPIs become an even 4-up band (2×2 in portrait); the two
   content columns sit beneath at a comfortable measure. */
@media (min-width: 768px) {
  body[data-screen="home"] .m-screen { max-width: 1060px; margin: 0 auto; }
  body[data-screen="home"] .m-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  body[data-screen="home"] .m-kpi { padding: 20px 16px; }
  body[data-screen="home"] .m-home-cols { gap: 0 24px; margin-top: 4px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-screen="home"] .m-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* LIST SCREENS (listings · research · contractors · alerts) — the lone
   column becomes a canvas-filling grid of the real items. Column count
   scales with width and rotation via auto-fill. */
@media (min-width: 768px) {
  .m-tgrid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    align-items: start;
    padding: 8px 20px 32px;
  }
  /* grid gap + padding own the spacing — drop per-item margins */
  .m-tgrid-list > * { margin: 0; }

  /* Alerts are a chronological stream: a calm, centered 2-up rather
     than a dense multi-column wall. */
  .m-tgrid-alerts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1080px;
    margin-inline: auto;
  }
}

/* SETTINGS — a centered, comfortable column (the iPad Settings detail
   pattern) rather than controls stretched across the whole canvas.
   The rail already plays the role of the categories sidebar. */
@media (min-width: 768px) {
  body[data-screen="settings"] .m-screen { max-width: 760px; margin: 0 auto; }
}

/* SIGNALS — the live feed fills the canvas as a card grid (wrapper is
   emitted inside #m-signal-list by renderSignalList, so it survives
   filter re-renders). Cards drop their phone margins in the grid. */
@media (min-width: 768px) {
  #m-signal-list > .m-tgrid-list > .m-signal-card { margin: 0; }
}

/* PIPELINE — no longer a split screen: the kanban spreads full-width
   across the canvas and scrolls freely (phone's one-column snap is
   dropped); tapping a deal opens its detail as a centered form-sheet. */
@media (min-width: 768px) {
  body[data-screen="pipeline"] .m-kanban-scroll {
    scroll-snap-type: none;
    padding: 6px 20px 24px;
  }
  body[data-screen="pipeline"] .m-kanban-col { scroll-snap-align: none; }
}

/* ============================================================
   CONDUCTOR CARDS — .cc-* (shared markup/classes with the hub;
   see Tessera-hub/js/conductor-cards.js for the twin renderer,
   Tessera-hub/styles/conductor.css for the hub styling of the
   same classes). ConductorCards (js/conductor-cards.js) owns all
   DOM for these — this file only styles what it produces.
   ============================================================ */
.cc-run { display: flex; flex-direction: column; gap: 10px; }

.cc-final {
  font-size: 13px;
  line-height: 1.65;
  color: var(--m-text);
}

.cc-card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-left: 3px solid var(--m-warning);
  border-radius: var(--m-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-card.cc-confirm { border-left-color: var(--m-warning); }
.cc-card.cc-draft   { border-left-color: var(--m-accent); }
.cc-card.cc-error   { border-left-color: var(--m-danger); }
.cc-card.cc-empty   { border-left-color: var(--m-border); color: var(--m-muted); font-size: 12px; padding: 14px; }

.cc-card.cc-card--applied,
.cc-card.cc-draft--approved { border-left-color: var(--m-success); }
.cc-card.cc-card--dismissed { opacity: 0; transition: opacity 0.2s var(--m-ease); }

.cc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-card-icon { display: inline-flex; color: var(--m-gold); flex-shrink: 0; }
.cc-card-title { font-size: 13px; font-weight: 600; color: var(--m-text); flex: 1; min-width: 0; }

.cc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--m-radius-full);
  white-space: nowrap;
}
.cc-badge-warn   { color: var(--m-warning); background: var(--m-sig-nod-bg); }
.cc-badge-ok     { color: var(--m-success); background: var(--m-sig-hot-bg); }
.cc-badge-danger { color: var(--m-danger);  background: var(--m-sig-cmbs-bg); }

.cc-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cc-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: var(--m-elevated);
  border-radius: var(--m-radius-sm);
}
.cc-step-n {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--m-border);
  color: var(--m-text);
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.cc-step-main { flex: 1; min-width: 0; }
.cc-step-summary { font-size: 12px; color: var(--m-text); font-weight: 500; }
.cc-step-preview { font-size: 11px; color: var(--m-muted); margin-top: 2px; word-break: break-word; }
.cc-step-status { font-size: 10px; color: var(--m-muted); flex-shrink: 0; margin-top: 2px; white-space: nowrap; }
.cc-step.cc-step--applied .cc-step-n { background: var(--m-success); color: #fff; }
.cc-step.cc-step--applied .cc-step-status { color: var(--m-success); }
.cc-step.cc-step--failed .cc-step-n { background: var(--m-danger); color: #fff; }
.cc-step.cc-step--failed .cc-step-status { color: var(--m-danger); }
.cc-step.cc-step--undone { opacity: 0.6; }

.cc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--m-font);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  min-height: 44px;
  border-radius: var(--m-radius-sm);
  border: none;
  cursor: pointer;
}
.cc-btn.cc-btn-sm { min-height: 32px; padding: 5px 10px; font-size: 11px; }
.cc-btn-primary { background: var(--m-gold); color: #fff; }
.cc-btn-ghost   { background: transparent; color: var(--m-muted); border: 1px solid var(--m-border); }
.cc-applied-note { display: flex; }
.cc-footnote { font-size: 10px; color: var(--m-muted); }

.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--m-text);
  background: var(--m-elevated);
  border-radius: var(--m-radius-full);
  padding: 6px 10px;
}
.cc-chip-tick { color: var(--m-success); font-weight: 700; }
/* Compound selector to out-rank .cc-btn.cc-btn-sm (same class list per the
   card contract's undo-chip markup) — this must win to look chip-sized. */
.cc-btn.cc-chip-undo { padding: 2px 8px; min-height: 26px; }

.cc-draft-meta { font-size: 11px; color: var(--m-muted); }
.cc-draft-body {
  font-size: 12px;
  line-height: 1.6;
  color: var(--m-text);
  white-space: pre-wrap;
  background: var(--m-elevated);
  border-radius: var(--m-radius-sm);
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
}

/* ============================================================
   CONDUCTOR FRONT DOOR (Home) + CHAT — composer/transcript/chips/
   rail styling shared by screens/home.js (composer + chips only,
   no transcript of its own) and screens/chat.js (owns the full
   transcript + thread history + the Present Mode veil below).
   Also covers the iPad two-pane (home only).
   ============================================================ */
.m-conductor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.m-conductor-headctl { display: flex; gap: 8px; flex-shrink: 0; padding-top: 2px; }

.m-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--m-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--m-text);
  background: var(--m-elevated);
  border: 1px solid var(--m-border-subtle);
  border-radius: var(--m-radius-full);
  padding: 7px 12px;
  min-height: 30px;
}
.m-pill-btn-active { color: #fff; background: var(--m-gold); border-color: var(--m-gold); }

.m-conductor-banner {
  margin: 0 16px 12px;
  padding: 12px 14px;
  background: var(--m-sig-nod-bg);
  border: 1px solid var(--m-warning);
  border-radius: var(--m-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.m-conductor-banner-text { font-size: 12px; color: var(--m-text); flex: 1; min-width: 160px; }

.m-conductor-cols { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 14px; }

.m-conductor-convo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 2px;
}
.m-conductor-turn { display: flex; }
.m-conductor-turn-user { justify-content: flex-end; }
.m-conductor-turn-assistant { justify-content: flex-start; }
.m-conductor-turn-user .m-conductor-turn-body {
  background: var(--m-gold);
  color: #fff;
  border-radius: var(--m-radius) var(--m-radius) 4px var(--m-radius);
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 86%;
}
.m-conductor-turn-assistant .m-conductor-turn-body { width: 100%; }

.m-conductor-empty { font-size: 12px; color: var(--m-muted); text-align: center; padding: 24px 10px; line-height: 1.6; }

.m-conductor-compose {
  background: var(--m-surface);
  border: 1px solid var(--m-border-subtle);
  border-radius: var(--m-radius);
  padding: 10px;
  box-shadow: var(--m-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-conductor-compose--disabled { opacity: 0.6; }
.m-conductor-compose-row { display: flex; gap: 8px; }

.m-conductor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-conductor-chip {
  font-family: var(--m-font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--m-text);
  background: var(--m-elevated);
  border: 1px solid var(--m-border-subtle);
  border-radius: var(--m-radius-full);
  padding: 8px 13px;
  min-height: 36px;
}
.m-conductor-chip:active { background: var(--m-border); }

/* Pending-changes + run-log rail: tablet-only (see @768 block below) —
   phone keeps the lean convo + composer + chips flow. */
.m-conductor-pending-block, .m-conductor-runlog-block { display: none; }

.m-conductor-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: var(--m-surface);
  border: 1px solid var(--m-border-subtle);
  border-radius: var(--m-radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
}
.m-conductor-rail-item-text { font-size: 12px; color: var(--m-text); flex: 1; min-width: 0; }
.m-conductor-rail-item-meta { font-size: 10px; color: var(--m-muted); display: flex; gap: 6px; flex-shrink: 0; }
.m-conductor-rail-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* SP4: pill controls + glass card radius across the conductor surface. */
.m-filter-pill { border-radius: var(--m-gb-control-radius); }
.m-conductor-rail-item { border-radius: var(--m-gb-radius); }
.m-conductor-rail-err { color: var(--m-danger); }
.m-btn-sm { font-size: 10px; padding: 5px 9px; min-height: 28px; }

/* Present Mode: the chat transcript is now part of the merged Home canvas and
   has no standalone nav entry to hide, so the old nav-button rule is retired.
   The veil below is the SOLE Present-Mode protection: the transcript veils
   itself behind Face ID regardless of how Home is reached (swipe, deep link,
   the composer hand-off via MCopilot.ask) — see screens/chat.js _threadInnerHtml. */

/* Hold-to-reveal veil — Present Mode's chat-history cover (screens/chat.js) */
.m-conductor-veil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 22px 16px;
  color: var(--m-muted);
  background: var(--m-elevated);
  border-radius: var(--m-radius);
  border: 1px dashed var(--m-border-strong);
  user-select: none;
  -webkit-user-select: none;
}
.m-conductor-veil-label { font-size: 12px; font-weight: 600; color: var(--m-text); }
.m-conductor-veil-sub { font-size: 10px; }
.m-conductor-veil-holding { background: var(--m-border-subtle); transition: background 0.5s var(--m-ease); }

/* ── Phone (<768px): chat-first Home — ChatGPT/Claude-style single
   surface. The transcript fills the space between the header and the
   bottom nav and scrolls internally (newest pinned at the bottom); the
   composer stays parked at the bottom, with the starter chips as a thin
   scrollable row just above it. No more page-level up/down flipping to
   see the message you just sent. ── */
@media (max-width: 767px) {
  body[data-screen="home"] #mobile-content {
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  body[data-screen="home"] .m-screen {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  body[data-screen="home"] .m-conductor-cols {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: calc(var(--m-nav-height) + env(safe-area-inset-bottom) + 12px);
  }
  /* transcript = the flexible, scrolling region; newest stays at the bottom */
  body[data-screen="home"] .m-conductor-convo {
    order: 1;
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  /* starter chips: one non-wrapping scrollable row above the composer */
  body[data-screen="home"] .m-conductor-chips {
    order: 2;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  body[data-screen="home"] .m-conductor-chip { flex-shrink: 0; }
  /* composer parked at the bottom */
  body[data-screen="home"] .m-conductor-compose { order: 3; flex-shrink: 0; }
}

/* ── iPad two-pane (>=768px): mirrors the .m-dispatch-cols /
   .m-home-cols pattern — pure CSS on the home-local wrapper, no
   SPLIT_SCREENS/detail-pane machinery. Left = conversation +
   composer; right = chips + pending-changes list + run log. ── */
@media (min-width: 768px) {
  body[data-screen="home"] .m-screen { max-width: 1180px; margin: 0 auto; }
  body[data-screen="home"] .m-conductor-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    grid-template-areas:
      "convo   chips"
      "compose pending"
      "compose runlog";
    gap: 14px 24px;
    align-items: start;
  }
  body[data-screen="home"] .m-conductor-convo   { grid-area: convo; max-height: 46vh; }
  body[data-screen="home"] .m-conductor-compose { grid-area: compose; }
  body[data-screen="home"] .m-conductor-chips   { grid-area: chips; }
  body[data-screen="home"] .m-conductor-pending-block { display: block; grid-area: pending; }
  body[data-screen="home"] .m-conductor-runlog-block  { display: block; grid-area: runlog; }
}
@media (min-width: 1024px) {
  body[data-screen="home"] .m-conductor-cols { gap: 14px 32px; }
}

/* ============================================================
   GLASS BUBBLE utilities (SP4) — container-level frosting only.
   Blur is never applied per-row. @supports falls back to solid;
   prefers-reduced-motion respected. Tokens live in :root above.
   ============================================================ */
.m-glass-bubble {
  background: var(--m-gb-surface);
  border: 1px solid var(--m-gb-border);
  border-radius: var(--m-gb-radius);
  box-shadow: var(--m-gb-shadow);
  -webkit-backdrop-filter: var(--m-gb-blur);
  backdrop-filter: var(--m-gb-blur);
}
.m-gb-wash { position: relative; }
.m-gb-wash::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--m-gb-wash); pointer-events: none; z-index: 0;
}
.m-gb-wash > * { position: relative; z-index: 1; }
.m-gb-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.5; pointer-events: none; z-index: 0; }
.m-gb-blob--cobalt { background: radial-gradient(circle, rgba(59,111,224,0.30), rgba(59,111,224,0) 70%); }
[data-theme="dark"] .m-gb-blob--cobalt { background: radial-gradient(circle, rgba(91,141,239,0.28), rgba(91,141,239,0) 70%); }

@supports not (backdrop-filter: blur(1px)) {
  .m-glass-bubble { background: var(--m-surface); }
}
@media (prefers-reduced-motion: reduce) {
  .m-gb-blob { animation: none !important; }
}

/* ── Group launcher screens (SP4): Find / Reach / Close ─────── */
.m-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 0 8px;
}
.m-group-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  min-height: 104px;
  text-align: left;
  cursor: pointer;
  color: var(--m-text);
  transition: transform 0.12s var(--m-ease);
}
.m-group-card:active { transform: scale(0.97); }
.m-group-card-icon { color: var(--m-gold); display: inline-flex; }
.m-group-card-label { font-size: 15px; font-weight: 600; }
.m-group-card-sub { font-size: 12px; color: var(--m-muted); }
@media (min-width: 768px) {
  .m-group-grid { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
}

/* ── Home auto-nav "Open" chip (SP4) — offered, never auto-yanked ── */
.m-chat-open-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 7px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--m-gold);
  background: var(--m-accent-dim);
  border: 1px solid var(--m-gb-border);
  border-radius: var(--m-gb-control-radius);
  cursor: pointer;
  transition: transform 0.12s var(--m-ease);
}
.m-chat-open-chip:active { transform: scale(0.96); }

/* Home chat: attach tray + button. No margin-bottom here — the parent
   .m-conductor-compose is a flex column with gap: 8px, so a margin would
   double the spacing above the textarea. */
.m-chat-attach-row { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chat-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 5px 8px; border-radius: 10px; background: var(--m-elevated); font-size: 12px; color: var(--m-text); }
.m-chat-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-chat-chip-x { color: var(--m-muted); font-size: 15px; line-height: 1; padding: 0 2px; background: none; border: 0; }
.m-chat-attach-btn { display: inline-flex; align-items: center; justify-content: center; }
.m-chat-attach-btn[data-disabled="1"] { opacity: 0.5; pointer-events: none; }
/* Rejected-file notice (over-cap / unreadable) — mobile has no toast surface. */
.m-chat-attach-banner { font-size: 12px; line-height: 1.35; color: var(--m-danger); }

/* Home chat: previous-chats drawer */
.m-chat-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.m-chat-drawer.open { pointer-events: auto; }
.m-chat-drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.38); opacity: 0; transition: opacity 200ms ease; }
.m-chat-drawer.open .m-chat-drawer-scrim { opacity: 1; }
.m-chat-drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(82vw, 320px);
  background: var(--m-surface); border-right: 1px solid var(--m-border);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px);
  transform: translateX(-100%); transition: transform 220ms var(--m-ease, ease); z-index: 1;
}
.m-chat-drawer.open .m-chat-drawer-panel { transform: translateX(0); }
.m-chat-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m-chat-drawer-title { font-size: 13px; font-weight: 600; color: var(--m-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.m-chat-drawer-close { font-size: 22px; line-height: 1; color: var(--m-muted); background: none; border: 0; padding: 4px 8px; }
.m-chat-drawer-new { margin-bottom: 10px; }
.m-chat-drawer-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.m-chat-drawer-row { display: flex; align-items: center; border-radius: 10px; }
.m-chat-drawer-row.is-active { background: var(--m-elevated); }
.m-chat-drawer-open { flex: 1; min-width: 0; text-align: left; font-size: 14px; color: var(--m-text); padding: 11px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; }
.m-chat-drawer-del { color: var(--m-muted); font-size: 18px; padding: 6px 10px; background: none; border: 0; }
.m-chat-drawer-empty { color: var(--m-muted); font-size: 14px; padding: 12px 10px; }