/* AUTO-GENERATED by build-css.mjs — DO NOT EDIT.
   Edit css/main.source.css and the per-component files, then rerun.
*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&family=Permanent+Marker&display=swap');

/* ============================================
   SEA TO SHINING SEA - MAIN STYLESHEET
   Coast-to-Coast for Johnnie's Place
   ============================================ */

/* Google Fonts */


/* Foundation */

/* ===== reset.css ===== */
/* ============================================
   SEA TO SHINING SEA - CSS RESET
   ============================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 10px);
  /* Match the theme at the root so there's no flash of white before body paints. */
  background: var(--bg-primary);
  /* Tell the browser to style native UI (scrollbars, form controls) per the active theme. */
  color-scheme: light dark;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background var(--transition-slow), color var(--transition-slow);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--brand-blue-dark);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  color: var(--text-primary);
}

button {
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}


/* ===== variables.css ===== */
/* ============================================
   SEA TO SHINING SEA - CSS VARIABLES
   ============================================ */

:root {
  /* Brand Colors - Americana / Patriotic Theme */
  --brand-red: #D32F2F;
  --brand-blue: #1976D2;
  --brand-blue-dark: #0D47A1;
  --brand-blue-light: #42A5F5;
  --brand-gold: #FFA726;

  /* Light Theme */
  --bg-primary: #F8F9FA;
  --bg-secondary: #E8EEF2;
  --bg-card: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #4A5568;
  --text-muted: #718096;
  --border-color: #E2E8F0;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-strong: rgba(0, 0, 0, 0.15);
  --overlay: rgba(0, 0, 0, 0.6);

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --nav-height: 70px;

  /* Typography Scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 3rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(25, 118, 210, 0.4);

  /* Z-index scale.
     --z-sticky bumped above Leaflet's internal layers (controls at 800)
     so the site nav + bottom tab bar + tracker status pill always sit
     above map surfaces on /tracker and home. */
  --z-dropdown: 100;
  --z-sticky: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Shadow scale */
  --shadow-sm: 0 2px 8px var(--shadow-color);
  --shadow-md: 0 4px 16px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color);
  --shadow-xl: 0 20px 60px var(--shadow-color);

  /* Mile tier colors */
  --tier-continental: #FFD700;
  --tier-ironhorse: #9333EA;
  --tier-roughrider: #DC2626;
  --tier-trailblazer: #2563EB;
  --tier-pioneer: #059669;
  --tier-settler: #6B7280;
  --tier-pathfinder: #0891B2;
  --tier-scout: #92400E;

  /* ----------------------------------------------------------
     Mobile + PWA layer (additive — desktop values untouched)
     ---------------------------------------------------------- */

  /* iOS/Android safe-area insets. env() returns 0 on devices without notches. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Mobile-only layout heights (consumed by bottom nav + compact header) */
  --bottom-nav-height: 64px;
  --mobile-header-height: 48px;

  /* Fluid type scale — clamp(min, preferred, max).
     Max values match existing desktop sizes so desktop renders identically.
     Min values shrink the display scale on small phones to stop overflow. */
  --fs-hero: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);        /* 36px → 64px */
  --fs-display: clamp(1.875rem, 1.35rem + 2.5vw, 3rem);   /* 30px → 48px; replaces --font-size-4xl on heroes */
  --fs-h1: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);          /* 24px → 32px; matches --font-size-3xl */
  --fs-h2: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);         /* 20px → 24px; matches --font-size-2xl */
  --fs-body-lg: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);   /* 16px → 18.4px; matches --font-size-lg */
}

[data-theme="dark"] {
  --bg-primary: #0F1419;
  --bg-secondary: #1A1F26;
  --bg-card: #232931;
  --text-primary: #E8EEF2;
  --text-secondary: #A0AEC0;
  --text-muted: #8899AA;
  --border-color: #2D3748;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.8);
  --brand-blue-light: #64B5F6;
  --focus-ring: 0 0 0 3px rgba(100, 181, 246, 0.5);
}


/* ===== typography.css ===== */
/* ============================================
   SEA TO SHINING SEA - TYPOGRAPHY
   ============================================ */

/* Headings */
h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

h6 {
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* Text Styles */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* Font Weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand-blue); }

/* Display Fonts */
.display-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.handwritten {
  font-family: 'Permanent Marker', cursive;
}

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }
.tracking-widest { letter-spacing: 0.15em; }


/* ===== layout.css ===== */
/* ============================================
   SEA TO SHINING SEA - LAYOUT
   ============================================ */

/* Container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-sm {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-md {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-lg {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Section
   Uses individual padding properties + CSS variables so modifiers can target
   a single edge without needing specificity tricks. Override
   --section-pad-top / --section-pad-bottom on the element or a modifier. */
.section {
  padding-top: var(--section-pad-top, 100px);
  padding-bottom: var(--section-pad-bottom, 100px);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Density modifiers — use on any .section that needs a different rhythm.
   Two tiers: tight (48px) and flush (32px). Apply per-edge or both. */
.section--tight        { --section-pad-top: var(--space-2xl); --section-pad-bottom: var(--space-2xl); }
.section--tight-top    { --section-pad-top: var(--space-2xl); }
.section--tight-bottom { --section-pad-bottom: var(--space-2xl); }
.section--flush        { --section-pad-top: var(--space-xl);  --section-pad-bottom: var(--space-xl);  }
.section--flush-top    { --section-pad-top: var(--space-xl); }
.section--flush-bottom { --section-pad-bottom: var(--space-xl); }

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brand-blue);
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing Utilities */
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Responsive Grid Utilities */
@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-cols-4 { grid-template-columns: 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-2 { grid-template-columns: 1fr; }

  /* tracker-stats responsive handled in components/tracker.css */
}

@media (max-width: 480px) {
  /* tracker-stats responsive handled in components/tracker.css */
}

/* Map Placeholder */
.map-placeholder {
  background: var(--bg-card);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4xl);
  text-align: center;
  color: var(--text-secondary);
}

/* Mile Presets */
.mile-preset {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.mile-preset:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
}

.mile-preset.selected {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: white;
}

/* ============================================
   FOCUS STATES FOR KEYBOARD NAVIGATION
   ============================================ */

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Don't show focus ring on mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  video[autoplay] {
    display: none;
  }
}


/* Components */

/* ===== components/navigation.css ===== */
/* ============================================
   SEA TO SHINING SEA - NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  transition: all var(--transition-slow);
}

/* Reserve layout space for the nav before JS injects its content. Kills the
   "chrome pop-in" flash on cached navigations (HTML paints instantly, JS
   takes a beat to run). :empty selector switches off the moment renderNav()
   populates the nav-inner. */
.nav:empty {
  height: var(--nav-height);
}

.nav.scrolled {
  box-shadow: 0 2px 20px var(--shadow-color);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.nav-logo .logo-image {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.nav-logo .icon {
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.nav-logo .logo-text {
  color: var(--brand-blue);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--transition-base);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-blue);
  transition: width var(--transition-slow);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Dropdown Navigation */
.nav-item {
  position: relative;
}

.nav-item.has-dropdown {
  position: relative;
}

.nav-item.has-dropdown > .nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item.has-dropdown > .nav-link::before {
  content: '▾';
  font-size: 0.7rem;
  margin-left: 4px;
  transition: transform var(--transition-base);
}

.nav-item.has-dropdown:hover > .nav-link::before {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  min-width: 200px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  z-index: calc(var(--z-sticky) + 1);
}

.nav-item.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  margin-top: 12px;
}

.nav-dropdown a {
  display: block;
  padding: 12px 20px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all var(--transition-base);
  border-bottom: 1px solid var(--border-color);
}

.nav-dropdown a:last-child {
  border-bottom: none;
}

.nav-dropdown a:hover {
  background: var(--bg-secondary);
  color: var(--brand-blue);
  padding-left: 24px;
}

.nav-dropdown a.active {
  color: var(--brand-blue);
  font-weight: 600;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.theme-toggle .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.theme-toggle:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: scale(1.05);
}

.theme-toggle:hover .icon {
  fill: white;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--text-primary);
}

.mobile-menu-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 6px 0;
  transition: all var(--transition-slow);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-lg);
  z-index: calc(var(--z-sticky) - 1);
  box-shadow: 0 10px 30px var(--shadow-color);
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: 12px 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border-color);
}

/* Responsive
   Mobile (≤768px): top nav is hidden entirely. The bottom tab bar handles
   all primary navigation; the "More" sheet surfaces secondary links and
   the theme toggle. Removing the top nav kills the hide-on-scroll dance
   and with it the iOS URL-bar-collapse glitches and "missing header on
   navigation" bugs. Desktop nav above is untouched. */
@media (max-width: 768px) {
  .nav,
  .nav:empty {
    display: none;
  }
  body {
    --mobile-header-height: 0px;
  }
}


/* ===== components/buttons.css ===== */
/* ============================================
   SEA TO SHINING SEA - BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn .icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* Disabled: visually inert so users don't tap a no-op button. Applies
   to any .btn (primary, secondary, donate submit, calculator apply). */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.btn-primary {
  background: var(--brand-blue);
  color: white;
  box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
}

.btn-primary:hover {
  background: var(--brand-blue-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
}

.btn-secondary:hover {
  background: var(--brand-blue);
  color: white;
  transform: translateY(-2px);
}

.btn-hero {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-blue));
  color: white;
  padding: 16px 36px;
  font-size: 1.1rem;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 25px rgba(25, 118, 210, 0.4);
}

.btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(25, 118, 210, 0.5);
  color: white;
}

.btn-large {
  padding: 16px 36px;
  font-size: 1.05rem;
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn-block {
  width: 100%;
}

/* Focus states */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary:focus-visible {
  box-shadow: var(--focus-ring), 0 4px 15px rgba(25, 118, 210, 0.3);
}

.btn-hero:focus-visible {
  box-shadow: var(--focus-ring), 0 8px 25px rgba(25, 118, 210, 0.4);
}


/* ===== components/cards.css ===== */
/* ============================================
   SEA TO SHINING SEA - CARDS
   ============================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 50px var(--shadow-color);
  border-color: var(--brand-blue);
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.card-icon {
  font-size: 3rem;
  flex-shrink: 0;
  color: var(--brand-blue);
  margin-bottom: var(--space-md);
  display: block;
}

.card-icon.icon {
  width: 3rem;
  height: 3rem;
}

.card-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.card-body {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

/* Stat Card */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: 0 4px 15px var(--shadow-color);
  transition: transform var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-4px);
}

/* Clickable variant: <a> or <button>. Reset native styling, give a
   pointer cursor + slightly stronger lift on hover. Text inherits so
   the inner stat-number/stat-label don't get the link blue. */
.stat-card--clickable {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.stat-card--clickable:hover {
  border-color: var(--brand-blue, #3B82F6);
  box-shadow: 0 8px 22px var(--shadow-color);
}
.stat-card--clickable:focus-visible {
  outline: 2px solid var(--brand-blue, #3B82F6);
  outline-offset: 2px;
}
.stat-card--clickable[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 4px 15px var(--shadow-color);
  border-color: var(--border-color);
}

.stat-icon {
  font-size: 2rem;
}

.stat-icon.icon {
  width: 2rem;
  height: 2rem;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Blog Card */
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-slow);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--shadow-color);
}

.blog-date {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.blog-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: 12px;
}

.blog-card p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.blog-link {
  color: var(--brand-blue);
  font-weight: 600;
  font-size: 0.9rem;
}


/* ===== components/forms.css ===== */
/* ============================================
   SEA TO SHINING SEA - FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color var(--transition-base);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: var(--focus-ring);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  margin-right: var(--space-sm);
}

.form-error {
  color: var(--brand-red);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.form-success {
  color: #4CAF50;
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.form-help {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

/* Form Layouts */
.form-inline {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
}

.form-inline .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* Checkbox/Radio Styles */
.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}


/* ===== components/progress.css ===== */
/* ============================================
   SEA TO SHINING SEA - PROGRESS
   ============================================ */

.progress-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 4px 15px var(--shadow-color);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.progress-bar {
  width: 100%;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Circular Progress */
.progress-circular {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-circular svg {
  transform: rotate(-90deg);
}

.progress-circular-bg {
  fill: none;
  stroke: var(--bg-secondary);
  stroke-width: 8;
}

.progress-circular-fill {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-circular-text {
  position: absolute;
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--brand-blue);
}


/* ===== components/timeline.css ===== */
/* ============================================
   SEA TO SHINING SEA - TIMELINE
   ============================================ */

.timeline {
  position: relative;
  padding-left: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.timeline-marker {
  position: absolute;
  left: -37px;
  top: 4px;
  width: 28px;
  height: 28px;
  background: var(--brand-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--bg-card);
}

.timeline-marker .icon {
  fill: white;
  stroke: white;
}

.timeline-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.timeline-content h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.timeline-content p {
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .timeline {
    padding-left: var(--space-xl);
  }

  .timeline::before {
    left: 8px;
  }

  .timeline-marker {
    left: -29px;
    width: 24px;
    height: 24px;
  }
}


/* ===== components/hero.css ===== */
/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
  background: linear-gradient(135deg, #F8F9FA 0%, #E8EEF2 100%);
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #0F1419 0%, #1A1F26 100%);
}

.hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px var(--space-lg);
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-blue);
  margin-bottom: var(--space-lg);
  box-shadow: 0 4px 15px var(--shadow-color);
}

.hero-badge-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hero-badge-video {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
}

/* Eagle Background Video */
.eagle-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.eagle-background-video ~ .section-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .eagle-background-video {
    width: 300px;
  }

  .hero-route {
    flex-direction: column;
    gap: var(--space-md);
  }

  .route-arrow {
    transform: rotate(90deg);
  }
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
  line-height: 1.1;
}

.hero-title .shine {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-logo-container {
  margin-bottom: var(--space-xl);
}

.hero-logo {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 200px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 768px) {
  .hero-logo {
    max-height: 150px;
  }
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.8;
}

/* In dark mode the subtitle and countdown labels sit on top of the eagle
   video, so boost contrast with a brighter color and a subtle shadow. */
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .hero-subtitle a {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .countdown-lbl,
[data-theme="dark"] .countdown-name {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.route-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.route-point .icon {
  font-size: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.route-point .location {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.route-point .label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.route-arrow {
  font-size: 2rem;
  color: var(--brand-blue);
  font-weight: bold;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .hero {
    min-height: 70vh;
    padding-top: 60px;
  }

  .hero-inner {
    padding: 24px var(--space-md);
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-badge {
    font-size: 0.8rem;
    padding: 8px 14px;
  }

  .hero-logo {
    max-height: 120px;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}


/* ===== components/footer.css ===== */
/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 60px var(--space-lg) 30px;
}

/* Reserve space so the footer doesn't jump in when renderFooter() fires
   after DOMContentLoaded. Turns off once the inner content is injected. */
.footer:empty {
  min-height: 280px;
}
@media (max-width: 768px) {
  .footer:empty { min-height: 360px; }
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-brand video,
.footer-brand img {
  flex-shrink: 0;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 260px;
}

.footer-col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  font-weight: 700;
}

.footer-col a {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 4px 0;
  transition: color var(--transition-base);
}

.footer-col a:hover {
  color: var(--brand-blue);
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 40px var(--space-md) 24px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}


/* ===== components/donate.css ===== */
/* ============================================
   SEA TO SHINING SEA - DONATE PAGE
   ============================================ */

/* ---- CANCEL BANNER ---- */

.donate-cancel-banner {
  background: var(--brand-red);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  position: relative;
  z-index: var(--z-sticky);
}

.donate-cancel-banner[hidden] {
  display: none;
}

.donate-cancel-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.donate-cancel-dismiss {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
  padding: var(--space-xs);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.donate-cancel-dismiss:hover {
  opacity: 1;
}

/* Mobile: banner can sit at the very top of the viewport once the mobile
   top nav is gone. Pad down past the notch/Dynamic Island so the message
   stays readable. Only applies when the banner is actually shown. */
@media (max-width: 768px) {
  .donate-cancel-banner:not([hidden]) {
    padding-top: calc(var(--space-sm) + var(--safe-top));
  }
}

/* ---- HERO ---- */

.donate-hero {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
  /* Pin the gradient to the viewport — content scrolls over a static banner. */
  background-attachment: fixed;
  color: #fff;
  padding: calc(var(--nav-height) + var(--space-3xl)) var(--space-lg) var(--space-3xl);
  border-bottom: 4px solid rgba(255, 255, 255, 0.15);
}

/* Legacy single-column container (kept for any other page using this class) */
.donate-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* 75/25 split: primary CTA on the left, tip jar aside on the right */
.donate-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.donate-hero-primary {
  min-width: 0; /* allow stat cards to shrink inside the grid column */
}

/* JP banner row under the progress bar — centered in the primary column. */
.donate-hero-imagery {
  margin: var(--space-2xl) 0 0;
  display: flex;
  justify-content: center;
}

.donate-hero-jp-banner {
  display: block;
  max-width: 320px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

.donate-hero-jp-banner:hover,
.donate-hero-jp-banner:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.donate-hero-jp-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: stack at tablet and below. Tip jar drops beneath the hero content. */
@media (max-width: 900px) {
  .donate-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .donate-hero-jp-banner,
  .donate-hero-jp-banner:hover { transition: none; transform: none; }
}

.donate-hero .section-label {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.donate-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0; /* margin now lives on .donate-hero-title-row */
}

.donate-hero-subtitle {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  opacity: 0.9;
  max-width: 650px;
  margin: 0 0 var(--space-2xl);
}

/* In the 75/25 layout, align content to the start instead of center */
.donate-hero-grid .donate-hero-primary {
  text-align: left;
}
.donate-hero-grid .donate-stats-row,
.donate-hero-grid .donate-progress-wrap {
  justify-content: flex-start;
  margin-left: 0;
}

@media (max-width: 900px) {
  .donate-hero-grid .donate-hero-primary {
    text-align: center;
  }
  .donate-hero-grid .donate-stats-row {
    justify-content: center;
  }
  .donate-hero-grid .donate-progress-wrap {
    margin: 0 auto;
  }
  .donate-hero-grid .donate-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Stats Row */
.donate-stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.donate-stat-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  text-align: center;
  min-width: 140px;
}

/* In the 75/25 hero layout, the stat cards share the primary column equally
   so the row reaches the tip jar's left edge with proper gap padding. */
.donate-hero-grid .donate-stat-card {
  flex: 1 1 0;
}

.donate-stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--font-size-3xl);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.donate-stat-label {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  margin-top: var(--space-xs);
}

/* Progress Bar */
.donate-progress-wrap {
  max-width: 500px;
  margin: 0 auto;
}

/* In the 75/25 hero layout, let the progress bar span the full primary column. */
.donate-hero-grid .donate-progress-wrap {
  max-width: none;
  width: 100%;
}

.donate-progress-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.donate-progress-fill {
  height: 100%;
  background: var(--brand-gold);
  border-radius: var(--radius-full);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.donate-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  opacity: 0.8;
  margin-top: var(--space-sm);
}

/* Scroll cue below the progress bar */
.donate-hero-scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* ---- TIER CARDS ---- */

.donate-tiers-section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.donate-tier-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
  max-width: 1100px;
  margin: var(--space-xl) auto 0;
}

.donate-tier-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Tier illustration — ambient background image */
.donate-tier-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tier-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
  z-index: 0;
}

/* Frosted-glass overlay with subtle patriotic tint.
   backdrop-filter blurs the image layer below; the gradient adds a
   faint blue→red diagonal that ties the cards to the American theme. */
.donate-tier-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(25, 118, 210, 0.14) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(220, 38, 38, 0.12) 100%
  );
  backdrop-filter: blur(2px) saturate(1.05);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
  transition: opacity var(--transition-base), backdrop-filter var(--transition-base);
  pointer-events: none;
  z-index: 1;
}

/* Lift card content above the image + wash layers.
   Targets in-flow children only — the absolute-positioned .donate-tier-check
   keeps its own positioning and gets its z-index bumped separately. */
.donate-tier-card > .donate-tier-icon,
.donate-tier-card > .donate-tier-name,
.donate-tier-card > .donate-tier-tagline,
.donate-tier-card > .donate-tier-rate,
.donate-tier-card > .donate-tier-total {
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .donate-tier-card::before {
  opacity: 0.5;
}

[data-theme="dark"] .donate-tier-card::after {
  background: linear-gradient(
    135deg,
    rgba(25, 118, 210, 0.2) 0%,
    rgba(18, 20, 26, 0.45) 50%,
    rgba(220, 38, 38, 0.18) 100%
  );
  backdrop-filter: blur(2px) saturate(1.1);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
}

.donate-tier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* On hover: sharpen the image (less blur, more opacity) */
.donate-tier-card:hover::before {
  opacity: 0.65;
  transform: scale(1.04);
}

.donate-tier-card:hover::after {
  backdrop-filter: blur(1px) saturate(1.15);
  -webkit-backdrop-filter: blur(1px) saturate(1.15);
}

[data-theme="dark"] .donate-tier-card:hover::before {
  opacity: 0.72;
}

.donate-tier-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.donate-tier-card.selected {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2), var(--shadow-md);
}

.donate-tier-card.selected::before {
  opacity: 0.6;
}

[data-theme="dark"] .donate-tier-card.selected::before {
  opacity: 0.68;
}

.donate-tier-card.selected .donate-tier-check {
  display: flex;
}

.donate-tier-check {
  display: none;
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 28px;
  height: 28px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.donate-tier-check .icon {
  width: 16px;
  height: 16px;
}

.donate-tier-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-md);
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
}

.donate-tier-icon .icon {
  width: 24px;
  height: 24px;
}

.donate-tier-name {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.donate-tier-tagline {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: var(--space-md);
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .donate-tier-tagline {
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.donate-tier-rate {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--font-size-2xl);
  color: var(--brand-blue);
  letter-spacing: 0.02em;
}

.donate-tier-rate small {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.donate-tier-total {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  font-weight: 600;
}

/* Custom tier card visual difference */
.donate-tier-card--custom .donate-tier-icon {
  background: rgba(255, 167, 38, 0.12);
  color: var(--brand-gold);
}

[data-theme="dark"] .donate-tier-card--custom .donate-tier-icon {
  background: rgba(255, 167, 38, 0.15);
}

/* ---- CALCULATOR ---- */

.donate-calculator-section {
  padding-top: 0;
  padding-bottom: var(--space-2xl);
}

.donate-calculator-section[hidden] {
  display: none;
}

.donate-calculator-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.donate-calculator-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

/* Mode toggle */
.donate-calc-toggle {
  display: flex;
  gap: var(--space-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.donate-calc-mode {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: 'Inter', sans-serif;
}

.donate-calc-mode.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.donate-calc-mode:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Calc input */
.donate-calc-input-group {
  margin-bottom: var(--space-lg);
}

.donate-calc-input-group[hidden] {
  display: none;
}

.donate-calc-input-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.donate-calc-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.donate-calc-input-wrap:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.donate-calc-prefix,
.donate-calc-suffix {
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  background: transparent;
  white-space: nowrap;
}

.donate-calc-input-wrap .form-input {
  border: none;
  background: transparent;
  box-shadow: none;
  flex: 1;
  padding: 12px 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.donate-calc-input-wrap .form-input:focus {
  box-shadow: none;
  border: none;
}

/* Result display */
.donate-calc-result {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.donate-calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.donate-calc-result-row strong {
  color: var(--text-primary);
}

.donate-calc-result-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-md) 0;
}

.donate-calc-result-total {
  font-size: var(--font-size-lg);
}

.donate-calc-result-total strong {
  color: var(--brand-blue);
  font-size: var(--font-size-xl);
}

.donate-calc-min-note {
  color: var(--brand-red);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.donate-calc-min-note[hidden] {
  display: none;
}

.donate-calc-apply {
  width: 100%;
}

/* ---- FORM SECTION ---- */

.donate-form-section[hidden] {
  display: none;
}

.donate-form-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-2xl);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

/* Summary card */
.donate-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
}

.donate-summary-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.donate-summary-tier {
  font-family: 'Bebas Neue', sans-serif;
  font-size: var(--font-size-2xl);
  color: var(--brand-blue);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.donate-summary-details {
  margin-bottom: var(--space-lg);
}

.donate-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.donate-summary-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-sm) 0;
}

.donate-summary-total {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.donate-summary-total span:last-child {
  color: var(--brand-blue);
  font-size: var(--font-size-xl);
}

.donate-summary-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.donate-summary-note .icon {
  color: #16A34A;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Form card */
.donate-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.donate-form-heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.donate-required {
  color: var(--brand-red);
  font-weight: 700;
}

.donate-optional {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--font-size-sm);
}

/* Toggle switch */
.donate-toggle-label {
  display: flex !important;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

.donate-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.donate-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.donate-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-color);
  border-radius: var(--radius-full);
  transition: background var(--transition-base);
  cursor: pointer;
}

.donate-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.donate-toggle-switch input:checked + .donate-toggle-track {
  background: var(--brand-blue);
}

.donate-toggle-switch input:checked + .donate-toggle-track::after {
  transform: translateX(20px);
}

.donate-toggle-switch input:focus-visible + .donate-toggle-track {
  box-shadow: var(--focus-ring);
}

/* Tax notice */
.donate-tax-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.donate-tax-notice .icon {
  color: #16A34A;
  flex-shrink: 0;
  margin-top: 2px;
}

.donate-tax-notice strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.donate-tax-notice p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Submit button */
.donate-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  padding: var(--space-md) var(--space-xl);
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.donate-submit-btn:hover:not(:disabled) {
  background: #B71C1C;
  border-color: #B71C1C;
}

.donate-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.donate-stripe-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-md);
}

/* ---- ABOUT JOHNNIE'S PLACE SECTION ---- */

.donate-about-jp {
  background: var(--bg-secondary);
}

.donate-jp-card {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.donate-jp-logo-wrap {
  flex-shrink: 0;
}

.donate-jp-logo {
  width: 120px;
  height: auto;
  border-radius: var(--radius-md);
}

.donate-jp-content h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.donate-jp-content p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.donate-jp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.donate-jp-link:hover {
  color: var(--brand-blue-dark);
}

/* ---- RESPONSIVE ---- */

@media (max-width: 768px) {
  /* Mobile nav is sticky (takes its own flow space) — no extra top padding
     needed. Bottom padding is more compact since the wheel + stat strip
     don't need as much breathing room as the old stats-row layout. */
  .donate-hero {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .donate-stats-row {
    gap: var(--space-md);
  }

  .donate-stat-card {
    padding: var(--space-md);
    min-width: 100px;
  }

  .donate-stat-value {
    font-size: var(--font-size-2xl);
  }

  /* TIER CAROUSEL — 5 photo cards in a horizontal snap-scroll, next peeks.
     Overrides the desktop 3-col grid below 768px. No negative margins so
     landscape safe-area insets don't punch cards into the notch. */
  .donate-tier-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);
    padding: 4px var(--space-md) var(--space-md);
    scroll-padding-inline-start: var(--space-md);
    scrollbar-width: none;
    grid-template-columns: none;  /* reset desktop grid */
  }
  .donate-tier-grid::-webkit-scrollbar { display: none; }
  .donate-tier-grid > .donate-tier-card {
    flex: 0 0 72%;
    min-width: 0;
    max-width: 340px;
    scroll-snap-align: start;
  }
  /* Browser handles the last card via scroll-snap automatically — no
     trailing margin needed now that cards live inside section padding. */

  .donate-form-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .donate-summary-card {
    position: static;
  }

  .donate-jp-card {
    flex-direction: column;
    text-align: center;
    padding: var(--space-xl);
  }

  .donate-calc-toggle {
    flex-direction: column;
  }

  /* Calculator input + apply button touch-friendly on mobile. */
  .donate-calc-input-wrap .form-input,
  .donate-calc-mode {
    min-height: 48px;
  }
  .donate-calc-apply {
    min-height: 48px;
    font-size: var(--font-size-lg);
  }

  /* Reduce calculator card padding on mobile so it fits narrow screens. */
  .donate-calculator-card {
    padding: var(--space-lg);
  }

  /* Shrink JP hero banner image — the big wheel is now the hero moment. */
  .donate-hero-imagery {
    margin-top: var(--space-lg);
  }
  .donate-hero-jp-banner {
    max-width: 180px;
  }

  /* Form submit button: full width + generous touch target on mobile. */
  .donate-submit-btn {
    width: 100%;
    min-height: 52px;
    font-size: var(--font-size-lg);
  }
  /* Extra bottom padding on the form so the sticky FAB doesn't overlap
     the submit button during the brief "both visible" window. */
  .donate-form-card {
    padding-bottom: var(--space-xl);
  }

  /* Compact About JP card padding. */
  .donate-about-jp .section {
    padding: var(--space-xl) 0;
  }
  .donate-jp-logo {
    width: 80px;
  }
}

@media (max-width: 480px) {
  .donate-hero-title {
    font-size: 2rem;
  }

  .donate-hero-subtitle {
    font-size: var(--font-size-base);
  }

  .donate-stats-row {
    flex-direction: column;
    align-items: stretch;
  }

  .donate-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .donate-stat-label {
    margin-top: 0;
  }

  /* ≤480px: keep the carousel (don't revert to a 2-col grid from the old
     layout). Just shrink card width slightly so content fits 320px. */
  .donate-tier-grid > .donate-tier-card {
    flex: 0 0 78%;
  }

  .donate-tier-card {
    padding: var(--space-md);
  }

  .donate-tier-icon {
    width: 40px;
    height: 40px;
  }

  .donate-tier-name {
    font-size: var(--font-size-base);
  }

  .donate-tier-tagline {
    font-size: var(--font-size-xs);
  }

  .donate-calculator-card {
    padding: var(--space-lg);
  }

  .donate-form-card,
  .donate-summary-card {
    padding: var(--space-lg);
  }
}

/* ============================================
   TIP JAR — secondary, non-tax-deductible
   Lives in the hero's right column at 75/25.
   ============================================ */

.tipjar {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: #fff;
  /* Subordinate weight — smaller, quieter than the primary CTA */
  font-size: var(--font-size-sm);
}

.tipjar-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-sm);
}

.tipjar-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-xs);
  line-height: 1.15;
}

.tipjar-redirect {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.80);
  margin: 0 0 var(--space-md);
}

/* QR container: white card that anchors the aside visually */
.tipjar-qr {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xs);
}

.tipjar-qr svg,
.tipjar-qr img {
  width: 100%;
  height: auto;
  display: block;
}

.tipjar-qr-caption {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.70);
  text-align: center;
  margin: 0 0 var(--space-md);
}

/* Handle buttons: outlined, quiet — they're alternatives, not the primary CTA */
.tipjar-handles {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.tipjar-handle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 44px; /* touch target */
}

.tipjar-handle:hover,
.tipjar-handle:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

.tipjar-handle:active {
  transform: scale(0.98);
}

.tipjar-handle-service {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tipjar-handle-value {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.90);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tipjar-handle-copy {
  opacity: 0.6;
  flex-shrink: 0;
}

.tipjar-handle[data-copied="true"] {
  background: rgba(76, 175, 80, 0.25);
  border-color: rgba(76, 175, 80, 0.55);
}

/* Disclaimer: shield + inline text, not buried or tooltipped */
.tipjar-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tipjar-disclaimer .icon {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .tipjar {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Mobile-only deep-link button that replaces the QR code. */
.tipjar-venmo-open { display: none; }

@media (max-width: 768px) {
  /* QR is pointless on a phone (can't scan your own screen). Hide it. */
  .tipjar-qr,
  .tipjar-qr-caption {
    display: none;
  }

  /* Prominent tap-to-open CTA in its place. */
  .tipjar-venmo-open {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px var(--space-md);
    background: #3D95CE;  /* Venmo brand blue */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-md);
    min-height: 48px;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  .tipjar-venmo-open:hover,
  .tipjar-venmo-open:focus-visible {
    background: #2F7EB3;
  }
  .tipjar-venmo-open:active {
    transform: scale(0.98);
  }
  .tipjar-venmo-open > span {
    flex: 1 1 auto;
    text-align: left;
  }
  .tipjar-venmo-open > span strong {
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .tipjar-venmo-open .icon {
    color: #fff;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .tipjar-venmo-open,
    .tipjar-venmo-open:active {
      transition: none;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tipjar-handle,
  .tipjar-handle:active {
    transition: none;
    transform: none;
  }
}

/* ============================================
   MOBILE FAB — "Continue to donor info" pill
   Appears docked above the bottom tab bar once a tier is selected
   so the next step is always one tap away. Hidden when the donor
   form's submit button is already on screen (IntersectionObserver
   in js/donate.js).
   ============================================ */
.donate-mobile-fab {
  display: none;  /* desktop: hidden always */
}

@media (max-width: 768px) {
  .donate-mobile-fab {
    display: flex;
    position: fixed;
    left: var(--space-md);
    right: var(--space-md);
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-md));
    z-index: calc(var(--z-sticky) - 2);

    align-items: center;
    gap: var(--space-md);
    min-height: 56px;
    padding: 10px var(--space-lg);

    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.45);

    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;

    /* Enter/exit animation: translate up from below the tab bar. */
    transform: translateY(calc(100% + var(--bottom-nav-height) + var(--safe-bottom) + 16px));
    opacity: 0;
    transition:
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 180ms ease-out;
    pointer-events: none;
  }

  .donate-mobile-fab.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .donate-mobile-fab[hidden] {
    display: none;  /* fully hidden when tier is unselected (no transition) */
  }

  .donate-mobile-fab:active {
    transform: translateY(0) scale(0.97);
  }

  .donate-mobile-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
  }
  .donate-mobile-fab-icon .icon {
    width: 16px;
    height: 16px;
    color: #fff;
    stroke: currentColor;
  }

  .donate-mobile-fab-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.15;
  }
  .donate-mobile-fab-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
  }
  .donate-mobile-fab-amount {
    font-size: var(--font-size-lg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .donate-mobile-fab-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #fff;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
  }

  @media (prefers-reduced-motion: reduce) {
    .donate-mobile-fab { transition: none; }
    .donate-mobile-fab:active { transform: none; }
  }
}


/* ===== components/donate-wheel.css ===== */
/* ============================================
   DONATE — SPOKE WHEEL (mobile-only)
   Phase 3b progress visualization: bike wheel with 12 spokes, one per
   $1,000 of the $12,000 goal. Spokes light up as donations come in.
   Hub center holds a bike SVG icon.

   Built across milestones:
     M1 — static rendering (this file's initial form)
     M2 — breathe animation on unlit spokes
     M3 — lit state + count-up + slow rotation
     M4 — charging-spoke partial-fill polish
     M5 — accessibility

   Desktop renders the existing .donate-stats-row + progress bar
   unchanged; the wheel is display: none at >768px.
   ============================================ */

/* Hidden on desktop — the existing stat cards + progress bar handle
   desktop presentation. */
.donate-wheel-hero { display: none; }

@media (max-width: 768px) {
  .donate-wheel-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) 0;
  }

  /* Hide the desktop progress + stat cards on mobile; wheel replaces them. */
  .donate-hero-primary .donate-stats-row,
  .donate-hero-primary .donate-progress-wrap {
    display: none;
  }

  /* ---- Wheel SVG ---- */
  .donate-wheel {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    position: relative;
  }

  .donate-wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .donate-wheel-tire {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 6;
  }
  .donate-wheel-tire-inner,
  .donate-wheel-rim {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
  }

  /* Spokes — gray in default state, per-milestone colored once lit (M3).
     Subtle breathe animation sweeps around the wheel: 150ms stagger per
     spoke chases the opacity pulse clockwise around the rim. Feels alive
     at $0 without being attention-grabbing. */
  .donate-wheel-spoke {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 2;
    stroke-linecap: round;
    animation: donate-spoke-breathe 3s ease-in-out infinite;
  }
  .donate-wheel-spoke[data-spoke="0"]  { animation-delay: 0s; }
  .donate-wheel-spoke[data-spoke="1"]  { animation-delay: 0.15s; }
  .donate-wheel-spoke[data-spoke="2"]  { animation-delay: 0.30s; }
  .donate-wheel-spoke[data-spoke="3"]  { animation-delay: 0.45s; }
  .donate-wheel-spoke[data-spoke="4"]  { animation-delay: 0.60s; }
  .donate-wheel-spoke[data-spoke="5"]  { animation-delay: 0.75s; }
  .donate-wheel-spoke[data-spoke="6"]  { animation-delay: 0.90s; }
  .donate-wheel-spoke[data-spoke="7"]  { animation-delay: 1.05s; }
  .donate-wheel-spoke[data-spoke="8"]  { animation-delay: 1.20s; }
  .donate-wheel-spoke[data-spoke="9"]  { animation-delay: 1.35s; }
  .donate-wheel-spoke[data-spoke="10"] { animation-delay: 1.50s; }
  .donate-wheel-spoke[data-spoke="11"] { animation-delay: 1.65s; }

  @keyframes donate-spoke-breathe {
    0%, 100% { stroke: rgba(255, 255, 255, 0.18); }
    50%      { stroke: rgba(255, 255, 255, 0.38); }
  }

  @media (prefers-reduced-motion: reduce) {
    .donate-wheel-spoke { animation: none; }
  }

  /* ---- Lit spoke (M3) — one per $1k raised ------------------------ */
  .donate-wheel-spoke[data-lit="true"] {
    stroke: var(--brand-gold);
    animation: none;
    filter: drop-shadow(0 0 4px rgba(255, 167, 38, 0.6));
    transition: stroke 300ms ease-out, filter 300ms ease-out;
  }

  /* ---- Charging spoke (M4) — fractional progress toward next $1k --
     Uses pathLength="1" on each <line> so the stroke-dasharray ops
     below treat the spoke length as a 0..1 normalized range.
     --spoke-progress (set by JS, 0..1) draws the hub-side fraction;
     remainder of spoke stays hidden. */
  .donate-wheel-spoke[data-lit="partial"] {
    stroke: var(--brand-gold);
    animation: none;
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - var(--spoke-progress, 0));
    filter: drop-shadow(0 0 3px rgba(255, 167, 38, 0.45));
    transition:
      stroke 300ms ease-out,
      stroke-dashoffset 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ---- Wheel rotation (M3) ---------------------------------------- */
  /* Only the .donate-wheel-rotating group spins — the hub + bike icon
     stay upright since they're siblings of this group, not children.
     Rotation only kicks in AFTER the count-up animation completes
     (JS toggles the class), so the wheel never spins during load.
     transform-box: fill-box + origin:center is the Safari-safe form for
     SVG group transforms (pixel-based origin has historic iOS bugs). */
  .donate-wheel-rotating {
    transform-origin: center;
    transform-box: fill-box;
  }
  .donate-wheel-svg--spin .donate-wheel-rotating {
    animation: donate-wheel-spin 90s linear infinite;
  }
  .donate-wheel-svg--celebrate .donate-wheel-rotating {
    animation: donate-wheel-spin 10s linear infinite;
  }
  .donate-wheel-svg--celebrate {
    filter: drop-shadow(0 0 12px rgba(255, 167, 38, 0.5));
  }

  @keyframes donate-wheel-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .donate-wheel-svg--spin .donate-wheel-rotating,
    .donate-wheel-svg--celebrate .donate-wheel-rotating {
      animation: none;
    }
    .donate-wheel-svg--celebrate { filter: none; }
  }

  /* Hub — dark pill in the middle of the wheel. */
  .donate-wheel-hub {
    fill: var(--bg-card);
    stroke: var(--brand-gold);
    stroke-width: 3;
  }

  /* Hub bike icon — sits inside the hub circle. */
  .donate-wheel-hub-icon {
    color: var(--brand-gold);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  /* ---- Dollar amount beneath the wheel ---- */
  .donate-wheel-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: var(--space-xs);
  }
  .donate-wheel-amount-value {
    font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .donate-wheel-amount-goal {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
  }

  /* ---- Secondary stat strip: supporters · days to start ---- */
  .donate-wheel-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
  }
  .donate-wheel-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }
  .donate-wheel-stat-value {
    font-weight: 800;
    color: #fff;
  }
  .donate-wheel-stat-label {
    font-weight: 500;
  }
  .donate-wheel-stat-sep {
    color: rgba(255, 255, 255, 0.35);
    opacity: 0.7;
  }
}


/* ===== components/tracker.css ===== */
/* ============================================
   SEA TO SHINING SEA - TRACKER PAGE
   ============================================ */

/* --- Hero --- */
.tracker-hero {
  background: linear-gradient(135deg, var(--brand-blue) 0%, #1a3a6b 40%, var(--brand-red) 100%);
  /* Pin the gradient to the viewport — content scrolls over a static banner. */
  background-attachment: fixed;
  padding-top: calc(var(--nav-height) + var(--space-2xl));
  border-bottom: 4px solid rgba(255,255,255,0.15);
}

.tracker-hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-2xl), 6vw, 5rem);
}

.tracker-hero-content {
  max-width: 480px;
  flex: 0 1 480px;
}

.section-label--light {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.25);
}

.tracker-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: var(--space-sm) 0 var(--space-md);
}

.tracker-hero-subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.82);
  max-width: 500px;
  line-height: 1.6;
}

/* --- Countdown --- */
.tracker-countdown {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  backdrop-filter: blur(8px);
  min-width: 280px;
}

.countdown-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-md);
}

.countdown-units {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  min-width: 2.5ch;
  text-align: center;
}

.countdown-name {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

.countdown-sep {
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255,255,255,0.4);
  line-height: 1;
  padding-bottom: 14px;
}

.countdown-date {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-md);
  letter-spacing: 0.04em;
}

/* --- Route Facts Strip --- */
.tracker-route-strip {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.15);
}

.tracker-route-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tracker-route-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.tracker-route-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}

.tracker-route-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.2);
}

/* --- Stats Grid (4-up) --- */
.tracker-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

/* --- Map Container --- */
.tracker-map-container {
  height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-color);
}

/* Leaflet's default CSS puts .leaflet-top / .leaflet-bottom at z-index 1000,
   which sits above our sticky nav (--z-sticky: 900) and fixed bottom tab
   bar. Scope an override to the tracker map so zoom/attribution controls
   tuck underneath nav chrome instead of overlapping it. */
.tracker-map-container .leaflet-top,
.tracker-map-container .leaflet-bottom {
  z-index: 500;
}

/* Fit-bounds toolbar: text-labelled Leaflet buttons, top-right of the map. */
.map-fit-controls a {
  width: auto;
  min-width: 92px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.map-fit-controls a.is-disabled {
  color: #bbb;
  background: #f7f7f7;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Updates Feed / Placeholder --- */
.updates-placeholder {
  display: flex;
  justify-content: center;
  padding: var(--space-2xl) 0;
}

.updates-placeholder-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl);
  text-align: center;
  max-width: 480px;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.updates-placeholder-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.updates-placeholder-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Dispatch feed: horizontal carousel that scroll-snaps to one card at a
   time. Cards are sorted newest-first in the DOM, so the most recent
   appears as the leftmost child — the JS in tracker.js scrolls it into
   center on load. Older days extend to the right; a peek of the next
   card hints at the additional content. */
.updates-feed {
  display: flex;
  flex-direction: row;
  gap: var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Inner padding so the centered card has equal breathing room and the
     peek of the next/prior card lands at the gap. */
  padding: var(--space-md) max(var(--space-lg), calc((100% - 720px) / 2));
  scroll-padding-inline: max(var(--space-lg), calc((100% - 720px) / 2));
}
.updates-feed::-webkit-scrollbar { height: 8px; }
.updates-feed::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.update-card {
  /* Single card width: capped at 720px desktop, shrinks to viewport
     padding on mobile so one card is always the focus. */
  flex: 0 0 min(720px, 88vw);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--brand-blue);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: 0 2px 12px var(--shadow-color);
}

.update-card-meta {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-sm);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

.update-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.update-card-body {
  color: var(--text-secondary);
  line-height: 1.6;
}

.update-card-body p { margin: 0 0 var(--space-sm); }
.update-card-body p:last-child { margin-bottom: 0; }

/* Diary sub-sections inside a dispatch card. Each section is an optional
   diary field (Favorites, Least favorite, People met, Food). Renders only
   when the underlying value exists AND its public flag is true. */
.update-card-sections {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.update-card-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  margin-bottom: 4px;
}

.update-card-section-body {
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.95rem;
}
.update-card-section-body p { margin: 0 0 var(--space-xs); }
.update-card-section-body p:last-child { margin-bottom: 0; }

/* Card meta line: separator dots + miles/rest pill */
.update-card-meta .meta-dot {
  color: var(--border-color);
  font-weight: 400;
}
.update-card-meta .meta-miles {
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* REST DAY pill — reuses the muted neutral palette so it doesn't
   compete visually with the orange brand accent on ride days. */
.rest-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Rest-day card variant: muted left border, less ink than ride days. */
.update-card.is-rest-day {
  border-left: 3px solid var(--border-color);
}

/* Stats grid: Elevation / Calories / Sleep. Three columns desktop,
   two columns tablet, one column mobile. Sits below the recap and
   above the diary sections. */
.update-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary, rgba(0,0,0,0.025));
  border-radius: var(--radius-md, 8px);
}
@media (max-width: 768px) {
  .update-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .update-card-stats { grid-template-columns: 1fr; }
}

.stat-block .stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  margin-bottom: 4px;
}
.stat-block .stat-rows {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.stat-block .stat-rows .stat-faint {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.stat-block .stat-arrow.up   { color: #16a34a; font-weight: 700; }
.stat-block .stat-arrow.down { color: #dc2626; font-weight: 700; }

/* Suffer Score — top-right of dispatch card. Score is relational across
   the whole trip (mean=50, ±10 per stddev), with color tiers derived
   from absolute value. The tooltip carries the L/Ms/RPE breakdown. */
.update-card { position: relative; }
.update-card.has-suffer-score .update-card-meta,
.update-card.has-suffer-score .update-card-title {
  padding-right: 80px;
}

.suffer-score {
  /* Reset native button styling */
  appearance: none;
  font-family: inherit;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
  z-index: 2;
}
.suffer-score:hover,
.suffer-score:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); outline: none; }
.suffer-score:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.suffer-score-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.suffer-score-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 3px;
  opacity: 0.85;
}

.suffer-score[data-tier="low"]     { background: rgba(34,197,94,0.12);  color: #16a34a; border-color: rgba(34,197,94,0.3); }
.suffer-score[data-tier="mid"]     { background: rgba(234,179,8,0.14);  color: #b45309; border-color: rgba(234,179,8,0.3); }
.suffer-score[data-tier="high"]    { background: rgba(249,115,22,0.14); color: #c2410c; border-color: rgba(249,115,22,0.3); }
.suffer-score[data-tier="extreme"] { background: rgba(220,38,38,0.14);  color: #b91c1c; border-color: rgba(220,38,38,0.3); }

/* Suffer Score breakdown popover */
.suffer-score-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 10;
  cursor: default;
}
/* Caret pointing up at the score box */
.suffer-score-tooltip::before {
  content: '';
  position: absolute;
  top: -6px; right: 22px;
  width: 12px; height: 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  transform: rotate(45deg);
}
.suffer-score:hover .suffer-score-tooltip,
.suffer-score:focus-visible .suffer-score-tooltip,
.suffer-score.is-open .suffer-score-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.suffer-score-tooltip .tooltip-header {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.suffer-score-tooltip .tooltip-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  margin: 0;
}
.suffer-score-tooltip .tooltip-grid dt {
  color: var(--text-secondary);
  font-weight: 500;
  display: flex; align-items: baseline; gap: 6px;
}
.suffer-score-tooltip .tooltip-grid dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.suffer-score-tooltip .tooltip-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  padding: 1px 5px;
  border-radius: 4px;
}
.suffer-score-tooltip .tooltip-divider {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
}
.suffer-score-tooltip .tooltip-formula {
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-primary);
}
.suffer-score-tooltip .tooltip-foot {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .suffer-score { width: 56px; height: 56px; }
  .suffer-score-num { font-size: 1.25rem; }
  .update-card.has-suffer-score .update-card-meta,
  .update-card.has-suffer-score .update-card-title { padding-right: 70px; }
  /* Mobile: full-width tooltip pinned to viewport edges, drop the caret */
  .suffer-score-tooltip {
    position: fixed;
    top: auto;
    bottom: max(env(safe-area-inset-bottom, 0), 16px);
    left: 16px;
    right: 16px;
    width: auto;
    transform: translateY(8px);
  }
  .suffer-score-tooltip::before { display: none; }
  .suffer-score:hover .suffer-score-tooltip { opacity: 0; pointer-events: none; }
  .suffer-score.is-open .suffer-score-tooltip { transform: translateY(0); }
}

/* --- Milestones Grid --- */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.milestone-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--border-color);
  padding: var(--space-xl);
  position: relative;
  box-shadow: 0 2px 12px var(--shadow-color);
  transition: transform 0.2s;
}

.milestone-card:hover {
  transform: translateY(-3px);
}

.milestone-card.milestone-start {
  border-top-color: #10B981;
}

.milestone-card.milestone-finish {
  border-top-color: var(--brand-red);
}

.milestone-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin-bottom: var(--space-sm);
}

.milestone-badge--start {
  background: #D1FAE5;
  color: #065F46;
}

.milestone-badge--finish {
  background: #FEE2E2;
  color: #991B1B;
}

.milestone-badge--upcoming {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.milestone-badge--completed {
  background: #DBEAFE;
  color: #1E40AF;
}

.milestone-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--brand-blue);
}

.milestone-icon .icon {
  width: 20px;
  height: 20px;
}

.milestone-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.milestone-meta {
  font-size: 0.75rem;
  color: var(--brand-blue);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.milestone-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- CTA Banner --- */
.tracker-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl);
  box-shadow: 0 4px 20px var(--shadow-color);
  border-top: 4px solid var(--brand-blue);
}

.tracker-cta-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.tracker-cta-subtitle {
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.6;
}

.tracker-cta-actions {
  display: flex;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* --- Status pill: mobile-only, sticky just below the nav ------------------ */
.tracker-status-pill { display: none; }

/* --- Hero state-aware visibility ------------------------------------------
   The desktop hero has two sibling strips:
     [data-show-state="pre"]       — static trip overview (3,664 / 13 / 42 / Jul 4)
     [data-show-state="live post"] — live gauges (miles / climb / %)
   The .tracker-hero element carries data-ride-state set by JS based on date.
   Mobile uses its own .tracker-gauges block in hero-inner — both desktop
   strips are hidden under 1024px. */
[data-show-state] { display: none; }
.tracker-hero[data-ride-state="pre"]  [data-show-state~="pre"]  { display: flex; }
.tracker-hero[data-ride-state="live"] [data-show-state~="live"] { display: flex; }
.tracker-hero[data-ride-state="post"] [data-show-state~="post"] { display: flex; }

/* Live gauges strip: 3 gauges across the route-strip width */
.tracker-route-strip--gauges {
  gap: var(--space-3xl);
  align-items: center;
  justify-content: center;
}
.tracker-route-strip--gauges .tracker-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tracker-route-strip--gauges .tracker-gauge-svg {
  width: 120px;
  height: auto;
  display: block;
}
.tracker-route-strip--gauges .tracker-gauge-track {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 6;
  stroke-linecap: round;
}
.tracker-route-strip--gauges .tracker-gauge-fill {
  fill: none;
  stroke: var(--brand-orange, #F97316);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--gauge-progress, 0));
  transition: stroke-dashoffset 600ms ease;
}
.tracker-route-strip--gauges .tracker-gauge-readout {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: -8px;
  font-variant-numeric: tabular-nums;
}
.tracker-route-strip--gauges .tracker-gauge-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.tracker-route-strip--gauges .tracker-gauge-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tracker-route-strip--gauges .tracker-gauge-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
}

/* --- Gauges: mobile-only (hidden on desktop) ------------------------------ */
.tracker-gauges { display: none; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .tracker-hero-inner { flex-direction: column; align-items: flex-start; }
  .tracker-countdown { width: 100%; min-width: unset; }
  .milestones-grid { grid-template-columns: repeat(2, 1fr); }
  .tracker-cta { flex-direction: column; text-align: center; }
  .tracker-cta-subtitle { max-width: 100%; }
  .tracker-cta-actions { justify-content: center; }
}

/* ============================================
   MOBILE (≤768px) — Phase 3c "Race HUD" overhaul
   All rules scoped here; desktop untouched.
   ============================================ */
@media (max-width: 768px) {

  /* ---- Tracker-scoped pill height token. ------------------------------ */
  body[data-page="tracker"] { --tracker-pill-h: 36px; }

  /* Every .mobile-screen on the tracker page subtracts the pill height so
     content still fits the working viewport under a sticky status pill.
     svh (not dvh) so sections don't resize as Safari's URL bar toggles. */
  body[data-page="tracker"] .mobile-screen {
    min-height: calc(
      100svh
      - var(--mobile-header-height)
      - var(--safe-top)
      - var(--tracker-pill-h)
      - var(--bottom-nav-height)
      - var(--safe-bottom)
    );
  }
  @supports not (height: 100svh) {
    body[data-page="tracker"] .mobile-screen {
      min-height: calc(
        100vh
        - var(--mobile-header-height)
        - var(--safe-top)
        - var(--tracker-pill-h)
        - var(--bottom-nav-height)
        - var(--safe-bottom)
      );
    }
  }

  /* Scroll-snap padding accounts for nav + safe-top + pill on tracker. */
  html:has(body[data-page="tracker"]) {
    scroll-padding-top: calc(
      var(--mobile-header-height)
      + var(--safe-top)
      + var(--tracker-pill-h)
    );
  }

  /* ---- Status pill (mobile-only sticky) -------------------------------
     With the mobile top nav removed, this pill IS the tracker's top bar.
     It sticks to y=0 and extends its background up through the notch via
     padding-top + height += safe-top, so iPhone status-bar / Dynamic Island
     always has matching bg color behind it. */
  .tracker-status-pill {
    display: flex;
    position: sticky;
    top: 0;
    z-index: calc(var(--z-sticky) - 1);
    height: calc(var(--tracker-pill-h) + var(--safe-top));
    padding-top: var(--safe-top);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    min-width: 0;
  }
  /* Fallback for browsers without backdrop-filter: solid opaque background. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tracker-status-pill { background: var(--bg-primary); }
  }
  /* Ellipsis must live on the text child, not the flex container. */
  .tracker-status-pill-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tracker-status-pill-state {
    font-weight: 800;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
  }
  .tracker-status-pill[data-state="live"] .tracker-status-pill-state {
    color: var(--brand-red);
  }
  .tracker-status-pill[data-state="live"] .tracker-status-pill-state::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-red);
    margin-right: 6px;
    vertical-align: middle;
    animation: tracker-pill-pulse 1.8s ease-in-out infinite;
  }
  .tracker-status-pill[data-state="post-ride"] .tracker-status-pill-state {
    color: #059669;
  }
  .tracker-status-pill-sep {
    color: var(--text-muted);
    opacity: 0.6;
  }
  @keyframes tracker-pill-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tracker-status-pill[data-state="live"] .tracker-status-pill-state::before {
      animation: none;
    }
  }

  /* ---- Progress dashboard: hidden on mobile (gauges own this role) ---- */
  .tracker-progress-section { display: none; }

  /* ---- Hero screen ---------------------------------------------------- */
  /* Kill desktop fixed-attachment gradient (broken on mobile anyway). */
  .tracker-hero {
    background-attachment: scroll;
    padding: var(--space-xl) 0 var(--space-lg);
    border-bottom: none;
  }
  .tracker-hero-inner {
    padding: 0 var(--space-md);
    gap: var(--space-lg);
    align-items: stretch;
  }
  .tracker-hero-content {
    flex: 0 0 auto;
    max-width: 100%;
    text-align: center;
  }
  .tracker-hero-content .section-label {
    display: inline-flex;
  }
  .tracker-hero-title {
    font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
    margin: var(--space-xs) 0 var(--space-sm);
  }
  .tracker-hero-subtitle {
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 100%;
  }

  /* ---- Gauges (semi-circular arcs) ------------------------------------ */
  .tracker-gauges {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0 var(--space-xs);
  }
  .tracker-gauge {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    text-align: center;
  }
  .tracker-gauge-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
  /* pathLength="1" lives on the SVG element (see tracker/index.html) so
     stroke-dasharray + stroke-dashoffset operate as fractions of the
     normalized path. Track is a solid subtle arc so the dial shape
     reads as a gauge (not dots/gear teeth) at zero. */
  .tracker-gauge-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 6;
    stroke-linecap: round;
  }
  .tracker-gauge-fill {
    fill: none;
    stroke: var(--brand-gold);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - var(--gauge-progress, 0));
    transition: stroke-dashoffset 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 0 6px rgba(255, 167, 38, 0.45));
  }
  .tracker-gauge[data-gauge="percent"] .tracker-gauge-fill { stroke: #F97316; filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.45)); }
  .tracker-gauge[data-gauge="climb"] .tracker-gauge-fill { stroke: #60A5FA; filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.45)); }
  .tracker-gauge-readout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
  }
  .tracker-gauge-value {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .tracker-gauge-unit {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
  }
  .tracker-gauge-label {
    margin-top: var(--space-xs);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
  }

  /* ---- Countdown: slash-separated single row -------------------------- */
  .tracker-countdown {
    background: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
    min-width: 0;
    width: 100%;
  }
  .countdown-label {
    font-size: 0.65rem;
    margin-bottom: var(--space-xs);
  }
  .countdown-units {
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
  }
  .tracker-hero .countdown-unit {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
  }
  .tracker-hero .countdown-value {
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
    font-variant-numeric: tabular-nums;
  }
  .tracker-hero .countdown-name {
    font-size: 0.62rem;
    margin-top: 0;
  }
  /* Swap ":" → "/" on mobile only, no HTML change. */
  .tracker-hero .countdown-sep {
    font-size: 0;
    padding: 0;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.35);
  }
  .tracker-hero .countdown-sep::before {
    content: "/";
    font-size: 1.1rem;
    opacity: 0.55;
  }
  .countdown-date { font-size: 0.7rem; margin-top: var(--space-xs); }

  /* ---- Route strip: hidden on mobile (gauges replace it). Override the
         data-ride-state visibility rules with !important since mobile is
         the lower-priority media query but appears later in the cascade
         only for some siblings. */
  .tracker-route-strip,
  .tracker-route-strip--gauges { display: none !important; }

  /* ---- Full-bleed route map ------------------------------------------- */
  /* Kill section padding so the map can reach the viewport edges. The
     header text is re-padded below. */
  .tracker-map-section.section {
    padding: 0;
    background: var(--bg-secondary);
  }
  .tracker-map-section .section-inner {
    padding: 0;
    max-width: none;
  }
  .tracker-map-section .section-header {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    margin-bottom: 0;
    text-align: left;
  }
  .tracker-map-section .section-title {
    font-size: var(--fs-h2);
    margin-bottom: 4px;
  }
  .tracker-map-section .section-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .tracker-map-wrap {
    position: relative;
    width: 100%;
  }
  .tracker-map-container {
    height: 72dvh;
    min-height: 420px;
    border-radius: 0;
    box-shadow: none;
    /* Leaflet sets its own touch-action: none on .leaflet-container for full
       drag/pinch/zoom control — do NOT override here (that disabled pinch). */
  }
  @supports not (height: 72dvh) {
    .tracker-map-container { height: 72vh; }
  }

  /* "Use two fingers to move the map" hint overlay. Shown by JS when a
     user tries to pan with one finger (Google Maps pattern). Fades out
     after ~1.4s. pointer-events:none so it never blocks touches. */
  .tracker-map-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
    z-index: 1000;
  }
  .tracker-map-hint.is-visible {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .tracker-map-hint { transition: none; }
  }

  /* Floating status chip over the map bottom-center (mobile only). */
  .tracker-map-chip {
    position: absolute;
    left: 50%;
    bottom: var(--space-md);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    color: var(--text-primary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: calc(100% - var(--space-lg) * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 500;
    pointer-events: none;
  }
  .tracker-map-chip .icon {
    color: var(--brand-blue);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* Hide Leaflet's built-in bottom-right legend control on mobile —
     the floating chip replaces it and keeps thumb reach clear. */
  .tracker-map-container .leaflet-control-container .leaflet-bottom.leaflet-right {
    display: none;
  }
  /* Shrink Leaflet attribution + zoom controls a touch. */
  .tracker-map-container .leaflet-bottom.leaflet-left .leaflet-control-attribution {
    font-size: 0.62rem;
    padding: 0 4px;
  }

  /* ---- Stages carousel (milestones on mobile) ------------------------- */
  .tracker-milestones-section.section {
    padding: var(--space-xl) 0 var(--space-lg);
  }
  .tracker-milestones-section .section-inner {
    padding: 0;
  }
  .tracker-milestones-section .section-header {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-md);
    text-align: left;
  }
  .tracker-milestones-section .section-title {
    font-size: var(--fs-h2);
    margin-bottom: 4px;
  }
  .tracker-milestones-section .section-subtitle {
    font-size: 0.85rem;
  }

  .milestones-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Snapport's left edge = scroll-padding-inline inside the padding
       box. Without this, scroll-snap-align: start snaps the card flush
       to the track's padding-box edge (0), overriding the 16px left
       padding and showing the first card flush at the viewport edge. */
    scroll-padding-inline: var(--space-md);
    gap: var(--space-md);
    padding: 4px var(--space-md) var(--space-md);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .milestones-grid::-webkit-scrollbar { display: none; }
  .milestones-grid:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
  }

  .milestone-card {
    flex: 0 0 72%;
    min-width: 0;
    max-width: 280px;
    scroll-snap-align: start;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border-top-width: 3px;
  }
  .milestone-card:hover { transform: none; }

  .milestone-badge {
    font-size: 0.6rem;
    padding: 2px 7px;
  }
  .milestone-icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-sm);
  }
  .milestone-icon .icon {
    width: 16px;
    height: 16px;
  }
  .milestone-name {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }
  .milestone-meta {
    font-size: 0.7rem;
    margin-bottom: var(--space-xs);
  }
  .milestone-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
  }

  /* ---- Dispatch section (From the Road) ------------------------------- */
  .tracker-updates-section.section {
    padding: var(--space-xl) 0 var(--space-lg);
  }
  .tracker-updates-section .section-inner {
    padding: 0 var(--space-md);
  }
  .tracker-updates-section .section-header {
    text-align: left;
    margin-bottom: var(--space-md);
  }
  .tracker-updates-section .section-title {
    font-size: var(--fs-h2);
    margin-bottom: 4px;
  }
  .tracker-updates-section .section-subtitle {
    font-size: 0.85rem;
  }

  /* Pre-ride empty-state card — full-width, compact, left-aligned on mobile. */
  .updates-placeholder {
    padding: 0;
    justify-content: stretch;
  }
  .updates-placeholder-card {
    width: 100%;
    max-width: none;
    padding: var(--space-lg);
    text-align: left;
    border-left: 3px solid var(--brand-blue);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .updates-placeholder-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
  }
  .updates-placeholder-icon {
    width: 28px;
    height: 28px;
    color: var(--brand-blue);
    margin-bottom: var(--space-xs);
  }
  .updates-placeholder-card h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .updates-placeholder-card h3 #updatesCountdownDays {
    color: var(--brand-blue);
    font-weight: 800;
  }
  .updates-placeholder-card p {
    font-size: 0.85rem;
    line-height: 1.45;
  }

  /* Dispatch feed card stack (live ride) — one card per viewport, snap. */
  .updates-feed {
    gap: var(--space-md);
  }
  .update-card {
    padding: var(--space-md) var(--space-lg);
    border-left-width: 3px;
    scroll-snap-align: start;
  }
  .update-card-meta {
    font-size: 0.7rem;
    gap: var(--space-sm);
  }
  .update-card-title {
    font-size: 1rem;
  }
  .update-card-body {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  /* ---- Slim support strip (replaces heavy CTA block on mobile) -------- */
  .tracker-cta-section.section {
    padding: var(--space-lg) 0 calc(var(--space-lg) + var(--safe-bottom));
  }
  .tracker-cta-section .section-inner {
    padding: 0 var(--space-md);
  }
  .tracker-cta {
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-top-width: 3px;
    text-align: left;
    align-items: stretch;
  }
  .tracker-cta-title {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }
  .tracker-cta-subtitle {
    font-size: 0.85rem;
    line-height: 1.45;
  }
  .tracker-cta-actions {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }
  .tracker-cta-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* Desktop: hide the mobile-only chip so it doesn't appear in the desktop map. */
.tracker-map-chip { display: none; }
@media (max-width: 768px) {
  .tracker-map-chip { display: inline-flex; }
}


/* ===== components/post.css ===== */
/* ============================================
   POST PAGE - Individual Blog Post
   ============================================ */

/* ── Post layout ──────────────────── */
.post-page {
  max-width: 780px;
  margin: 0 auto;
  padding: calc(var(--nav-height, 70px) + var(--space-2xl)) var(--space-lg) var(--space-2xl);
}

/* ── Loading / error ──────────────── */
.post-loading,
.post-error {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.post-error { color: var(--brand-red); }

/* ── Post header ──────────────────── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.post-tag {
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--brand-blue);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.post-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.post-meta-author {
  font-weight: 700;
  color: var(--brand-blue);
}

.post-cover {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: var(--space-xl);
}

/* ── Post content (markdown output) ─ */
.post-content {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

.post-content p { margin-bottom: 1.5em; }

.post-content h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 2em 0 .75em;
}

.post-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.75em 0 .6em;
}

.post-content blockquote {
  border-left: 4px solid var(--brand-blue);
  padding-left: 24px;
  margin: 2em 0;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
  color: var(--brand-blue);
}

.post-content strong { color: var(--text-primary); }

.post-content ul, .post-content ol {
  padding-left: 1.75em;
  margin-bottom: 1.5em;
}

.post-content li { margin-bottom: .5em; }

.post-content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 1em 0;
}

.post-content a { color: var(--brand-blue); }

/* ── Media embeds ────────────────── */
.post-media { margin: var(--space-xl) 0; }

.post-media-item { margin-bottom: var(--space-lg); }

.post-media-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

.post-embed-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.post-embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.post-embed-image {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.post-social-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow .15s;
}

.post-social-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.post-social-card svg { width: 28px; height: 28px; flex-shrink: 0; }

.post-social-card-text { font-size: 0.9rem; }

.post-social-card-label {
  font-weight: 700;
  display: block;
}

.post-social-card-url {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ── Cheer button ────────────────── */
.post-cheer-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: var(--space-xl) 0;
}

.btn-cheer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 100px;
  border: 2px solid var(--brand-red);
  background: transparent;
  color: var(--brand-red);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.btn-cheer:hover:not(:disabled) {
  background: var(--brand-red);
  color: white;
}

.btn-cheer:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-cheer.cheered {
  background: var(--brand-red);
  color: white;
}

.btn-cheer svg { width: 18px; height: 18px; }

.cheer-count {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.cheer-count strong {
  color: var(--text-primary);
  font-size: 1.4rem;
  font-weight: 800;
}

/* ── Comments ────────────────────── */
.post-comments { margin-top: var(--space-xl); }

.post-comments h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.comment-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: var(--space-md);
}

.comment-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.comment-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.comment-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.comment-form-section {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: var(--space-lg);
}

.comment-form-section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.comment-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  transition: border-color .15s;
}

.comment-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
}

.comment-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.comment-submit {
  margin-top: var(--space-sm);
}

.comment-status {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--brand-blue);
}

.comment-status.error { color: var(--brand-red); }

.sign-in-prompt {
  padding: var(--space-lg);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  text-align: center;
  color: var(--text-muted);
}

.sign-in-prompt a { color: var(--brand-blue); font-weight: 600; }

/* ── Back link ───────────────────── */
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: var(--space-xl);
  transition: color .15s;
}

.post-back:hover { color: var(--brand-blue); }
.post-back svg { width: 16px; height: 16px; }

/* ── Dark mode contrast fixes ────── */
[data-theme="dark"] .post-content a {
  color: var(--brand-blue-light, #64B5F6);
}

[data-theme="dark"] .post-content blockquote {
  color: var(--brand-blue-light, #64B5F6);
}

/* ── Responsive ──────────────────── */
@media (max-width: 768px) {
  .post-page {
    padding-top: calc(var(--nav-height, 70px) + var(--space-lg));
  }
  .post-title { font-size: 1.8rem; }
  .post-content { font-size: 1rem; }
}

@media (max-width: 480px) {
  .post-page {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .post-title {
    font-size: 1.5rem;
  }

  .post-content h2 {
    font-size: 1.4rem;
  }

  .post-content h3 {
    font-size: 1.15rem;
  }

  .post-content blockquote {
    font-size: 1.05rem;
    padding-left: 16px;
  }

  .post-cover {
    border-radius: 10px;
  }

  .post-cheer-section {
    flex-wrap: wrap;
    gap: 12px;
  }

  .btn-cheer {
    padding: 10px 20px;
    font-size: 0.9rem;
    min-height: 44px;
  }

  .comment-form-section {
    padding: var(--space-md);
    border-radius: 12px;
  }

  .comment-textarea {
    min-height: 80px;
  }

  .comment-form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .post-social-card {
    padding: 12px 14px;
    gap: 12px;
  }
}


/* ===== components/blog.css ===== */
/* ── Hero ─────────────────────────── */
.blog-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--space-lg) 80px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
}

.blog-hero-video {
  position: absolute;
  top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  opacity: 0.08;
  pointer-events: none;
}

.blog-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: white;
}

.blog-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.blog-hero-content p {
  font-size: var(--font-size-lg);
  opacity: .95;
}

/* ── Filter bar ───────────────────── */
.blog-filters {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-md) var(--space-lg);
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
}

.blog-filters-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.blog-filter-chip {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}

.blog-filter-chip:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.blog-filter-chip.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
}

/* ── Feed grid ────────────────────── */
.blog-feed-section {
  padding: var(--space-2xl) var(--space-lg);
}

.blog-feed-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

#blogFeed {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.blog-feed-loading,
.blog-feed-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-2xl) 0;
  font-size: 1.1rem;
}

/* ── Post card ────────────────────── */
.blog-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.blog-card-image-link {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.blog-card:hover .blog-card-image {
  transform: scale(1.04);
}

.blog-card-body {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.blog-card-author {
  font-weight: 600;
  color: var(--brand-blue);
}

.blog-card-dot { opacity: .4; }

.blog-card-cheers {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-red);
}

.icon-sm { width: 14px; height: 14px; }

.blog-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-primary);
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-card-title a:hover { color: var(--brand-blue); }

.blog-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-sm);
}

.blog-tag {
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.blog-card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  margin-top: var(--space-sm);
  transition: gap .15s;
}

.blog-card-read-more:hover { gap: 10px; }

/* Cards with no image: single column */
.blog-card:not(:has(.blog-card-image-link)) {
  grid-template-columns: 1fr;
}

/* ── Responsive ───────────────────── */
@media (max-width: 768px) {
  .blog-card {
    grid-template-columns: 1fr;
  }

  .blog-card-image-link {
    aspect-ratio: 16/9;
  }

  .blog-card-body {
    padding: var(--space-md);
  }

  .blog-card-title { font-size: 1.2rem; }

  .blog-filters {
    top: 0;
    position: static;
  }
}

@media (max-width: 480px) {
  .blog-hero {
    min-height: 50vh;
    padding: 100px var(--space-md) 60px;
  }

  .blog-filter-chip {
    padding: 5px 10px;
    font-size: 0.78rem;
  }

  .blog-feed-section {
    padding: var(--space-xl) var(--space-md);
  }

  .blog-card-body {
    padding: var(--space-md) var(--space-md);
  }

  .blog-card-title {
    font-size: 1.1rem;
  }

  .blog-card-excerpt {
    font-size: 0.88rem;
    -webkit-line-clamp: 2;
  }

  .blog-tag {
    padding: 2px 8px;
    font-size: 0.7rem;
  }

  .blog-card-read-more {
    font-size: 0.82rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ===== components/about.css ===== */
/* ============================================
   ABOUT PAGE STYLES
   Extracted from inline styles in about.html.

   Page-scoped tokens (single source of truth for offsets + rhythm):
     --about-section-nav-h     : height of the sticky in-page nav
     --about-section-offset    : cumulative sticky offset used for
                                 scroll-margin-top on anchor sections
   Set on body[data-page="about"] so every rule that needs them can
   reference without recomputing. Mobile overrides live in the mobile
   block below.
   ============================================ */

body[data-page="about"] {
  --about-section-nav-h: 49px;
  --about-section-offset: calc(var(--nav-height) + var(--about-section-nav-h));
}

/* Anchor targets: scroll-margin-top accounts for sticky nav(s) above.
   Replaces the old JS-computed offset in js/about.js. */
body[data-page="about"] main section[id] {
  scroll-margin-top: var(--about-section-offset);
}

/* === PAGE HERO — matches blog/stories pattern === */
.about-hero-banner {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--space-lg) 80px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
}

.about-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  object-fit: cover;
}

.about-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: white;
}

.about-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.about-hero-content p {
  font-size: var(--font-size-lg);
  opacity: 0.95;
}

.about-hero-meta {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: var(--space-sm);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  max-width: 100%;
}

/* Tiny map-pin SVG between meta segments. Inherits opacity from parent. */
.about-hero-meta-sep {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.85;
}

.about-hero-label {
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-md);
  display: inline-block;
  position: relative;
  letter-spacing: 0.22em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Dashed under-rule echoes the stitch-line metaphor from the bottom
   tab bar. Subtle on desktop, focal on mobile. */
.about-hero-label::after {
  content: "";
  display: block;
  width: 48px;
  margin: var(--space-xs) auto 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.8);
}

/* === STICKY SECTION NAV === */
.about-section-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0 var(--space-lg);
  position: sticky;
  /* --about-section-nav-top is overridden on mobile to 0 (no desktop
     nav to offset from). Keep var name + fallback so both layouts
     share a single rule. */
  top: var(--about-section-nav-top, var(--nav-height));
  z-index: 10;
}

.about-section-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.about-section-nav-inner::-webkit-scrollbar {
  display: none;
}

.section-nav-link {
  padding: 1rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.section-nav-link:hover,
.section-nav-link.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

/* === SECTION BACKGROUNDS === */
.about-section-card-bg {
  background: var(--bg-card);
}

.about-section-secondary-bg {
  background: var(--bg-secondary);
}

/* === MISSION 2-COLUMN GRID === */
.about-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

/* === COMMON TEXT STYLES === */

/* Body text used throughout about page (1.1rem paragraphs) */
.about-body-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

/* Slightly smaller body text (1.05rem, rider bios) */
.about-body-text-sm {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

/* Last paragraph in a group — no bottom margin */
.about-body-text-sm:last-child,
.about-body-text:last-child {
  margin-bottom: 0;
}

/* Emphasized strong text inside body text */
.about-strong {
  color: var(--text-primary);
}

/* Blue highlight / callout text */
.about-highlight {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--brand-blue);
}

/* Blue highlight used in cards — smaller */
.about-highlight-sm {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-blue);
  margin-top: var(--space-lg);
}

/* Card body text */
.about-card-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* Card heading */
.about-card-heading {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

/* === CAUSE SECTION === */
.about-cause-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.about-cause-highlight {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: var(--brand-blue);
  margin-bottom: var(--space-xl);
}

.about-cause-cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* === RIDERS SECTION === */
.about-riders-intro {
  max-width: 680px;
  margin: 0 auto var(--space-3xl);
  text-align: center;
}

.about-riders-intro-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

/* 3-column layout: Wil bio | Capitol photo | Patrick bio */
.about-riders-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.about-riders-photo {
  margin: 0;
}

.about-riders-photo img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 16px 48px var(--shadow-color);
  display: block;
}

.about-riders-photo-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}

.about-rider-name {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

/* === Rider bio <details> — desktop defaults === */
/* On desktop we want the same visual as the old <div> bios: always
   expanded, no chevron, summary not interactive. The UA stylesheet
   hides non-[open] details children via `display: none`; our class
   selector (specificity 0,2,0) beats that (UA is 0,1,2). The mobile
   block below overrides display to grid and enables collapse. */
.rider-bio {
  /* Strip native details chrome on desktop; no card styling. */
  background: transparent;
  border: 0;
  padding: 0;
}
.rider-bio > summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
  padding: 0;
}
.rider-bio > summary::-webkit-details-marker { display: none; }
.rider-bio > .rider-bio-body { display: block; }
.rider-bio > .rider-bio-body > .rider-bio-body-inner { padding: 0; }
.rider-bio-chevron { display: none; }

/* Rider bio ending emphasis */
.about-rider-emphasis {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-primary);
  font-weight: 600;
}

/* === PHOTO GALLERY === */
.about-gallery {
  margin-top: 80px;
}

.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
}

/* First image special positioning */
.about-gallery-img-top {
  object-position: center 25%;
}

/* === ROUTE SECTION === */
.about-route-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.about-route-header {
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  color: var(--brand-blue);
  margin-bottom: var(--space-2xl);
}

.about-route-header-sub {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.about-route-closing {
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  color: var(--brand-blue);
  margin-top: var(--space-2xl);
}

/* Route stats grid */
.about-stats-grid {
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

/* Stat cards & help cards */
.about-stat-card {
  text-align: center;
}

.about-stat-icon {
  width: 3rem;
  height: 3rem;
  color: var(--brand-blue);
  margin-bottom: var(--space-md);
}

.about-stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-blue);
  margin-bottom: var(--space-xs);
}

.about-stat-label {
  color: var(--text-secondary);
}

/* States card */
.about-states-card {
  margin-bottom: var(--space-xl);
}

.about-states-heading {
  margin-bottom: var(--space-md);
}

.about-states-list {
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Big moments card */
.about-moments-heading {
  margin-bottom: var(--space-lg);
}

/* === CHECK LIST === */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.check-list li:last-child {
  border-bottom: none;
}

.check-list li::before {
  content: '';
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  min-width: 0.65rem;
  background: var(--brand-blue);
  border-radius: 50%;
  margin-top: 0.45rem;
}

/* === ROUTE TIMELINE === */
.route-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.route-timeline::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--border-color);
}

.route-timeline li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  position: relative;
}

.timeline-dot {
  width: 2.2rem;
  height: 2.2rem;
  min-width: 2.2rem;
  border-radius: 50%;
  background: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.timeline-dot-red {
  background: var(--brand-red);
}

.timeline-dot svg {
  width: 1rem;
  height: 1rem;
  color: white;
}

.route-timeline li p {
  color: var(--text-secondary);
  line-height: 1.6;
  padding-top: 0.35rem;
}

/* === HOW TO HELP SECTION === */
.about-help-grid {
  gap: var(--space-2xl);
}

.about-help-card {
  text-align: center;
}

.about-help-icon {
  width: 3rem;
  height: 3rem;
  color: var(--brand-blue);
  margin-bottom: var(--space-lg);
}

.about-help-heading {
  margin-bottom: var(--space-md);
}

.about-help-text {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.about-help-btn {
  width: 100%;
}

/* === TABLET === */
/* Below 1024px the 3-column bio/photo/bio layout gets too cramped.
   Reorder so both bios land above the Capitol photo, with Patrick
   first (HTML source order is Wil, Capitol, Patrick — we flip via
   CSS `order` so the HTML stays semantically natural). */
@media (max-width: 1024px) {
  .about-riders-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
  }

  .about-riders-photo {
    grid-column: 1 / -1;
    max-width: 640px;
    margin: 0 auto var(--space-xl);
  }

  /* Reorder: Patrick (3rd child) first, Wil (1st child) second,
     Capitol photo (2nd child) last. Works the same on 2-col tablet
     and 1-col mobile — on tablet, Patrick + Wil share row 1 with
     Capitol full-width on row 2; on mobile everything stacks in
     the stated order. */
  .about-riders-grid > :nth-child(3) { order: 1; }  /* Patrick */
  .about-riders-grid > :nth-child(1) { order: 2; }  /* Wil */
  .about-riders-grid > :nth-child(2) { order: 3; }  /* Capitol photo */
}

/* === MOBILE — Trail Marker (2026-04-24) ===
   Documentary scroll. Sticky section nav glues to y=0 (no top nav to
   offset from since mobile top nav was retired). Stacked cards become
   horizontal swipe carousels. Rider bios collapse behind summary rows.
   Big Moments timeline picks up a dashed brand-blue rail that echoes
   the bottom tab bar's stitch-line metaphor, tying the About page to
   the site's navigation DNA. No new libraries. */
@media (max-width: 768px) {

  /* Page-scoped offset tokens. With no mobile top nav, the only thing
     above anchor targets is the sticky section nav (40px) plus the
     iPhone notch area (--safe-top). */
  body[data-page="about"] {
    --about-section-nav-h: 40px;
    --about-section-nav-top: 0px;
    --about-section-offset:
      calc(var(--about-section-nav-h) + var(--safe-top));
    --screen-edge: var(--space-md);
  }

  /* Grids that exist only for desktop layout flatten to a single
     column on mobile. Carousel sections override this below via
     .carousel-track display: flex (loaded after this file). */
  .about-mission-grid,
  .about-riders-grid,
  .about-gallery-grid {
    grid-template-columns: 1fr;
  }

  /* ── Sticky section nav ─────────────────────────────────────── */
  /* Covers the notch: padding-top pads below safe-top, background
     extends behind via the native sticky positioning. */
  .about-section-nav {
    padding-top: var(--safe-top);
    padding-left: 0;
    padding-right: 0;
  }

  .about-section-nav-inner {
    padding: 0 var(--screen-edge);
  }

  .section-nav-link {
    padding: 12px 14px;
    font-size: 0.72rem;
    /* Replace the default 2px solid transparent bottom border with a
       transparent-to-brand-blue dashed stripe on .active — cleaner
       than switching border-style (which varies by browser). */
    border-bottom: 0;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 10px 2px;
    transition:
      color 180ms ease-out,
      background-image 180ms ease-out,
      transform 140ms ease-out;
    -webkit-tap-highlight-color: transparent;
  }

  /* Tap feedback — subtle scale, no layout shift. */
  .section-nav-link:active {
    transform: scale(0.97);
  }

  /* Active indicator: 6px-on 4px-off dashed line in brand-blue,
     painted via background-image for consistent rendering. */
  .section-nav-link.active {
    color: var(--brand-blue);
    background-image: linear-gradient(
      to right,
      var(--brand-blue) 0 6px,
      transparent 6px 10px
    );
  }

  /* ── Mission: Extraordinary card gets a left rail ──────────── */
  /* The card on the right of the 2-col desktop layout is visually the
     pulled-out callout. On mobile it stacks below the prose; the rail
     keeps its "callout" identity. */
  .about-mission-grid > .card {
    border-left: 3px solid var(--brand-blue);
  }

  /* ── Rider bios: collapsible (native <details>) ─────────────── */
  /* Default (desktop) styling lives outside this block; here we
     morph the same markup into a tappable accordion. */
  .rider-bio {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    overflow: hidden;
  }

  .rider-bio > summary {
    pointer-events: auto;
    cursor: pointer;
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    -webkit-tap-highlight-color: transparent;
  }
  .rider-bio > summary .about-rider-name {
    margin: 0;
    font-size: 1.25rem;
  }

  .rider-bio-chevron {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-blue);
    flex-shrink: 0;
    transition: transform 200ms ease-out;
  }
  .rider-bio[open] .rider-bio-chevron {
    transform: rotate(180deg);
  }

  /* Body animation trick: grid-template-rows 0fr → 1fr gives us a
     smooth height transition without measuring content. The direct
     child needs min-height: 0 + overflow: hidden to collapse. */
  .rider-bio > .rider-bio-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease-out;
  }
  .rider-bio[open] > .rider-bio-body {
    grid-template-rows: 1fr;
  }
  .rider-bio > .rider-bio-body > .rider-bio-body-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-md) var(--space-md);
  }

  @media (prefers-reduced-motion: reduce) {
    .rider-bio > .rider-bio-body,
    .rider-bio-chevron {
      transition: none;
    }
  }

  /* ── Photo gallery → horizontal carousel ────────────────────── */
  .about-gallery-grid.carousel-track {
    /* carousel-track rules already handle display/overflow; reset
       the grid's own padding-reset expectations for card sizing. */
    gap: var(--space-md);
  }
  .about-gallery-grid.carousel-track .carousel-card img {
    width: 100%;
    /* Scales from ~200px on small phones to 280px on wider screens
       without hardcoding per-breakpoint values. */
    height: clamp(200px, 56vw, 280px);
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
  }

  /* ── Route stats → horizontal carousel ──────────────────────── */
  .about-stats-grid.carousel-track {
    gap: var(--space-md);
  }

  /* ── Big Moments: vertical route rail in brand-blue dashed ─── */
  /* Continues the stitch-line metaphor: the timeline IS the route. */
  .route-timeline::before {
    background: transparent;
    /* Dashed vertical rail — 6px on, 4px off. */
    background-image: linear-gradient(
      to bottom,
      var(--brand-blue) 0 6px,
      transparent 6px 10px
    );
    background-size: 2px 10px;
    background-repeat: repeat-y;
  }
  .timeline-dot {
    /* Keep dots above the rail with a ring so the rail appears to pass
       behind them rather than overlap the icon. */
    box-shadow: 0 0 0 4px var(--bg-secondary);
  }

  /* ── How to Help → horizontal carousel ─────────────────────── */
  .about-help-grid.carousel-track {
    gap: var(--space-md);
  }

  /* Carousels live INSIDE .section's natural 24px horizontal padding.
     Matches the donate tier carousel pattern which the user flagged
     as the reference "works perfectly." The section padding gives the
     same comfortable left gutter that every other content block on
     the site has — no negative-margin escape needed, and no width
     hack. Peek of the next card comes from cards being ~88% wide,
     not from the track reaching the viewport edge. */
}

@media (max-width: 480px) {
  .about-hero-banner {
    min-height: 50vh;
    padding: 100px var(--space-md) 60px;
  }

  .about-hero-content p {
    font-size: var(--font-size-base);
  }

  /* Note: .about-section-nav outer padding is now handled in the
     768px mobile block (safe-top + no side padding; inner handles
     horizontal via --screen-edge). Do NOT override here or the
     shorthand will wipe out padding-top: var(--safe-top). */

  .section-nav-link {
    padding: 10px 12px;
    font-size: 0.7rem;
  }

  .about-rider-name {
    font-size: 1.4rem;
  }

  .about-body-text {
    font-size: 1rem;
  }

  .about-body-text-sm {
    font-size: 0.95rem;
  }

  .about-gallery-grid img {
    height: 200px;
  }

  .about-gallery {
    margin-top: 48px;
  }

  .about-stat-number {
    font-size: 1.6rem;
  }

  .about-stat-icon,
  .about-help-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .about-highlight {
    font-size: 1.05rem;
  }

  .about-route-header {
    font-size: 1.1rem;
  }

  .about-route-closing {
    font-size: 1.1rem;
  }

  .about-cause-highlight {
    font-size: 1.05rem;
  }
}


/* ===== components/stories.css ===== */
/* ============================================
   SEA TO SHINING SEA - WALL OF INSPIRATION
   ============================================ */

/* Wall of Inspiration Styles */
.wall-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--space-lg) 80px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
}

.wall-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
}

.wall-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  color: white;
}

.wall-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.wall-hero-content p {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2xl);
  opacity: 0.95;
}

.inspiration-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.inspiration-type-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.inspiration-type-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  margin-bottom: var(--space-sm);
}

.inspiration-type-icon .icon {
  width: 20px;
  height: 20px;
}

.inspiration-type-card p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .inspiration-types { grid-template-columns: repeat(2, 1fr); }
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-2xl);
  margin-top: var(--space-3xl);
}

.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  position: relative;
  transition: all var(--transition-base);
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--brand-blue);
}

.story-type {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.story-type.donor {
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-blue);
}

.story-type.family {
  background: rgba(220, 38, 38, 0.1);
  color: var(--brand-red);
}

.story-type.dedication {
  background: rgba(255, 167, 38, 0.12);
  color: var(--brand-gold);
}

.story-type.supporter {
  background: rgba(211, 47, 47, 0.08);
  color: var(--brand-red);
}

.story-quote {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  font-style: italic;
  position: relative;
  padding-left: var(--space-2xl);
  border-left: 3px solid var(--brand-blue);
}

.story-quote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: var(--space-sm);
  font-size: 3rem;
  line-height: 1;
  font-style: normal;
  color: var(--brand-blue);
  opacity: 0.25;
  font-weight: 900;
}

/* Featured card — spans full grid width */
.story-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  border-top: 4px solid var(--brand-blue);
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.story-card--featured .story-quote {
  font-size: calc(var(--font-size-lg) * 1.1);
  border-left-color: var(--brand-red);
  grid-column: 1;
}

.story-card--featured .story-quote::before {
  color: var(--brand-red);
  font-size: 4rem;
  opacity: 0.2;
}

.story-card--featured .story-author {
  grid-column: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.story-card--featured .story-avatar {
  width: 64px;
  height: 64px;
  font-size: var(--font-size-xl);
}

@media (max-width: 768px) {
  .story-card--featured {
    grid-template-columns: 1fr;
  }

  .story-card--featured .story-quote,
  .story-card--featured .story-author {
    grid-column: 1;
  }

  .story-card--featured .story-author {
    flex-direction: row;
  }
}

.story-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.story-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: var(--font-size-lg);
}

.story-author-info h4 {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.story-author-info p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.story-miles {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  background: var(--brand-blue);
  color: white;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.share-story-section {
  background: var(--bg-secondary);
  padding: 100px var(--space-lg);
  margin-top: 100px;
}

.share-story-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  text-align: center;
}

.share-story-card h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: var(--space-md);
}

.share-story-card p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}

.story-form {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all var(--transition-base);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
}

/* ── Form status ──────────────────── */
.story-form-status {
  display: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-top: var(--space-md);
}

.story-form-status--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #166534;
}

[data-theme="dark"] .story-form-status--success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.story-form-status--error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--brand-red);
}

.story-form-status--error a {
  color: var(--brand-red);
  font-weight: 600;
}

@media (max-width: 768px) {
  .inspiration-types { grid-template-columns: 1fr; }

  .stories-grid {
    grid-template-columns: 1fr;
  }

  .story-miles {
    position: static;
    display: inline-block;
    margin-bottom: var(--space-md);
  }

  .share-story-section {
    padding: 60px var(--space-md);
    margin-top: 60px;
  }

  .share-story-card {
    padding: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .wall-hero {
    min-height: 50vh;
    padding: 100px var(--space-md) 60px;
  }

  .stories-grid {
    grid-template-columns: minmax(280px, 1fr);
    gap: var(--space-xl);
  }

  .story-card {
    padding: var(--space-xl);
  }

  .story-quote {
    font-size: var(--font-size-base);
    padding-left: var(--space-lg);
  }

  .story-quote::before {
    font-size: 2rem;
  }

  .share-story-section {
    padding: 40px var(--space-sm);
    margin-top: 40px;
  }

  .share-story-card {
    padding: var(--space-lg);
  }

  .share-story-card h2 {
    font-size: 1.6rem;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 12px 14px;
  }

  .inspiration-type-card {
    padding: var(--space-lg);
  }
}


/* ===== components/account.css ===== */
/* ============================================
   ACCOUNT PAGE — Sign In / Sign Up
   Standalone auth page (no nav/footer)
   ============================================ */

/* ── Page layout ──────────────────── */
.account-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
}

/* ── Card ─────────────────────────── */
.account-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: var(--space-2xl);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.account-logo {
  display: block;
  margin: 0 auto var(--space-lg);
  height: 48px;
  width: auto;
}

.account-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.account-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* ── Tabs ─────────────────────────── */
.account-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: var(--space-xl);
  gap: 0;
}

.account-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
}

.account-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.account-tab:hover:not(.active) {
  color: var(--text-secondary);
}

/* ── Forms ────────────────────────── */
.account-form { display: flex; flex-direction: column; gap: var(--space-md); }

.account-form-panel { display: none; }
.account-form-panel.active { display: flex; flex-direction: column; gap: var(--space-md); }

.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color .15s;
  box-sizing: border-box;
}

.field-input:focus {
  outline: none;
  border-color: var(--brand-blue);
}

.field-input::placeholder { color: var(--text-muted); }

.account-submit {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: var(--space-sm);
}

.account-status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  text-align: center;
}

.account-status.success {
  background: #052e16;
  border: 1px solid #16a34a;
  color: #4ade80;
}

.account-status.error {
  background: #450a0a;
  border: 1px solid #dc2626;
  color: #fca5a5;
}

/* ── Footer note ──────────────────── */
.account-footer-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-lg);
}

.account-footer-note a {
  color: var(--brand-blue);
  font-weight: 600;
}

/* Dark-mode overrides for dark card on gradient bg */
[data-theme="dark"] .account-status.success {
  background: rgba(22,163,74,.15);
}
[data-theme="dark"] .account-status.error {
  background: rgba(220,38,38,.15);
}

/* === MOBILE === */
@media (max-width: 480px) {
  .account-page {
    padding: var(--space-lg) var(--space-sm);
  }

  .account-card {
    max-width: 95vw;
    padding: var(--space-lg);
    border-radius: 16px;
  }

  .account-title {
    font-size: 1.3rem;
  }

  .account-subtitle {
    font-size: 0.82rem;
  }

  .account-tab {
    padding: 10px 6px;
    font-size: 0.88rem;
  }

  .field-input {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .account-submit {
    padding: 12px;
    font-size: 0.95rem;
  }
}


/* ===== components/contact.css ===== */
/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* === PAGE HERO === */
.contact-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--space-lg) 80px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
}

.contact-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: white;
}

.contact-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.contact-hero-content p {
  font-size: var(--font-size-lg);
  opacity: 0.95;
  line-height: 1.7;
}

/* === INFO CARDS SECTION === */
.contact-info-section {
  padding: var(--space-4xl) var(--space-lg);
  background: var(--bg-secondary);
}

.contact-info-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--shadow-color);
}

.contact-info-card-icon {
  width: 3rem;
  height: 3rem;
  color: var(--brand-blue);
  margin-bottom: var(--space-lg);
}

.contact-info-card h3 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.contact-info-card p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.contact-info-card a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-base);
}

.contact-info-card a:hover {
  color: var(--brand-blue-dark);
}

/* === FORM SECTION === */
.contact-form-section {
  padding: var(--space-4xl) var(--space-lg);
  background: var(--bg-primary);
}

.contact-form-inner {
  max-width: 700px;
  margin: 0 auto;
}

.contact-form-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.contact-form-header h2 {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.contact-form-header p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.contact-form .form-group label .required {
  color: var(--brand-red);
  margin-left: 2px;
}

/* Textarea character counter */
.contact-textarea-wrapper {
  position: relative;
}

.contact-char-counter {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.contact-char-counter.near-limit {
  color: var(--brand-gold);
}

.contact-char-counter.at-limit {
  color: var(--brand-red);
}

/* Validation error state */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--brand-red);
}

.form-group .field-error {
  color: var(--brand-red);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
  display: none;
}

.form-group.has-error .field-error {
  display: block;
}

/* Submit button row */
.contact-form-actions {
  margin-top: var(--space-xl);
}

.contact-submit-btn {
  width: 100%;
  padding: 14px 28px;
  font-size: var(--font-size-base);
}

.contact-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Status messages */
.contact-form-status {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: none;
  text-align: center;
}

.contact-form-status.is-success {
  display: block;
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.contact-form-status.is-error {
  display: block;
  background: rgba(211, 47, 47, 0.1);
  color: var(--brand-red);
  border: 1px solid rgba(211, 47, 47, 0.3);
}

/* Honeypot */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* === TRUST SECTION === */
.contact-trust-section {
  padding: var(--space-2xl) var(--space-lg) var(--space-4xl);
  background: var(--bg-primary);
}

.contact-trust-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.contact-trust-inner p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.contact-trust-inner a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
}

.contact-trust-inner a:hover {
  color: var(--brand-blue-dark);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-hero {
    min-height: 40vh;
    padding: 100px var(--space-md) 60px;
  }
}

@media (max-width: 480px) {
  .contact-info-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .contact-form-inner {
    padding: 0 var(--space-sm);
  }
}


/* ===== components/social.css ===== */
/* ============================================
   SOCIAL PAGE STYLES
   Follow the Journey — social media hub
   ============================================ */

/* === STICKY SCROLL BACKGROUND ===
   Fixed gradient behind content as the page scrolls. */
[data-page="social"] {
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(25, 118, 210, 0.18), transparent 60%),
    radial-gradient(900px 700px at 85% 30%, rgba(211, 47, 47, 0.10), transparent 65%),
    radial-gradient(1000px 900px at 50% 100%, rgba(25, 118, 210, 0.20), transparent 60%),
    linear-gradient(180deg, #f5f7fa 0%, #e9eef5 50%, #f5f7fa 100%);
  background-attachment: fixed;
  background-size: cover;
}

[data-page="social"][data-theme="dark"] {
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(66, 165, 245, 0.14), transparent 60%),
    radial-gradient(900px 700px at 85% 30%, rgba(239, 83, 80, 0.08), transparent 65%),
    radial-gradient(1000px 900px at 50% 100%, rgba(66, 165, 245, 0.16), transparent 60%),
    linear-gradient(180deg, #0a0e14 0%, #111827 50%, #0a0e14 100%);
  background-attachment: fixed;
  background-size: cover;
}

/* Let sections render over the sticky background */
[data-page="social"] .social-platforms-section,
[data-page="social"] .social-hashtags-section,
[data-page="social"] .social-page-header {
  background: transparent;
}


/* === JOURNEY PULSE — glass pill stats between hero and platforms === */
.social-pulse {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.social-pulse-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 118, 210, 0.15);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 220ms ease, border-color 220ms ease;
}

.social-pulse-item:hover {
  transform: translateY(-2px);
  border-color: rgba(25, 118, 210, 0.35);
}

.social-pulse-item strong {
  color: var(--brand-blue);
  font-weight: 700;
  font-size: 1.05rem;
  margin-right: 2px;
}

.social-pulse-item .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

[data-theme="dark"] .social-pulse-item {
  background: rgba(17, 24, 39, 0.65);
  border-color: rgba(66, 165, 245, 0.20);
}

[data-theme="dark"] .social-pulse-item strong,
[data-theme="dark"] .social-pulse-item .icon {
  color: var(--brand-blue-light, #42a5f5);
}

@media (prefers-reduced-motion: reduce) {
  .social-pulse-item { transition: none; }
  .social-pulse-item:hover { transform: none; }
}

/* Platform cards get a glass effect so the sticky bg shows through */
[data-page="social"] .social-platform-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 118, 210, 0.10);
}

[data-page="social"][data-theme="dark"] .social-platform-card {
  background: rgba(17, 24, 39, 0.65);
  border-color: rgba(66, 165, 245, 0.14);
}

/* === HERO === */
.social-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--space-lg) 80px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
}

.social-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  object-fit: cover;
}

.social-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: white;
}

.social-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.social-hero-content p {
  font-size: var(--font-size-lg);
  opacity: 0.95;
  line-height: 1.7;
}

/* === SHARED SECTION STYLES === */
.social-section-title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.social-section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* === PLATFORM CARDS === */
.social-platforms-section {
  background: var(--bg-primary);
}

.social-platforms-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.social-platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.social-platform-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  box-shadow: 0 2px 8px var(--shadow-color);
  overflow: hidden;
}

.social-platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-strong);
  border-color: var(--brand-blue-light);
}

.social-platform-card--primary {
  border-color: var(--brand-red);
  box-shadow: 0 4px 16px rgba(211, 47, 47, 0.15);
}

.social-platform-card--primary:hover {
  box-shadow: 0 8px 32px rgba(211, 47, 47, 0.25);
  border-color: var(--brand-red);
}

.social-platform-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--brand-red);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.social-platform-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  flex-shrink: 0;
}

.social-platform-info {
  flex: 1;
}

.social-platform-info h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.social-platform-handle {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.social-platform-info p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.social-platform-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-blue);
  transition: gap var(--transition-base);
}

.social-platform-card:hover .social-platform-cta {
  gap: var(--space-sm);
}

/* === INSTAGRAM FEED PLACEHOLDER === */
.social-feed-section {
  padding: var(--space-4xl) var(--space-lg);
  background: var(--bg-secondary);
}

.social-feed-inner {
  max-width: 900px;
  margin: 0 auto;
}

.social-feed-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.social-feed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--bg-card);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.social-feed-placeholder svg {
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.social-feed-placeholder h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.social-feed-placeholder p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.social-feed-placeholder .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

/* === HASHTAG SECTION === */
.social-hashtags-section {
  padding: var(--space-4xl) var(--space-lg);
  background: var(--bg-primary);
}

.social-hashtags-inner {
  max-width: 800px;
  margin: 0 auto;
}

.social-hashtags-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.social-hashtag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--brand-blue);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast), border-color var(--transition-base);
  font-family: inherit;
}

.social-hashtag:hover {
  background: var(--brand-blue);
  color: white;
  border-color: var(--brand-blue);
  transform: scale(1.05);
}

.social-hashtag:hover .social-hashtag-copy {
  stroke: white;
}

.social-hashtag:active {
  transform: scale(0.97);
}

.social-hashtag-copy {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.social-hashtag:hover .social-hashtag-copy {
  opacity: 1;
}

.social-hashtag-hint {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  min-height: 1.4em;
  transition: color var(--transition-fast);
}

.social-hashtag-hint--copied {
  color: var(--brand-blue);
  font-weight: 600;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .social-platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-platforms-section,
  .social-feed-section,
  .social-hashtags-section {
    padding: var(--space-3xl) var(--space-md);
  }

  .social-section-title {
    font-size: var(--font-size-2xl);
  }

  .social-feed-placeholder {
    padding: var(--space-2xl) var(--space-lg);
  }
}

@media (max-width: 480px) {
  .social-platforms-grid {
    grid-template-columns: 1fr;
  }

  .social-hero {
    min-height: 50vh;
    padding: 100px var(--space-md) 60px;
  }

  .social-platform-card {
    padding: var(--space-xl) var(--space-md) var(--space-md);
  }

  .social-hashtag {
    padding: 8px 14px;
    font-size: var(--font-size-sm);
  }
}


/* ===== components/scroll-indicator.css ===== */
/* ============================================
   SCROLL INDICATOR — shared "scroll down" button
   A circular glass button with a bouncing chevron.
   Used on any page that wants a visual hint to scroll.
   ============================================ */

.scroll-indicator {
  /* Default: flow positioning. Pages that need to anchor it absolutely
     (e.g. the homepage hero) override position/bottom/left/transform
     in their own scope. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(25, 118, 210, 0.40);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--brand-blue);
  cursor: pointer;
  padding: 0;
  animation: scroll-indicator-bob 2.2s ease-in-out infinite;
  transition: opacity var(--transition-base),
              border-color var(--transition-fast),
              background var(--transition-fast);
}

[data-theme="dark"] .scroll-indicator {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(66, 165, 245, 0.40);
}

.scroll-indicator:hover {
  border-color: var(--brand-blue);
  background: rgba(25, 118, 210, 0.10);
}

.scroll-indicator:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* On top of a dark/colored hero (e.g. donate page gradient):
   switch to a lighter outline so it stays visible. */
.scroll-indicator--on-dark {
  border-color: rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.scroll-indicator--on-dark:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.22);
}

.scroll-chevron {
  width: 22px;
  height: 22px;
}

@keyframes scroll-indicator-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator { animation: none; }
}


/* ===== components/bottom-nav.css ===== */
/* ============================================
   SEA TO SHINING SEA — MOBILE BOTTOM TAB NAV
   Direction: "Route Marker" (approved 2026-04-23).
   Mobile-only (<=768px). Desktop keeps the existing top nav untouched.

   Key ideas:
   - Dashed stitch line across the top reads as a route on a map.
   - Active tab shows a small red dot; tapping any tab fires a
     one-shot "pin drop" animation (map-pin falls from above and
     settles to the dot).
   - Tracker tab pulses red once the ride is live.
   - "More" opens a bottom sheet with About/Stories/Social/Contact/Login.

   Class prefix is `.tab-bar` / `.tab-sheet` so it does NOT collide
   with admin.css's `.bottom-nav` (admin loads its own stylesheet).
   ============================================ */

/* Container: hidden by default.
   Visible only when:
   - viewport is mobile (<=768px), AND
   - bottom-nav.js has added .has-tab-bar to <body>
     (i.e. the current page is not in the hidden list — admin / login /
     account / error pages never show the tab bar even though their
     markup may be injected). */
.tab-bar {
  display: none;
}

.tab-sheet {
  display: none;
}

/* Reserve space so page content isn't hidden behind the fixed bar.
   Applied BEFORE JS runs via the data-page attribute (kills the layout-
   shift flash when `has-tab-bar` class is added on DOMContentLoaded).
   Exclusion list must match HIDDEN_ON in js/bottom-nav.js. */
@media (max-width: 768px) {
  body[data-page]:not([data-page="admin"]):not([data-page="login"]):not([data-page="account"]):not([data-page="error"]) {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  }
  body.has-tab-bar {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  }
}

/* ================================================================
   TAB BAR
   ================================================================ */
@media (max-width: 768px) {
  body.has-tab-bar .tab-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);

    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);

    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 16px var(--shadow-color);

    /* Stitched route line: thin blue dashes along the very top edge. */
    background-image: linear-gradient(
      to right,
      var(--brand-blue) 0,
      var(--brand-blue) 6px,
      transparent 6px,
      transparent 12px
    );
    background-size: 12px 2px;
    background-repeat: repeat-x;
    background-position: top left;
  }
}

/* ================================================================
   PROGRESS BIKE: rides the stitched line, positioned at
   cumulative_miles / 3664 across the bar.
   CSS custom property --tab-bar-progress is set by bottom-nav.js
   to a number in [0, 1]. The calc keeps 12px padding on each end
   so the disc never clips off the screen edge.
   Visual pattern echoes the home-page bike marker on the route map.
   ================================================================ */
.tab-bar__progress {
  position: absolute;
  top: 0;
  left: calc(12px + (100% - 24px) * var(--tab-bar-progress, 0));
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(211, 47, 47, 0.25);
  pointer-events: none;
  z-index: 1;
  transition: left 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-bar__progress svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .tab-bar__progress {
    transition: none;
  }
}

/* Individual tab cell */
.tab-bar__tab {
  flex: 1 1 0;
  min-width: 0;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-height: 44px;
  padding: 8px 4px;

  /* --text-secondary (4A5568 / A0AEC0) gives ~8.9:1 contrast on light
     and AAA on dark. --text-muted was only 4.68:1 — too close to the
     AA floor for 10px uppercase labels. */
  color: var(--text-secondary);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;  /* kill 300ms tap delay on older browsers */

  transition: color var(--transition-fast);
}

.tab-bar__tab:hover,
.tab-bar__tab:focus-visible {
  color: var(--text-primary);
}

.tab-bar__tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-blue);
  border-radius: var(--radius-sm);
}

/* Active state: brand-blue icon + label + bolder weight. No marker dot —
   red is reserved for the progress bike, blue is "you are here". */
.tab-bar__tab.is-active {
  color: var(--brand-blue);
}

.tab-bar__tab.is-active .tab-bar__label {
  font-weight: 800;
}

/* Tab icon — inherits color */
.tab-bar__icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-fast);
}

/* Tap feedback: gentle icon press */
.tab-bar__tab:active .tab-bar__icon {
  transform: scale(0.92);
}

/* Label */
.tab-bar__label {
  line-height: 1;
  white-space: nowrap;
}

/* ================================================================
   PIN DROP ANIMATION (fires on tap — one-shot via .is-dropping class)
   ================================================================ */

/* The pin is absolutely positioned above the tab. It's invisible at
   rest. When .is-dropping is added, it drops in, bounces subtly,
   and fades out — purely tap feedback, no residual marker. */
.tab-bar__pin {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  color: var(--brand-red);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px);
}

.tab-bar__pin svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 3px 6px rgba(211, 47, 47, 0.35));
}

.tab-bar__tab.is-dropping .tab-bar__pin {
  animation: tab-pin-drop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tab-pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(1);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateY(-6px) scale(1);
  }
  85% {
    transform: translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.3);
  }
}

/* ================================================================
   LIVE PULSE (Tracker tab only, during the ride)
   ================================================================ */
.tab-bar__tab[data-tab="tracker"].is-live .tab-bar__icon {
  position: relative;
}

.tab-bar__tab[data-tab="tracker"].is-live::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 6px;   /* offset to top-right of the icon */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.6);
  animation: tab-live-pulse 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes tab-live-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(211, 47, 47, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(211, 47, 47, 0);    }
}

/* Respect reduced-motion: kill the pin drop and the pulse. */
@media (prefers-reduced-motion: reduce) {
  .tab-bar__tab.is-dropping .tab-bar__pin {
    animation: none;
  }
  .tab-bar__tab[data-tab="tracker"].is-live::before {
    animation: none;
  }
}

/* ================================================================
   MORE SHEET (slides up from the tab bar, full-width)
   ================================================================ */
@media (max-width: 768px) {
  body.has-tab-bar .tab-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear var(--transition-slow);
  }

  body.has-tab-bar .tab-sheet.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
}

.tab-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.tab-sheet.is-open .tab-sheet__scrim {
  opacity: 1;
}

.tab-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: 0 -20px 60px var(--shadow-strong);
  padding: var(--space-lg) var(--space-lg)
    calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-md));
  transform: translateY(100%);
  transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tab-sheet.is-open .tab-sheet__panel {
  transform: translateY(0);
}

/* Drag handle — a tiny visual affordance suggesting you can swipe down */
.tab-sheet__panel::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto var(--space-md);
  background: var(--border-color);
  border-radius: 999px;
}

.tab-sheet__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 var(--space-md);
  text-align: center;
}

.tab-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tab-sheet__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px var(--space-md);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 600;
  min-height: 44px;
  transition: background var(--transition-fast);
}

.tab-sheet__link:hover,
.tab-sheet__link:focus-visible {
  background: var(--bg-secondary);
  outline: none;
}

.tab-sheet__link:focus-visible {
  box-shadow: var(--focus-ring);
}

.tab-sheet__link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--brand-blue);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Button variant of tab-sheet__link — used for the theme toggle.
   Resets native <button> chrome so it matches the <a> links visually. */
.tab-sheet__link--button {
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* Close button (top-right) */
.tab-sheet__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.tab-sheet__close:hover {
  background: var(--bg-card);
  transform: scale(1.05);
}

.tab-sheet__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tab-sheet__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reduced-motion: instant sheet transition */
@media (prefers-reduced-motion: reduce) {
  .tab-sheet__panel,
  .tab-sheet__scrim {
    transition: none;
  }
}


/* ===== components/mobile-screen.css ===== */
/* ============================================
   SEA TO SHINING SEA — MOBILE SCREEN UTILITY
   Phase 3 site-wide methodology (approved 2026-04-23).

   .mobile-screen makes any section fill exactly the working viewport
   on mobile (<=768px): the space between the sticky top nav and the
   fixed bottom tab bar, minus iOS safe-area.

   Combined with html { scroll-snap-type: y proximity } it gives the
   site an app-like "page-by-page" scroll feel without being
   aggressive — user can still stop mid-section.

   Zero rules at >768px, so desktop layouts are untouched.
   ============================================ */

/* Mobile-only: enable proximity scroll-snap on the viewport.
   scroll-padding tells snap points to align inside the visible
   working area (not under the sticky nav or behind the tab bar).

   Viewport units: use `svh` (small viewport height) instead of `dvh`
   so sections don't resize when Safari collapses/expands its URL bar
   during scroll. `svh` is the stable minimum — prevents mid-scroll
   layout shift that was making scroll-snap feel jumpy on iOS.

   safe-top is now part of the math on non-home pages (the nav extends
   up to the status bar area via its own padding-top: var(--safe-top);
   see navigation.css). Home page overrides below. */
@media (max-width: 768px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: calc(var(--mobile-header-height) + var(--safe-top));
    scroll-padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
    /* Stop iOS rubber-band from confusing hide-on-scroll nav + from
       leaking scroll into the browser chrome animation. */
    overscroll-behavior-y: contain;
  }

  /* Pages where scroll-snap hurts more than it helps (long forms,
     long-form reading, admin tables). */
  html:has(body[data-page="admin"]),
  html:has(body[data-page="login"]),
  html:has(body[data-page="account"]),
  html:has(body[data-page="post"]),
  html:has(body[data-page="about"]) {
    scroll-snap-type: none;
  }

  /* Home has no top nav — don't reserve --mobile-header-height on the
     scroll container or snap points land 48px below the real top.
     safe-top stays (for the notch). */
  html:has(body[data-page="home"]) {
    scroll-padding-top: var(--safe-top);
  }

  /* Any section marked .mobile-screen fills the working viewport. */
  .mobile-screen {
    min-height: calc(
      100svh
      - var(--mobile-header-height)
      - var(--safe-top)
      - var(--bottom-nav-height)
      - var(--safe-bottom)
    );

    display: flex;
    flex-direction: column;
    justify-content: center;

    scroll-snap-align: start;
    scroll-snap-stop: normal;

    /* Neutralize the desktop .section default 100px top/bottom
       padding so content fits the working viewport on mobile.
       Individual sections re-add vertical padding through their
       own higher-specificity rules (hero, stats, CTA, etc.). */
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Home has no nav, so there's no element reserving the notch area.
     Reclaim the safe-top subtraction so the hero reaches the bottom
     tab bar (no gap), and pad content down so it clears the notch. */
  body[data-page="home"] .mobile-screen {
    min-height: calc(
      100svh
      - var(--bottom-nav-height)
      - var(--safe-bottom)
    );
    padding-top: var(--safe-top);
  }

  /* Older browsers that don't understand svh get a close-enough vh. */
  @supports not (height: 100svh) {
    .mobile-screen {
      min-height: calc(
        100vh
        - var(--mobile-header-height)
        - var(--safe-top)
        - var(--bottom-nav-height)
        - var(--safe-bottom)
      );
    }
    body[data-page="home"] .mobile-screen {
      min-height: calc(
        100vh
        - var(--bottom-nav-height)
        - var(--safe-bottom)
      );
    }
  }
}

/* Reduced-motion: disable scroll-snap so users who prefer no motion
   don't get jolted between sections. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .mobile-screen { scroll-snap-align: none; }
}


/* ===== components/ambient-backdrop.css ===== */
/* ============================================
   SEA TO SHINING SEA — AMBIENT BACKDROP
   Adds depth to light-gray section backgrounds so white cards
   visibly lift off the page.

   Why applied to sections directly (not body::before):
   The home page has a fixed #eagleBg that section-level opaque
   backgrounds intentionally cover. A body::before pattern would
   sit behind the eagle and be invisible. Applying the ambient
   pattern to sections keeps the flat base color (covering the
   eagle) while layering the glow + dot texture on top.

   Composition:
   1. Three soft radial "glows" in brand colors (blue / gold / red)
      positioned at strategic corners. Low opacity so they read as
      ambient light, not decoration.
   2. A faint dot grid (brand-blue at ~8% opacity, 24px spacing)
      for subtle technical texture.

   Scope:
   - Currently applied to the two home-page light-gray sections
     ([data-screen="why"], [data-screen="fundraising"]).
   - Extend site-wide in future phases by adding new selectors
     or a .ambient-surface helper class as each page is polished.

   Zero new assets, pure CSS. Opacity per ui-ux-pro-max Aurora UI
   guidance (0.08–0.12 ambient-blob range).
   ============================================ */

/* Ambient pattern layers (top to bottom of the background stack):
   1. Blue ambient glow (top-left)
   2. Gold ambient glow (bottom-right)
   3. Red accent glow (mid-right)
   4. Topographic "peak" rings @ ~25% 30% — concentric elevation lines
   5. Topographic "peak" rings @ ~75% 70% — second peak, offset rhythm
   6. Dot grid — subtle technical texture

   Using repeating-radial-gradient for the topo rings means no SVG
   asset needed, and the pattern adapts to any viewport size.

   Opacities bumped from v1 — v1 was too subtle to read on the
   light-gray base. Values still under the Aurora-UI 0.12 ceiling
   for ambient blobs; topo rings at 0.06 sit below the noise floor
   for body text but visible in the margins between cards. */
.ambient-surface,
[data-screen="why"],
[data-screen="fundraising"] {
  background-color: var(--bg-primary);
  background-image:
    /* Glow: brand blue, top-left */
    radial-gradient(
      circle at 18% 12%,
      rgba(25, 118, 210, 0.14),
      transparent 48%
    ),
    /* Glow: brand gold, bottom-right (nods to "Shining Sea") */
    radial-gradient(
      circle at 85% 88%,
      rgba(255, 167, 38, 0.12),
      transparent 52%
    ),
    /* Glow: brand red accent, mid-right */
    radial-gradient(
      circle at 95% 45%,
      rgba(211, 47, 47, 0.06),
      transparent 35%
    ),
    /* Topo peak 1: concentric rings around 25% 30% */
    repeating-radial-gradient(
      circle at 25% 30%,
      transparent 0,
      transparent 30px,
      rgba(25, 118, 210, 0.06) 31px,
      transparent 33px
    ),
    /* Topo peak 2: concentric rings around 75% 70% */
    repeating-radial-gradient(
      circle at 75% 70%,
      transparent 0,
      transparent 34px,
      rgba(25, 118, 210, 0.05) 35px,
      transparent 37px
    ),
    /* Dot grid — tech texture */
    radial-gradient(
      circle at 1px 1px,
      rgba(25, 118, 210, 0.12) 1px,
      transparent 1.5px
    );
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    24px 24px;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat;
}

/* ----------------------------------------------------------
   Mobile-only extension for /tracker (Phase 3c, 2026-04-23)

   Rule (matches home page): only light bg-primary panels get the
   ambient topo pattern. Darker bg-secondary panels stay plain for
   visual rhythm / alternation.

   Tracker breakdown:
     - Hero               : dark gradient → skip
     - Milestones         : bg-primary    → AMBIENT
     - Map / Updates / CTA: bg-secondary  → skip (stay darker grey)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-page="tracker"] .tracker-milestones-section {
    background-color: var(--bg-primary) !important;
    background-image:
      radial-gradient(
        circle at 18% 12%,
        rgba(25, 118, 210, 0.14),
        transparent 48%
      ),
      radial-gradient(
        circle at 85% 88%,
        rgba(255, 167, 38, 0.12),
        transparent 52%
      ),
      radial-gradient(
        circle at 95% 45%,
        rgba(211, 47, 47, 0.06),
        transparent 35%
      ),
      repeating-radial-gradient(
        circle at 25% 30%,
        transparent 0,
        transparent 30px,
        rgba(25, 118, 210, 0.06) 31px,
        transparent 33px
      ),
      repeating-radial-gradient(
        circle at 75% 70%,
        transparent 0,
        transparent 34px,
        rgba(25, 118, 210, 0.05) 35px,
        transparent 37px
      ),
      radial-gradient(
        circle at 1px 1px,
        rgba(25, 118, 210, 0.12) 1px,
        transparent 1.5px
      ) !important;
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      24px 24px !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      repeat !important;
  }

  [data-theme="dark"] body[data-page="tracker"] .tracker-milestones-section {
    background-color: var(--bg-primary) !important;
    background-image:
      radial-gradient(
        circle at 18% 12%,
        rgba(100, 181, 246, 0.12),
        transparent 48%
      ),
      radial-gradient(
        circle at 85% 88%,
        rgba(255, 167, 38, 0.07),
        transparent 52%
      ),
      radial-gradient(
        circle at 95% 45%,
        rgba(211, 47, 47, 0.06),
        transparent 35%
      ),
      repeating-radial-gradient(
        circle at 25% 30%,
        transparent 0,
        transparent 30px,
        rgba(232, 238, 242, 0.05) 31px,
        transparent 33px
      ),
      repeating-radial-gradient(
        circle at 75% 70%,
        transparent 0,
        transparent 34px,
        rgba(232, 238, 242, 0.04) 35px,
        transparent 37px
      ),
      radial-gradient(
        circle at 1px 1px,
        rgba(232, 238, 242, 0.07) 1px,
        transparent 1.5px
      ) !important;
  }
}

/* Dark mode: dial the overall pattern down (bright colors on dark
   read as visual noise). Topo rings use a pale blue-white for
   readability against the near-black background. */
[data-theme="dark"] .ambient-surface,
[data-theme="dark"] [data-screen="why"],
[data-theme="dark"] [data-screen="fundraising"] {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(
      circle at 18% 12%,
      rgba(100, 181, 246, 0.12),
      transparent 48%
    ),
    radial-gradient(
      circle at 85% 88%,
      rgba(255, 167, 38, 0.07),
      transparent 52%
    ),
    radial-gradient(
      circle at 95% 45%,
      rgba(211, 47, 47, 0.06),
      transparent 35%
    ),
    repeating-radial-gradient(
      circle at 25% 30%,
      transparent 0,
      transparent 30px,
      rgba(232, 238, 242, 0.05) 31px,
      transparent 33px
    ),
    repeating-radial-gradient(
      circle at 75% 70%,
      transparent 0,
      transparent 34px,
      rgba(232, 238, 242, 0.04) 35px,
      transparent 37px
    ),
    radial-gradient(
      circle at 1px 1px,
      rgba(232, 238, 242, 0.07) 1px,
      transparent 1.5px
    );
}


/* ===== components/carousel.css ===== */
/* ============================================
   SEA TO SHINING SEA — GENERIC CAROUSEL
   Mobile-only horizontal swipe carousel with pagination dots.
   Extracted from home's Why We Ride pattern so other pages can reuse
   without duplicating styles.

   Usage (HTML):
     <div class="carousel" data-carousel>
       <div class="carousel-track">
         <div class="carousel-card">…</div>
         <div class="carousel-card">…</div>
         <div class="carousel-card">…</div>
       </div>
       <div class="carousel-dots" role="tablist" aria-label="Slides">
         <button class="carousel-dot is-active" aria-label="Slide 1"></button>
         <button class="carousel-dot" aria-label="Slide 2"></button>
         <button class="carousel-dot" aria-label="Slide 3"></button>
       </div>
     </div>

   Wire dot sync + tap-to-scroll via js/carousel-dots.js.

   Horizontal padding uses --screen-edge (single source of truth per
   section). Pages opt in by setting --screen-edge on their section
   root; defaults to --space-md.

   Desktop (>768px): the carousel layout is not applied. The section
   should wrap the same markup in a grid via its page-specific CSS.
   This file ONLY styles mobile carousel presentation.
   ============================================ */

/* Hide pagination dots by default — they're a mobile-only affordance.
   The mobile block below flips them back to flex. Without this, the
   bare <button> elements paint as three tiny UA-styled boxes (visible
   in dark mode against the dark bg, near-invisible in light mode). */
.carousel-dots { display: none; }

@media (max-width: 768px) {
  .carousel {
    --screen-edge: var(--screen-edge, var(--space-md));
    overflow-x: hidden;
    /* Guarantee room below dots regardless of the next sibling's
       styling. Prevents the next content block from crowding the
       pagination dots flush against their top edge. */
    padding-bottom: var(--space-sm);
  }

  /* Neutralize any margin-bottom a track element may inherit from
     its original page-specific grid class (e.g. .about-stats-grid
     carries margin-bottom: var(--space-2xl) for desktop spacing
     between the stats grid and the next element). Inside a .carousel
     wrapper, the dots ARE the next element — we don't want 48px of
     gap between cards and dots. */
  .carousel > .carousel-track {
    margin-bottom: 0;
  }

  .carousel-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Each card snaps to the LEFT edge of the visible scroll area,
       offset by scroll-padding — so every card lands at the same
       horizontal position as it becomes active. Consistent gutter
       beats "visually centered" for predictability. */
    scroll-padding-inline: var(--screen-edge, var(--space-md));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Left/right padding positions the first card so its natural
       resting position matches its snap position (no layout jump
       on the first snap). Top/bottom gives room for card shadows. */
    padding: 4px var(--screen-edge, var(--space-md));
    margin: 0;
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar { display: none; }

  .carousel-card {
    flex: 0 0 88%;
    min-width: 0;
    max-width: 360px;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .carousel-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: var(--space-md);
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--border-color);
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  /* Expand hit area to 28×28 without enlarging the visual dot. */
  .carousel-dot::before {
    content: "";
    position: absolute;
    inset: -10px;
  }

  .carousel-dot.is-active {
    background: var(--brand-blue);
    transform: scale(1.35);
  }

  .carousel-dot:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel-dot { transition: none; }
  }
}


/* ===== modal.css ===== */
/* ============================================
   MODALS
   ============================================ */

/* Modal Overlay */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal);
  overflow-y: auto;
  padding: var(--space-xl);
  animation: fadeIn 0.2s ease;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Content */
.modal-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-2xl);
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.3s ease;
}

/* Modal Close Button */
.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Modal Title */
.modal-title {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  margin-bottom: var(--space-xl);
  padding-right: var(--space-2xl);
  color: var(--text-primary);
}

/* Modal Mile Details */
.modal-mile-details {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.modal-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.modal-detail-row:last-child {
  margin-bottom: 0;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

/* Sponsor Form */
.sponsor-form .form-group {
  margin-bottom: var(--space-lg);
}

.sponsor-form label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.sponsor-form .form-input {
  width: 100%;
  padding: var(--space-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}

.sponsor-form .form-input:focus {
  outline: none;
  border-color: var(--brand-blue);
}

.sponsor-form textarea.form-input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.sponsor-form small {
  display: block;
  margin-top: var(--space-xs);
}

/* Confirmation Details */
.confirmation-detail {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-color);
}

.confirmation-detail:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.detail-value {
  text-align: right;
  color: var(--text-primary);
  margin-left: var(--space-md);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal {
    padding: var(--space-md);
  }

  .modal-content {
    padding: var(--space-xl);
    max-height: 95vh;
  }

  .modal-title {
    font-size: var(--font-size-xl);
  }

  .confirmation-detail {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .detail-value {
    text-align: left;
    margin-left: 0;
  }
}


/* SVG Icons — all symbols use stroke="currentColor" fill="none" */
.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  vertical-align: middle;
  overflow: visible;
}

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon-lg {
  width: 2em;
  height: 2em;
}

.icon-xl {
  width: 3em;
  height: 3em;
}