/* Miles Mosaic - App Base Styles */
/* Merged from: lib/style.css + lib/navbar.css + theme.css + mm-design-system.css */
/* @imports inlined 2026-04-23 to eliminate render-blocking CSS waterfall. */
/*
   ============================================================
   CANONICAL CSS — THIS FILE IS THE ONE THAT SHIPS.
   ============================================================
   lib/app.css is the only design-system file loaded by the application
   shell (menu.php). The companion file lib/mm-design-system.css is NOT
   linked anywhere and exists purely for human reference / tooling
   (e.g. tools/css-hex-guard.php). Edits to mm-design-system.css are
   INERT in the browser. If you change a token, change it HERE.

   lib/theme.css is still linked directly by a handful of standalone
   surfaces (settings/*, admin/*, popup.php,
   inbox/shared-with-me.php). Token edits affecting those surfaces
   need to be mirrored to lib/theme.css too.
   ============================================================
*/

/* ============================================================
   INLINED FROM: lib/theme.css
   ============================================================ */
:root {
  color-scheme: light;

  /* === PRIMARY PALETTE (navy — updated from blue) === */
  --color-primary-900: #050C1C;
  --color-primary-800: #14223D;
  --color-primary-700: #0E1F3B;
  --color-primary-600: #25395F;
  --color-primary-500: #3D5278;
  --color-primary-400: #6B7A99;
  --color-primary-300: #9DA8BF;
  --color-primary-200: #C5CDDB;
  --color-primary-100: #E2E7F0;
  --color-primary-50:  #F1F3F8;

  /* === ACCENT PALETTE === */
  --color-accent-900: #7A3300;
  --color-accent-800: #994000;
  --color-accent-700: #CC5500;
  --color-accent-600: #E06200;
  --color-accent-500: #FF6810;
  --color-accent-400: #FF8533;
  --color-accent-300: #FFA866;
  --color-accent-200: #FFCB99;
  --color-accent-100: #FFE5CC;
  --color-accent-50: #FFF5EB;

  /* === SEMANTIC COLORS === */
  --color-success-700: #047857;
  --color-success-600: #059669;
  --color-success-500: #10B981;
  --color-success-100: #D1FAE5;
  --color-success-50: #ECFDF5;

  --color-warning-700: #B45309;
  --color-warning-600: #D97706;
  --color-warning-500: #F59E0B;
  --color-warning-100: #FEF3C7;
  --color-warning-50: #FFFBEB;

  --color-danger-700: #B91C1C;
  --color-danger-600: #DC2626;
  --color-danger-500: #EF4444;
  --color-danger-100: #FEE2E2;
  --color-danger-50: #FEF2F2;

  --color-info-700: #1D4ED8;
  --color-info-600: #2563EB;
  --color-info-500: #3B82F6;
  --color-info-100: #DBEAFE;
  --color-info-50: #EFF6FF;

  /* === NEUTRALS === */
  --color-neutral-950: #0A0F14;
  --color-neutral-900: #1A1F26;
  --color-neutral-800: #2D3440;
  --color-neutral-700: #475569;
  --color-neutral-600: #64748B;
  --color-neutral-500: #94A3B8;
  --color-neutral-400: #B0BEC5;
  --color-neutral-300: #CBD5E1;
  --color-neutral-200: #DDE3EA;
  --color-neutral-100: #EEF2F7;
  --color-neutral-75: #F5F7FA;
  --color-neutral-50: #F8FAFC;
  --color-neutral-0: #FFFFFF;

  /* === TIER COLORS === */
  --tier-base: #94A3B8;
  --tier-silver: #9CA3AF;
  --tier-gold: #D4A843;
  --tier-platinum: #7B8794;
  --tier-diamond: #60A5FA;
  --tier-emerald: #34D399;

  /* === SEMANTIC USAGE TOKENS === */
  --color-primary: var(--mm-navy-700);
  --color-primary-light: var(--mm-navy-600);
  --color-primary-dark: var(--mm-navy-800);
  --color-accent: var(--mm-accent-500);
  --color-accent-light: var(--mm-accent-400);
  --color-accent-dark: var(--mm-accent-700);
  --color-success: var(--color-success-500);
  --color-success-light: var(--color-success-100);
  --color-warning: var(--color-warning-500);
  --color-warning-light: var(--color-warning-100);
  --color-error: var(--color-danger-500);
  --color-error-light: var(--color-danger-100);
  --color-info: var(--color-info-500);
  --color-info-light: var(--color-info-100);
  --color-bg-page: var(--color-neutral-75);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-surface-alt: var(--color-neutral-50);
  --color-bg-muted: var(--mm-navy-50);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-800);
  --color-text-tertiary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-600);
  --color-text-subtle: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-border: var(--mm-border);
  --color-border-light: var(--mm-border-subtle);
  --color-border-strong: var(--mm-border-strong);

  /* === TYPOGRAPHY === */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-family-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;

  --text-display-xl: 700 2.5rem/2.75rem var(--font-family-display);
  --text-display-lg: 700 2rem/2.25rem var(--font-family-display);
  --text-display-md: 700 1.75rem/2rem var(--font-family-display);
  --text-heading-xl: 700 2rem/1.2 var(--font-family-sans);
  --text-heading-lg: 600 1.5rem/1.75rem var(--font-family-sans);
  --text-heading-md: 600 1.25rem/1.5rem var(--font-family-sans);
  --text-heading-sm: 600 1rem/1.25rem var(--font-family-sans);
  --text-body-lg: 400 1rem/1.5rem var(--font-family-sans);
  --text-body-md: 400 0.875rem/1.25rem var(--font-family-sans);
  --text-body-sm: 400 0.8125rem/1.125rem var(--font-family-sans);
  --text-caption: 500 0.75rem/1rem var(--font-family-sans);
  --text-overline: 600 0.6875rem/0.875rem var(--font-family-sans);
  --text-data-xl: 700 2.25rem/2.5rem var(--font-family-display);
  --text-data-lg: 700 1.75rem/2rem var(--font-family-display);
  --text-data-md: 600 1.25rem/1.5rem var(--font-family-sans);
  --text-data-sm: 600 0.875rem/1.125rem var(--font-family-sans);

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;

  --font-weight-regular: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* === SPACING === */
  --space-0: 0px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --spacing-2xs: var(--space-0-5);
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-3);
  --spacing-lg: var(--space-4);
  --spacing-xl: var(--space-6);
  --spacing-2xl: var(--space-8);
  --spacing-3xl: var(--space-12);

  /* === RADIUS & BORDERS === */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  --border-width-thin: 1px;
  --border-width-normal: 1px;
  --border-width-thick: 2px;
  --border-default: 1px solid var(--mm-border);
  --border-strong: 1px solid var(--mm-border-strong);
  --border-subtle: 1px solid var(--mm-border-subtle);
  --border-accent: 2px solid var(--mm-accent-500);
  --border-focus: 2px solid var(--mm-navy-500);

  /* === ELEVATION === */
  --shadow-none: none;
  --shadow-card: 0 1px 3px rgba(0, 20, 50, 0.06), 0 1px 2px rgba(0, 20, 50, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 20, 50, 0.08), 0 2px 4px rgba(0, 20, 50, 0.04);
  --shadow-nav: 0 1px 4px rgba(0, 20, 50, 0.08);
  --shadow-dropdown: 0 8px 24px rgba(0, 20, 50, 0.12), 0 2px 8px rgba(0, 20, 50, 0.06);
  --shadow-modal: 0 16px 48px rgba(0, 20, 50, 0.16), 0 4px 12px rgba(0, 20, 50, 0.08);
  --shadow-toast: 0 8px 32px rgba(0, 20, 50, 0.2);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card-hover);
  --shadow-lg: var(--shadow-dropdown);
  --shadow-xl: var(--shadow-modal);

  /* === MOTION === */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 450ms;
  --duration-slower: 600ms;
  --ease-default: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-normal) var(--ease-default);
  --transition-slow: var(--duration-moderate) var(--ease-default);
  --transition-color: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
  --transition-bg: background-color var(--duration-fast) var(--ease-default);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-default);

  /* === BREAKPOINTS === */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* === LEGACY COMPATIBILITY === */
  --color-brand-blue: var(--color-primary);
  --color-brand-orange: var(--color-accent);
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: var(--mm-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === UTILITY CLASSES (for backward compatibility + new) === */
.text-muted { color: var(--mm-fg-muted); }
.text-subtle { color: var(--mm-fg-subtle); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.bg-surface { background: var(--mm-bg-surface); }
.bg-surface-alt { background: var(--color-bg-surface-alt); }
.border { border: var(--border-default); }
.border-strong { border: var(--border-strong); }
.data-value,
.metric,
.progress-pct,
.currency,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn, .btn-primary, .btn-secondary {
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-all);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn-primary { 
  background: var(--color-accent); 
  color: #fff; 
  border-color: var(--color-accent); 
}
.btn-primary:hover { 
  background: var(--mm-accent-600); 
  border-color: var(--mm-accent-600); 
}

.btn-secondary { 
  background: var(--color-primary); 
  color: #fff; 
  border-color: var(--color-primary); 
}
.btn-secondary:hover { 
  background: var(--mm-navy-600); 
  border-color: var(--mm-navy-600); 
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

/* I-042 — unified card system. `.mm-card` is the canonical base; `.card`
 * remains as an alias for legacy markup. Variants:
 *   (.mm-card--stat removed in R3-023 — use `.stat-card` for KPI tiles)
 *   .mm-card--program  programme-row (logo + body) treatment
 *   .mm-card--padded   marketing extra-padding variant
 */
.mm-card,
.card {
  background: var(--mm-bg-surface);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.mm-card:hover,
.card:hover {
  box-shadow: var(--shadow-card-hover);
}
/* R3-023: `.mm-card--stat` removed — `.stat-card` (assets/css/stat-card.css)
 * is the canonical KPI-tile pattern. The proposed `.mm-card--stat` modifier
 * was never adopted in markup; keeping it would mislead future devs. */
.mm-card--padded  { padding: var(--space-8); }
.mm-card--program { padding: var(--space-5); }

/* ============================================================
   A8/A12-rest — extracted patterns from loyalty/compare.php +
   loyalty/status_run.php inline styles (2026-05-13).

   .mm-section-card        — bordered container with alt background;
                             used by the trip-builder + similar
                             "what-if" panel cards.
   .mm-section-card__head  — flex header row inside the card.
   .mm-section-card__title — h2-rank title (18px).
   .mm-section-card__lede  — 13px muted lede paragraph.
   .mm-recommend-banner    — success-paper banner for tier-crossed
                             recommendations. Full hairline + tinted
                             paper, no border-left stripe (DESIGN.md
                             absolute ban).
   .mm-disclaimer-foot     — 11px italic muted footnote.

   .mm-segment-grid        — 4-column form row for trip-builder
                             segments (origin / dest / cabin / miles).
   .mm-segment-grid input,
   .mm-segment-grid select — compact form input styling.
   ============================================================ */
.mm-section-card {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  background: var(--mm-bg-alt);
}
.mm-section-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mm-section-card__title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--mm-fg-strong);
}
.mm-section-card__lede {
  margin: 0;
  font-size: 13px;
  color: var(--mm-fg-muted);
}
.mm-section-card__subhead {
  font-size: 14px;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--mm-fg-strong);
}
.mm-recommend-banner {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--mm-success-bg);
  border: 1px solid var(--mm-success-100, #D1FAE5);
  color: var(--mm-success-700, #047857);
  font-size: 13px;
  border-radius: var(--mm-radius-card);
}
.mm-disclaimer-foot {
  margin: var(--space-3) 0 0;
  font-size: 11px;
  color: var(--mm-fg-muted);
  font-style: italic;
}

.mm-segment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 90px 110px;
  gap: var(--space-2);
}
.mm-segment-grid input,
.mm-segment-grid select {
  padding: 8px 10px;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-6, 6px);
  font-size: 13px;
  background: var(--mm-bg-surface);
  color: var(--mm-fg-strong);
}
.mm-segment-grid input[name^="tb_origin"],
.mm-segment-grid input[name^="tb_dest"] {
  text-transform: uppercase;
}
.mm-segment-grid input:focus,
.mm-segment-grid select:focus {
  border-color: var(--mm-navy);
  box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.10);
}

/* Form action row underneath .mm-segment-grid (Submit + Reset). */
.mm-section-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.mm-section-card__actions-reset {
  font-size: 12px;
  color: var(--mm-fg-muted);
  text-decoration: none;
}
.mm-section-card__actions-reset:hover { color: var(--mm-navy); }

/* Status-run page utilities (loyalty/status_run.php). */
.mm-status-run__diag-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.mm-status-run__diag-list li { margin-bottom: 10px; }
.mm-status-run__diag-meta { color: var(--mm-fg-subtle); font-size: 12px; }
.mm-status-run__diag-detail { color: var(--mm-fg-subtle); }
.mm-status-run__diag-action { margin-top: 6px; }
.mm-status-run__policy-note { margin: 12px 0 0; color: var(--mm-fg-muted); font-size: 13px; }
.mm-status-run__no-routes { margin: 8px 0 0; color: var(--mm-fg-muted); font-size: 14px; }
.mm-status-run__actions {
  margin-top: 14px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}
.mm-status-run__narration {
  font-size: 13px;
  color: var(--mm-fg-subtle);
  max-width: 600px;
  line-height: 1.5;
}

/* Bordered + scrollable wrapper for .mm-data-table — kept page-side rather
   than baked into the primitive because not every data-table wants it. */
.mm-data-table--bordered {
  margin-top: var(--space-2);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  overflow-x: auto;
}
.mm-data-table__cell--strong-num {
  font-weight: 600;
  color: var(--mm-navy-700);
}

/* Removed 2026-05-13: dead .alert-error / .alert-success block.
   Both classes were zero-referenced in any live PHP/HTML markup, and
   both used border-left: 4px solid (a DESIGN.md absolute ban). The
   live alert component below (.mm-alert family) replaces them. */

/* ============================================================
   Alert banners — .mm-alert family (used by
   components/alert_banner.php + profile/subscriptions.php).

   Inlined from lib/style.css 2026-05-13 as part of the style.css
   reconciliation (delete-and-fold pass after A11/A13 confirmed
   lib/app.css is canonical).

   Fix while inlining: the original block used `border-left: 4px
   solid transparent` on the base + `border-color: <semantic>` on
   modifiers, producing a 4px coloured left stripe — a DESIGN.md
   absolute ban (side-stripe accents > 1px). Replaced with a full
   1px hairline on the base; modifiers paint that hairline with the
   semantic colour. Visual outcome: full ring of paired-paper
   background instead of a left-stripe-on-paper.
   ============================================================ */
.mm-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--mm-radius-lg, 12px);
	border: 1px solid transparent;
	font: var(--text-body-sm);
	margin-bottom: var(--space-4);
}
.mm-alert--success {
	background: var(--mm-success-bg);
	border-color: var(--mm-success-100, #D1FAE5);
	color: var(--mm-success-700, #047857);
}
.mm-alert--warning {
	background: var(--mm-warning-bg);
	border-color: var(--mm-warning-100, #FEF3C7);
	color: var(--mm-warning-700, #B45309);
}
.mm-alert--error {
	background: var(--mm-danger-bg);
	border-color: var(--mm-danger-100, #FEE4E2);
	color: var(--mm-danger-700, #B91C1C);
}
.mm-alert--info {
	background: var(--mm-navy-50);
	border-color: var(--mm-border-strong);
	color: var(--mm-navy-700);
}

/* ============================================================
   INLINED FROM: lib/mm-design-system.css
   ============================================================ */
/* ============================================================
   Miles Mosaic — Design System tokens (--mm-* namespace)
   Supplements lib/theme.css. Import AFTER theme.css so
   both namespaces are available.
   ============================================================ */

/* Google Fonts @import removed 2026-04-23 for PageSpeed. Saves 500–800 ms of
 * third-party DNS/TLS/download on slow mobile (the @import was render-blocking).
 * All four families have strong system-font fallbacks declared in the
 * --font-family-* / --mm-font-* variables above (Inter → Segoe UI/BlinkMacSystem;
 * Cormorant Garamond → Georgia; DM Sans → system-ui; JetBrains Mono → SF Mono).
 * If custom fonts are wanted back, add a <link rel="preload" as="font"> + a
 * self-hosted woff2 so we don't pay the third-party cost again. */

:root {
  /* ===== BRAND CORE ===== */
  --mm-navy:          #0E1F3B;
  --mm-navy-900:      #050C1C;
  --mm-navy-800:      #14223D;
  --mm-navy-700:      #0E1F3B;
  --mm-navy-600:      #25395F;
  --mm-navy-500:      #3D5278;
  --mm-navy-400:      #6B7A99;
  --mm-navy-300:      #9DA8BF;
  --mm-navy-200:      #C5CDDB;
  --mm-navy-100:      #E2E7F0;
  --mm-navy-50:       #F1F3F8;

  /* Primary accent — ORANGE */
  --mm-accent:        #FF6810;
  --mm-accent-700:    #C44600;
  --mm-accent-600:    #C44600;
  --mm-accent-500:    #FF6810;
  --mm-accent-400:    #FF8A33;
  --mm-accent-300:    #FFA866;
  --mm-accent-200:    #FFCFA8;
  --mm-accent-tint:   #FFE8D6;
  --mm-accent-50:     #FFF4EC;

  /* Back-compat gold aliases */
  --mm-gold:          var(--mm-accent);
  --mm-gold-700:      var(--mm-accent-700);
  --mm-gold-600:      var(--mm-accent-600);
  --mm-gold-500:      var(--mm-accent-500);
  --mm-gold-400:      var(--mm-accent-400);
  --mm-gold-300:      var(--mm-accent-300);
  --mm-gold-200:      var(--mm-accent-200);
  --mm-gold-tint:     var(--mm-accent-tint);
  --mm-gold-50:       var(--mm-accent-50);

  /* ===== SURFACES ===== */
  --mm-bg-page:       #F4F6FA;
  --mm-bg-surface:    #FFFFFF;
  --mm-bg-alt:        #F8FAFC;
  --mm-bg-inverse:    #0E1F3B;
  --mm-broadsheet-cream: #FAF6EF;

  /* ===== SECTION RHYTHM ===== (mirror — keep in sync with lib/mm-design-system.css) */
  --mm-section-padding-lg: clamp(56px, 8vw, 80px);
  --mm-section-padding-md: clamp(40px, 6vw, 64px);
  --mm-section-padding-sm: clamp(24px, 4vw, 40px);

  /* ===== PACE TOKENS (mirror) ===== */
  --mm-pace-on-track:       #2D8F5C;
  --mm-pace-on-track-paper: #DBF1E3;
  --mm-pace-amber:          #C58A2B;
  --mm-pace-amber-paper:    #F8EAC8;
  --mm-pace-ruby:           #B53A2B;
  --mm-pace-ruby-paper:     #F5D8D2;

  /* ===== ORANGE-SOFT + NAVY-DEEP aliases (mirror) ===== */
  --mm-orange-soft:         var(--mm-accent-300, #FFA866);
  --mm-navy-deep:           #050C1C;

  /* ===== TEXT ===== */
  --mm-fg:            #111111;
  --mm-fg-strong:     #0B1220;
  --mm-fg-muted:      #6B7A99;
  --mm-fg-subtle:     #697587;  /* F-025: was #94A3B8 (2.85:1 on white, fails WCAG AA). #697587 = 4.5:1 */
  --mm-fg-inverse:    #FFFFFF;
  --mm-fg-inverse-muted: rgba(255,255,255,0.72);

  /* ===== BORDERS ===== */
  --mm-border:        #E2E7F0;
  --mm-border-strong: #C5CDDB;
  --mm-border-subtle: #EEF1F6;

  /* ===== SEMANTIC ===== */
  --mm-success:       #117A4B;
  --mm-success-bg:    #E6F4EC;
  --mm-warning:       #B45309;
  --mm-warning-bg:    #FEF3C7;
  --mm-danger:        #B42318;
  --mm-danger-bg:     #FEE4E2;
  --mm-info:          #1D4ED8;
  --mm-info-bg:       #EFF4FF;

  /* ===== SEMANTIC — extended scale (mirror of mm-design-system.css, Patch 24 A1).
     The 500/600/700 vibrant variants used by buttons + chips that need a
     brightness gradient. */
  --mm-success-50:    #ECFDF5;
  --mm-success-100:   #D1FAE5;
  --mm-success-500:   #10B981;
  --mm-success-600:   #059669;
  --mm-success-700:   #047857;
  --mm-warning-50:    #FFFBEB;
  --mm-warning-100:   #FEF3C7;
  --mm-warning-500:   #F59E0B;
  --mm-warning-600:   #D97706;
  --mm-warning-700:   #B45309;
  --mm-danger-50:     #FEF2F2;
  --mm-danger-100:    #FEE2E2;
  --mm-danger-500:    #EF4444;
  --mm-danger-600:    #DC2626;
  --mm-danger-700:    #B91C1C;
  --mm-info-50:       #EFF6FF;
  --mm-info-100:      #DBEAFE;
  --mm-info-500:      #3B82F6;
  --mm-info-600:      #2563EB;
  --mm-info-700:      #1D4ED8;

  /* ===== TIER COLORS ===== */
  --mm-tier-base:     #94A3B8;
  --mm-tier-silver:   #9CA3AF;
  --mm-tier-gold:     #D4A017;
  --mm-tier-platinum: #4B5563;
  --mm-tier-diamond:  #4C3A9C;
  --mm-tier-emerald:  #059669;

  /* ===== TYPOGRAPHY FAMILIES ===== */
  --mm-font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mm-font-heading:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ===== TYPE SCALE — UI ===== */
  --mm-h1: 700 32px/1.2 var(--mm-font-heading);
  --mm-h2: 700 24px/1.3 var(--mm-font-heading);
  --mm-h3: 600 18px/1.4 var(--mm-font-heading);
  --mm-body: 400 15px/1.6 var(--mm-font-body);
  --mm-body-sm: 400 13px/1.5 var(--mm-font-body);
  --mm-label: 500 13px/1.4 var(--mm-font-body);
  --mm-caption: 500 12px/1.4 var(--mm-font-body);
  --mm-overline: 600 11px/1.3 var(--mm-font-body);
  --mm-mono: 500 13px/1.5 var(--mm-font-mono);
  --mm-mono-lg: 600 15px/1.4 var(--mm-font-mono);

  /* ===== TYPE SIZES — standalone size tokens (mirror of mm-design-system.css).
     Use when a CSS rule sets weight/line-height/family separately and
     only the SIZE axis needs a token. */
  --mm-text-xs:   11px;
  --mm-text-sm:   12px;
  --mm-text-base: 13px;
  --mm-text-md:   15px;
  --mm-text-lg:   18px;
  --mm-text-xl:   24px;
  --mm-text-2xl:  32px;
  --mm-text-3xl:  48px;

  /* ===== TYPE SIZES — off-scale (mirror of mm-design-system.css, Patch 22). */
  --mm-text-10:  10px;
  --mm-text-14:  14px;
  --mm-text-16:  16px;
  --mm-text-20:  20px;
  --mm-text-22:  22px;
  --mm-text-28:  28px;

  /* ===== TYPE SCALE — MARKETING / DISPLAY ===== */
  --mm-display-xl: 700 56px/1.08 var(--mm-font-display);
  --mm-display-lg: 700 44px/1.1  var(--mm-font-display);
  --mm-display-md: 700 36px/1.15 var(--mm-font-display);
  --mm-display-sm: 700 28px/1.2  var(--mm-font-display);

  /* ===== SPACING ===== */
  --mm-space-1: 4px;
  --mm-space-2: 8px;
  --mm-space-3: 12px;
  --mm-space-4: 16px;
  --mm-space-5: 20px;
  --mm-space-6: 24px;
  --mm-space-8: 32px;
  --mm-space-10: 40px;
  --mm-space-12: 48px;
  --mm-space-16: 64px;

  /* ===== RADII ===== */
  --mm-radius-input: 4px;
  --mm-radius-card: 8px;
  --mm-radius-lg: 12px;
  --mm-radius-xl: 16px;
  --mm-radius-pill: 24px;
  --mm-radius-full: 999px;

  /* ===== RADII — off-scale (mirror of mm-design-system.css, Patch 22). */
  --mm-radius-2:  2px;
  --mm-radius-3:  3px;
  --mm-radius-6:  6px;
  --mm-radius-10: 10px;
  --mm-radius-14: 14px;
  --mm-radius-18: 18px;
  --mm-radius-20: 20px;
  --mm-radius-22: 22px;

  /* ===== SHADOWS ===== */
  --mm-shadow-sm:    0 1px 2px rgba(26,43,76,0.06);
  --mm-shadow-card:  0 1px 3px rgba(26,43,76,0.06), 0 1px 2px rgba(26,43,76,0.04);
  --mm-shadow-md:    0 4px 12px rgba(26,43,76,0.08), 0 2px 4px rgba(26,43,76,0.04);
  --mm-shadow-lg:    0 12px 28px rgba(26,43,76,0.12), 0 4px 8px rgba(26,43,76,0.06);
  --mm-shadow-accent-glow: 0 6px 18px rgba(255,107,0,0.28);
  --mm-shadow-gold-glow:   0 6px 18px rgba(255,107,0,0.28);
  --mm-shadow-navy-glow: 0 12px 32px rgba(26,43,76,0.22);

  /* ===== MOTION ===== */
  --mm-dur-fast: 120ms;
  --mm-dur: 200ms;
  --mm-dur-slow: 320ms;
  --mm-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --mm-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================
   Utility classes — design system namespace
   ============================================================ */
.mm-eyebrow {
  font: var(--mm-overline);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mm-fg-muted);
}

.mm-display     { font: var(--mm-display-lg);  color: var(--mm-navy); letter-spacing: -0.015em; }
.mm-display-xl  { font: var(--mm-display-xl);  color: var(--mm-navy); letter-spacing: -0.02em; }
.mm-display-md  { font: var(--mm-display-md);  color: var(--mm-navy); letter-spacing: -0.015em; }
.mm-display-sm  { font: var(--mm-display-sm);  color: var(--mm-navy); letter-spacing: -0.01em; }
.mm-tabular     { font-variant-numeric: tabular-nums; }
.mm-mono        { font: var(--mm-mono); }

/* Vertical stack — column flex with consistent token-driven gap.
   Use .mm-stack for default 20px (--mm-space-5), .mm-stack--tight
   for 8px, .mm-stack--loose for 32px. Replaces repeated inline
   margin-top:18px / display:flex;flex-direction:column;gap:Xpx. */
.mm-stack         { display: flex; flex-direction: column; gap: var(--mm-space-5); }
.mm-stack--tight  { gap: var(--mm-space-2); }
.mm-stack--loose  { gap: var(--mm-space-8); }

/* Reset list — strips bullet + default padding/margin. Pair with
   .mm-stack--tight on the same element for a vertical text list. */
.mm-list-reset    { list-style: none; margin: 0; padding: 0; }

/* Selection highlight */
::selection { background: var(--mm-gold-tint); color: var(--mm-fg-strong); }

/* ============================================================
   Base element typography — headings use DM Sans, body uses Inter.
   Low-specificity rules; component styles override freely.
   ============================================================ */
h1 {
  font: var(--mm-h1);
  color: var(--mm-fg-strong);
  margin: 0 0 var(--mm-space-4);
  letter-spacing: -0.01em;
}
h2 {
  font: var(--mm-h2);
  color: var(--mm-fg-strong);
  margin: 0 0 var(--mm-space-3);
  letter-spacing: -0.005em;
}
h3 {
  font: var(--mm-h3);
  color: var(--mm-fg-strong);
  margin: 0 0 var(--mm-space-2);
}
small { font: var(--mm-caption); color: var(--mm-fg-muted); }
code, kbd, samp { font: var(--mm-mono); }

/* ============================================================
   Global focus ring — 2 px gold, 2 px offset (design spec)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--mm-gold, #FF6810);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Shared button primitives
   ============================================================ */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--mm-font-body);
  padding: 12px 20px; border-radius: var(--mm-radius-card);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur-fast) var(--mm-ease);
}
.mm-btn:hover { transform: translateY(-1px); }
.mm-btn--primary {
  background: var(--mm-gold); color: #fff; border-color: var(--mm-gold);
  box-shadow: var(--mm-shadow-gold-glow);
}
.mm-btn--primary:hover { background: var(--mm-gold-600); }
.mm-btn--ghost {
  background: #fff; color: var(--mm-navy); border-color: var(--mm-navy-100);
}
.mm-btn--ghost:hover { border-color: var(--mm-navy); }
.mm-btn--sm  { padding: 8px 14px; font-size: 13px; }
.mm-btn--lg  { padding: 16px 28px; font-size: 16px; }
.mm-btn--block { width: 100%; }

/* ============================================================
   Shared badge primitives
   ============================================================ */
.mm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--mm-radius-pill);
  font: 600 11px/1 var(--mm-font-body); border: 1px solid transparent;
  white-space: nowrap;
}
.mm-badge__dot {
  width: 6px; height: 6px; border-radius: var(--mm-radius-full);
  background: currentColor; flex-shrink: 0;
}

/* Tier variants */
.mm-badge--gold     { background: var(--mm-gold-tint);        color: var(--mm-gold-700);  border-color: #EED9A3; }
.mm-badge--navy     { background: var(--mm-navy-50);          color: var(--mm-navy);      border-color: var(--mm-navy-100); }
.mm-badge--silver   { background: #F1F5F9;   color: #475569;  border-color: #CBD5E1; }
.mm-badge--platinum { background: #E5E7EB;   color: #374151;  border-color: #CBD5E1; }
.mm-badge--emerald  { background: #D1FAE5;   color: #065F46;  border-color: #A7F3D0; }
.mm-badge--diamond  { background: rgba(76,58,156,.10); color: #4C3A9C; border-color: rgba(76,58,156,.22); }

/* Pace-state variants (Patch 1 — kebab-case canonical).
   Consumers should emit kebab-case (e.g. on-track, at-risk, no-data).
   The badge.php partial normalises underscore → dash automatically. */
.mm-badge--on-track  { background: var(--mm-success-bg); color: var(--mm-success); border-color: #A7F3D0; }
.mm-badge--at-risk   { background: var(--mm-warning-bg); color: var(--mm-warning); border-color: #FDE68A; }
.mm-badge--behind    { background: #FFF7ED;              color: #C2410C;            border-color: #FED7AA; }
.mm-badge--attention { background: var(--mm-warning-bg); color: var(--mm-warning); border-color: #FDE68A; }
.mm-badge--achieved  { background: var(--mm-info-bg);   color: var(--mm-info);     border-color: #BFDBFE; }
.mm-badge--no-data   { background: var(--mm-navy-50);   color: var(--mm-fg-muted); border-color: var(--mm-navy-100); }

/* `.mm-badge--status` is the modifier emitted by components/badge.php to
   denote that the badge carries a pace state (not a tier). It shares all
   the visual rules above; this selector exists only so consumers can
   target "any state pill" if they need to. */
.mm-badge--status { font: 600 11px/1 var(--mm-font-body); }

/* ============================================================
   Shared pill primitive (Patch 1)

   `.mm-pill` is an alias of `.mm-badge` for non-tier, non-pace
   informational tags (e.g. the reward-balance warning emitted by
   components/dashboard/program_card.php). Same shape and dot,
   different colour set.
   ============================================================ */
.mm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--mm-radius-pill);
  font: 600 11px/1 var(--mm-font-body); border: 1px solid transparent;
  background: var(--mm-navy-50); color: var(--mm-fg-muted); border-color: var(--mm-navy-100);
  white-space: nowrap;
}
.mm-pill__dot {
  width: 6px; height: 6px; border-radius: var(--mm-radius-full);
  background: currentColor; flex-shrink: 0;
}
.mm-pill--warn   { background: var(--mm-warning-bg); color: var(--mm-warning); border-color: #FDE68A; }
.mm-pill--danger { background: var(--mm-danger-bg);  color: var(--mm-danger);  border-color: #FEE4E2; }

/* ============================================================
   Shared progress bar
   ============================================================ */
.mm-bar { height: 8px; background: var(--mm-navy-50); border-radius: 99px; overflow: hidden; }
.mm-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mm-gold-400), var(--mm-gold));
  border-radius: 99px;
  transition: width var(--mm-dur-slow) var(--mm-ease);
}

/* ============================================================
   Legacy navbar block — TRIMMED 2026-05-13 (A11-rest).
   ------------------------------------------------------------
   The original 608-line block (inlined from the deleted
   lib/navbar.css in commit 4a902fb) defined a top navigation
   system whose markup has not been emitted by components/
   navigation.php since the .mm-topnav redesign. An alive/dead
   audit confirmed 34 of 38 .navbar-* classes had ZERO
   emission anywhere in the live PHP/HTML; the only survivors
   are the four classes below, which are hybrid-applied on
   .mm-topnav__* elements (hover-anchors + JS hooks):

     .navbar-quick-actions  (hybrid on .mm-topnav__qadd)
     .navbar-item-dropdown  (hybrid on .mm-topnav__user)
     .navbar-user-toggle    (hybrid on .mm-topnav__avatar-btn,
                             JS hook in components/navigation.php)
     .navbar-lock           (legacy icon container in mobile FAB)

   Plus the .mm-topnav__user::after hover bridge that bridges
   the 8px gap between avatar button and dropdown panel, kept
   here because it lives in the navbar-system context.

   Plus .mm-footer-nav* (used by menu.php — separate surface).
   ============================================================ */

.navbar-quick-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar-user-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.navbar-item-dropdown {
  position: relative;
}

/* Bridge the 8px gap between avatar button and dropdown so hover doesn't drop */
.mm-topnav__user::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.mm-footer-nav {
  margin-top: var(--space-2);
  font: var(--text-caption);
  color: var(--mm-fg-muted);
}

.mm-footer-nav a {
  color: var(--mm-fg-muted);
  text-decoration: none;
}

.mm-footer-nav a:hover {
  color: var(--color-text-primary);
}

/* ============================================================
   New design-system authenticated top nav  (.mm-topnav)
   ============================================================ */
.mm-topnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--mm-navy, #0E1F3B);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mm-topnav__inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 0 32px; height: 64px;
}

.mm-topnav__brand {
  display: flex; gap: 10px; align-items: center;
  text-decoration: none; color: #fff; flex-shrink: 0;
}
.mm-topnav__brand img { width: 28px; height: 28px; }
.mm-topnav__brand span {
  font: 700 16px var(--mm-font-heading, 'DM Sans', sans-serif);
  color: #fff;
}

.mm-topnav__links {
  display: flex; gap: 2px; flex: 1; margin-left: 4px;
}

.mm-topnav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 6px;
  color: rgba(255,255,255,0.65); text-decoration: none;
  font: 500 14px var(--mm-font-body, 'Inter', sans-serif);
  white-space: nowrap;
  transition: background var(--mm-dur, 200ms) var(--mm-ease),
              color var(--mm-dur, 200ms) var(--mm-ease);
}
.mm-topnav__link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.mm-topnav__link.is-active {
  background: rgba(255,107,0,0.14); color: #fff;
  box-shadow: inset 0 -2px 0 var(--mm-accent, #FF6810);
}

.mm-topnav__upgrade {
  color: var(--mm-gold-400, #FF8A33) !important;
  font-weight: 600;
}

.mm-topnav__right {
  display: flex; gap: 10px; align-items: center; flex-shrink: 0; margin-left: auto;
}

/* Avatar button */
.mm-topnav__avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; padding: 0; overflow: hidden; position: relative;
  display: grid; place-items: center;
  transition: background var(--mm-dur, 200ms);
}
.mm-topnav__avatar-btn:hover { background: rgba(255,255,255,0.12); }
.mm-topnav__avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.mm-topnav__avatar-init {
  display: none; width: 100%; height: 100%; border-radius: 50%;
  background: var(--mm-accent, #FF6810); color: #fff;
  font: 600 14px var(--mm-font-heading, 'DM Sans', sans-serif);
  place-items: center;
}

/* User dropdown */
.mm-topnav__usermenu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: var(--mm-radius-lg, 12px);
  border: 1px solid var(--mm-border, #E2E7F0);
  box-shadow: var(--mm-shadow-lg, 0 12px 28px rgba(26,43,76,0.12));
  min-width: 200px; list-style: none; padding: 6px; margin: 0;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--mm-dur-fast, 120ms), transform var(--mm-dur-fast, 120ms);
}
.mm-topnav__usermenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mm-topnav__usermenu-header {
  padding: 8px 12px 10px; font: 600 13px var(--mm-font-heading, 'DM Sans', sans-serif);
  color: var(--mm-fg-strong, #0B1220); border-bottom: 1px solid var(--mm-border, #E2E7F0); margin-bottom: 4px;
}
.mm-topnav__usermenu-link {
  display: block; padding: 8px 12px; border-radius: 6px;
  color: var(--mm-fg, #111); text-decoration: none;
  font: 400 14px var(--mm-font-body, 'Inter', sans-serif);
  transition: background var(--mm-dur-fast, 120ms);
}
.mm-topnav__usermenu-link:hover { background: var(--mm-navy-50, #F1F3F8); }
.mm-topnav__usermenu-divider { border: none; border-top: 1px solid var(--mm-border, #E2E7F0); margin: 4px 0; }
.mm-topnav__usermenu-logout { color: var(--mm-danger, #B42318); }

/* Secondary subnav */
.mm-topnav__subnav {
  background: var(--mm-navy-800, #14223D);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mm-topnav__subnav-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; gap: 4px; padding: 0 32px;
  overflow-x: auto; scrollbar-width: none;
}
.mm-topnav__subnav-inner::-webkit-scrollbar { display: none; }
.mm-topnav__subnav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; color: rgba(255,255,255,0.58);
  text-decoration: none; font: 500 13px var(--mm-font-body, 'Inter', sans-serif);
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color var(--mm-dur-fast, 120ms), border-color var(--mm-dur-fast, 120ms);
}
.mm-topnav__subnav-link:hover { color: rgba(255,255,255,0.9); }
.mm-topnav__subnav-link.is-active { color: #fff; border-bottom-color: var(--mm-accent, #FF6810); }
.mm-topnav__subnav-link--gated { opacity: 0.55; cursor: not-allowed; }
.mm-topnav__pro-badge {
  font: 700 9px var(--mm-font-body, 'Inter', sans-serif); font-style: normal;
  background: var(--mm-accent, #FF6810); color: #fff; padding: 2px 5px;
  border-radius: var(--mm-radius-pill, 24px); letter-spacing: 0.04em; text-transform: uppercase;
}
.mm-topnav__tier-chip {
  font: 600 10px var(--mm-font-body, 'Inter', sans-serif);
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
  padding: 2px 8px; border-radius: 99px; align-self: center;
}
.mm-topnav__lock-icon { display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; opacity: 0.7; vertical-align: middle; }
.mm-topnav__lock-icon-svg { width: 12px; height: 12px; }

/* Mobile tabs */
.mm-topnav__mobile-tabs {
  display: none;
  background: var(--mm-navy-900, #050C1C);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mm-topnav__mobile-tab {
  flex: 1; padding: 10px 8px; text-align: center;
  color: rgba(255,255,255,0.55); text-decoration: none;
  font: 500 12px var(--mm-font-body, 'Inter', sans-serif);
  border-bottom: 2px solid transparent;
  transition: color var(--mm-dur-fast, 120ms), border-color var(--mm-dur-fast, 120ms);
}
.mm-topnav__mobile-tab.is-active { color: #fff; border-bottom-color: var(--mm-accent, #FF6810); }

@media (max-width: 768px) {
  .mm-topnav__inner { padding: 0 20px; height: 54px; }
  .mm-topnav__links { display: none; }
  .mm-topnav__mobile-tabs { display: flex; }
  .mm-topnav__subnav-inner { padding: 0 20px; }
  .mm-topnav__brand span { font-size: 15px; }
}

/* ============================================================
   Public / marketing nav (.mkt-nav)
   ============================================================ */
.mkt-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mm-border-subtle, #EEF1F6);
}
.mkt-nav__brand img { height: 30px; width: auto; display: block; }
.mkt-nav__links { display: flex; gap: 28px; }
.mkt-nav__links a {
  color: var(--mm-fg-strong, #0B1220);
  font: 500 14px var(--mm-font-body, 'Inter', sans-serif);
  text-decoration: none;
  transition: color var(--mm-dur, 200ms) var(--mm-ease, ease);
}
.mkt-nav__links a:hover { color: var(--mm-accent-600, #C44600); }
.mkt-nav__cta { display: flex; gap: 10px; }
@media (max-width: 768px) {
  .mkt-nav { padding: 14px 20px; }
  .mkt-nav__links { display: none; }
}

/* ============================================================
   ORIGINAL app.css BODY (post-imports)
   ============================================================ */
body {
	font-family: var(--font-family-sans);
}


/* Removed 2026-05-13 (A7-rest): dead .table-hover / .table-nohover /
   .table-withborder block (24 lines, 4 !important). None of the three
   classes were emitted in any live PHP/HTML markup. .mm-table now owns
   the table look + hover behaviour (A13). */
.faq-q { border-left: 4px solid var(--mm-navy-700); }
.faq-item.open .faq-q { border-left-color: var(--mm-accent-500); }
.faq-q:hover { background: var(--color-bg-surface-alt); }

.nobottomborder {
	padding: 8px;
	text-align: left;
	border-bottom: 1px hidden var(--mm-border-strong);
  }

/* ============================================================
   A13 — canonical .mm-table primitive (post-2026-05-13 sign-off).

   Single primitive with variants — no parallel .mm-data-table.
   Decisions per the design call:
   - Default padding 12×16 (var(--space-3) var(--space-4));
     analytics surfaces opt into .mm-table--tight for 10×8.
   - Header is uppercase 11px, letter-spacing 0.08em,
     font-weight 600, color var(--mm-fg-muted). Smaller-and-uppercase
     reads as data-table convention; bigger headers read as body copy.
   - Tabular nums are opt-in via .mm-table--numeric (not default).
     Text-heavy tables (route names, property names) don't need it.
   - No .mm-table--carded variant. Page wraps in .mm-card when it
     wants the rounded-card frame.

   Apply: class="mm-table" on <table>. Optional modifiers:
     .mm-table--compact   8×12 padding (compactish data, legacy)
     .mm-table--tight     10×8 padding (analytics, leaderboards)
     .mm-table--numeric   tabular-nums on every <td>; pair with
                          class="is-num" on numeric <th>/<td> cells
                          for right-align.
   ============================================================ */
.mm-table {
	width: 100%;
	border-collapse: collapse;
	font: var(--text-body-sm);
	color: var(--color-text-primary);
}
.mm-table th {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	font-family: var(--mm-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-fg-muted);
	border-bottom: var(--border-default);
	white-space: nowrap;
}
.mm-table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-default);
	vertical-align: middle;
}
.mm-table tbody tr:hover {
	background: var(--color-bg-surface-alt);
}
.mm-table--compact th,
.mm-table--compact td {
	padding: var(--space-2) var(--space-3);
}
.mm-table--tight th,
.mm-table--tight td {
	padding: 10px 8px;
}
.mm-table--numeric td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}
.mm-table .is-num,
.mm-table th.is-num,
.mm-table td.is-num {
	text-align: right;
}
.mm-table .mm-table__cell--accent { color: var(--mm-accent-700); font-weight: 700; }
.mm-table .mm-table__cell--muted  { color: var(--mm-fg-muted); }
.mm-table .mm-table__cell--strong { color: var(--mm-fg-strong); font-weight: 600; }

/* Row highlight (e.g. "this is you" on a leaderboard). Soft accent tint. */
.mm-table tbody tr.mm-table__row--highlight,
.mm-table tbody tr.mm-table__row--highlight:hover {
	background: var(--mm-accent-50);
}

/* Rank numeral cell — display figure in heading face. Used on leaderboard. */
.mm-table .mm-table__rank {
	font-family: var(--mm-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--mm-navy);
	font-variant-numeric: tabular-nums;
}

th {
  padding: 8px;
  text-align: left;
}

.th-bottomline {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid var(--mm-border-strong);
  }

td {
	padding: 8px;
}
.td-bottomline {
	padding: 8px;
	border-bottom: 1px solid var(--mm-border-strong); 	
}
.td-smallheight {
	height: 8px;
}

.td-smallheight tr {
	overflow: hidden;
}

/* ---- Empty States ---- */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 24px;
	text-align: center;
}

.empty-state-icon {
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	color: var(--mm-border-strong);
}

.empty-state-icon svg {
	width: 100%;
	height: 100%;
}

.empty-state-headline {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-neutral-700);
	margin: 0 0 8px;
}

.empty-state-subtext {
	font-size: 0.875rem;
	color: var(--color-neutral-500);
	margin: 0 0 24px;
	max-width: 300px;
	line-height: 1.5;
}

.empty-state-cta {
	display: inline-block;
	padding: 10px 24px;
	background: var(--mm-accent-500);
	color: var(--color-neutral-0);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s;
}

.empty-state-cta:hover {
	background: var(--mm-accent-700);
}

/* ============================================================
   v4 - Form shell and form-card styling for add-program and
   other single-column forms. Scoped by mm-form-shell.
   ============================================================ */
.mm-form-shell { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; }
.mm-form-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}
.mm-form-header__left {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.mm-form-header__right {
	display: flex;
	align-items: flex-start;
}
.mm-form-header__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-fg-muted); margin: 0 0 6px; }
.mm-form-header__title { color: var(--mm-navy-700); font-size: clamp(26px, 4vw, 34px); margin: 0 0 6px; }
.mm-form-header__subcopy { color: var(--mm-fg-subtle); font-size: 16px; line-height: 1.55; margin: 0; }

.mm-mode-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	user-select: none;
	flex-shrink: 0;
	margin-top: var(--space-1);
}

.mm-mode-toggle__label {
	font: var(--text-body-sm);
	color: var(--mm-fg-muted);
}

.mm-mode-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mm-mode-toggle__track {
	width: 40px;
	height: 22px;
	background: var(--mm-border-strong);
	border-radius: var(--radius-full);
	position: relative;
	transition: background var(--duration-fast) var(--ease-out);
}

.mm-mode-toggle__track::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 3px;
	left: 3px;
	background: var(--color-neutral-0);
	border-radius: 50%;
	transition: transform var(--duration-fast) var(--ease-out);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.mm-mode-toggle__input:checked + .mm-mode-toggle__track {
	background: var(--mm-navy-700);
}

.mm-mode-toggle__input:checked + .mm-mode-toggle__track::after {
	transform: translateX(18px);
}

.mm-form { display: flex; flex-direction: column; gap: 18px; }
.mm-form--single-column .mm-form-field { max-width: 100%; }

.mm-form-card { background: var(--color-neutral-0); border: 1px solid var(--mm-border); border-radius: var(--radius-xl); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.mm-form-card__header { margin-bottom: 4px; }
.mm-form-card__title { color: var(--mm-navy-700); font-size: 18px; margin: 0 0 4px; }
.mm-form-card__subcopy { color: var(--mm-fg-subtle); font-size: 14px; line-height: 1.5; margin: 0; }
.mm-form-card__note { background: var(--color-neutral-75); border-left: 3px solid var(--mm-accent-500); padding: 10px 14px; border-radius: var(--radius-md); color: var(--color-neutral-700); font-size: 14px; margin: 0; }

.mm-form-field { display: flex; flex-direction: column; gap: 6px; }
.mm-form-field__label { font-size: 13px; font-weight: 600; color: var(--mm-navy-700); }
.mm-form-field__required { color: var(--mm-accent-500); font-weight: 700; }
.mm-form-field__control { padding: 10px 12px; border: 1px solid var(--mm-border); border-radius: var(--radius-md); background: var(--color-neutral-0); font-size: 15px; color: var(--color-text-primary); transition: border-color .15s, box-shadow .15s; }
.mm-form-field__control:focus { outline: none; border-color: var(--mm-navy-700); box-shadow: 0 0 0 3px rgba(0, 49, 83, .15); }
.mm-form-field__hint { font-size: 12px; color: var(--mm-fg-muted); margin: 0; }

.mm-form-checkbox { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 10px 0; border-top: 1px solid var(--color-neutral-75); }
.mm-form-checkbox:first-of-type { border-top: none; padding-top: 0; }
.mm-form-checkbox input[type="checkbox"] { margin-top: 3px; }
.mm-form-checkbox__label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.mm-form-checkbox__hint { grid-column: 2; font-size: 12px; color: var(--mm-fg-muted); }

.mm-form-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 8px; }
.mm-form-actions .mm-btn { min-width: 120px; }

.mm-btn-lg { padding: 12px 22px; font-size: 15px; }

.mm-form-details {
	border: 1px solid var(--mm-border);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.92);
	overflow: hidden;
}

.mm-form-details__toggle {
	padding: 12px 14px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--mm-navy-700);
	background: var(--color-neutral-75);
	list-style: none;
}

.mm-form-details__toggle::-webkit-details-marker {
	display: none;
}

.mm-form-card--inset {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--mm-border);
	border-radius: 0;
	box-shadow: none;
}

.mm-hidden { display: none !important; }

/* ============================================================
   v4 - Shared shell styling for add/list workflow pages.
   Scoped by mm-page-shell / mm-records-shell / mm-wizard-shell.
   ============================================================ */
.mm-page-shell {
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 18px 48px;
	display: grid;
	gap: 18px;
	background: radial-gradient(1200px 420px at 0% -10%, rgba(0, 49, 83, 0.08), transparent 60%), linear-gradient(180deg, var(--color-neutral-75) 0%, var(--mm-border-subtle) 100%);
	border-radius: 28px;
}

.mm-page-shell--narrow {
	max-width: 780px;
	padding-left: 20px;
	padding-right: 20px;
}

.mm-page-shell--wide {
	max-width: 1320px;
}

.mm-page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	padding: 4px 4px 0;
}

.mm-page-header__copy {
	max-width: 760px;
}

.mm-page-header__eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mm-fg-muted);
}

.mm-page-header__title {
	margin: 0;
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.08;
	color: var(--mm-navy-700);
	letter-spacing: -0.02em;
}

.mm-page-header__subcopy {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mm-fg-subtle);
}

.mm-page-card {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--mm-border);
	border-radius: 20px;
	box-shadow: 0 16px 34px rgba(0, 49, 83, 0.08);
	backdrop-filter: blur(8px);
}

.mm-page-card--pad {
	padding: 18px;
}

.mm-page-card--hero {
	background: linear-gradient(135deg, rgba(0, 49, 83, 0.96), rgba(10, 55, 90, 0.92));
	border-color: rgba(0, 49, 83, 0.35);
	color: var(--color-neutral-0);
	box-shadow: 0 24px 48px rgba(0, 49, 83, 0.22);
}

.mm-page-card--hero .mm-page-card__title,
.mm-page-card--hero .mm-page-card__copy,
.mm-page-card--hero .mm-page-card__meta {
	color: inherit;
}

.mm-page-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 14px;
}

.mm-page-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	color: var(--mm-navy-700);
}

.mm-page-card__copy {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mm-fg-subtle);
}

.mm-page-card__meta {
	font-size: 13px;
	color: var(--mm-fg-muted);
	margin: 0;
}

.mm-records-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.mm-records-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.mm-records-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.mm-records-stat {
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid rgba(0, 49, 83, 0.1);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
	box-shadow: 0 12px 28px rgba(0, 49, 83, 0.06);
}

.mm-records-stat__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-fg-muted);
	margin: 0;
}

.mm-records-stat__value {
	margin: 8px 0 4px;
	font-size: 30px;
	line-height: 1;
	font-weight: 800;
	color: var(--mm-navy-700);
}

.mm-records-stat__hint {
	margin: 0;
	font-size: 13px;
	color: var(--mm-fg-subtle);
	line-height: 1.5;
}

.mm-records-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	align-items: end;
}

.mm-records-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mm-records-filter--search {
	grid-column: span 2;
}

.mm-records-filter__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-fg-muted);
}

.mm-records-filter__control {
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--mm-border);
	border-radius: var(--radius-md);
	background: var(--color-neutral-0);
	font-size: 14px;
	color: var(--color-text-primary);
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
}

.mm-records-filter__control:focus {
	border-color: var(--mm-navy-700);
	box-shadow: 0 0 0 3px rgba(0, 49, 83, 0.12);
}

.mm-records-filter__hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--mm-fg-muted);
}

.mm-records-filter__hint a {
	color: var(--mm-navy-700);
	font-weight: 600;
}

.mm-records-filter-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	grid-column: 1 / -1;
	margin-top: 4px;
}

.mm-records-table-wrap {
	overflow-x: auto;
	border-radius: 18px;
	border: 1px solid var(--mm-border);
	background: var(--color-neutral-0);
	box-shadow: 0 12px 28px rgba(0, 49, 83, 0.06);
}

.mm-records-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 980px;
	background: var(--color-neutral-0);
}

.mm-records-table thead {
	background: linear-gradient(180deg, var(--color-neutral-50), var(--mm-border-subtle));
	border-bottom: 1px solid var(--mm-border);
}

.mm-records-table th {
	padding: 14px 12px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-fg-muted);
	white-space: nowrap;
	background: transparent;
	border: 0;
	transition: background .15s ease;
	vertical-align: middle;
	font-family: inherit;
	cursor: default;
	user-select: none;
}

.mm-records-table th.sortable {
	cursor: pointer;
}

.mm-records-table th.sortable:hover {
	background: rgba(0, 49, 83, 0.04);
}

.mm-records-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--color-border-light);
	vertical-align: middle;
	color: var(--color-text-secondary);
	background: var(--color-neutral-0);
}

.mm-records-table tbody tr:hover td {
	background: var(--color-bg-surface-alt);
}

.mm-records-table tbody tr:last-child td {
	border-bottom: 0;
}

.mm-records-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	border: 1px solid transparent;
	white-space: nowrap;
}

.mm-records-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	border: 1px solid transparent;
}

.mm-records-status--done {
	background: rgba(34, 197, 94, 0.14);
	border-color: rgba(34, 197, 94, 0.2);
	color: var(--color-success-700);
}

.mm-records-status--pending {
	background: rgba(251, 191, 36, 0.16);
	border-color: rgba(251, 191, 36, 0.22);
	color: var(--color-warning-700);
}

.mm-records-empty {
	padding: 52px 24px;
	text-align: center;
	color: var(--mm-fg-muted);
}

.mm-records-empty p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
}

.mm-wizard-progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-wizard-progress__step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.72);
}

.mm-wizard-progress__step.is-active,
.mm-wizard-progress__step.is-complete {
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-neutral-0);
}

.mm-wizard-progress__num {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.mm-wizard-progress__step.is-active .mm-wizard-progress__num,
.mm-wizard-progress__step.is-complete .mm-wizard-progress__num {
	background: var(--mm-accent-500);
	border-color: var(--mm-accent-500);
	color: var(--color-neutral-0);
}

.mm-wizard-progress__label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.mm-wizard-progress__meta {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.76;
	margin-bottom: 2px;
}

.mm-wizard-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}

.mm-wizard-grid--summary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

.mm-wizard-field,
.mm-wizard-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mm-wizard-field--full,
.mm-wizard-summary--full,
.mm-records-filter--full {
	grid-column: 1 / -1;
}

.mm-wizard-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-fg-muted);
	margin: 0;
}

.mm-wizard-value {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-50);
	border: 1px solid var(--mm-border);
	color: var(--color-text-secondary);
	line-height: 1.55;
	font-size: 14px;
	word-break: break-word;
}

.mm-wizard-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 8px;
}

.mm-flash {
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.mm-flash--error {
	background: rgba(239, 68, 68, 0.08);
	border-color: rgba(239, 68, 68, 0.16);
	color: var(--color-danger-700);
}

.mm-flash--success {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.16);
	color: var(--color-success-700);
}

@media (max-width: 640px) {
	.mm-page-shell,
	.mm-page-shell--narrow,
	.mm-page-shell--wide { padding: 16px 14px 36px; border-radius: 22px; }
	.mm-page-card--pad { padding: 16px; }
	.mm-form-shell { padding: 16px 14px 40px; }
	.mm-form-card { padding: 18px 16px; }
	.mm-form-actions,
	.mm-records-filter-actions,
	.mm-wizard-actions { flex-direction: column-reverse; }
	.mm-form-actions .mm-btn { width: 100%; }
	.mm-records-filter__control,
	.mm-records-filter-actions .mm-btn,
	.mm-wizard-actions .mm-btn { width: 100%; }
	.mm-page-header { flex-direction: column; }
	.mm-records-filter--search,
	.mm-wizard-field--full,
	.mm-wizard-summary--full,
	.mm-records-filter--full { grid-column: auto; }
	.mm-wizard-grid,
	.mm-wizard-grid--summary,
	.mm-records-filters,
	.mm-records-grid,
	.mm-wizard-progress { grid-template-columns: 1fr; }
}
/* ============================================================
   Canonical page header (.dash-page-header)
   Mirrors definitions in assets/css/dashboard.css so standalone
   surfaces (about/*, marketing pages) can adopt the same hero.
   ============================================================ */
.dash-page-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--mm-navy, #0E1F3B) 0%,
        var(--mm-navy-700, #0E1F3B) 100%);
    border-radius: var(--mm-radius-xl, 20px);
    padding: 32px 36px 28px;
    margin-bottom: 24px;
    color: #fff;
}
.dash-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 300px at 95% -20%,
        rgba(255, 107, 0, 0.18), transparent 60%);
    pointer-events: none;
}
.dash-page-header::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.06);
    pointer-events: none;
}
.dash-page-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dash-page-header__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mm-gold, #FF6810);
    margin: 0 0 6px;
}
.dash-page-header__title {
    font-family: var(--mm-font-display, inherit);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 4px;
}
.dash-page-header__sub {
    font-size: 14px;
    color: rgba(255,255,255,.78);
    margin: 0;
}
.dash-page-header__sub a { color: #fff; text-decoration: underline; }
.dash-page-header__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .dash-page-header { padding: 22px 20px 18px; }
    .dash-page-header__inner { flex-direction: column; align-items: flex-start; }
    .dash-page-header__actions { width: 100%; }
}

/* ------------------------------------------------------------------------
   R2-005 — Toast notifications + Undo button
   Used by /assets/js/mm-toast.js (showFromSoftDeleteResponse)
   ------------------------------------------------------------------------ */
#mm-toast-host {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    width: min(640px, calc(100vw - 32px));
}
.mm-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #0f172a;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.32);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
}
.mm-toast--in     { opacity: 1; transform: translateY(0); }
.mm-toast--leaving{ opacity: 0; transform: translateY(10px); }
.mm-toast--error  { background: #b91c1c; }
.mm-toast__msg    { flex: 1 1 auto; }
.mm-toast__action {
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mm-toast__action:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.mm-toast__action:disabled { opacity: .55; cursor: default; }
.mm-toast__countdown {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}
.mm-toast__close {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.mm-toast__close:hover { color: #fff; }
@media (max-width: 480px) {
    #mm-toast-host { bottom: 12px; }
    .mm-toast { font-size: 13px; padding: 10px 12px; gap: 10px; }
}

/* ============================================================
   Patch 11 — App-wide prefers-reduced-motion floor.

   lib/app.css loads on every authenticated page in the shell
   (menu.php:462), so the wildcard rule below disables every
   transition and animation across the entire post-login app
   for users who opt out of motion. Dashboard.css and a few
   other files carry their own narrower PRM blocks; those stay
   (defence in depth — same outcome either way).

   01ms (not 0) keeps any visual change instant rather than
   abrupt; some browsers handle `animation: none` differently
   from `animation-duration: 0.01ms` in transition contexts.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Patch 24 (A1) — Extended cross-namespace bridge.

   lib/app.css is what actually ships on every page (mm-design-system.css
   is a SOURCE FILE inlined into this one, not loaded via <link>). To
   make the extended --color-* -> --mm-* bridge live, the aliases need
   to be HERE. Defined at end of file so source-order cascade wins
   over the earlier --color-* declarations at lines 87-114.

   Mirror of the bridge in lib/mm-design-system.css:466+. Same design
   decisions: slight visual shifts accepted as moving toward the brand-
   canonical --mm-* values per DESIGN.md.

   Pre-auth surfaces (login flow) load this file too, so the bridge
   ALSO affects pre-auth — small color shifts on the login screen,
   accepted as alignment with the brand.
   ============================================================ */
:root {
  /* Extended text scale */
  --color-text-primary:   var(--mm-fg-strong);
  --color-text-secondary: var(--mm-fg);
  --color-text-tertiary:  var(--mm-fg-muted);
  --color-text-inverse:   var(--mm-fg-inverse);

  /* Extended neutral scale */
  --color-neutral-0:   var(--mm-fg-inverse);
  --color-neutral-50:  var(--mm-bg-alt);
  --color-neutral-75:  var(--mm-bg-alt);
  --color-neutral-400: var(--mm-fg-subtle);
  --color-neutral-500: var(--mm-fg-subtle);
  --color-neutral-600: var(--mm-fg-muted);
  --color-neutral-700: var(--mm-fg-muted);
  --color-neutral-800: var(--mm-fg-strong);
  --color-neutral-900: var(--mm-fg-strong);
  --color-neutral-950: var(--mm-fg-strong);

  /* Extended surfaces + borders */
  --color-bg-surface-alt: var(--mm-bg-alt);
  --color-bg-muted:       var(--mm-navy-50);
  --color-border:         var(--mm-border);
  --color-border-light:   var(--mm-border-subtle);
  --color-border-strong:  var(--mm-border-strong);

  /* Extended semantic scales */
  --color-success-50:    var(--mm-success-50);
  --color-success-100:   var(--mm-success-100);
  --color-success-500:   var(--mm-success-500);
  --color-success-600:   var(--mm-success-600);
  --color-success-700:   var(--mm-success-700);
  --color-success-light: var(--mm-success-bg);
  --color-warning-50:    var(--mm-warning-50);
  --color-warning-100:   var(--mm-warning-100);
  --color-warning-500:   var(--mm-warning-500);
  --color-warning-600:   var(--mm-warning-600);
  --color-warning-700:   var(--mm-warning-700);
  --color-warning-light: var(--mm-warning-bg);
  --color-danger-50:     var(--mm-danger-50);
  --color-danger-100:    var(--mm-danger-100);
  --color-danger-500:    var(--mm-danger-500);
  --color-danger-600:    var(--mm-danger-600);
  --color-danger-700:    var(--mm-danger-700);
  --color-info-50:       var(--mm-info-50);
  --color-info-100:      var(--mm-info-100);
  --color-info-500:      var(--mm-info-500);
  --color-info-600:      var(--mm-info-600);
  --color-info-700:      var(--mm-info-700);
  --color-info-light:    var(--mm-info-bg);

  /* Error aliases */
  --color-error:       var(--mm-danger);
  --color-error-light: var(--mm-danger-bg);

  /* Bare primary/accent semantic synonyms */
  --color-primary:       var(--mm-navy);
  --color-primary-light: var(--mm-navy-600);
  --color-primary-dark:  var(--mm-navy-800);
  --color-accent:        var(--mm-accent);
  --color-accent-light:  var(--mm-accent-400);
  --color-accent-dark:   var(--mm-accent-700);

  /* Also alias the BASE semantic synonyms — lib/app.css earlier sections
     define --color-success: var(--color-success-500) etc. Re-route them to
     the brand-canonical --mm-* base tokens. */
  --color-success: var(--mm-success);
  --color-warning: var(--mm-warning);
  --color-danger:  var(--mm-danger);
  --color-info:    var(--mm-info);
}