/* ═══════════════════════════════════════════════════════════════════════
   RollForge Mobile UX — Design-inspired overhaul
   Card-based layout, bottom nav, native chat feel.
   Font stack: Geist + Fraunces + Geist Mono (via design-system.css).
   Loaded via <link> on all dashboard pages; only activates ≤768px.
   ═══════════════════════════════════════════════════════════════════════ */

/* WHY html overflow-x: body-level overflow-x doesn't prevent horizontal
   scroll from position:fixed elements on mobile Safari. Need it on html too. */
html { overflow-x: hidden; }

/* ── MOBILE-ONLY BOTTOM NAVIGATION ───────────────────────────────────── */
.rf-mobile-nav {
  display: none;
}

@media (max-width: 768px) {

/* ── 1. BOTTOM NAV — replaces hamburger as primary mobile nav ────────── */
.rf-mobile-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.04);
}

.rf-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  text-decoration: none;
  color: #9ca3af;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-width: 56px;
}

.rf-mobile-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: transform 0.15s;
}

.rf-mobile-nav-item.active {
  color: #0D9488;
}

.rf-mobile-nav-item.active svg {
  transform: scale(1.05);
}

/* Teal dot indicator for active item */
.rf-mobile-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5A7A9B;
}

/* ── 2. PAGE LAYOUT — room for bottom nav (only if bottom nav exists) ── */
body:has(.rf-mobile-nav) {
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Pages using sidebar-nav.js don't have .rf-mobile-nav — no extra padding */
body.rf-sb-ready {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body .page {
  padding: 1rem 0.875rem 2rem !important;
  max-width: 100% !important;
}

/* ── 3. TOP NAV — minimal on mobile ──────────────────────────────────── */
.rf-topnav,
body .nav {
  height: 48px !important;
  padding: 0 0.875rem !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(4px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(120%) !important;
}

/* Hide hamburger only on dashboard pages where .rf-mobile-nav replaces it.
   Public pages (demo, pricing, index, etc.) need the hamburger visible. */
@media (max-width: 768px) {
  body:has(.rf-mobile-nav) .rf-hamburger-btn,
  body:has(.rf-mobile-nav) .nav-hamburger {
    display: none !important;
  }
}

/* Hide desktop nav links on mobile — bottom nav covers this */
body .nav .nav-links a:not(.nav-cta) {
  display: none !important;
}

/* Logo smaller */
.rf-topnav-logo {
  font-size: 1rem !important;
}

/* Company filter compact */
.rf-company-filter {
  max-width: 140px !important;
}

.rf-company-select {
  font-size: 0.75rem !important;
  padding: 0.3rem 1.8rem 0.3rem 0.6rem !important;
  border-radius: 100px !important;
  background: rgba(13, 148, 136, 0.04) !important;
  border-color: rgba(13, 148, 136, 0.15) !important;
}

/* Sign out → just icon on mobile */
.rf-topnav-right .btn-signout {
  font-size: 0 !important;
  padding: 0.35rem !important;
  width: 32px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.rf-topnav-right .btn-signout::before {
  content: '→';
  font-size: 0.85rem;
}

/* Investor badge compact */
#investor-badge {
  font-size: 0.65rem !important;
  padding: 0.15rem 0.5rem !important;
}

/* ── 4. ASK ROLLFORGE — conversational hero, mobile-native ───────────── */
.ask-rf-hero {
  padding: 1.25rem 0 1rem !important;
  margin: 0 auto 1rem !important;
  max-width: 100% !important;
}

.ask-rf-label {
  font-size: 0.65rem !important;
  margin-bottom: 0.6rem !important;
}

.ask-rf-input-wrap {
  border-radius: 18px !important;
  border-width: 1.5px !important;
  box-shadow: 0 2px 16px rgba(13, 148, 136, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.ask-rf-input-inner {
  padding: 0.75rem 0.75rem 0.75rem 0.85rem !important;
  gap: 0.4rem !important;
}

.ask-rf-input {
  font-size: 0.9rem !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

.ask-rf-send-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

/* Suggestion chips — horizontal scroll, no wrap */
.ask-rf-suggestions {
  display: flex !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
  padding: 0 0.85rem 0.7rem !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ask-rf-suggestions::-webkit-scrollbar {
  display: none;
}

.ask-rf-chip {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  background: rgba(13, 148, 136, 0.04) !important;
  border: 1px solid rgba(13, 148, 136, 0.15) !important;
  color: #0D9488 !important;
  font-weight: 600 !important;
}

.ask-rf-chip:hover,
.ask-rf-chip:active {
  background: rgba(13, 148, 136, 0.1) !important;
}

/* ── 5. PAGE HEADER — compact, mobile-optimized ──────────────────────── */
body .page-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0 !important;
}

body .page-header h1 {
  font-size: 1.25rem !important;
  letter-spacing: -0.03em !important;
}

body .page-header p {
  font-size: 0.8rem !important;
}

/* Header controls → horizontal scroll */
.header-controls {
  display: flex !important;
  width: 100% !important;
  gap: 0.4rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch;
}
.header-controls::-webkit-scrollbar { display: none; }

.header-controls .btn,
.header-controls .period-select {
  font-size: 0.72rem !important;
  padding: 0.35rem 0.65rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border-radius: 100px !important;
}

/* ── 6. KPI CARDS — stacking 2-col with generous radius ──────────────── */
body .kpi-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.6rem !important;
  margin-bottom: 1.25rem !important;
}

body .kpi-card {
  border-radius: 14px !important;
  padding: 1rem 1rem 0.85rem !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}

body .kpi-label {
  font-size: 0.6rem !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.4rem !important;
}

body .kpi-value {
  font-size: 1.35rem !important;
  margin-bottom: 0.3rem !important;
}

body .kpi-delta {
  font-size: 0.7rem !important;
}

.kpi-sparkline {
  display: none !important;
}

/* ── 7. GOAL PROGRESS CARDS — full width, generous spacing ───────────── */
.goal-cards-grid {
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
}

.goal-card {
  border-radius: 14px !important;
  padding: 1rem !important;
}

.goal-ring-wrap {
  width: 48px !important;
  height: 48px !important;
}

.goal-card-top {
  gap: 0.75rem !important;
  margin-bottom: 0.6rem !important;
}

.goal-card-name {
  font-size: 0.82rem !important;
}

.goal-card-metric {
  font-size: 0.72rem !important;
}

.goal-hero-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
}

/* ── 8. PRIORITY STRIP — mobile card layout ──────────────────────────── */
#rf-priority-strip {
  border-radius: 14px !important;
  margin-bottom: 1.25rem !important;
}

#rf-priority-strip .pa-cards {
  gap: 0.5rem !important;
}

#rf-priority-strip .pa-card {
  border-radius: 10px !important;
}

/* ── 9. SYNC STATUS BAR — horizontal scroll on mobile ────────────────── */
.sync-bar {
  border-radius: 14px !important;
  padding: 0.65rem 0.85rem !important;
  margin-bottom: 1rem !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 0.5rem !important;
  scrollbar-width: none !important;
}
.sync-bar::-webkit-scrollbar { display: none; }

.sync-bar-label {
  font-size: 0.6rem !important;
  margin-right: 0.5rem !important;
}

.sync-sources {
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
}

.sync-source {
  font-size: 0.68rem !important;
  padding: 0.2rem 0.55rem !important;
  flex-shrink: 0 !important;
}

/* Upload button compact */
.sync-bar-upload-btn {
  font-size: 0.68rem !important;
  padding: 0.25rem 0.55rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── 10. HEATMAP — pills only on mobile ──────────────────────────────── */
.heatmap-table-wrap {
  display: none !important;
}
.heatmap-mobile-list {
  display: block !important;
}

/* ── 11. BOTTOM GRID / TWO-COL — single column ──────────────────────── */
.bottom-grid,
body .two-col,
body .three-col {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

/* ── 12. COMPANY TABLE — horizontal scroll with rounded container ────── */
.company-table-wrap {
  border-radius: 14px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.company-table {
  min-width: 560px !important;
}

/* ── 13. SECTION TITLES — slightly smaller ───────────────────────────── */
body .section-title {
  font-size: 0.62rem !important;
}

body .section-header {
  margin-bottom: 0.75rem !important;
}

/* ── 14. CARDS — generous radius and spacing everywhere ──────────────── */
body .card,
body .analytics-card,
body .chart-card,
body .detail-card,
body .info-card,
body .summary-card,
body .report-card,
body .data-card,
body .panel {
  border-radius: 14px !important;
  padding: 1rem !important;
}

/* ── 15. INSIGHT FEED — mobile card layout ───────────────────────────── */
.insight-card,
.insight-item {
  border-radius: 14px !important;
  padding: 0.85rem !important;
}

/* ── 16. TRAJECTORY GRID — stack vertically ──────────────────────────── */
.trajectory-grid {
  grid-template-columns: 1fr !important;
}

/* ── 17. UPLOAD MODAL — full screen on mobile ────────────────────────── */
.upload-modal {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ── 18. ONBOARDING BANNER — compact ─────────────────────────────────── */
[style*="SETUP INCOMPLETE"] {
  font-size: 0.68rem !important;
}

/* ── 19. SMOOTH TRANSITIONS ──────────────────────────────────────────── */
body .page {
  animation: rf-mobile-fadeIn 0.25s ease-out !important;
}

@keyframes rf-mobile-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 20. TOUCH TARGETS — minimum 44px (Apple HIG / WCAG) ─────────────── */
.btn,
button,
a.btn,
.ask-rf-chip,
.sync-source,
.btn-icon,
.btn-view,
.toolbar-btn,
.nav-btn,
select,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 44px;
}

/* Compact icon buttons: expand tap area via padding, keep visual size */
.btn-icon,
.session-action-btn {
  position: relative;
}
.btn-icon::before,
.session-action-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
}

/* Sign-out button: visible size + expanded tap zone */
.rf-topnav-right .btn-signout {
  min-height: 36px !important;
  min-width: 36px !important;
}

/* ── 21. FOOTER — compact before bottom nav ──────────────────────────── */
.dash-footer {
  font-size: 0.7rem !important;
  padding-bottom: 1rem !important;
  margin-bottom: 0 !important;
}

/* ── 21b. TOASTS — must clear bottom nav ─────────────────────────────── */
.toast {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── 21c. MODALS — full-screen-safe on notched phones ────────────────── */
.modal-backdrop {
  align-items: flex-end !important;
  padding: 0 !important;
}
.modal {
  border-radius: 20px 20px 0 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 21d. GENERATE REPORT button — usable on mobile ─────────────────── */
.gen-report-btn {
  min-height: 36px;
  font-size: 13px !important;
  padding: 8px 14px !important;
}

/* ── 21e. REPORT CARD actions — stack on narrow screens ─────────────── */
.report-card {
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}
.report-card-actions {
  flex-wrap: wrap !important;
  width: 100%;
}
.report-card-actions .btn-icon,
.report-card-actions .btn-view {
  flex: 1 !important;
  justify-content: center !important;
  min-height: 44px !important;
}

/* ── 21f. FILTER BAR — stack vertically on mobile ────────────────────── */
.filter-bar {
  flex-direction: column !important;
  gap: 8px !important;
}
.filter-search,
.filter-select {
  width: 100% !important;
  min-width: unset !important;
}

/* ── 21g. ACCOUNTS GRID — prevent min-width overflow ────────────────── */
.accounts-grid {
  grid-template-columns: 1fr !important;
}
.kpi-row {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ── 21h. HEADER actions on budget/reports pages — stack ─────────────── */
.header-actions,
.plan-detail-actions {
  flex-direction: column !important;
  width: 100%;
}
.header-actions .btn,
.plan-detail-actions .btn {
  width: 100% !important;
  justify-content: center !important;
}

/* ── 21i. BUDGET TABLE — horizontal scroll + sticky first column ─────── */
.plan-layout {
  grid-template-columns: 1fr !important;
}
.budget-panel-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.budget-panel-actions {
  width: 100%;
  overflow-x: auto;
}
.budget-panel-actions .btn {
  flex-shrink: 0;
}
.budget-table th,
.budget-table td {
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* ── 21j. GOALS PAGE — form inputs + submit reachable ────────────────── */
.goals-grid {
  grid-template-columns: 1fr !important;
}
.goal-form-actions {
  flex-direction: column !important;
}
.goal-form-actions .btn {
  width: 100% !important;
  justify-content: center !important;
  min-height: 48px !important;
}

/* ── 21k. PLAN DETAIL HEADER — responsive wrap ───────────────────────── */
.plan-detail-header {
  flex-direction: column !important;
}
.plan-detail-title-row {
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* ── 21l. PAGE HEADER actions — inline scroll, not wrap ─────────────── */
.page-header {
  flex-direction: column !important;
  align-items: flex-start !important;
}
.page-header > div[style*="display:flex"],
.page-header > div[style*="display: flex"] {
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap !important;
}

/* ── 22. STAT CARDS — mobile sizing ──────────────────────────────────── */
body .stats-row,
body .stat-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.6rem !important;
}

body .stat-card {
  border-radius: 14px !important;
  padding: 0.85rem !important;
}

body .stat-value {
  font-size: 1.25rem !important;
}

/* ── 23. BUDGET PAGE MOBILE ──────────────────────────────────────────── */
.budget-grid,
.budget-layout {
  grid-template-columns: 1fr !important;
}

.budget-table-wrap {
  overflow-x: auto !important;
  border-radius: 14px !important;
  -webkit-overflow-scrolling: touch;
}

.scenario-cards {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}

.scenario-card {
  border-radius: 14px !important;
}

/* ── 24. ASSETS PAGE MOBILE ──────────────────────────────────────────── */
.asset-cards-grid,
.liability-cards-grid {
  grid-template-columns: 1fr !important;
  gap: 0.6rem !important;
}

.asset-card,
.liability-card {
  border-radius: 14px !important;
}

.net-position-banner {
  border-radius: 14px !important;
  padding: 1rem !important;
}

/* ── 25. SOURCES PAGE MOBILE ─────────────────────────────────────────── */
.upload-wizard {
  border-radius: 14px !important;
}

.connector-cards {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}

.connector-card {
  border-radius: 14px !important;
}

/* ── 26. REPORTS PAGE MOBILE ─────────────────────────────────────────── */
.reports-grid {
  grid-template-columns: 1fr !important;
}

.report-card {
  border-radius: 14px !important;
}

/* ── 27. GOALS PAGE MOBILE ───────────────────────────────────────────── */
.goals-grid {
  grid-template-columns: 1fr !important;
}

/* ── 28. SETTINGS / BILLING ──────────────────────────────────────────── */
.settings-grid,
.billing-grid {
  grid-template-columns: 1fr !important;
}

/* ── 29. COMMAND CENTER — KPI strip, entity table, health strip ────── */
.cc-shell { padding: 0 0.875rem 2rem !important; }
.cc-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  padding: 1rem 0 0.75rem !important;
}
.cc-header-right { width: 100%; justify-content: space-between; }
.cc-title { font-size: 1.35rem !important; }
.cc-grid { grid-template-columns: 1fr !important; }

/* Entity table horizontal scroll */
#entities-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.entity-table { min-width: 600px; }

/* Health strip wrap */
.health-strip { flex-wrap: wrap !important; gap: 0.5rem 0.75rem !important; }

/* Feed + actions compact */
.action-item,
.feed-item { padding: 0.65rem 1rem !important; }
.action-label { font-size: 0.74rem !important; }
.feed-text { font-size: 0.73rem !important; }

/* ── 30. FINANCIAL MODEL — KPI strip, builder layout ─────────────── */
.builder-layout { grid-template-columns: 1fr !important; }
.chat-builder-panel { max-height: 500px !important; position: static !important; }

/* ── 31. SETTINGS — sidebar stacks to horizontal tabs ─────────────── */
.settings-layout {
  flex-direction: column !important;
  padding: 1rem 0.875rem 5rem !important;
  gap: 1rem !important;
}
.settings-sidebar {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.settings-sidebar-title { display: none !important; }
.tab-btn {
  width: auto !important;
  flex: 1 0 auto !important;
  font-size: 12px !important;
  padding: 7px 8px !important;
}
.form-grid-2 { grid-template-columns: 1fr !important; }
.billing-strip { grid-template-columns: 1fr !important; }

/* ── 32. CHAT — sidebar overlay, full-height layout ───────────────── */
.sidebar {
  position: fixed !important;
  z-index: 200 !important;
  transform: translateX(-100%) !important;
  box-shadow: 4px 0 16px rgba(0,0,0,0.1) !important;
}
.sidebar.mobile-open { transform: translateX(0) !important; }
.msg { max-width: 92% !important; }

/* ── 33. PORTFOLIO A&L — stack columns ────────────────────────────── */
.portfolio-grid { grid-template-columns: 1fr !important; }

/* ── 34. GENERIC TABLE OVERFLOW — prevent any table from breaking ── */
.rf-page table,
.page table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── 35. GENERIC OVERFLOW GUARD — prevent horizontal scroll on body ─ */
.rf-page,
.page,
.pf-page {
  overflow-x: hidden !important;
  max-width: 100vw;
}
/* Command Center shell: allow internal scroll (entity/benchmark tables) */
.cc-shell {
  overflow-x: clip;
  max-width: 100vw;
}

/* ── 36. PORTFOLIO ROLL-UP — mobile fixes ──────────────────────────── */
/* Page container */
.pf-page {
  padding: 1rem 0.875rem 2rem !important;
}

/* Header: stack, full width */
.pf-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
}
.pf-header-left { min-width: 0; width: 100%; }
.pf-title {
  font-size: 1.3rem !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.pf-subtitle {
  font-size: 0.8rem !important;
  overflow-wrap: break-word !important;
}
.pf-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}
.pf-header-actions .btn {
  flex: 1 1 auto !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  padding: 0.4rem 0.65rem !important;
  min-height: 44px !important;
}

/* Trade summary cards: 2-col grid on mobile */
.trade-summary {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}
.trade-card {
  min-width: 0 !important;
  padding: 0.6rem 0.75rem !important;
}
.trade-card-count { font-size: 1.1rem !important; }
.trade-card-icon { width: 28px !important; height: 28px !important; font-size: 14px !important; }

/* KPI strip: already handled by rule 6, but ensure portfolio kpi-strip inherits */
.pf-page .kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}
.pf-page .kpi-card {
  padding: 0.75rem !important;
  border-radius: 10px !important;
}
.pf-page .kpi-label { font-size: 0.58rem !important; }
.pf-page .kpi-value { font-size: 1.1rem !important; }

/* Filter bar: horizontal scroll */
.pf-page .filter-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0.35rem !important;
  padding-bottom: 4px;
}
.pf-page .filter-bar::-webkit-scrollbar { display: none; }
.pf-page .filter-chip {
  flex-shrink: 0 !important;
  font-size: 0.68rem !important;
  padding: 0.3rem 0.6rem !important;
  min-height: 32px;
}
.pf-page .filter-sep { display: none !important; }

/* View tabs: horizontal scroll */
.pf-page .view-tabs {
  display: flex !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  width: 100% !important;
}
.pf-page .view-tabs::-webkit-scrollbar { display: none; }
.pf-page .view-tab {
  flex-shrink: 0 !important;
  font-size: 0.72rem !important;
  padding: 0.4rem 0.75rem !important;
  min-height: 36px;
}

/* Entity search: full width */
.pf-page .entity-search {
  width: 100% !important;
}

/* Table → hidden, cards → visible (already in portfolio.html but reinforce) */
.pf-page .entity-table-wrap { display: none !important; }
.pf-page .portco-cards { display: block !important; }

/* Portco mobile cards: full width with proper spacing */
.portco-card {
  padding: 0.85rem !important;
  border-radius: 12px !important;
  margin-bottom: 0.5rem !important;
}
.portco-card-name { font-size: 0.88rem !important; }
.portco-card-kpis {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.4rem !important;
}
.portco-card-kpi-label { font-size: 0.56rem !important; }
.portco-card-kpi-val { font-size: 0.82rem !important; }

/* Outlier banner */
.pf-page .outlier-banner {
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0.75rem !important;
}
.pf-page .outlier-chip { font-size: 0.68rem !important; }

/* Compare bar */
.pf-page .compare-bar {
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0.75rem !important;
}

/* CTA strip */
.pf-page .cta-strip {
  flex-direction: column !important;
  text-align: center;
  gap: 0.75rem !important;
  padding: 1rem !important;
}

/* Benchmarks: portco tags scroll, KPI rows stack */
.pf-page .bm-portco-list {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pf-page .bm-portco-list::-webkit-scrollbar { display: none; }
.pf-page .bm-portco-tag { flex-shrink: 0 !important; }
.pf-page .bm-kpi-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
.pf-page .bm-legend {
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}

/* ── 37. REPUTATION HUB — mobile fixes ─────────────────────────────── */
.rep-grid,
.rep-portco-grid {
  grid-template-columns: 1fr !important;
  gap: 0.6rem !important;
}
.rep-kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}

/* ── 38. CROSS-SELL ENGINE — mobile fixes ──────────────────────────── */
.cs-kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}
.cs-opp-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.cs-metro-grid {
  grid-template-columns: 1fr !important;
}

/* ── 39. INTEGRATION COCKPIT — mobile fixes ────────────────────────── */
.ic-timeline {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.ic-health-grid,
.ic-milestone-grid {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}

/* ── 40. ALERTS — mobile fixes ─────────────────────────────────────── */
.alert-list .alert-card {
  padding: 0.75rem !important;
}
.alert-card-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.4rem !important;
}

/* ── 41. PLAYBOOKS — mobile fixes ──────────────────────────────────── */
.playbook-grid,
.playbook-cards {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}
.playbook-card {
  padding: 0.85rem !important;
  border-radius: 12px !important;
}

/* ── 42. LP REPORTS — mobile fixes ─────────────────────────────────── */
.lp-report-grid,
.lp-reports-list {
  grid-template-columns: 1fr !important;
}

/* ── 43. PROCUREMENT — mobile fixes ────────────────────────────────── */
.proc-table-wrap,
.procurement-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.proc-kpi-strip,
.procurement-kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}

/* ── 44. SERVICE OPS — mobile fixes ────────────────────────────────── */
.svc-kpi-strip,
.service-ops-kpi {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}
.svc-leaderboard-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ── 45. TECHNICIAN PRODUCTIVITY — mobile fixes ────────────────────── */
.tech-grid,
.technician-grid,
.chart-row,
.benchmark-grid {
  grid-template-columns: 1fr !important;
}

/* ── 46. PRICING OPTIMIZATION — mobile fixes ───────────────────────── */
.pricing-grid,
.pricing-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.pricing-kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ── 47. PORTCO OPS — mobile fixes ─────────────────────────────────── */
.portco-ops-grid {
  grid-template-columns: 1fr !important;
}
.portco-ops-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ── 48. PORTFOLIO A&L — already rule 33, just reinforce ───────────── */
.al-kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}

/* ── 49. PORTFOLIO VALUE CREATION — mobile ─────────────────────────── */
.vc-waterfall-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.vc-initiative-grid {
  grid-template-columns: 1fr !important;
}

/* ── 50. GENERIC: all page containers — overflow guard ─────────────── */
[class*="-page"],
[class*="-shell"],
[class*="-container"] {
  max-width: 100vw;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 51. CUSTOM TOP NAV BARS — hide when sidebar is present ──────────
   Pages like benchmarks, cashflow, workforce, earnouts, jobs, pricing,
   integration, and connections use prefixed nav bars (.bm-page-nav,
   .cf-nav, .wf-nav, .en-nav, .jb-nav, .pr-nav, .ip-nav, .ed-nav).
   When sidebar-nav.js is loaded (body.rf-sb-ready), the sidebar
   handles navigation — hide the redundant custom nav bar entirely.
   Without sidebar, enable horizontal scrolling for these navs.         */
body.rf-sb-ready .bm-page-nav,
body.rf-sb-ready .cf-nav,
body.rf-sb-ready .wf-nav,
body.rf-sb-ready .en-nav,
body.rf-sb-ready .jb-nav,
body.rf-sb-ready .pr-nav,
body.rf-sb-ready .ip-nav,
body.rf-sb-ready .ed-nav {
  display: none !important;
}

/* Fallback: if sidebar-nav is NOT present, scroll the custom navs */
.bm-page-nav, .cf-nav, .wf-nav, .en-nav,
.jb-nav, .pr-nav, .ip-nav, .ed-nav {
  padding: 0 12px !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bm-page-nav::-webkit-scrollbar, .cf-nav::-webkit-scrollbar,
.wf-nav::-webkit-scrollbar, .en-nav::-webkit-scrollbar,
.jb-nav::-webkit-scrollbar, .pr-nav::-webkit-scrollbar,
.ip-nav::-webkit-scrollbar, .ed-nav::-webkit-scrollbar {
  display: none;
}
.bm-nav-link, .cf-nav-link, .wf-nav-link, .en-nav-link,
.jb-nav-link, .pr-nav-link, .ip-nav-link, .ed-nav-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  padding: 5px 8px !important;
}
.bm-nav-logo, .cf-logo, .wf-logo, .en-logo,
.jb-logo, .pr-logo, .ip-logo, .ed-logo {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
}
/* Hide the flex separator to reclaim space */
.bm-nav-sep, .cf-sep, .wf-sep, .en-sep,
.jb-sep, .pr-sep, .ip-sep, .ed-sep {
  flex: 0 0 4px !important;
  min-width: 4px !important;
}

/* ── 52. BENCHMARKS PAGE — tabs + controls mobile ────────────────────── */
.bm-tabs {
  display: flex !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}
.bm-tabs::-webkit-scrollbar { display: none; }
.bm-tab {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 0.7rem !important;
  padding: 0.35rem 0.65rem !important;
}
.bm-tabs-sep {
  flex: 0 0 4px !important;
  min-width: 4px !important;
}
.bm-compare-toggle {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 0.68rem !important;
  padding: 0.35rem 0.6rem !important;
}
#ind-toggle-wrap {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 0.68rem !important;
  padding: 0.35rem 0.6rem !important;
}
.bm-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.bm-title {
  font-size: 1.15rem !important;
}
.bm-subtitle {
  font-size: 0.75rem !important;
}
.bm-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.bm-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}
.bm-header-actions .bm-btn {
  font-size: 0.68rem !important;
  padding: 0.35rem 0.55rem !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-height: 44px !important;
}
.bm-summary-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}
.bm-summary-card {
  padding: 0.65rem 0.85rem !important;
}
.bm-summary-value {
  font-size: 1rem !important;
}
.bm-controls {
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}
.bm-filter-select {
  font-size: 0.72rem !important;
  padding: 0.3rem 0.5rem !important;
  min-height: 36px;
}
.bm-table {
  min-width: 600px !important;
}
.bm-legend {
  display: none !important;
}

/* ── 53. CASHFLOW PAGE — mobile layout ───────────────────────────────── */
.cf-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.cf-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.cf-title {
  font-size: 1.15rem !important;
}
.cf-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
}
.cf-header-actions .btn {
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-height: 44px !important;
}

/* ── 54. WORKFORCE PAGE — mobile layout ──────────────────────────────── */
.wf-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.wf-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.wf-title {
  font-size: 1.15rem !important;
}
.wf-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* ── 55. EARNOUTS PAGE — mobile layout ───────────────────────────────── */
.en-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.en-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.en-title {
  font-size: 1.15rem !important;
}
.en-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* ── 56. JOBS PAGE — mobile layout ───────────────────────────────────── */
.jb-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.jb-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.jb-title {
  font-size: 1.15rem !important;
}
.jb-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* ── 57. PRICING PAGE — mobile layout ────────────────────────────────── */
.pr-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.pr-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.pr-title {
  font-size: 1.15rem !important;
}
.pr-header-actions {
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* ── 58. INTEGRATION PAGE — mobile layout ────────────────────────────── */
.ip-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.ip-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.ip-title {
  font-size: 1.15rem !important;
}

/* ── 59. EARNOUT DETAIL PAGE — mobile layout ─────────────────────────── */
.ed-shell {
  padding: 1rem 0.75rem 3rem !important;
}
.ed-header {
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.ed-title {
  font-size: 1.15rem !important;
}

/* ── 60. ACQUISITIONS PAGE — dark theme mobile ───────────────────────── */
.kanban {
  flex-direction: column !important;
  gap: 1rem !important;
  overflow-x: visible !important;
  padding-bottom: 0 !important;
}
.kanban-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}
.kpi-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

/* ── 61. CONNECTIONS PAGE — mobile layout ────────────────────────────── */
.connection-cards,
.conn-grid,
.integration-grid,
.groups-grid,
.connect-hero-grid {
  grid-template-columns: 1fr !important;
  gap: 0.6rem !important;
}

/* ── 62. FSM PAGE — mobile layout ────────────────────────────────────── */
.fsm-grid,
.fsm-portco-list {
  grid-template-columns: 1fr !important;
  gap: 0.6rem !important;
}

/* ── 63. GENERIC: all *-shell containers — mobile padding ────────────── */
[class$="-shell"] {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  max-width: 100vw !important;
}

/* ── 64. GENERIC: all tables inside shells — horizontal scroll ───────── */
[class$="-shell"] table,
[class$="-shell"] .table-wrap,
[class$="-shell"] [class*="table-wrap"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100% !important;
}

/* ── 65. GENERIC: KPI strips across all prefixed pages ───────────────── */
[class$="-kpi-strip"],
[class$="-summary-strip"],
[class*="kpi-strip"],
[class*="kpi-grid"] {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}

/* ── 66. GENERIC: chart containers — prevent overflow ────────────────── */
canvas {
  max-width: 100% !important;
  height: auto !important;
}
[class*="chart-wrap"],
[class*="chart-container"] {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* ── 67. GENERIC: all header rows — stack on mobile ──────────────────── */
[class$="-header"] {
  flex-wrap: wrap !important;
}
[class$="-header-actions"] {
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* ── 68. GENERIC: compare panel — full-width scroll ──────────────────── */
#bm-compare-panel {
  overflow-x: auto !important;
}
.compare-grid {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

} /* end @media (max-width: 768px) */

/* ── iOS INPUT ZOOM PREVENTION — global, all mobile viewports ─────────── */
/* font-size < 16px on any input triggers iOS Safari auto-zoom. Prevent it. */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ── SMALL PHONE OVERRIDES (≤ 380px) ─────────────────────────────────── */
@media (max-width: 380px) {
  body .page,
  body .pf-page {
    padding: 0.75rem 0.625rem 2rem !important;
  }

  body .kpi-grid,
  body .kpi-strip {
    grid-template-columns: 1fr !important;
  }

  body .kpi-value {
    font-size: 1.5rem !important;
  }

  .rf-mobile-nav-item {
    font-size: 0.58rem;
    min-width: 48px;
    padding: 6px 8px;
  }

  .rf-mobile-nav-item svg {
    width: 20px;
    height: 20px;
  }

  /* Portfolio: single-column trade cards on small phones */
  .trade-summary {
    grid-template-columns: 1fr !important;
  }

  /* Portco card KPIs: 2-col on small phones */
  .portco-card-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pf-title {
    font-size: 1.15rem !important;
  }

  /* ── 69. CHAT PAGE — sidebar toggle tap target ──────────────────────── */
  .sidebar-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  /* ── 70. ACQUISITIONS KPI STRIP — 5-col doesn't fit on mobile ───────── */
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 71. CHAT CITATIONS — prevent overflow ───────────────────────────── */
  .citation-block,
  .source-block {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
  }

  /* ── 72. CONNECTIONS — card action buttons tap target ────────────────── */
  .conn-card .btn,
  .int-card .btn,
  .connection-card .btn {
    min-height: 44px !important;
  }

  /* ── 73. LP REPORTS — run card tap targets ───────────────────────────── */
  .run-card {
    padding: 1rem !important;
  }
  .btn-xs {
    min-height: 36px !important;
    padding: 0.375rem 0.75rem !important;
  }

  /* ── 74. PORTFOLIO INTEGRATION — phases grid mobile ─────────────────── */
  .phase-col {
    break-inside: avoid;
  }
  .task-item {
    padding: 0.6rem 0.75rem !important;
    min-height: 44px !important;
    cursor: pointer;
  }

  /* ── 75. ACQUISITIONS DEAL CARD — tap target ─────────────────────────── */
  .deal-card {
    padding: 1rem !important;
  }
  .deal-card .btn {
    min-height: 44px !important;
  }

  /* ── 76. VALUE CREATION — EBITDA bridge chart safe ──────────────────── */
  .waterfall-wrap,
  .bridge-wrap,
  .ebitda-chart-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 77. JOBS — layout collapses before 900px ───────────────────────── */
  .jb-layout {
    grid-template-columns: 1fr !important;
  }

  /* ── 78. PRICING — layout collapses before 900px ─────────────────────── */
  .pr-layout {
    grid-template-columns: 1fr !important;
  }

  /* ── 79. SAMPLE BANNER — tap targets ─────────────────────────────────── */
  #rf-sample-banner .banner-cta {
    min-height: 36px !important;
    padding: 0.5rem 0.875rem !important;
  }

  /* ── 80. WORKFORCE — leaderboard table scroll ────────────────────────── */
  .leaderboard-wrap,
  .wf-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 81. ROOT DASHBOARD (/dashboard) — portco table + KPI tiles ──────── */
  /* portco-table-wrap: overflow-x is also set inline in dashboard.html */
  #portco-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .portco-table {
    min-width: 520px !important;
  }
  /* LP report card: stack on mobile (two-col already covered by rule 11) */
  #lp-report-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #lp-report-card a[id="lp-report-cta"] {
    align-self: stretch !important;
    text-align: center !important;
  }
  /* Trade filter chips: horizontal scroll */
  .trade-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    gap: 5px !important;
  }
  .trade-filter::-webkit-scrollbar { display: none; }
  .trade-chip { flex-shrink: 0 !important; min-height: 36px !important; }
  .table-toolbar { flex-wrap: nowrap !important; overflow-x: auto !important; }

  /* ── 82. ONBOARDING WIZARD (/onboarding) — step pills + top bar ─────── */
  /* Top bar padding: reduce for small screens */
  .top-bar {
    padding: 10px 16px !important;
  }
  /* Step pills: compress labels, scroll on very small screens */
  .step-pills {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  .step-pills::-webkit-scrollbar { display: none; }
  .step-label {
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }
  /* Wizard body: full width with safe padding */
  .wizard-body {
    padding: 0 14px 80px !important;
    margin: 16px auto !important;
  }
  /* Progress bar container: reduce padding */
  .progress-wrap {
    padding: 12px 16px 0 !important;
  }

  /* ── 83. AUTH PAGES (auth-verify, forgot-password, reset-password) ────── */
  /* Cards are already centered flex; just ensure inputs don't overflow */
  .code-digit {
    font-size: 16px !important; /* iOS zoom prevention; clamp min was 20px, 16px is fine */
  }
  .code-input-wrapper {
    gap: clamp(0.2rem, 2vw, 0.5rem) !important;
    justify-content: center !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════
   §84 — Chat page: session actions always visible on mobile (touch)
   On desktop these show on hover; on touch there's no hover state.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Always show delete/rename buttons on session items — touch has no hover */
  .session-item .session-actions {
    display: flex !important;
    position: static !important;
    transform: none !important;
    margin-top: 4px;
    gap: 4px;
  }
  .session-action-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
  }
  /* Message copy button: always visible on mobile (no hover) */
  .msg-ai .msg-copy-btn {
    display: flex !important;
    top: 6px !important;
    right: 6px !important;
    width: 28px !important;
    height: 28px !important;
  }
  /* Chat toolbar: sidebar toggle 44px touch target */
  .sidebar-toggle {
    width: 44px !important;
    height: 44px !important;
  }
  /* Input area: prevent iOS zoom */
  .chat-input-area textarea,
  #chat-input {
    font-size: 16px !important;
  }
  /* Send button: min 44px */
  .send-btn, .chat-send-btn, button[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Empty state chips: easier to tap */
  .empty-chip {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Follow-up buttons: larger tap targets */
  .followup-btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Messages: full width bubbles on tiny screens */
  .msg { max-width: 96% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §85 — Goals page: trajectory charts + action buttons on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Trajectory sparklines: scale to fit */
  .goal-trajectory svg {
    height: 60px !important;
  }
  /* Goal card actions: stack, full-width tap targets */
  .goal-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }
  .goal-card-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  /* "Re-analyze now" button: big enough for fat fingers */
  .btn-reanalyze,
  [onclick*="reanalyze"],
  button[class*="reanalyze"] {
    min-height: 44px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* Goal modal: full screen on small phones */
  .goal-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .goal-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  /* Scorecard strip: 2-col on mobile */
  .goal-scorecard,
  .scorecard-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  /* Filter strip: horizontal scroll */
  .filter-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    padding-bottom: 4px;
  }
  .filter-strip::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex-shrink: 0 !important;
    min-height: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §86 — Admin pages: tables, modals, forms on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Admin layout: all pages that use .admin-layout or .layout grid */
  .admin-layout {
    flex-direction: column !important;
  }
  /* Admin topbar: prevent overflow */
  .topbar {
    padding: 0 12px !important;
    gap: 6px !important;
  }
  /* Admin tables: always scrollable */
  .data-table-wrap,
  .admin-table-wrap,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 480px;
  }
  /* Admin forms: 16px inputs prevent iOS zoom */
  .admin-form input,
  .admin-form select,
  .admin-form textarea,
  form input:not([type=checkbox]):not([type=radio]),
  form select,
  form textarea {
    font-size: 16px !important;
  }
  /* Admin action buttons: 44px touch target */
  .admin-actions .btn,
  .table-actions .btn,
  .row-actions .btn {
    min-height: 44px !important;
  }
  /* Admin modals: bottom sheet on mobile */
  .admin-modal-overlay,
  .modal-overlay {
    align-items: flex-end !important;
  }
  .admin-modal,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
  /* Admin stat cards: 2-col */
  .admin-stats,
  .admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §87 — Homepage: prevent pseudo-element overflow + nav fixes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero/closing section decorative gradients: contain to viewport */
  .hero::before,
  .closing::before,
  section::before {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* Newsletter form input: no min-width on mobile */
  .newsletter-form input,
  .email-capture input,
  .footer-form input {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Nav CTA: ensure tappable */
  .nav-cta {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §88 — Pricing page: comparison table + plan cards on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Comparison table: force horizontal scroll */
  .compare-table-wrap,
  .comparison-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
  }
  .compare-table {
    min-width: 480px !important;
  }
  /* Plan cards: stack, full-width CTAs */
  .pricing-cards,
  .plan-cards,
  .tier-cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .tier-cta,
  .plan-cta,
  .pricing-cta {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §89 — Onboarding wizard: full-page form fixes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Wizard card: no horizontal overflow */
  .rf-wizard-card,
  .wizard-card,
  .onboarding-card {
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
    box-shadow: none !important;
  }
  /* Submit button: full width, large tap target */
  .wizard-submit,
  .onboarding-submit,
  [type="submit"] {
    min-height: 48px !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §90 — Dashboard (/dashboard): "Today" command center mobile polish
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* North Star goal hero strip: readable on small screens */
  .goal-hero-strip,
  .north-star-strip {
    padding: 1rem !important;
    border-radius: 14px !important;
  }
  .goal-hero-strip h2,
  .north-star-strip h2 {
    font-size: 1.1rem !important;
  }
  /* AI diagnosis block: tappable expand */
  .ai-diagnosis,
  .ai-diagnosis-block {
    border-radius: 12px !important;
    padding: 1rem !important;
  }
  /* Action tiles: 2-col on mobile, single-col on tiny screens */
  .action-tiles,
  .action-tile-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }
  .action-tile {
    border-radius: 12px !important;
    padding: 0.85rem !important;
    min-height: 88px !important;
  }
  /* KPI hero stat: legible at 375px */
  .hero-stat,
  .north-star-kpi {
    font-size: 2rem !important;
  }
}

@media (max-width: 380px) {
  .action-tiles,
  .action-tile-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §91 — KPI Builder page: modal full-screen + cards grid on mobile
   Modal: bottom sheet on small phones, full-screen at 320px.
   Cards grid: single column at very small screens.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Modal: bottom sheet on mobile */
  .modal-backdrop.open {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-backdrop.open .modal {
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }
  .modal-header { padding: 16px 16px 0 !important; }
  .modal-body { padding: 16px !important; }
  .modal-footer { flex-direction: column !important; }
  .modal-footer .btn { width: 100% !important; justify-content: center !important; min-height: 44px !important; }

  /* Cards grid: single column on very small screens */
  .cards-grid { grid-template-columns: 1fr !important; }
  .cards-grid .kpi-card { min-height: 0 !important; }
  .page-header { flex-direction: column !important; gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §92 — Chat toolbar: horizontal scroll for toolbar buttons on mobile
   Chat toolbar buttons (Clear, Rename, etc.) overflow-x scroll on mobile
   so they don't push the session name off-screen.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .chat-toolbar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 0 12px !important;
    flex-wrap: nowrap !important;
  }
  .chat-toolbar::-webkit-scrollbar { display: none; }
  .toolbar-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
  .chat-session-name { max-width: 120px !important; }
  /* Usage strip: horizontal scroll */
  #usage-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  #usage-strip::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §93 — Reports build page: overflow-x guard + prompt input on mobile
   Ensure prompt-wrap and scope-tabs don't overflow the viewport.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Scope tabs: horizontal scroll, don't wrap */
  .scope-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .scope-tabs::-webkit-scrollbar { display: none; }
  .scope-tab { flex-shrink: 0 !important; }
  /* Prompt textarea: no fixed min-width overflow */
  #promptInput { font-size: 16px !important; min-height: 100px !important; max-width: 100% !important; }
  /* Build row: stack buttons */
  .build-row { flex-direction: column !important; }
  .build-row .btn-build { width: 100% !important; justify-content: center !important; min-height: 48px !important; }
  /* Tips panel: reduce padding */
  .tips-panel { padding: 12px 14px !important; }
  .tips-list { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §94 — Goals detail/new pages: trajectory chart + action buttons mobile
   Goal trajectory SVG scales down; action buttons stack vertically.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Goal detail: stats row, form layout */
  .goal-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .goal-form-grid { grid-template-columns: 1fr !important; }
  /* Goal detail page chart: scale to fit */
  .trajectory-chart { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Goal new page: step indicators horizontal scroll */
  .step-indicators { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .step-indicators::-webkit-scrollbar { display: none; }
  .step-indicator { flex-shrink: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §95 — Leads board (dashboard/leads/index): dark PE page mobile
   This is a dark-themed PE page — needs mobile overflow handling
   for lead cards and the filter strip.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Leads board: ensure no horizontal overflow on dark bg */
  body { overflow-x: hidden !important; max-width: 100vw !important; }
  .board-header { flex-direction: column !important; gap: 8px !important; }
  .board-filters { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 5px !important; }
  .board-filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0 !important; min-height: 36px !important; }
  .lead-grid { grid-template-columns: 1fr !important; }
  /* Action buttons: 44px min */
  .btn-action { min-height: 44px !important; padding: 8px 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §96 — Settings page: form rows stack on mobile
   The settings page uses .form-row .form-row with grid layout.
   Stack to single column on small screens.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Settings form: stack all rows */
  .form-row { flex-direction: column !important; }
  .form-row label { margin-bottom: 4px !important; }
  /* Settings card footer: stack buttons */
  .card-actions { flex-direction: column !important; }
  .card-actions .btn { width: 100% !important; justify-content: center !important; min-height: 44px !important; }
  /* Email activity: table overflow */
  .email-log-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .email-log-table table { min-width: 480px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §97 — Earnings / Earnout detail: table overflow + KPI grid on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .earnout-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .earnout-table-wrap table { min-width: 480px; }
  .earnout-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
  .earnout-header { flex-direction: column !important; gap: 0.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §98 — Cash / Cashflow: waterfall chart + summary cards on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .waterfall-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .cash-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
  .cash-summary-row { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §99 — Pipeline: kanban + metrics on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pipeline-board { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .pipeline-columns { flex-direction: column !important; gap: 1rem !important; }
  .pipeline-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §100 — Data Sources / Import wizard: step flow on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .import-steps { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0 !important; }
  .import-steps::-webkit-scrollbar { display: none; }
  .import-step { flex-shrink: 0 !important; min-width: 80px !important; }
  .mapping-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .mapping-table { min-width: 480px; }
}