/* cntct-mobile.css — mobile overlay + iOS 26 glass surface system
 * Doc 53 canonical spec: 6 surfaces, no tabs, SF Pro Display, pure black #000000
 * Loaded LAST so overrides win.
 */

/* ━━━━━━ FONTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SF Pro Display / Text — load via CDN fonts
   Fallback: -apple-system (actual SF Pro on iOS/macOS), then Space Grotesk
   SF Mono — system mono on Apple devices, JetBrains Mono elsewhere
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/sf-pro-display?styles=18891,18893,18894,18889,18890&display=swap');
@import url('https://fonts.cdnfonts.com/css/sf-pro-text?styles=18916,18918,18919,18913,18914&display=swap');

/* ━━━━━━ CSS CUSTOM PROPERTIES (mobile surface system) ━━━━━━━━
   Pure black backdrop per doc 53.
   Glass: rgba(255,255,255,0.08) + blur(40px) saturate(180%) + 1px border.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --cm-font-display: 'SF Pro Display', -apple-system, 'Space Grotesk', system-ui, sans-serif;
  --cm-font-text:    'SF Pro Text',    -apple-system, 'Space Grotesk', system-ui, sans-serif;
  --cm-font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, 'Berkeley Mono', monospace;
  --cm-black:        #000000;
  --cm-gold:         #c9a96e;
  --cm-glass-bg:     rgba(255, 255, 255, 0.08);
  --cm-glass-border: rgba(255, 255, 255, 0.12);
  --cm-glass-blur:   blur(40px) saturate(180%);
  --cm-text-primary:   rgba(255, 255, 255, 0.95);
  --cm-text-secondary: rgba(255, 255, 255, 0.55);
  --cm-text-tertiary:  rgba(255, 255, 255, 0.35);
  /* Spring physics — iOS standard 0.3s spring */
  --cm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cm-spring-fast: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ━━━━━━ SURFACE ROOT — full-screen overlay ━━━━━━━━━━━━━━━━━━━ */
#cmMobileRoot {
  display: none; /* JS shows on mobile */
  position: fixed;
  inset: 0;
  z-index: 1800;
  /* iOS safe area */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none; /* children handle their own pointer events */
}

/* Show only on mobile viewport */
@media (max-width: 768px) {
  #cmMobileRoot {
    display: block;
  }
}

/* Shock-open fade */
#cmMobileRoot.cm-root--shock-open {
  opacity: 0;
}
#cmMobileRoot.cm-root--visible {
  opacity: 1;
  transition: opacity 220ms ease;
}

/* ━━━━━━ SAFE AREA SPACERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-safe-top {
  height: max(env(safe-area-inset-top, 0px), 44px);
}
.cm-safe-bottom {
  height: max(env(safe-area-inset-bottom, 0px), 24px);
}

/* ━━━━━━ BASE SURFACE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-surface {
  position: absolute;
  inset: 0;
  pointer-events: all;
  -webkit-overflow-scrolling: touch;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SURFACE 1 — HOME
   Pure black bg, greeting headline, 3 glass cards, bottom search bar
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-surface--home {
  background: var(--cm-black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cm-home-inner {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* pad bottom for search bar */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* "Good morning." — SF Pro Display 32pt weight 400, 80px from top */
.cm-greeting {
  font-family: var(--cm-font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--cm-text-primary);
  padding: 0 20px;
  margin-top: 0; /* safe-top spacer provides the 80px */
  letter-spacing: -0.02em;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms var(--cm-spring);
}

.cm-greeting--visible {
  opacity: 1;
  transform: translateY(0);
}

.cm-greeting--refresh {
  opacity: 0.4;
}

/* Today's 3 cards container */
.cm-today-cards {
  flex: 1;
  padding: 20px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Loading skeleton */
.cm-card-skeleton {
  height: 80px;
  border-radius: 16px;
  background: var(--cm-glass-bg);
  border: 1px solid var(--cm-glass-border);
  animation: cm-skeleton-pulse 1.4s ease infinite;
}

@keyframes cm-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Empty/error state for cards */
.cm-cards-empty {
  color: var(--cm-text-secondary);
  font-family: var(--cm-font-text);
  font-size: 15px;
  text-align: center;
  padding: 40px 20px;
  line-height: 1.5;
}

/* ━━━━━━ GLASS CARD (Surface 1 contact cards) ━━━━━━━━━━━━━━━━━━ */
.cm-glass-card {
  background: var(--cm-glass-bg);
  border: 1px solid var(--cm-glass-border);
  -webkit-backdrop-filter: var(--cm-glass-blur);
  backdrop-filter: var(--cm-glass-blur);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Spring physics entrance */
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: none;
  will-change: transform, opacity;
}

.cm-glass-card--animate {
  animation: cm-card-spring 0.4s var(--cm-spring) forwards;
}

@keyframes cm-card-spring {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cm-glass-card:active {
  background: rgba(255, 255, 255, 0.13);
  transform: scale(0.985);
  transition: transform 100ms ease, background 100ms ease;
}

.cm-card-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Gold avatar */
.cm-card-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cm-gold) 0%, #8b6a3e 100%);
  color: #000;
  font-family: var(--cm-font-text);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-card-body {
  flex: 1;
  min-width: 0;
}

/* SF Pro Text 17pt for name */
.cm-card-name {
  font-family: var(--cm-font-text);
  font-size: 17px;
  font-weight: 500;
  color: var(--cm-text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* title + company — 0.55 opacity */
.cm-card-meta {
  font-family: var(--cm-font-text);
  font-size: 13px;
  color: var(--cm-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-card-reason {
  font-family: var(--cm-font-text);
  font-size: 12px;
  color: var(--cm-text-tertiary);
  margin-top: 4px;
}

/* ━━━━━━ 5 STATUS ICONS (doc 53) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ○ cold (gray), ● sent (gold), ◐ opened (red), ★ replied (green), ✕ bounced (gray)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-status-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.cm-status--cold    { color: rgba(255,255,255,0.25); }
.cm-status--sent    { color: var(--cm-gold); }
.cm-status--opened  { color: #ef4444; }
.cm-status--replied { color: #22c55e; }
.cm-status--bounced { color: rgba(255,255,255,0.25); }

/* ━━━━━━ BOTTOM SEARCH BAR (Surface 1) ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-search-bar-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  /* Glass surface for search bar */
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: cm-searchbar-fade 0.5s 0.45s ease forwards;
  opacity: 0;
}

@keyframes cm-searchbar-fade {
  to { opacity: 1; }
}

.cm-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--cm-glass-bg);
  border: 1px solid var(--cm-glass-border);
  -webkit-backdrop-filter: var(--cm-glass-blur);
  backdrop-filter: var(--cm-glass-blur);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--cm-font-text);
  font-size: 15px;
  color: var(--cm-text-secondary);
  box-sizing: border-box;
}

.cm-search-bar:active {
  background: rgba(255, 255, 255, 0.12);
  transition: background 100ms ease;
}

.cm-search-icon {
  flex-shrink: 0;
  color: var(--cm-text-tertiary);
}

.cm-search-placeholder {
  flex: 1;
  text-align: left;
  font-size: 15px;
  color: var(--cm-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SURFACE 2 — CARD SHEET
   Slides up from bottom with spring physics (iOS 0.3s spring)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-surface--sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* starts off-screen */
  top: 10%;
  background: #0a0a0a;
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  backdrop-filter: blur(40px) saturate(200%);
  border-top: 1px solid var(--cm-glass-border);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s var(--cm-spring);
  overflow: hidden;
  pointer-events: all;
  /* sheet sits above HOME */
  z-index: 10;
}

.cm-surface--sheet-open {
  transform: translateY(0);
}

/* Drag handle */
.cm-sheet-drag-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 12px auto 4px;
  cursor: grab;
  flex-shrink: 0;
}

.cm-sheet-drag-handle:active {
  cursor: grabbing;
}

.cm-sheet-inner {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100% - 28px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Loading spinner */
.cm-sheet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.cm-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--cm-gold);
  border-radius: 50%;
  animation: cm-spin 0.8s linear infinite;
}

@keyframes cm-spin {
  to { transform: rotate(360deg); }
}

.cm-sheet-error {
  padding: 24px 20px;
  color: #f87171;
  font-family: var(--cm-font-text);
  font-size: 14px;
}

/* Sheet header */
.cm-sheet-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cm-sheet-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cm-gold) 0%, #8b6a3e 100%);
  color: #000;
  font-family: var(--cm-font-text);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-sheet-contact-info {
  flex: 1;
  min-width: 0;
}

.cm-sheet-name {
  font-family: var(--cm-font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--cm-text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-sheet-meta {
  font-family: var(--cm-font-text);
  font-size: 13px;
  color: var(--cm-text-secondary);
}

.cm-sheet-territory {
  font-family: var(--cm-font-mono);
  font-size: 11px;
  color: var(--cm-text-tertiary);
  margin-top: 2px;
}

.cm-sheet-close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: var(--cm-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.cm-sheet-close:active {
  background: rgba(255, 255, 255, 0.14);
}

/* Status row */
.cm-sheet-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cm-sheet-client-label {
  font-family: var(--cm-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--cm-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cm-sheet-status-text {
  font-family: var(--cm-font-text);
  font-size: 12px;
  color: var(--cm-text-secondary);
  text-transform: capitalize;
}

.cm-sheet-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 8px;
}

/* Sections */
.cm-sheet-section {
  padding: 16px 20px 0;
}

.cm-sheet-section-label {
  font-family: var(--cm-font-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cm-text-tertiary);
  margin-bottom: 10px;
}

/* Draft */
.cm-draft-loading {
  padding: 20px 0;
}

.cm-draft-pulse {
  font-family: var(--cm-font-text);
  font-size: 14px;
  color: var(--cm-text-tertiary);
  animation: cm-skeleton-pulse 1.4s ease infinite;
}

.cm-draft-textarea {
  display: none; /* shown after prefetch */
  width: 100%;
  min-height: 100px;
  background: var(--cm-glass-bg);
  border: 1px solid var(--cm-glass-border);
  border-radius: 10px;
  color: var(--cm-text-primary);
  font-family: var(--cm-font-text);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  resize: none;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
}

.cm-draft-textarea:focus {
  border-color: var(--cm-gold);
  /* Subtle gold glow on focus */
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

/* Tone chips */
.cm-tone-chips,
.cm-from-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cm-tone-chip,
.cm-from-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cm-text-secondary);
  font-family: var(--cm-font-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.cm-tone-chip--active,
.cm-from-chip--active {
  background: rgba(201, 169, 110, 0.15);
  border-color: rgba(201, 169, 110, 0.4);
  color: var(--cm-gold);
}

/* Email display */
.cm-sheet-email-display {
  font-family: var(--cm-font-mono);
  font-size: 13px;
  color: var(--cm-text-secondary);
  padding: 8px 0;
}

/* Sheet actions */
.cm-sheet-actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
}

.cm-send-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  background: var(--cm-gold);
  border: none;
  border-radius: 12px;
  color: #000;
  font-family: var(--cm-font-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms ease, transform 100ms var(--cm-spring-fast);
  -webkit-tap-highlight-color: transparent;
  /* Subtle gold glow */
  box-shadow: 0 0 20px rgba(201, 169, 110, 0.25);
}

.cm-send-btn:active {
  opacity: 0.8;
  transform: scale(0.97);
}

.cm-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cm-snooze-btn {
  min-height: 48px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--cm-text-secondary);
  font-family: var(--cm-font-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.cm-snooze-btn:active {
  background: rgba(255, 255, 255, 0.10);
}

.cm-no-email {
  flex: 1;
  display: flex;
  align-items: center;
  color: var(--cm-text-tertiary);
  font-family: var(--cm-font-text);
  font-size: 14px;
}

/* Event rows in sheet */
.cm-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cm-event-row:last-child { border-bottom: none; }

.cm-event-type {
  font-family: var(--cm-font-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--cm-text-secondary);
  text-transform: capitalize;
  min-width: 56px;
}

.cm-event-subject {
  font-family: var(--cm-font-text);
  font-size: 12px;
  color: var(--cm-text-tertiary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SURFACE 3 — SEARCH RESULTS
   Fullscreen overlay, slides up from below as you type
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-surface--search {
  background: var(--cm-black);
  transform: translateY(100%);
  transition: transform 0.28s var(--cm-spring-fast);
  overflow: hidden;
  pointer-events: all;
  z-index: 20;
}

.cm-surface--search-open {
  transform: translateY(0);
}

.cm-search-surface-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Search header */
.cm-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(12px + 2px);
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cm-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.cm-search-icon--input {
  position: absolute;
  left: 14px;
  color: var(--cm-text-tertiary);
  pointer-events: none;
  flex-shrink: 0;
}

.cm-search-input {
  width: 100%;
  height: 44px;
  background: var(--cm-glass-bg);
  border: 1px solid var(--cm-glass-border);
  border-radius: 10px;
  color: var(--cm-text-primary);
  font-family: var(--cm-font-text);
  font-size: 16px; /* 16px+ prevents iOS auto-zoom */
  padding: 0 16px 0 40px;
  outline: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.cm-search-input:focus {
  border-color: var(--cm-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}

.cm-search-input::placeholder {
  color: var(--cm-text-tertiary);
}

/* Safari search input clear button */
.cm-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

.cm-search-cancel {
  background: transparent;
  border: none;
  color: var(--cm-gold);
  font-family: var(--cm-font-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 4px 8px 8px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Search results scroll area */
.cm-search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Hint state */
.cm-search-hint {
  padding: 48px 20px;
  text-align: center;
}

.cm-hint-text {
  font-family: var(--cm-font-text);
  font-size: 15px;
  color: var(--cm-text-tertiary);
  line-height: 1.5;
}

/* Loading state */
.cm-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

/* Empty / error states */
.cm-search-empty {
  padding: 40px 20px;
  text-align: center;
}

.cm-search-empty-msg {
  font-family: var(--cm-font-text);
  font-size: 15px;
  color: var(--cm-text-secondary);
}

.cm-search-error {
  padding: 20px;
  color: #f87171;
  font-family: var(--cm-font-text);
  font-size: 14px;
  background: rgba(248, 113, 113, 0.08);
  border-radius: 10px;
  margin: 16px;
}

/* Results group label */
.cm-results-group-label {
  font-family: var(--cm-font-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cm-text-tertiary);
  padding: 16px 20px 8px;
}

/* Result rows */
.cm-result-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease;
}

.cm-result-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.cm-result-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cm-gold) 0%, #8b6a3e 100%);
  color: #000;
  font-family: var(--cm-font-text);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-result-brand-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(201, 169, 110, 0.12);
  color: var(--cm-gold);
  font-family: var(--cm-font-text);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-result-info {
  flex: 1;
  min-width: 0;
}

.cm-result-name {
  font-family: var(--cm-font-text);
  font-size: 16px;
  font-weight: 500;
  color: var(--cm-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-result-meta {
  font-family: var(--cm-font-text);
  font-size: 13px;
  color: var(--cm-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-result-chevron {
  color: rgba(255, 255, 255, 0.2);
  font-size: 22px;
  flex-shrink: 0;
}

/* Research CTA in search */
.cm-research-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 16px;
  padding: 16px;
  background: rgba(57, 255, 20, 0.05);
  border: 1px solid rgba(57, 255, 20, 0.18);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease;
}

.cm-research-cta:active {
  background: rgba(57, 255, 20, 0.09);
}

.cm-research-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.cm-research-body {
  flex: 1;
  min-width: 0;
}

.cm-research-label {
  font-family: var(--cm-font-text);
  font-size: 14px;
  font-weight: 600;
  color: #39ff14;
}

.cm-research-sub {
  font-family: var(--cm-font-text);
  font-size: 12px;
  color: rgba(57, 255, 20, 0.55);
  margin-top: 3px;
}

/* ━━━━━━ TOAST ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cm-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--cm-text-primary);
  font-family: var(--cm-font-text);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 10px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms var(--cm-spring-fast);
  white-space: nowrap;
  max-width: calc(100vw - 40px);
}

.cm-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cm-toast--success { border-color: rgba(34, 197, 94, 0.3); }
.cm-toast--error   { border-color: rgba(248, 113, 113, 0.3); color: #fca5a5; }
.cm-toast--info    { border-color: rgba(255, 255, 255, 0.1); }

/* (Removed: an earlier rule killed the bottom tab nav based on a stale "no tabs"
    iteration of the spec. Final spec keeps 4 tabs: Today/Contacts/Search/Activity.) */

/* ═══ iOS SAFE AREA + VIEWPORT ═══ */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 768px) {

  /* ═══ TYPOGRAPHY (Constitution C1) ═══ */
  /* html,body needs !important — cntct-core.css + v31-fixes.css both set
     `html, body { font-family: var(--font-body) }` and the shared
     specificity wars don't let cascade order win. */
  html, body, input, textarea, button, select {
    font-family: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  code, pre, .mono, .ticker {
    font-family: 'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;
  }

  /* ═══ TAP TARGETS — 44px minimum (Apple HIG) ═══ */
  button,
  a.btn,
  .btn,
  .nav-item,
  .tab,
  .toggle,
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    box-sizing: border-box;
  }
  /* Form inputs — bigger touch zone, prevent iOS zoom on focus */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px !important;  /* 16+ prevents auto-zoom */
    padding: 12px 14px;
  }

  /* ═══ SIDEBAR — proper mobile drawer ═══ */
  /* All transform/width !important — cntct-sidebar.css inline-overrides them. */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
    width: min(85vw, 320px) !important;
  }
  .sidebar.expanded {
    transform: translateX(0) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
  /* Backdrop */
  .sidebar.expanded::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .sb-mobile-toggle {
    min-width: 44px;
    min-height: 44px;
    top: max(env(safe-area-inset-top), 12px) !important;
  }
  .sidebar .nav-item,
  .sidebar a {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* ═══ APP CONTAINER — generous breathing ═══ */
  .app, .main-content, .page-content {
    padding: 60px 16px 16px !important;
  }
  /* Reserve space at top for floating hamburger */
  .top-nav, .topbar {
    padding-left: 60px !important;
  }

  /* D7: Hide legacy desktop DOM elements on mobile — mobile has its own equivalents */
  #navHamburger,
  #daSearchInput {
    display: none !important;
  }

  /* ═══ COMPOSE WIZARD — vertical stack ═══ */
  .outreach-wizard,
  .compose-wizard,
  .wizard-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .wizard-step,
  .outreach-step,
  .compose-step {
    width: 100% !important;
    margin-bottom: 16px;
  }
  .step-indicator-row,
  .wizard-progress {
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Send button — full-width, sticky-bottom feel */
  .compose-send-btn,
  .outreach-send {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
    margin-top: 12px;
  }

  /* ═══ OUTREACH DRAWER (.od-*) — full-screen mobile ═══ */
  .outreach-drawer,
  .od-drawer,
  [class*="outreach-drawer"] {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }
  .od-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 16px 16px calc(env(safe-area-inset-top) + 16px) 16px;
    background: var(--bg, #09090D);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  }
  .od-header h2 { font-size: 18px; margin: 0; }
  .od-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text, #fff);
  }
  .od-body { padding: 16px; }
  .od-section { margin-bottom: 20px; }
  .od-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    color: var(--muted, #999);
  }
  /* Client pills — stack vertically, big tap targets */
  .od-client-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }
  .od-client-pill {
    width: 100% !important;
    min-height: 64px !important;
    padding: 14px 18px !important;
    text-align: left;
  }
  /* Sender cards — stack, big avatar, readable */
  .od-sender-card {
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
  }
  .od-sender-avatar {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
    font-size: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Generate / Next button — full-width sticky bottom */
  .od-generate-btn {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0);
    width: 100%;
    min-height: 52px;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 -8px 16px rgba(0,0,0,0.3);
  }
  .od-generate-btn:disabled {
    opacity: 0.4;
  }

  /* ═══ CONTACT CARDS — full-bleed + readable ═══ */
  .contact-card,
  .ct-card,
  .brand-contact-row {
    width: 100%;
    margin: 0 0 8px 0;
    padding: 14px 16px;
    border-radius: 8px;
  }
  .contact-card .name,
  .ct-card .name {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
  }
  .contact-card .meta,
  .ct-card .meta {
    font-size: 13px;
    line-height: 1.4;
    color: var(--dim, #888);
  }

  /* ═══ BRAND SEARCH BAR — bigger, primary surface ═══ */
  .brand-search,
  .global-search,
  input[placeholder*="search" i],
  input[placeholder*="Search" i] {
    width: 100%;
    height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px 12px 44px;  /* leave room for icon */
    border-radius: 10px;
  }

  /* ═══ TABLES — horizontal scroll instead of break ═══ */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ═══ MODALS — full-screen on mobile ═══ */
  .modal,
  .dialog,
  .overlay-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 16px;
  }

  /* ═══ HIDE elements that don't make sense on mobile (pass 1) ═══ */
  .desktop-only,
  .brain-map-canvas,  /* D3 brain map: defer to desktop */
  .terminal-tickers   /* multi-column ticker rows */
  {
    display: none !important;
  }

  /* ═══ TYPOGRAPHY scale — denser ═══ */
  h1 { font-size: 24px; line-height: 1.2; }
  h2 { font-size: 20px; line-height: 1.25; }
  h3 { font-size: 17px; line-height: 1.3; }
  body { font-size: 15px; line-height: 1.45; }

  /* ═══ Focus ring — visible but not bulky ═══ */
  :focus-visible {
    outline: 2px solid var(--accent, #c9a96e);
    outline-offset: 2px;
  }
}

/* ═══ TINY (≤480px) ═══ */
@media (max-width: 480px) {
  .app, .main-content, .page-content {
    padding: 56px 12px 12px !important;
  }
  h1 { font-size: 22px; }
  .compose-send-btn, .outreach-send {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 12px);
    box-shadow: 0 -8px 16px rgba(0,0,0,0.3);
  }
}

/* ═══ Landscape phone — recover horizontal space ═══ */
@media (max-width: 768px) and (orientation: landscape) {
  .top-nav, .topbar { padding-left: 56px !important; }
  .app { padding-top: 48px !important; }
}

/* ══════════════════════════════════════════════════════════════
   DAY 3 — Bottom Tab Nav + Mobile Route Pages
   Constitution C3: gold primary (#c9a96e), neon green secondary (#39FF14)
   ══════════════════════════════════════════════════════════════ */

/* ─── Bottom Tab Nav ─────────────────────────────────────────── */
.cntct-bottom-nav {
  display: none; /* mobile-only — shown below */
}

@media (max-width: 768px) {
  /* True iOS-26 translucent glass tab bar */
  .cntct-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(0, 0, 0, 0.55);
    border-top: 0.5px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    gap: 0;
  }

  .cntct-bottom-nav.hidden {
    transform: translateY(100%);
  }

  .cntct-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    min-width: 44px; /* Apple HIG */
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    transition: color 150ms;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .cntct-tab:active {
    background: rgba(255, 255, 255, 0.04);
  }

  .cntct-tab--active {
    color: var(--accent, #c9a96e);
  }

  /* Gold underline for active tab */
  .cntct-tab--active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--accent, #c9a96e);
    border-radius: 0 0 2px 2px;
  }

  .cntct-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .cntct-tab-icon svg {
    transition: transform 150ms;
  }

  .cntct-tab--active .cntct-tab-icon svg {
    transform: translateY(-1px);
  }

  .cntct-tab-label {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  /* Reserve bottom space for the nav bar */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── Mobile Route View — pure black canvas, SF Pro on iOS ───── */
#mobileRouteView {
  display: none;
  position: fixed;
  inset: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  top: 0;
  z-index: 1500;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Space Grotesk', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.95);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* radial gold tint behind everything — gives the glass somewhere to refract from */
#mobileRouteView::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(201, 169, 110, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(201, 169, 110, 0.04) 0%, transparent 60%);
  z-index: 0;
}

#mobileRouteView > * { position: relative; z-index: 1; }

/* ─── Page structure ─────────────────────────────────────────── */
.mr-page {
  min-height: 100%;
  padding: max(env(safe-area-inset-top, 0px), 12px) 0 32px 0;
}

.mr-header {
  padding: 28px 20px 20px;
}

/* Editorial display title — "Good morning." vibe */
.mr-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 38px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 4px 0;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* UI title (back-button pages, list headers) — sans, smaller */
.mr-title--ui {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mr-sub {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ─── Back button ────────────────────────────────────────────── */
.mr-back-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: var(--accent, #c9a96e);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Search bar — frosted glass, sticky ─────────────────────── */
.mr-search-bar-wrap {
  padding: 10px 16px 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.mr-search-input {
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 16px; /* prevents iOS zoom */
  padding: 0 16px;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease-out;
}

.mr-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.mr-search-input:focus,
.mr-search-input:focus-visible {
  border-color: rgba(201, 169, 110, 0.5);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.10), 0 0 24px rgba(201, 169, 110, 0.15);
  outline: none;
}

/* ─── Section label — sticky frosted, Apple Contacts feel ───── */
.mr-section-label {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
  padding: 14px 20px 8px;
  position: sticky;
  top: 64px; /* below sticky search */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mr-section-label .mr-section-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
  font-feature-settings: 'tnum';
}

/* ─── List container — Apple Contacts grouped style ─────────── */
.mr-list {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Glass section card grouping multiple rows */
.mr-list--grouped {
  margin: 0 16px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  overflow: hidden;
}

/* ─── Contact row — Apple Contacts feel ─────────────────────── */
.mr-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  cursor: pointer;
  min-height: 64px;
  transition: background 200ms ease-out, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.mr-list--grouped .mr-contact-card:last-child { border-bottom: 0; }

/* Standalone (non-grouped) row variant — keep its own glass */
.mr-list:not(.mr-list--grouped) > .mr-contact-card {
  margin: 0 16px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.mr-contact-card:active {
  background: rgba(255, 255, 255, 0.10);
  transform: scale(0.985);
}

.mr-contact-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b87a 0%, #8b6a3e 100%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(201, 169, 110, 0.18);
  letter-spacing: -0.01em;
}

.mr-contact-info {
  flex: 1;
  min-width: 0;
}

.mr-contact-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-contact-meta {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.50);
  margin-top: 1px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-contact-brand {
  font-size: 12px;
  color: rgba(201, 169, 110, 0.85);
  margin-top: 2px;
  font-weight: 500;
}

.mr-contact-email {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 1px;
  letter-spacing: -0.02em;
}

/* Inline ★ score badge in name row */
.mr-contact-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-contact-star {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(201, 169, 110, 0.95);
  background: rgba(201, 169, 110, 0.10);
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

/* Inline status line — "OA pitched · 5d ago" */
.mr-contact-statusline {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 11px;
  color: rgba(201, 169, 110, 0.75);
  margin-top: 2px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Status dot at right edge */
.mr-contact-status {
  font-size: 14px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.mr-contact-status--cold { color: rgba(255, 255, 255, 0.25); }
.mr-contact-status--sent { color: #c9a96e; }
.mr-contact-status--opened { color: #ff6b6b; }
.mr-contact-status--replied { color: #39ff14; }
.mr-contact-status--bounced { color: rgba(255, 255, 255, 0.25); }

/* ─── Brand card ─────────────────────────────────────────────── */
.mr-brand-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 16px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  cursor: pointer;
  min-height: 64px;
  transition: background 200ms ease-out, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.mr-brand-card:active {
  background: rgba(255, 255, 255, 0.10);
  transform: scale(0.985);
}

/* ─── Today hero — "Today's 3" stacked glass cards ───────────── */
.mr-hero-cards {
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mr-hero-card {
  position: relative;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease-out;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.mr-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.mr-hero-card:active {
  background: rgba(255, 255, 255, 0.10);
  transform: scale(0.985);
}

.mr-hero-card-label {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(201, 169, 110, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.mr-hero-card-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9a96e;
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.6);
}

.mr-hero-card-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.02em;
  line-height: 1.15;
  position: relative;
}

.mr-hero-card-sub {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  letter-spacing: -0.01em;
  position: relative;
}

.mr-hero-card-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.40);
  margin-top: 12px;
  letter-spacing: -0.02em;
  position: relative;
  display: flex;
  gap: 12px;
}

/* Empty state hero — when there's no Today's 3 yet */
.mr-hero-empty {
  margin: 8px 16px 24px;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  text-align: center;
}

.mr-hero-empty-glyph {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  color: rgba(201, 169, 110, 0.6);
  line-height: 1;
  margin-bottom: 12px;
}

.mr-hero-empty-line {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.mr-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(201, 169, 110, 0.12);
  color: var(--accent, #c9a96e);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mr-brand-info {
  flex: 1;
  min-width: 0;
}

.mr-brand-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #f0f0f0);
}

.mr-brand-meta {
  font-size: 12px;
  color: var(--dim, #888);
  margin-top: 2px;
}

.mr-card-chevron {
  color: rgba(255, 255, 255, 0.25);
  font-size: 20px;
  flex-shrink: 0;
}

/* ─── Research CTA ───────────────────────────────────────────── */
.mr-research-cta {
  margin: 16px;
  padding: 16px 20px;
  background: rgba(57, 255, 20, 0.06);
  border: 1px solid rgba(57, 255, 20, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms;
  -webkit-tap-highlight-color: transparent;
}

.mr-research-cta:active {
  background: rgba(57, 255, 20, 0.1);
}

.mr-research-label {
  font-size: 14px;
  font-weight: 600;
  color: #39ff14;
}

.mr-research-sub {
  font-size: 12px;
  color: rgba(57, 255, 20, 0.6);
  margin-top: 4px;
}

/* ─── Contact detail ─────────────────────────────────────────── */
.mr-contact-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 24px;
}

.mr-contact-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #c9a96e) 0%, #8b6a3e 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mr-contact-detail-info {
  flex: 1;
  min-width: 0;
}

.mr-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #f0f0f0);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.mr-detail-title-meta {
  font-size: 13px;
  color: var(--dim, #888);
  margin: 0;
}

.mr-detail-territory {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

/* ─── Action buttons ─────────────────────────────────────────── */
.mr-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 20px;
}

.mr-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 150ms, background 150ms;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  width: 100%;
}

.mr-action-btn:active { opacity: 0.75; }

.mr-action-btn--primary {
  background: var(--accent, #c9a96e);
  color: #000;
}

.mr-action-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f0f0f0);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mr-action-btn--email {
  background: rgba(57, 255, 20, 0.08);
  border: 1px solid rgba(57, 255, 20, 0.25);
  color: #39ff14;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  justify-content: flex-start;
  padding-left: 16px;
}

.mr-action-btn--call {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text, #f0f0f0);
  justify-content: flex-start;
  padding-left: 16px;
}

.mr-action-btn--linkedin {
  background: rgba(10, 102, 194, 0.15);
  border: 1px solid rgba(10, 102, 194, 0.3);
  color: #78b8ff;
}

.mr-action-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 0 20px 24px;
}

.mr-action-row .mr-action-btn {
  flex: 1;
  width: auto;
}

/* ─── Sections ───────────────────────────────────────────────── */
.mr-section {
  padding: 0 20px 16px;
}

/* ─── Engagement score ───────────────────────────────────────── */
.mr-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 4px;
}

.mr-score-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--dim, #888);
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}

.mr-score-num.mr-score-positive {
  color: var(--accent, #c9a96e);
}

.mr-score-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mr-score-item {
  font-size: 11px;
  color: var(--dim, #888);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 7px;
  border-radius: 4px;
}

/* ─── Client status ──────────────────────────────────────────── */
.mr-client-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-client-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim, #888);
  min-width: 36px;
}

.mr-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.mr-status-badge--grey { background: rgba(255,255,255,0.06); color: #888; }
.mr-status-badge--blue { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.mr-status-badge--amber { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.mr-status-badge--green { background: rgba(57, 255, 20, 0.12); color: #39ff14; }
.mr-status-badge--gold { background: rgba(201, 169, 110, 0.15); color: #c9a96e; }
.mr-status-badge--dim { background: rgba(255,255,255,0.04); color: #555; }

.mr-status-select {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text, #f0f0f0);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  min-height: 36px;
  cursor: pointer;
  outline: none;
}

/* ─── Event history ──────────────────────────────────────────── */
.mr-event-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mr-event-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-event-row:last-child { border-bottom: none; }

.mr-event-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.mr-event-info {
  flex: 1;
  min-width: 0;
}

.mr-event-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f0f0f0);
  text-transform: capitalize;
}

.mr-event-subject {
  font-size: 12px;
  color: var(--dim, #888);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-event-intent {
  font-size: 11px;
  color: var(--accent, #c9a96e);
  margin-top: 2px;
}

/* ─── Brand detail ───────────────────────────────────────────── */
.mr-brand-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 16px;
}

.mr-brand-detail-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(201, 169, 110, 0.12);
  color: var(--accent, #c9a96e);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mr-detail-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #f0f0f0);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.mr-brand-detail-category {
  font-size: 12px;
  color: var(--accent, #c9a96e);
  margin-bottom: 6px;
}

.mr-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mr-tag {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim, #888);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ─── Brand stats ────────────────────────────────────────────── */
.mr-brand-stats-row {
  display: flex;
  gap: 0;
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mr-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 0;
}

.mr-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #f0f0f0);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

.mr-stat-lbl {
  font-size: 10px;
  color: var(--dim, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Filter row ─────────────────────────────────────────────── */
.mr-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mr-filter-row::-webkit-scrollbar { display: none; }

.mr-filter-chips {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.mr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 20px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--dim, #888);
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms;
  -webkit-tap-highlight-color: transparent;
}

.mr-chip--active {
  background: rgba(201, 169, 110, 0.15);
  border-color: rgba(201, 169, 110, 0.35);
  color: var(--accent, #c9a96e);
}

.mr-sort-select {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text, #f0f0f0);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  min-height: 32px;
  cursor: pointer;
  outline: none;
}

/* ─── Runs ───────────────────────────────────────────────────── */
.mr-run-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms;
  -webkit-tap-highlight-color: transparent;
}

.mr-run-card:active { background: rgba(255, 255, 255, 0.08); }

.mr-run-brand {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #f0f0f0);
  margin-bottom: 6px;
}

.mr-run-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.mr-run-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
}

.mr-run-status--completed, .mr-run-status--done {
  background: rgba(57, 255, 20, 0.1);
  color: #39ff14;
}

.mr-run-status--running {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

.mr-run-status--abandoned, .mr-run-status--failed {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

.mr-run-status--unknown {
  background: rgba(255, 255, 255, 0.06);
  color: #888;
}

.mr-run-stats {
  font-size: 12px;
  color: var(--dim, #888);
}

/* Run detail */
.mr-run-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 20px;
}

.mr-run-stats-grid {
  display: flex;
  padding: 0 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mr-run-date {
  font-size: 12px;
  color: var(--dim, #888);
  padding: 8px 20px;
}

.mr-phase-list {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mr-phase-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim, #888);
  flex-shrink: 0;
  margin-top: 5px;
}

.mr-phase-row--complete .mr-phase-dot { background: #39ff14; }
.mr-phase-row--running .mr-phase-dot { background: #fbbf24; }
.mr-phase-row--failed .mr-phase-dot { background: #f87171; }

.mr-phase-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f0f0f0);
}

.mr-phase-msg {
  font-size: 12px;
  color: var(--dim, #888);
  margin-top: 2px;
}

/* ─── Signal rows ────────────────────────────────────────────── */
.mr-signal-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-signal-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #c9a96e);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mr-signal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 2px;
}

.mr-signal-brand {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #f0f0f0);
}

.mr-signal-detail {
  font-size: 12px;
  color: var(--dim, #888);
  line-height: 1.4;
}

/* ─── History rows ───────────────────────────────────────────── */
.mr-history-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-history-icon {
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.5;
}

.mr-history-icon.opened { opacity: 1; color: #39ff14; }

.mr-history-info {
  flex: 1;
  min-width: 0;
}

.mr-history-to {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f0f0f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-history-subject {
  font-size: 12px;
  color: var(--dim, #888);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-history-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 2px;
}

/* ─── Shared ─────────────────────────────────────────────────── */
.mr-ts {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.mr-loading {
  padding: 48px 20px;
  text-align: center;
  color: var(--dim, #888);
  font-size: 14px;
}

.mr-empty {
  padding: 48px 20px;
  text-align: center;
}

.mr-empty--inline {
  padding: 16px 0;
}

.mr-empty-icon {
  font-size: 32px;
  opacity: 0.3;
  margin-bottom: 8px;
}

.mr-empty-msg {
  font-size: 14px;
  color: var(--dim, #888);
  line-height: 1.5;
}

.mr-error {
  padding: 20px;
  color: #f87171;
  font-size: 13px;
  background: rgba(248, 113, 113, 0.08);
  border-radius: 8px;
  margin: 16px;
}

.mr-search-results {
  padding-bottom: 24px;
}

.mr-event-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.mr-event-badge--opened { background: rgba(57, 255, 20, 0.1); color: #39ff14; }
.mr-event-badge--clicked { background: rgba(201, 169, 110, 0.12); color: #c9a96e; }
.mr-event-badge--bounced { background: rgba(248, 113, 113, 0.1); color: #f87171; }

/* Tier badges in contact cards */
.ct-tier {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--dim, #888);
}

.ct-tier--t1 { background: rgba(201, 169, 110, 0.2); color: var(--accent, #c9a96e); }
.ct-tier--t2 { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }

/* ══════════════════════════════════════════════════════════════
   CONTACT DETAIL — spec-aligned glass rebuild (line 5520)
   ══════════════════════════════════════════════════════════════ */

/* sticky frosted top bar (back + ⋯) */
.mr-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(env(safe-area-inset-top, 0px), 8px) 12px 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}

.mr-back-btn {
  background: transparent;
  border: 0;
  color: rgba(201, 169, 110, 0.95);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 150ms;
}
.mr-back-btn:active { opacity: 0.6; }

.mr-more-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 150ms, transform 100ms;
}
.mr-more-btn:active { background: rgba(255,255,255,0.16); transform: scale(0.92); }

/* HERO */
.mr-detail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 20px;
}
.mr-detail-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b87a 0%, #8b6a3e 100%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    0 8px 32px rgba(201, 169, 110, 0.28),
    0 0 64px rgba(201, 169, 110, 0.12);
}
.mr-detail-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 6px 0;
  line-height: 1.1;
}
.mr-detail-meta {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.01em;
  line-height: 1.4;
  max-width: 320px;
}
.mr-star {
  color: rgba(201, 169, 110, 0.95);
  font-feature-settings: 'tnum';
  font-weight: 500;
  white-space: nowrap;
}

/* CONTACT METHODS — glass rows with cyan email */
.mr-methods { margin-top: 8px; }

.mr-method {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  min-height: 60px;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  font: inherit;
  transition: background 150ms;
}
.mr-list--grouped .mr-method:last-child { border-bottom: 0; }
.mr-method:active { background: rgba(255, 255, 255, 0.06); }

.mr-method-glyph {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.mr-method--email .mr-method-glyph { background: rgba(79, 172, 254, 0.18); color: #4FACFE; }
.mr-method--call  .mr-method-glyph { background: rgba(57, 255, 20, 0.16); color: #39FF14; }
.mr-method--linkedin .mr-method-glyph {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  font-style: italic;
}

.mr-method-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mr-method-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
}
.mr-method-val {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-method--email .mr-method-val { color: #4FACFE; }
.mr-method-action {
  font-size: 13px;
  font-weight: 500;
  color: rgba(201, 169, 110, 0.85);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* PER-CLIENT STATUS rows */
.mr-client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  min-height: 56px;
  flex-wrap: wrap;
}
.mr-list--grouped .mr-client-row:last-child { border-bottom: 0; }

.mr-client-pill {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}

.mr-client-status { font-size: 16px; line-height: 1; flex-shrink: 0; }
.mr-client-status-label {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mr-client-status-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: -0.01em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-client-change {
  background: transparent;
  border: 0;
  color: rgba(201, 169, 110, 0.85);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 6px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-left: auto;
  flex-shrink: 0;
  min-height: 36px;
}
.mr-client-change:active { color: rgba(201, 169, 110, 1); }

/* ENGAGEMENT — bar + delta + breakdown */
.mr-engagement {
  padding: 18px 20px;
}
.mr-engagement-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.mr-engagement-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  overflow: hidden;
}
.mr-engagement-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a96e 0%, #d4b87a 100%);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(201, 169, 110, 0.4);
  transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-engagement-num {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  font-feature-settings: 'tnum';
}
.mr-engagement-num-of {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.40);
  margin-left: 2px;
}
.mr-engagement-delta {
  font-size: 12px;
  font-weight: 500;
  color: #39FF14;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}
.mr-engagement-breakdown {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.mr-engagement-touch {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: -0.02em;
}

/* BRAND LINK PILL */
.mr-brand-link-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 16px;
  padding: 12px 16px;
  background: rgba(201, 169, 110, 0.08);
  border: 0.5px solid rgba(201, 169, 110, 0.22);
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  color: rgba(201, 169, 110, 0.95);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.01em;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 150ms;
  -webkit-tap-highlight-color: transparent;
}
.mr-brand-link-pill:active { background: rgba(201, 169, 110, 0.14); }
.mr-brand-link-pill-arrow { font-size: 14px; }

/* HISTORY THREAD — chronological glass timeline */
.mr-thread { padding: 0; }

.mr-thread-row {
  display: grid;
  grid-template-columns: 70px 30px 1fr;
  align-items: start;
  gap: 0;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.mr-list--grouped .mr-thread-row:last-child { border-bottom: 0; }

/* vertical guideline behind dots */
.mr-thread-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(70px + 14px);
  top: 28px;
  bottom: -1px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201,169,110,0.30), rgba(201,169,110,0.05));
}

.mr-thread-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.02em;
  padding-top: 4px;
  text-align: right;
  padding-right: 10px;
}

.mr-thread-dot {
  display: flex;
  justify-content: center;
}
.mr-thread-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 169, 110, 0.16);
  border: 0.5px solid rgba(201, 169, 110, 0.32);
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
  z-index: 1;
}

.mr-thread-body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
  line-height: 1.4;
  padding-left: 8px;
}

/* D5: Brand detail contact list safe-area — last contact must not hide behind bottom nav */
#brandContactsContainer {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
}

/* ACTION ROW pills at bottom of detail */
.mr-detail-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 32px;
  flex-wrap: wrap;
}
.mr-pill {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  transition: background 200ms, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-pill:active { background: rgba(255, 255, 255, 0.14); transform: scale(0.97); }
.mr-pill--primary {
  background: linear-gradient(135deg, #c9a96e 0%, #8b6a3e 100%);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.30);
}
.mr-pill--primary:active { background: linear-gradient(135deg, #b8985f 0%, #7a5d36 100%); }

/* ══════════════════════════════════════════════════════════════
   TOP BAR — client switcher pill + avatar
   ══════════════════════════════════════════════════════════════ */
.mr-topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(env(safe-area-inset-top, 0px), 8px) 12px 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}

.mr-topbar-menu {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms;
  flex-shrink: 0;
  font-weight: 300;
  line-height: 1;
}
.mr-topbar-menu:active { background: rgba(255, 255, 255, 0.10); }

.mr-topbar-client {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.10);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  padding: 6px 10px 6px 8px;
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 auto;
  min-height: 32px;
  transition: background 150ms;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mr-topbar-client:active { background: rgba(255, 255, 255, 0.16); }

.mr-topbar-client-pill {
  background: linear-gradient(135deg, #c9a96e 0%, #8b6a3e 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(201, 169, 110, 0.3);
}
.mr-topbar-client-caret {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}

.mr-topbar-avatar {
  background: rgba(255, 255, 255, 0.10);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.mr-topbar-avatar:active { background: rgba(255, 255, 255, 0.18); }
.mr-topbar-avatar-glyph {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
}

/* CLIENT SWITCHER DROPDOWN */
.mr-client-switcher-dropdown {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: rgba(20, 20, 26, 0.94);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  z-index: 8000;
  padding: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: switcherDrop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes switcherDrop {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.mr-client-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.95);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms;
  min-height: 44px;
}
.mr-client-switcher-item:active { background: rgba(255, 255, 255, 0.10); }
.mr-client-switcher-item--active { background: rgba(201, 169, 110, 0.10); }

.mr-client-switcher-pill {
  background: linear-gradient(135deg, #c9a96e 0%, #8b6a3e 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 8px;
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.mr-client-switcher-name {
  flex: 1;
  font-weight: 500;
}
.mr-client-switcher-check {
  color: rgba(201, 169, 110, 1);
  font-size: 14px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   COMPOSE — bottom-sheet overlay (#/compose/:id)
   ══════════════════════════════════════════════════════════════ */
.mr-compose-sheet {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.mr-compose-sheet--open { pointer-events: auto; }

.mr-compose-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 280ms ease-out, backdrop-filter 280ms ease-out;
}
.mr-compose-sheet--open .mr-compose-backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.mr-compose-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 92vh;
  background: rgba(20, 20, 26, 0.94);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border-top: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px 20px 0 0;
  padding: 8px 0 max(env(safe-area-inset-bottom, 0px), 16px) 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.6);
}
.mr-compose-sheet--open .mr-compose-panel { transform: translateY(0); }

/* iOS-style drag handle */
.mr-compose-handle {
  width: 36px;
  height: 5px;
  background: rgba(255, 255, 255, 0.30);
  border-radius: 3px;
  margin: 6px auto 12px;
  flex-shrink: 0;
}

.mr-compose-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.mr-compose-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background 150ms;
}
.mr-compose-close:active { background: rgba(255, 255, 255, 0.10); }

.mr-compose-from {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(201, 169, 110, 0.85);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-compose-send {
  background: linear-gradient(135deg, #c9a96e 0%, #8b6a3e 100%);
  border: 0;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 8px 18px;
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  min-height: 36px;
  box-shadow: 0 2px 12px rgba(201, 169, 110, 0.30);
  transition: opacity 150ms, transform 100ms;
}
.mr-compose-send:disabled { opacity: 0.40; box-shadow: none; cursor: not-allowed; }
.mr-compose-send:active:not(:disabled) { transform: scale(0.96); }

.mr-compose-to {
  padding: 14px 20px;
  font-size: 14px;
  letter-spacing: -0.01em;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mr-compose-to-label { font-size: 11px; color: rgba(255, 255, 255, 0.40); font-weight: 600; letter-spacing: 0.04em; }
.mr-compose-to-name  { color: rgba(255, 255, 255, 0.95); font-weight: 500; }
.mr-compose-to-email { color: rgba(79, 172, 254, 0.85); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

.mr-compose-tones {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.mr-compose-tone {
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.60);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 8px 14px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms, color 200ms, border-color 200ms;
  min-height: 36px;
}
.mr-compose-tone--active {
  background: rgba(201, 169, 110, 0.18);
  border-color: rgba(201, 169, 110, 0.45);
  color: rgba(201, 169, 110, 1);
}

.mr-compose-subject,
.mr-compose-body {
  width: 100%;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.96);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  letter-spacing: -0.01em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.mr-compose-subject {
  padding: 14px 20px 10px;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.mr-compose-subject::placeholder { color: rgba(255, 255, 255, 0.30); font-weight: 400; }

.mr-compose-body {
  flex: 1;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  min-height: 240px;
}
.mr-compose-body::placeholder { color: rgba(255, 255, 255, 0.30); }

.mr-compose-recos {
  padding: 10px 20px 4px;
  font-size: 12px;
  color: rgba(255, 215, 100, 0.70);
  letter-spacing: -0.01em;
}
.mr-compose-recos:empty { display: none; }

/* Cross-thread context — last 3 sends, glass section under body */
.mr-compose-context {
  padding: 12px 20px 8px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.mr-compose-context:empty { display: none; }
.mr-compose-context-label {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: 8px;
}
.mr-compose-context-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.01em;
}
.mr-compose-context-when {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  width: 60px;
}
.mr-compose-context-what {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   BRAND DETAIL — glass polish + multi-brand paste UI
   ══════════════════════════════════════════════════════════════ */
.mr-detail-avatar--brand {
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.22) 0%, rgba(139, 106, 62, 0.30) 100%) !important;
  color: #c9a96e !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
}

.mr-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
.mr-brand-tag {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  background: rgba(201, 169, 110, 0.10);
  border: 0.5px solid rgba(201, 169, 110, 0.22);
  border-radius: 10px;
  color: rgba(201, 169, 110, 0.85);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mr-brand-stats { padding: 12px 0; }
.mr-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.mr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  border-right: 0.5px solid rgba(255, 255, 255, 0.06);
}
.mr-stat:last-child { border-right: 0; }
.mr-stat-num {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  font-feature-settings: 'tnum';
}
.mr-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.mr-filter-row {
  display: flex;
  gap: 6px;
  padding: 8px 16px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mr-filter-row::-webkit-scrollbar { display: none; }
.mr-chip {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  min-height: 32px;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.mr-chip--active {
  background: rgba(201, 169, 110, 0.18);
  border-color: rgba(201, 169, 110, 0.45);
  color: rgba(201, 169, 110, 0.95);
}

.mr-sort-select {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}

.mr-show-more {
  text-align: center;
  padding: 14px;
  margin: 8px 16px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(201, 169, 110, 0.85);
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms;
}
.mr-show-more:active { background: rgba(255, 255, 255, 0.08); }

/* MULTI-BRAND PASTE — preflight all + queue */
.mr-multibrand-hero {
  text-align: center;
  padding: 20px 24px 12px;
}
.mr-multibrand-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
}
.mr-multibrand-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.mr-multibrand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  min-height: 56px;
}
.mr-list--grouped .mr-multibrand-row:last-child { border-bottom: 0; }
.mr-multibrand-loading {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
}
.mr-multibrand-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mr-multibrand-info b {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}
.mr-multibrand-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.02em;
}

/* RUN cards (active progress bar) */
.mr-run-card {
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms;
}
.mr-list--grouped .mr-run-card:last-child { border-bottom: 0; }
.mr-run-card:active { background: rgba(255, 255, 255, 0.06); }

.mr-run-brand {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.mr-run-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
}
.mr-run-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
}
.mr-run-status--running   { background: rgba(201, 169, 110, 0.18); color: #c9a96e; }
.mr-run-status--queued    { background: rgba(79, 172, 254, 0.18); color: #4FACFE; }
.mr-run-status--completed { background: rgba(57, 255, 20, 0.14);  color: #39FF14; }
.mr-run-status--failed,
.mr-run-status--abandoned { background: rgba(255, 107, 107, 0.18); color: #ff6b6b; }
.mr-run-pct {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(201, 169, 110, 0.85);
  font-feature-settings: 'tnum';
}
.mr-run-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0;
}
.mr-run-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a96e 0%, #d4b87a 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.5);
  transition: width 600ms ease-out;
}
.mr-run-stats {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.02em;
}
.mr-detail-topbar-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
  flex: 1;
  text-align: center;
}

/* SKELETON */
.mr-detail-loading { padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mr-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
.mr-skeleton--avatar { width: 84px; height: 84px; border-radius: 50%; }
.mr-skeleton--line   { width: 60%; height: 24px; }
.mr-skeleton--short  { width: 40%; height: 14px; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   V3 PAPER AESTHETIC OVERLAY — appended last for cascade priority
   Per docs/journey/58-V3-DESIGN-TOKENS.md
   This file ends with this block; everything above is the dark scaffold
   from earlier passes. The overlay re-skins to v3 cream paper.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* PAPER — main canvas */
  --paper:      #F7F5F1;
  --paper-2:    #F0EBE0;
  --paper-3:    #E8E2D7;
  --paper-elev: #FBFAF6;

  /* INK — text + dark accents */
  --ink:     #0B0B0C;
  --ink-2:   #2A2A2C;
  --ink-3:   #5C5B57;
  --ink-4:   #8C8A82;   /* icons/decorative only — fails WCAG AA body text */
  --ink-5:   #B6B2A6;
  /* WCAG AA compliant secondary text (4.5:1 on --paper) */
  --ink-mid: #4A4A4C;
  --ink-dim: #6A6A6C;

  /* ACCENTS */
  --signal:      #C1272D;
  --signal-tint: rgba(193, 39, 45, 0.08);
  --teal:        #2F3F33;
  --ochre:       #876C3F;

  /* RULES */
  --rule:      rgba(11, 11, 12, 0.10);
  --rule-soft: rgba(11, 11, 12, 0.06);

  /* TYPE */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* Live signal dot (for "● LIVE WIRE", section kickers, hot indicators) */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  animation: livePulse 2s infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(193,39,45,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(193,39,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(193,39,45,0); }
}

/* ─── ROUTE VIEW — paper canvas (overrides dark) ──────────────────── */
@media (max-width: 768px) {
  body { background: var(--paper) !important; }

  #mobileRouteView {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
  }
  #mobileRouteView::before { display: none; }  /* kill dark gold radial */

  /* HEADERS */
  .mr-page { padding: max(env(safe-area-inset-top, 0px), 8px) 0 32px 0; }
  .mr-header { padding: 24px 20px 16px; }

  /* "Good morning." HERO — Instrument Serif huge */
  .mr-title {
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 4px 0;
  }
  .mr-title em { color: var(--signal); font-style: italic; }
  .mr-title--ui {
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .mr-sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 500;
  }

  /* ─── TOP BAR (paper variant) ─────────────────────────────────── */
  .mr-topbar {
    background: rgba(247, 245, 241, 0.92);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid var(--rule);
  }
  .mr-topbar-menu { color: var(--ink); }
  .mr-topbar-menu:active { background: var(--paper-2); }

  .mr-topbar-client {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
  }
  .mr-topbar-client:active { background: var(--paper-2); }
  .mr-topbar-client-pill {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    box-shadow: none;
  }
  .mr-topbar-client-caret { color: var(--ink-3); }

  .mr-topbar-avatar {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
  }
  .mr-topbar-avatar-glyph {
    color: var(--ink);
    font-family: var(--serif);
    font-style: italic;
  }
  .mr-topbar-avatar:active { background: var(--paper-2); }

  /* ─── DETAIL TOPBAR (back + ⋯) ───────────────────────────────── */
  .mr-detail-topbar {
    background: rgba(247, 245, 241, 0.92);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid var(--rule);
  }
  .mr-back-btn { color: var(--signal); font-family: var(--sans); font-size: 15px; }
  .mr-back-btn:active { opacity: 0.6; }
  .mr-more-btn {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink);
    backdrop-filter: none;
  }
  .mr-more-btn:active { background: var(--paper-2); }
  .mr-detail-topbar-title { color: var(--ink); font-family: var(--sans); }

  /* ─── BOTTOM NAV (paper translucent) ─────────────────────────── */
  .cntct-bottom-nav {
    background: rgba(247, 245, 241, 0.92) !important;
    border-top: 1px solid var(--rule) !important;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
  }
  .cntct-tab { color: var(--ink-dim); }
  .cntct-tab:active { background: var(--paper-2); }
  .cntct-tab--active { color: var(--signal) !important; }
  .cntct-tab--active::after { background: var(--signal) !important; }
  .cntct-tab-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ─── SECTION LABELS (mono kickers) ──────────────────────────── */
  .mr-section-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: rgba(247, 245, 241, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rule-soft);
    padding: 16px 20px 8px;
  }
  .mr-section-count { color: var(--ink-dim); font-weight: 500; }

  /* ─── HERO CARDS (Today's 3 — editorial lead-story format) ──── */
  .mr-hero-card {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 24px -16px rgba(11, 11, 12, 0.12);
  }
  .mr-hero-card::before { display: none; }
  .mr-hero-card:active { background: var(--paper-2); }

  .mr-hero-card-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--signal);
    text-transform: uppercase;
  }
  .mr-hero-card-label::before {
    background: var(--signal);
    box-shadow: 0 0 0 0 rgba(193,39,45,0.6);
    animation: livePulse 2s infinite;
  }
  .mr-hero-card-name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .mr-hero-card-sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.45;
  }
  .mr-hero-card-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    text-transform: uppercase;
  }

  /* ─── EMPTY STATE (paper) ────────────────────────────────────── */
  .mr-hero-empty {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mr-hero-empty-glyph { color: var(--signal); }
  .mr-hero-empty-line { color: var(--ink-2); }

  /* ─── SEARCH BAR (paper) ─────────────────────────────────────── */
  .mr-search-bar-wrap {
    background: rgba(247, 245, 241, 0.92);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid var(--rule);
  }
  .mr-search-input {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
  }
  .mr-search-input::placeholder { color: var(--ink-dim); }
  .mr-search-input:focus-visible {
    border-color: var(--ink-mid);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(74, 74, 76, 0.15);
    outline: none;
  }
  .mr-search-input[aria-invalid="true"] {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-tint);
  }

  /* ─── CONTACT ROWS (Apple Contacts on paper) ─────────────────── */
  .mr-list--grouped {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mr-contact-card {
    border-bottom-color: var(--rule-soft) !important;
  }
  .mr-contact-card:active { background: var(--paper-2) !important; transform: scale(0.985); }
  .mr-list:not(.mr-list--grouped) > .mr-contact-card {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mr-contact-avatar {
    background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  .mr-contact-name {
    font-family: var(--sans);
    color: var(--ink);
    font-weight: 600;
  }
  .mr-contact-meta {
    font-family: var(--sans);
    color: var(--ink-3);
    font-size: 13px;
  }
  .mr-contact-brand { color: var(--signal); }
  .mr-contact-email { color: var(--ink-4); font-family: var(--mono); }
  .mr-contact-statusline { color: var(--ochre); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
  .mr-contact-star {
    background: var(--signal-tint);
    color: var(--signal);
    font-family: var(--mono);
  }

  /* Status icons re-coloured per v3 movement-tag taxonomy */
  .mr-contact-status--cold     { color: var(--ink-4); }
  .mr-contact-status--sent     { color: var(--ochre); }
  .mr-contact-status--opened   { color: var(--signal); }
  .mr-contact-status--replied  { color: var(--teal); }
  .mr-contact-status--bounced  { color: var(--ink-5); }

  /* ─── BRAND CARDS ────────────────────────────────────────────── */
  .mr-brand-card {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mr-brand-card:active { background: var(--paper-2); }
  .mr-brand-icon {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--serif);
    font-style: italic;
    border-radius: 6px;
  }
  .mr-brand-name { color: var(--ink); font-family: var(--sans); }
  .mr-brand-meta { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
  .mr-card-chevron { color: var(--ink-4); }

  /* ─── DETAIL HERO (contact + brand) ──────────────────────────── */
  .mr-detail-avatar {
    background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--rule), 0 8px 24px -12px rgba(11,11,12,0.20);
  }
  .mr-detail-avatar--brand {
    background: var(--ink) !important;
    color: var(--paper) !important;
    font-family: var(--serif) !important;
    font-style: italic;
    border-radius: 12px !important;
  }
  .mr-detail-name {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1.05;
  }
  .mr-detail-meta {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.45;
    max-width: 320px;
  }
  .mr-star { color: var(--signal); font-family: var(--mono); font-style: normal; }

  /* ─── METHOD ROWS (email/phone/linkedin) ─────────────────────── */
  .mr-method:active { background: var(--paper-2); }
  .mr-method { border-bottom-color: var(--rule-soft); }

  .mr-method--email .mr-method-glyph { background: var(--signal-tint); color: var(--signal); }
  .mr-method--call  .mr-method-glyph { background: rgba(47,63,51,0.10); color: var(--teal); }
  .mr-method--linkedin .mr-method-glyph { background: var(--paper-3); color: var(--ink); }

  .mr-method-label {
    font-family: var(--mono);
    color: var(--ink-4);
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .mr-method-val { color: var(--ink); font-family: var(--sans); }
  .mr-method--email .mr-method-val { color: var(--signal); }
  .mr-method-action { color: var(--signal); font-family: var(--sans); font-weight: 500; }

  /* ─── PER-CLIENT STATUS ROWS ─────────────────────────────────── */
  .mr-client-row { border-bottom-color: var(--rule-soft); }
  .mr-client-pill {
    background: var(--ink);
    color: var(--paper);
    border: none;
    font-family: var(--mono);
    letter-spacing: 0.12em;
  }
  .mr-client-status-label { color: var(--ink); font-family: var(--sans); }
  .mr-client-status-meta  { color: var(--ink-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
  .mr-client-change       { color: var(--signal); font-family: var(--sans); font-weight: 500; }

  /* ─── ENGAGEMENT BAR ─────────────────────────────────────────── */
  .mr-engagement-bar { background: var(--rule); }
  .mr-engagement-bar-fill {
    background: linear-gradient(90deg, var(--signal), #d8453b);
    box-shadow: 0 0 12px rgba(193, 39, 45, 0.3);
  }
  .mr-engagement-num { color: var(--ink); font-family: var(--serif); }
  .mr-engagement-num-of { color: var(--ink-4); font-family: var(--sans); }
  .mr-engagement-delta { color: var(--teal); font-family: var(--mono); }
  .mr-engagement-breakdown { color: var(--ink-3); font-family: var(--mono); }
  .mr-engagement-touch { color: var(--ink-4); font-family: var(--mono); }

  /* ─── BRAND TAGS ─────────────────────────────────────────────── */
  .mr-brand-tag {
    background: var(--paper-3);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mr-brand-stats {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
  }
  .mr-stat { border-right-color: var(--rule-soft); }
  .mr-stat-num { color: var(--ink); font-family: var(--serif); }
  .mr-stat-lbl { color: var(--ink-4); font-family: var(--mono); }

  /* ─── FILTER CHIPS ───────────────────────────────────────────── */
  .mr-chip {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink-3);
    font-family: var(--sans);
  }
  .mr-chip--active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .mr-sort-select {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--sans);
  }

  .mr-show-more {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--signal);
    font-family: var(--sans);
  }
  .mr-show-more:active { background: var(--paper-2); }

  /* ─── HISTORY THREAD ─────────────────────────────────────────── */
  .mr-thread-row { border-bottom-color: var(--rule-soft); }
  .mr-thread-row:not(:last-child)::before {
    background: linear-gradient(180deg, var(--rule), transparent);
  }
  .mr-thread-time { color: var(--ink-4); font-family: var(--mono); }
  .mr-thread-icon {
    background: var(--signal-tint);
    border-color: var(--signal);
    color: var(--signal);
  }
  .mr-thread-body { color: var(--ink); font-family: var(--sans); }

  /* ─── BRAND LINK PILL ────────────────────────────────────────── */
  .mr-brand-link-pill {
    background: var(--signal-tint);
    border: 1px solid rgba(193,39,45,0.22);
    color: var(--signal);
    backdrop-filter: none;
  }
  .mr-brand-link-pill:active { background: rgba(193, 39, 45, 0.14); }

  /* ─── ACTION PILLS ───────────────────────────────────────────── */
  .mr-pill {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--sans);
  }
  .mr-pill:active { background: var(--paper-2); }
  .mr-pill--primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: 0 4px 16px -4px rgba(11, 11, 12, 0.22);
  }
  .mr-pill--primary:active { background: var(--signal); border-color: var(--signal); }

  /* ─── COMPOSE OVERLAY (paper sheet) ──────────────────────────── */
  .mr-compose-backdrop { background: rgba(11, 11, 12, 0); }
  .mr-compose-sheet--open .mr-compose-backdrop {
    background: rgba(11, 11, 12, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mr-compose-panel {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    color: var(--ink);
    box-shadow: 0 -16px 60px -8px rgba(11, 11, 12, 0.30);
    font-family: var(--sans);
  }
  .mr-compose-handle { background: var(--ink-5); }
  .mr-compose-close { color: var(--ink-3); }
  .mr-compose-close:active { background: var(--paper-2); }
  .mr-compose-from { color: var(--signal); font-family: var(--mono); }
  .mr-compose-send {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 2px 12px -2px rgba(11, 11, 12, 0.20);
  }
  .mr-compose-send:disabled { background: var(--paper-3); color: var(--ink-4); box-shadow: none; }
  .mr-compose-send:active:not(:disabled) { background: var(--signal); }

  .mr-compose-to { border-bottom-color: var(--rule-soft); }
  .mr-compose-to-label { color: var(--ink-4); font-family: var(--mono); }
  .mr-compose-to-name  { color: var(--ink); }
  .mr-compose-to-email { color: var(--signal); font-family: var(--mono); }

  .mr-compose-tones { border-bottom-color: var(--rule-soft); }
  .mr-compose-tone {
    background: var(--paper-elev);
    border: 1px solid var(--rule);
    color: var(--ink-3);
    font-family: var(--sans);
  }
  .mr-compose-tone--active {
    background: var(--signal-tint);
    border-color: var(--signal);
    color: var(--signal);
  }

  .mr-compose-subject {
    color: var(--ink);
    border-bottom-color: var(--rule-soft);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
  }
  .mr-compose-subject::placeholder { color: var(--ink-5); }
  .mr-compose-body {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.7;
  }
  .mr-compose-body::placeholder { color: var(--ink-5); }
  .mr-compose-recos { color: var(--ochre); font-family: var(--mono); }
  .mr-compose-context { border-top-color: var(--rule-soft); }
  .mr-compose-context-label { color: var(--ink-4); font-family: var(--mono); }
  .mr-compose-context-when { color: var(--ink-4); font-family: var(--mono); }
  .mr-compose-context-what { color: var(--ink-2); font-family: var(--sans); }

  /* ─── RUN CARDS ──────────────────────────────────────────────── */
  .mr-run-card { border-bottom-color: var(--rule-soft); }
  .mr-run-card:active { background: var(--paper-2); }
  .mr-run-brand { color: var(--ink); font-family: var(--sans); }
  .mr-run-status {
    font-family: var(--mono);
  }
  .mr-run-status--running   { background: var(--signal-tint); color: var(--signal); }
  .mr-run-status--queued    { background: rgba(47, 63, 51, 0.12); color: var(--teal); }
  .mr-run-status--completed { background: rgba(135, 108, 63, 0.12); color: var(--ochre); }
  .mr-run-status--failed,
  .mr-run-status--abandoned { background: var(--paper-3); color: var(--ink-4); }
  .mr-run-pct { color: var(--signal); font-family: var(--mono); }
  .mr-run-bar { background: var(--rule); }
  .mr-run-bar-fill {
    background: linear-gradient(90deg, var(--signal), #d8453b);
    box-shadow: 0 0 8px rgba(193, 39, 45, 0.4);
  }
  .mr-run-stats { color: var(--ink-4); font-family: var(--mono); }

  /* ─── CLIENT SWITCHER DROPDOWN ───────────────────────────────── */
  .mr-client-switcher-dropdown {
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 20px 50px -10px rgba(11, 11, 12, 0.24);
    backdrop-filter: none;
  }
  .mr-client-switcher-item { color: var(--ink); font-family: var(--sans); }
  .mr-client-switcher-item:active { background: var(--paper-2); }
  .mr-client-switcher-item--active { background: var(--signal-tint); }
  .mr-client-switcher-pill {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
  }
  .mr-client-switcher-name { color: var(--ink); font-weight: 500; }
  .mr-client-switcher-check { color: var(--signal); }

  /* ─── MULTI-BRAND PASTE ──────────────────────────────────────── */
  .mr-multibrand-title { color: var(--ink); font-family: var(--serif); font-size: 24px; }
  .mr-multibrand-sub   { color: var(--ink-3); font-family: var(--sans); }
  .mr-multibrand-row { border-bottom-color: var(--rule-soft); }
  .mr-multibrand-info b { color: var(--ink); font-family: var(--sans); }
  .mr-multibrand-status { color: var(--ink-4); font-family: var(--mono); }

  /* ─── SKELETONS (paper-2 shimmer) ────────────────────────────── */
  .mr-skeleton {
    background: linear-gradient(90deg, var(--paper-2), var(--paper-3), var(--paper-2));
    background-size: 200% 100%;
  }

  /* ─── SIDE DRAWER ─────────────────────────────────────────────── */
  .mr-side-drawer {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
  }
  .mr-side-drawer--open { pointer-events: auto; }
  .mr-side-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 12, 0);
    transition: background 280ms ease-out;
  }
  .mr-side-drawer--open .mr-side-backdrop { background: rgba(11, 11, 12, 0.30); }

  .mr-side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 78%;
    max-width: 320px;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    padding: max(env(safe-area-inset-top, 0px), 12px) 0 max(env(safe-area-inset-bottom, 0px), 12px);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 12px 0 40px -8px rgba(11, 11, 12, 0.30);
    font-family: var(--sans);
  }
  .mr-side-drawer--open .mr-side-panel { transform: translateX(0); }

  .mr-side-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 24px;
    border-bottom: 1px solid var(--rule);
  }
  .mr-side-mark {
    width: 32px;
    height: 32px;
    background: var(--ink);
    color: var(--paper);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    border-radius: 5px;
  }
  .mr-side-name {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink);
  }

  .mr-side-nav {
    flex: 1;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mr-side-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    transition: background 150ms;
  }
  .mr-side-item:active { background: var(--paper-2); }
  .mr-side-item--danger { color: var(--signal); }

  .mr-side-glyph {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ink-3);
    flex-shrink: 0;
  }
  .mr-side-item--danger .mr-side-glyph { color: var(--signal); }

  .mr-side-foot {
    border-top: 1px solid var(--rule);
    padding: 12px;
  }

  /* ─── HISTORY ROWS (paper variant) ───────────────────────────── */
  .mr-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule-soft);
    cursor: default;
    color: var(--ink);
    background: var(--paper-elev);
  }
  .mr-history-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    color: var(--ink-3);
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 14px;
  }
  .mr-history-icon.opened { background: var(--signal-tint); color: var(--signal); }
  .mr-history-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mr-history-to {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mr-history-subject {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mr-history-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-4);
    text-transform: uppercase;
  }
  .mr-event-badge {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
  }
  .mr-event-badge--open,
  .mr-event-badge--opened    { background: var(--signal-tint); color: var(--signal); }
  .mr-event-badge--reply,
  .mr-event-badge--replied   { background: rgba(47, 63, 51, 0.10); color: var(--teal); }
  .mr-event-badge--click,
  .mr-event-badge--clicked   { background: rgba(135, 108, 63, 0.10); color: var(--ochre); }
  .mr-event-badge--bounce,
  .mr-event-badge--bounced   { background: var(--paper-3); color: var(--ink-4); }
  .mr-event-badge--sent      { background: var(--paper-3); color: var(--ink-3); }

  /* ─── RESEARCH CTA (search no-match) — paper variant ─────────── */
  .mr-research-cta {
    background: var(--signal-tint);
    border: 1px solid rgba(193, 39, 45, 0.20);
    border-radius: 10px;
  }
  .mr-research-cta:active { background: rgba(193, 39, 45, 0.14); }
  .mr-research-label {
    color: var(--signal);
    font-family: var(--sans);
    font-weight: 600;
  }
  .mr-research-sub {
    color: var(--ink-3);
    font-family: var(--sans);
  }

  /* ─── 100dvh + iOS overflow ───────────────────────────────────── */
  #mobileRouteView {
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── PULL-TO-REFRESH indicator ──────────────────────────────── */
  .mr-ptr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-60px);
    transition: transform 200ms ease-out;
    z-index: 50;
  }
  .mr-ptr--pulling { transform: translateY(0); }
  .mr-ptr--refreshing .mr-ptr-indicator {
    animation: ptrSpin 1s linear infinite;
  }
  .mr-ptr-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid var(--rule);
    border-top-color: var(--signal);
    border-radius: 50%;
  }
  @keyframes ptrSpin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
  }

  /* ─── VERIFIED EMAIL BADGE ───────────────────────────────────── */
  .mr-verified {
    display: inline-flex;
    align-items: center;
    color: var(--teal);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-left: 4px;
  }

  /* ─── RUNS PAGE polish (queue meta + cancel + eta) ───────────── */
  .mr-runs-queuemeta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    text-transform: uppercase;
    flex: 1;
    text-align: right;
    margin-right: 8px;
  }
  .mr-run-eta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ochre);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .mr-run-cancel {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--signal);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .mr-run-cancel:active { opacity: 0.6; }

  /* ─── PREFLIGHT MODAL ─────────────────────────────────────────── */
  .mr-modal {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
  }
  .mr-modal--open { pointer-events: auto; }
  .mr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 12, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background 280ms ease-out, backdrop-filter 280ms ease-out;
  }
  .mr-modal--open .mr-modal-backdrop {
    background: rgba(11, 11, 12, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mr-modal-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 24px 60px -20px rgba(11, 11, 12, 0.40);
    transform: scale(0.96);
    opacity: 0;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease-out;
    text-align: center;
    font-family: var(--sans);
  }
  .mr-modal--open .mr-modal-card {
    transform: scale(1);
    opacity: 1;
  }
  .mr-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--signal);
    margin-bottom: 16px;
    text-transform: uppercase;
    justify-content: center;
  }
  .mr-modal-title {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px 0;
  }
  .mr-modal-title em { color: var(--signal); font-style: italic; }
  .mr-modal-dek {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
    margin: 0 0 20px 0;
  }
  .mr-modal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 10px;
    margin: 0 0 20px 0;
    background: var(--paper-elev);
    overflow: hidden;
  }
  .mr-modal-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 10px;
    border-right: 1px solid var(--rule-soft);
  }
  .mr-modal-stat:last-child { border-right: 0; }
  .mr-modal-stat-num {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
  }
  .mr-modal-stat-lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-4);
    margin-top: 2px;
  }
  .mr-modal-actions {
    display: flex;
    gap: 10px;
  }

  /* ─── LIVE WIRE strip — appears under topbar on Today ────────── */
  .mr-livewire {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .mr-livewire .mr-livewire-r {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--signal);
    flex-shrink: 0;
  }
}

/* ─── B3: SE text-overflow guards (320px) ─────────────────────── */
.mr-brand-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mr-contact-name {
  overflow: hidden;
}
/* Livewire ticker: no wrap at any width */
.mr-livewire {
  flex-wrap: nowrap;
  overflow: hidden;
}
.mr-livewire > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Compose subject preview */
.mr-compose-subject-preview,
.mr-subject-preview,
[class*="subject-preview"] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Brand row titles in lists */
.mr-brand-info {
  min-width: 0;
  overflow: hidden;
}

/* ─── B6: ERROR STATE ─────────────────────────────────────────── */
.mr-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 16px;
}
.mr-error-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--signal-tint, rgba(193,39,45,0.08));
  color: var(--signal, #C1272D);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, monospace);
  font-weight: 600;
}
.mr-error-state-msg {
  font-family: var(--sans, sans-serif);
  font-size: 15px;
  color: var(--ink-mid, #4A4A4C);
  line-height: 1.45;
  max-width: 260px;
}
.mr-error-state-btn {
  font-family: var(--sans, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--signal, #C1272D);
  background: var(--signal-tint, rgba(193,39,45,0.08));
  border: 1px solid rgba(193,39,45,0.20);
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.mr-error-state-btn:active {
  background: rgba(193,39,45,0.16);
}

/* ─── B10: PUSH NOTIFICATION BANNER ──────────────────────────── */
.mr-push-banner {
  background: var(--paper-elev, #FBFAF6);
  border-bottom: 1px solid var(--rule, rgba(11,11,12,0.10));
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mr-push-banner-text {
  font-family: var(--sans, sans-serif);
  font-size: 13px;
  color: var(--ink-2, #2A2A2C);
  line-height: 1.45;
}
.mr-push-banner-actions {
  display: flex;
  gap: 10px;
}
.mr-push-banner-btn {
  font-family: var(--sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 16px;
  min-height: 36px;
  cursor: pointer;
  border: 1px solid var(--rule, rgba(11,11,12,0.10));
  background: var(--paper-2, #F0EBE0);
  color: var(--ink-2, #2A2A2C);
  -webkit-tap-highlight-color: transparent;
}
.mr-push-banner-btn--primary {
  background: var(--signal, #C1272D);
  color: #fff;
  border-color: var(--signal, #C1272D);
}

/* ─── B1: SETTINGS PAGE ──────────────────────────────────────── */
.mr-settings-page {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.mr-settings-group {
  background: var(--paper-elev, #FBFAF6);
  border-top: 1px solid var(--rule, rgba(11,11,12,0.10));
  border-bottom: 1px solid var(--rule, rgba(11,11,12,0.10));
  margin-bottom: 28px;
}
.mr-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft, rgba(11,11,12,0.06));
  min-height: 52px;
}
.mr-settings-row:last-child {
  border-bottom: none;
}
.mr-settings-row--action {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mr-settings-row--action:active {
  background: var(--paper-2, #F0EBE0);
}
.mr-settings-label {
  font-family: var(--sans, sans-serif);
  font-size: 15px;
  color: var(--ink, #0B0B0C);
}
.mr-settings-label--signal {
  color: var(--signal, #C1272D);
}
.mr-settings-value {
  font-family: var(--sans, sans-serif);
  font-size: 15px;
  color: var(--ink-dim, #6A6A6C);
}
.mr-settings-value--mono {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--ink-dim, #6A6A6C);
  letter-spacing: 0.03em;
}
.mr-settings-value--pill {
  background: var(--ink, #0B0B0C);
  color: var(--paper, #F7F5F1);
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
}
.mr-settings-chevron {
  color: var(--ink-4, #8C8A82);
  font-size: 18px;
}
.mr-settings-theme-row {
  display: flex;
  gap: 8px;
}
.mr-theme-btn {
  font-family: var(--sans, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim, #6A6A6C);
  background: var(--paper-2, #F0EBE0);
  border: 1px solid var(--rule, rgba(11,11,12,0.10));
  border-radius: 6px;
  padding: 6px 14px;
  min-height: 36px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mr-theme-btn--active {
  background: var(--ink, #0B0B0C);
  color: var(--paper, #F7F5F1);
  border-color: var(--ink, #0B0B0C);
}

/* ─── TOGGLE SWITCH ────────────────────────────────────────────── */
.mr-toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--paper-3, #E8E2D7);
  border: 1px solid var(--rule, rgba(11,11,12,0.10));
  position: relative;
  cursor: pointer;
  transition: background 200ms;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mr-toggle--on {
  background: var(--signal, #C1272D);
  border-color: var(--signal, #C1272D);
}
.mr-toggle-knob {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 200ms;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.mr-toggle--on .mr-toggle-knob {
  transform: translateX(20px);
}

/* ════════════════════════════════════════════════════════════
   BATCH C — ADDITIONS
   ════════════════════════════════════════════════════════════ */

/* ─── C1: ROUTE TRANSITIONS — paper-feeling, 200ms fade ───────── */
/* Honor prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  /* Route view fades in on navigation */
  .mobile-route-view {
    animation: mr-fade-in 200ms ease-out both;
  }

  /* Modal scale-in: 0.96 → 1, 0 → 1 opacity, 220ms ease-out */
  .mr-modal--open .mr-modal-card {
    animation: mr-modal-in 220ms ease-out both;
  }

  /* Side drawer slides in from left, 250ms ease */
  .mr-side-drawer--open .mr-side-panel {
    animation: mr-drawer-in 250ms ease both;
  }

  /* Bottom sheet slides up, 220ms ease-out */
  .mr-bottom-sheet--open {
    animation: mr-sheet-up 220ms ease-out both;
  }
}

@keyframes mr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mr-modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mr-drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes mr-sheet-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pull-to-refresh: light elastic, NOT bouncy */
.mr-ptr {
  transition: height 120ms linear;
}
.mr-ptr--pulling {
  transition: none;
}

/* ─── C2: EMPTY STATES — paper-aesthetic ──────────────────────── */
.mr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
  min-height: 240px;
}
.mr-empty-state-icon {
  font-size: 40px;
  opacity: 0.22;
  margin-bottom: 20px;
  line-height: 1;
}
.mr-empty-state-headline {
  font-family: var(--sans, sans-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink, #0B0B0C);
  margin-bottom: 10px;
  line-height: 1.4;
}
.mr-empty-state-sub {
  font-family: var(--sans, sans-serif);
  font-size: 14px;
  color: var(--ink-dim, #6A6A6C);
  margin-bottom: 24px;
  line-height: 1.5;
}
.mr-empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink, #0B0B0C);
  color: var(--paper, #F7F5F1);
  font-family: var(--sans, sans-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}
.mr-empty-state-cta:active {
  opacity: 0.8;
}

/* ─── C5/C6: SAFE-AREA INSET GUARDS ───────────────────────────── */
/* Top bar: respects notch on all iPhone models */
.mr-topbar,
.mr-detail-topbar {
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
}
/* When NOT in standalone, top bar has less padding (browser chrome handles notch) */
@media (display-mode: browser) {
  .mr-topbar,
  .mr-detail-topbar {
    padding-top: 0;
  }
}

/* Bottom nav: home indicator padding */
.cntct-bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
}

/* Auth gate: safe-area aware (standalone mode) */
@media (display-mode: standalone) {
  #authGate {
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Hide "back to dashboard" desktop fallback in standalone */
  .mr-desktop-fallback,
  [data-desktop-only="true"] {
    display: none !important;
  }
}

/* ─── C8: OFFLINE FALLBACK PAGE ────────────────────────────────── */
.mr-offline-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 32px;
  background: var(--paper, #F7F5F1);
  text-align: center;
  font-family: var(--sans, 'Space Grotesk', sans-serif);
}
.mr-offline-icon {
  font-size: 56px;
  opacity: 0.18;
  margin-bottom: 28px;
  line-height: 1;
}
.mr-offline-headline {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #0B0B0C);
  margin-bottom: 12px;
  line-height: 1.3;
}
.mr-offline-sub {
  font-size: 15px;
  color: var(--ink-dim, #6A6A6C);
  margin-bottom: 32px;
  line-height: 1.5;
  max-width: 280px;
}
.mr-offline-retry {
  background: var(--ink, #0B0B0C);
  color: var(--paper, #F7F5F1);
  font-family: var(--sans, sans-serif);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  min-height: 48px;
  letter-spacing: 0.02em;
}
.mr-offline-retry:active { opacity: 0.8; }

/* ─── C4: SW UPDATE TOAST ──────────────────────────────────────── */
.mr-sw-update-toast {
  position: fixed;
  bottom: max(calc(72px + env(safe-area-inset-bottom, 0px)), 76px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink, #0B0B0C);
  color: var(--paper, #F7F5F1);
  font-family: var(--sans, 'Space Grotesk', sans-serif);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  z-index: 9100;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.mr-sw-update-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mr-sw-update-btn {
  background: var(--paper, #F7F5F1);
  color: var(--ink, #0B0B0C);
  font-family: var(--sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  min-height: 32px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}