/* Wildland Atlas — Backcountry Wilderness Tactical Navigator */
/* Native iOS Safe Areas & Dual Theme (Dark Forest Green / Light Alpine Blue) Substrates */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --app-header-bottom: calc(max(12px, env(safe-area-inset-top, 0px)) + 27px);

  /* iPhone Duo Dual-Screen Hardware Posture Variables (M2: Features F5-F8) */
  --duo-is-dual-screen: 0;
  --duo-posture: single;
  --duo-screen1-left: env(viewport-segment-left 0 0, 0px);
  --duo-screen1-top: env(viewport-segment-top 0 0, 0px);
  --duo-screen1-width: env(viewport-segment-width 0 0, 100vw);
  --duo-screen1-height: env(viewport-segment-height 0 0, 100vh);
  --duo-screen1-right: env(viewport-segment-right 0 0, 100vw);
  --duo-screen1-bottom: env(viewport-segment-bottom 0 0, 100vh);

  --duo-screen2-left: env(viewport-segment-left 1 0, 100vw);
  --duo-screen2-top: env(viewport-segment-top 1 0, 0px);
  --duo-screen2-width: env(viewport-segment-width 1 0, 0px);
  --duo-screen2-height: env(viewport-segment-height 1 0, 0px);
  --duo-screen2-right: env(viewport-segment-right 1 0, 100vw);
  --duo-screen2-bottom: env(viewport-segment-bottom 1 0, 100vh);

  --duo-hinge-x: env(viewport-segment-right 0 0, 100vw);
  --duo-hinge-width: calc(env(viewport-segment-left 1 0, 100vw) - env(viewport-segment-right 0 0, 100vw));
  --duo-hinge-y: env(viewport-segment-bottom 0 0, 100vh);
  --duo-hinge-height: calc(env(viewport-segment-top 0 1, 100vh) - env(viewport-segment-bottom 0 0, 100vh));
  
  --color-surface: #081c14;
  --color-surface-card: #0d2a1f;
  --color-surface-high: #12382a;
  --color-surface-highest: #1b4a39;
  --color-primary: #f5a623;
  --color-primary-glow: #ffc880;
  --color-secondary: #2ee59d;
  --color-tertiary: #00e5ff;
  --color-error: #ff3b30;
  --color-text-main: #dfe2eb;
  --color-text-muted: #a4bea4;
}

html.theme-light,
body.theme-light {
  --color-surface: #0084bd;
  --color-surface-card: #006fa1;
  --color-surface-high: #005b85;
  --color-surface-highest: #00486a;
  --color-primary: #ffc107;
  --color-primary-glow: #ffe082;
  --color-secondary: #34d399;
  --color-tertiary: #38bdf8;
  --color-error: #ff4d4f;
  --color-text-main: #ffffff;
  --color-text-muted: #d8e8fc;
}

html, body, #app-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-surface);
  color: var(--color-text-main);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  overscroll-behavior: none;
  transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.28s ease;
}

body.theme-dark,
body:not(.theme-light),
.theme-dark #app-container {
  background-color: #081c14 !important;
  color: #dfe2eb;
}

body.theme-light,
html.theme-light body,
.theme-light #app-container {
  background-color: #0084bd !important;
  color: #ffffff !important;
}

/* Safe area utilities - Compact Halved Banner Heights Locked In */
.pt-safe {
  padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
}

.pb-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
}

.pl-safe {
  padding-left: env(safe-area-inset-left, 0px);
}

.pr-safe {
  padding-right: env(safe-area-inset-right, 0px);
}

/* Monospace telemetry */
.font-mono {
  font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
}

/* Glassmorphism panels — 4-Layer 3D Apple Liquid Glass Architecture */
.glass-panel {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(16, 22, 32, 0.72);
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 28px -4px rgba(0, 0, 0, 0.75),
    0 32px 64px -8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(255, 255, 255, 0.05) !important;
  border-radius: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease, background 0.28s ease;
}

body.theme-dark .glass-panel,
.theme-dark .glass-panel,
body:not(.theme-light) .glass-panel {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(10, 30, 22, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.glass-panel-heavy {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(10, 14, 20, 0.94);
  backdrop-filter: blur(36px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.70),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 28px -4px rgba(0, 0, 0, 0.75),
    0 32px 64px -8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(255, 255, 255, 0.05) !important;
  border-radius: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease, background 0.28s ease;
}

body.theme-dark .glass-panel-heavy,
.theme-dark .glass-panel-heavy,
body:not(.theme-light) .glass-panel-heavy {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(8, 24, 18, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

body.theme-light .glass-panel,
.theme-light .glass-panel {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(10, 35, 70, 0.40) 100%), 
    rgba(18, 48, 84, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 0 rgba(10, 30, 60, 0.65),
    0 2px 4px rgba(10, 30, 60, 0.50),
    0 14px 28px -4px rgba(10, 30, 60, 0.45),
    0 32px 64px -8px rgba(10, 30, 60, 0.55),
    0 0 24px rgba(255, 255, 255, 0.15) !important;
}

body.theme-light .glass-panel-heavy,
.theme-light .glass-panel-heavy {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(8, 28, 56, 0.45) 100%), 
    rgba(14, 40, 72, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 -2px 0 0 rgba(6, 20, 40, 0.70),
    0 4px 8px rgba(6, 20, 40, 0.60),
    0 16px 32px -4px rgba(6, 20, 40, 0.50),
    0 36px 72px -8px rgba(6, 20, 40, 0.60),
    0 0 30px rgba(255, 255, 255, 0.18) !important;
}

/* 3D Apple Glass Emergency & Accent Cards */
.glass-panel.border-error\/40,
.glass-panel[class*="border-error"],
.card[class*="border-error"] {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 120, 110, 0.32) 0%, rgba(255, 59, 48, 0.08) 45%, rgba(0, 0, 0, 0.40) 100%), 
    rgba(28, 14, 16, 0.86) !important;
  border: 1px solid rgba(255, 59, 48, 0.45) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 160, 150, 0.85),
    inset 0 0 0 1px rgba(255, 59, 48, 0.28),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 28px -4px rgba(0, 0, 0, 0.75),
    0 32px 64px -8px rgba(255, 59, 48, 0.35),
    0 0 24px rgba(255, 59, 48, 0.12) !important;
}

.glass-panel.border-secondary\/30,
.glass-panel[class*="border-secondary"],
.card[class*="border-secondary"] {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(140, 245, 195, 0.30) 0%, rgba(46, 229, 157, 0.08) 45%, rgba(0, 0, 0, 0.40) 100%), 
    rgba(12, 24, 20, 0.86) !important;
  border: 1px solid rgba(46, 229, 157, 0.40) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(180, 255, 220, 0.85),
    inset 0 0 0 1px rgba(46, 229, 157, 0.25),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 28px -4px rgba(0, 0, 0, 0.75),
    0 32px 64px -8px rgba(46, 229, 157, 0.30),
    0 0 24px rgba(46, 229, 157, 0.10) !important;
}

/* 3D Apple Liquid Glass — Vetted Scout & Obstacles Entry Button */
#btn-open-vetted-scout-layer {
  min-height: 72px !important;
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(0, 112, 186, 0.22) 100%), 
    rgba(14, 26, 38, 0.72) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(0, 229, 255, 0.45) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(0, 229, 255, 0.22),
    inset 0 -1.5px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 5px rgba(0, 0, 0, 0.80),
    0 8px 18px -2px rgba(0, 0, 0, 0.65),
    0 0 16px rgba(0, 229, 255, 0.18) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease, background 0.22s ease;
}

#btn-open-vetted-scout-layer:hover {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(0, 112, 186, 0.32) 100%), 
    rgba(18, 34, 50, 0.78) !important;
  border-color: rgba(0, 229, 255, 0.70) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(0, 229, 255, 0.35),
    inset 0 -1.5px 0 0 rgba(0, 0, 0, 0.65),
    0 4px 10px rgba(0, 0, 0, 0.85),
    0 12px 24px -2px rgba(0, 0, 0, 0.70),
    0 0 24px rgba(0, 229, 255, 0.32) !important;
}

#btn-open-vetted-scout-layer:active {
  transform: scale(0.98);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 2px 4px rgba(0, 0, 0, 0.70),
    0 1px 3px rgba(0, 0, 0, 0.60) !important;
}

body.theme-light #btn-open-vetted-scout-layer,
.theme-light #btn-open-vetted-scout-layer {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(0, 112, 186, 0.35) 100%), 
    rgba(16, 52, 90, 0.82) !important;
  border: 1px solid rgba(0, 229, 255, 0.60) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(0, 229, 255, 0.28),
    inset 0 -1.5px 0 0 rgba(10, 30, 60, 0.65),
    0 2px 5px rgba(10, 30, 60, 0.50),
    0 8px 18px -2px rgba(10, 30, 60, 0.45),
    0 0 16px rgba(0, 229, 255, 0.20) !important;
}

body.theme-dark #btn-open-vetted-scout-layer,
.theme-dark #btn-open-vetted-scout-layer {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(0, 112, 186, 0.20) 100%), 
    rgba(10, 30, 28, 0.78) !important;
}

/* 3D Apple Liquid Glass — Tactical Menu Shrunk Guides Button */
#btn-open-vetted-scout-menu {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(0, 112, 186, 0.28) 100%), 
    rgba(14, 26, 38, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0, 229, 255, 0.55) !important;
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(0, 229, 255, 0.20),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.50),
    0 2px 5px rgba(0, 0, 0, 0.70),
    0 0 12px rgba(0, 229, 255, 0.22) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease, background 0.22s ease;
}

#btn-open-vetted-scout-menu:hover {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(0, 112, 186, 0.38) 100%), 
    rgba(18, 34, 50, 0.80) !important;
  border-color: rgba(0, 229, 255, 0.80) !important;
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(0, 229, 255, 0.30),
    0 3px 8px rgba(0, 0, 0, 0.75),
    0 0 18px rgba(0, 229, 255, 0.35) !important;
}

#btn-open-vetted-scout-menu:active {
  transform: scale(0.94);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.40),
    inset 0 2px 4px rgba(0, 0, 0, 0.60),
    0 1px 2px rgba(0, 0, 0, 0.50) !important;
}

/* 3D Apple Glass Nested Bubbles & Metric Cells */
html .bg-surfaceHigh {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(26, 32, 44, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -1.5px 0 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.70),
    0 8px 20px -3px rgba(0, 0, 0, 0.55);
}

html .bg-surfaceHigh:not([class*="rounded-"]) {
  border-radius: 0.875rem;
}

.stat-tile {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(26, 32, 44, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-radius: 0.875rem;
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -1.5px 0 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.70),
    0 8px 20px -3px rgba(0, 0, 0, 0.55);
}

html .bg-surfaceHighest {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(34, 42, 56, 0.82);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 -1.5px 0 0 rgba(0, 0, 0, 0.60),
    0 2px 4px rgba(0, 0, 0, 0.75),
    0 10px 24px -3px rgba(0, 0, 0, 0.60);
}

html .bg-surfaceHighest:not([class*="rounded-"]) {
  border-radius: 0.875rem;
}

/* Interactive State Overrides for Activity Lens and Category Pills */
.lens-water-filter-pill.active {
  background: rgba(0, 240, 255, 0.25) !important;
  border-color: #00f0ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.40) !important;
}
.lens-water-filter-pill[data-status="flowing"].active {
  background: rgba(0, 255, 136, 0.25) !important;
  border-color: #00ff88 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.40) !important;
}
.lens-water-filter-pill[data-status="trickle"].active {
  background: rgba(255, 230, 0, 0.25) !important;
  border-color: #ffe600 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.40) !important;
}
.lens-water-filter-pill[data-status="dry"].active {
  background: rgba(255, 23, 68, 0.25) !important;
  border-color: #ff1744 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.40) !important;
}
.lens-water-filter-pill[data-status="frozen"].active {
  background: rgba(129, 140, 248, 0.25) !important;
  border-color: #818cf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.40) !important;
}

.lens-drawer-tab-btn.active {
  background: rgba(0, 240, 255, 0.18) !important;
  border-color: #00f0ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35) !important;
}
.lens-drawer-tab-btn[data-tab="water"].active {
  background: #2ee59d !important;
  border-color: #2ee59d !important;
  color: #000000 !important;
  box-shadow: 0 0 14px rgba(46, 229, 157, 0.35) !important;
}

/* Activity Lens Cards, Herbarium Toxicity & App Cards 3D Glass */
.lens-item-card,
.card,
.trail-card,
.saved-trail-card,
.saved-planned-card,
.explore-trail-card,
.park-modal-trail-card,
.journal-card,
.urban-trail-card,
.sanctuary-detail-card {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%),
    rgba(16, 22, 32, 0.82) !important;
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 1rem !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 34px -5px rgba(0, 0, 0, 0.70),
    0 32px 64px -8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(255, 255, 255, 0.05) !important;
}

.toxicity-alert-box {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.30) 100%), 
    rgba(24, 18, 20, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.80),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1.5px 0 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.70),
    0 10px 26px -4px rgba(0, 0, 0, 0.55);
}

/* Invariant: strictly remove colored side accent stripes across all cards/bubbles */
.glass-panel,
.glass-panel-heavy,
.card,
.trail-card,
.saved-trail-card,
.saved-planned-card,
.explore-trail-card,
.park-modal-trail-card,
.urban-trail-card,
.lens-item-card,
.toxicity-alert-box,
.sanctuary-detail-card,
.bg-surfaceHigh,
.bg-surfaceHighest,
.stat-tile {
  border-left-width: 1px !important;
  border-left-style: solid !important;
}

/* Screen Viewports with Layer 4: Ambient Photon Emitters */
.screen-view {
  position: absolute;
  inset: 0;
  display: none !important;
  pointer-events: none !important;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 30px);
  padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 36px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease;
  background: 
    radial-gradient(circle at 50% -20%, rgba(30, 58, 88, 0.22) 0%, rgba(10, 14, 20, 0.0) 70%),
    radial-gradient(circle at 85% 35%, rgba(18, 38, 58, 0.16) 0%, rgba(10, 14, 20, 0.0) 60%),
    #081c14;
}

body.theme-dark .screen-view,
.theme-dark .screen-view {
  background: 
    radial-gradient(circle at 50% -20%, rgba(26, 92, 58, 0.40) 0%, rgba(8, 28, 20, 0.0) 70%),
    radial-gradient(circle at 85% 35%, rgba(18, 72, 45, 0.30) 0%, rgba(8, 28, 20, 0.0) 60%),
    radial-gradient(circle at 15% 75%, rgba(24, 84, 52, 0.25) 0%, rgba(8, 28, 20, 0.0) 50%),
    #081c14 !important;
}

body.theme-light .screen-view,
.theme-light .screen-view {
  background: #0084bd !important;
}

@media (max-width: 768px) {
  .screen-view {
    padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 30px) !important;
  }
}

.screen-view.active {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1;
  transform: translateY(0);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Fixed Header Substrate Styling (Authentic 3D Apple Liquid Glass) - Halved Compact Height Locked In */
header,
#app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  box-sizing: border-box !important;
  min-height: calc(max(12px, env(safe-area-inset-top, 0px)) + 27px) !important;
  max-height: calc(max(12px, env(safe-area-inset-top, 0px)) + 30px) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  background: rgba(8, 28, 20, 0.78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    inset 0 -1.5px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    0 4px 20px rgba(0, 0, 0, 0.40) !important;
}

body.theme-dark header,
.theme-dark header,
body.theme-dark #app-header,
.theme-dark #app-header,
body:not(.theme-light) header,
body:not(.theme-light) #app-header {
  background: rgba(8, 28, 20, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    inset 0 -1.5px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    0 4px 20px rgba(0, 0, 0, 0.40) !important;
}

body.theme-light header,
.theme-light header,
body.theme-light #app-header,
.theme-light #app-header {
  background: rgba(0, 75, 130, 0.82) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 
    inset 0 -1.5px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.20),
    0 4px 24px rgba(0, 30, 60, 0.40) !important;
}

/* Bottom Tactical Dock (Authentic 3D Apple Liquid Glass) - Halved Compact Height Locked In */
.tactical-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
  min-height: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 28px) !important;
  max-height: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 32px) !important;
  background: rgba(8, 28, 20, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
    0 -4px 24px rgba(0, 0, 0, 0.50) !important;
  transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

body.theme-dark .tactical-dock,
.theme-dark .tactical-dock,
body:not(.theme-light) .tactical-dock {
  background: rgba(8, 28, 20, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
    0 -4px 24px rgba(0, 0, 0, 0.50) !important;
}

body.theme-light .tactical-dock,
.theme-light .tactical-dock {
  background: rgba(0, 75, 130, 0.82) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
    0 -4px 24px rgba(0, 30, 60, 0.40) !important;
}

.dock-tab {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-height: 32px;
  height: 100%;
  padding: 1px 2px;
  color: var(--color-text-muted);
  transition: all 0.15s ease-out;
  border-radius: 8px;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dock-tab::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: calc(-1 * max(16px, env(safe-area-inset-bottom, 0px)));
  left: 0;
  right: 0;
  pointer-events: auto;
}

.dock-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'opsz' 20 !important;
  font-weight: 700 !important;
  display: inline-block;
  pointer-events: none;
  transition: transform 0.15s ease, filter 0.15s ease, color 0.15s ease;
}

.dock-tab:active {
  transform: scale(0.92);
}

.dock-tab.active {
  color: var(--color-primary);
  background: rgba(245, 166, 35, 0.14);
}

.dock-tab.active .dock-icon {
  filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.6));
  font-variation-settings: 'FILL' 1, 'wght' 800, 'opsz' 20 !important;
}

body.theme-light .dock-tab,
.theme-light .dock-tab {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-light .dock-tab:hover,
.theme-light .dock-tab:hover {
  color: #ffffff !important;
}

body.theme-light .dock-tab.active,
.theme-light .dock-tab.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

body.theme-light .dock-tab.active .dock-icon,
.theme-light .dock-tab.active .dock-icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.80)) !important;
}

/* FLIR Night Red Mode (Monochrome Ruby Red for Night-Vision Preservation) */
body.flir-mode {
  --color-surface: #000000;
  --color-surface-card: #0a0000;
  --color-surface-high: #140000;
  --color-surface-highest: #1f0000;
  --color-primary: #ff3b30;
  --color-primary-glow: #ff6259;
  --color-secondary: #ff3b30;
  --color-tertiary: #ff3b30;
  --color-error: #ff3b30;
  --color-text-main: #ff3b30;
  --color-text-muted: #aa2020;
  background-color: #000000 !important;
  color: #ff3b30 !important;
}

/* Zero Light Leaks: Global Typography & Utility Class Overrides */
body.flir-mode,
body.flir-mode *,
body.flir-mode *:before,
body.flir-mode *:after {
  color: #ff3b30 !important;
  border-color: rgba(255, 59, 48, 0.28) !important;
  outline-color: #ff3b30 !important;
}

body.flir-mode .text-white,
body.flir-mode .text-primary,
body.flir-mode .text-secondary,
body.flir-mode .text-tertiary,
body.flir-mode .text-error,
body.flir-mode span,
body.flir-mode p,
body.flir-mode h1,
body.flir-mode h2,
body.flir-mode h3,
body.flir-mode strong {
  color: #ff3b30 !important;
}

body.flir-mode .text-muted,
body.flir-mode .text-[#8a9386],
body.flir-mode .text-[#dfe2eb] {
  color: #aa2020 !important;
}

/* Contrast Preservation for Solid Red Action Buttons */
body.flir-mode button.bg-error,
body.flir-mode button.bg-primary,
body.flir-mode .bg-error button {
  background-color: #ff3b30 !important;
  color: #000000 !important;
}

body.flir-mode button.bg-error *,
body.flir-mode button.bg-primary * {
  color: #000000 !important;
}

body.flir-mode .bg-secondary,
body.flir-mode .bg-primary {
  background-color: #ff3b30 !important;
}

/* Deep Black OLED Backgrounds */
body.flir-mode .bg-surface,
body.flir-mode .bg-surfaceHigh,
body.flir-mode .bg-surface-container,
body.flir-mode .bg-surface-container-high,
body.flir-mode .glass-panel,
body.flir-mode .glass-panel-heavy,
body.flir-mode .tactical-dock,
body.flir-mode header,
body.flir-mode section,
body.flir-mode #map-container,
body.flir-mode #streetview-viewport {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.flir-mode .glass-panel {
  background: rgba(10, 0, 0, 0.95) !important;
  border: 1px solid rgba(255, 59, 48, 0.3) !important;
  border-color: rgba(255, 59, 48, 0.3) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 59, 48, 0.3), 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

body.flir-mode .glass-panel-heavy {
  background: rgba(0, 0, 0, 0.98) !important;
  border: 1px solid rgba(255, 59, 48, 0.5) !important;
  border-color: rgba(255, 59, 48, 0.5) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 59, 48, 0.4), 0 6px 24px rgba(0, 0, 0, 0.9) !important;
}

body.flir-mode .bg-surfaceHigh,
body.flir-mode .bg-surfaceHighest {
  background: #000000 !important;
  border-color: rgba(255, 59, 48, 0.25) !important;
  box-shadow: none !important;
}

body.flir-mode .tactical-dock {
  background: rgba(0, 0, 0, 0.98) !important;
  border-top-color: rgba(255, 59, 48, 0.35) !important;
}

body.flir-mode svg path,
body.flir-mode svg circle,
body.flir-mode svg rect,
body.flir-mode svg polyline,
body.flir-mode svg polygon,
body.flir-mode svg line {
  stroke: #ff3b30 !important;
}

body.flir-mode svg text {
  fill: #ff3b30 !important;
}

body.flir-mode img {
  filter: grayscale(1) invert(1) sepia(1) saturate(100) hue-rotate(320deg) !important;
}

/* Tactical Slider Styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.1);
  height: 6px;
  border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  background-color: var(--color-primary);
  height: 18px;
  width: 18px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
  border: 2px solid #ffffff;
}

body.flir-mode input[type="range"]::-webkit-slider-thumb {
  background-color: #ff3333;
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.8);
}

/* Animations */
@keyframes breachStrobe {
  0%, 100% { background-color: rgba(255, 59, 48, 0.2); }
  50% { background-color: rgba(255, 59, 48, 0.6); }
}

.breach-alert {
  animation: breachStrobe 0.8s infinite ease-in-out;
}

/* ==========================================================================
   Tactical 2D Leaflet GPU Map Engine & Living GPS Reticle (Milestone 1)
   ========================================================================== */

#map-container {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #080c10;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0 !important;
}

#map-container.leaflet-container {
  width: 100% !important;
  height: 100% !important;
  font-family: 'JetBrains Mono', monospace !important;
  background-color: #080c10 !important;
  outline: none;
}

/* GPU Composited Pan & Zoom Physics (120fps ProMotion) */
#map-container .leaflet-tile-pane,
#map-container .leaflet-pane {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#map-container .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
  will-change: transform;
}

/* Trail Polyline Glow in Tactical Theme */
.tactical-route-polyline {
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.85));
}

.tactical-route-polyline-glow {
  filter: blur(2px);
}

/* Suppress Default Leaflet Zoom Controls */
.leaflet-control-zoom {
  display: none !important;
}

/* Living GPS Reticle & Orientation Beam */
.gps-reticle-leaflet-icon {
  background: transparent !important;
  border: none !important;
}

.gps-reticle-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.gps-pulse-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 229, 157, 0.5) 0%, rgba(46, 229, 157, 0) 70%);
  animation: gpsPulse 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes gpsPulse {
  0% { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}

.gps-orientation-beam {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}

.gps-beam-cone {
  fill: rgba(46, 229, 157, 0.25);
}

.gps-beam-needle {
  fill: var(--color-secondary, #2ee59d);
}

.gps-reticle-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-secondary, #2ee59d);
  background: rgba(10, 14, 20, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(46, 229, 157, 0.8);
}

.gps-reticle-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #ffffff;
}

/* Tactical Tooltip on Summit Pin */
.tactical-tooltip {
  background: rgba(10, 14, 20, 0.9) !important;
  border: 1px solid rgba(245, 166, 35, 0.5) !important;
  color: #ffc880 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.tactical-tooltip::before {
  border-top-color: rgba(245, 166, 35, 0.5) !important;
}

/* FLIR Night Red Mode Adaptations for Leaflet & GPS Reticle */
body.flir-mode #map-container {
  background-color: #000000 !important;
}

body.flir-mode .leaflet-tile-pane,
body.flir-mode .leaflet-tile-container img {
  filter: grayscale(1) invert(1) sepia(1) saturate(100) hue-rotate(320deg) !important;
}

body.flir-mode .tactical-route-polyline,
body.flir-mode .tactical-route-polyline-glow {
  stroke: #ff3b30 !important;
  filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.85)) !important;
}

body.flir-mode .gps-pulse-disk {
  background: radial-gradient(circle, rgba(255, 59, 48, 0.55) 0%, rgba(255, 59, 48, 0) 70%) !important;
}

body.flir-mode .gps-beam-cone {
  fill: rgba(255, 59, 48, 0.28) !important;
}

body.flir-mode .gps-beam-needle {
  fill: #ff3b30 !important;
}

body.flir-mode .gps-reticle-core {
  border-color: #ff3b30 !important;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.8) !important;
}

body.flir-mode .gps-reticle-dot {
  background-color: #ff6259 !important;
}

/* ==========================================
   3D WebGL Street-View & Holographic HUD Pins
   ========================================== */
#webgl-trail-canvas {
  touch-action: none;
  display: block;
}

.waypoint-hud-pin {
  will-change: transform, opacity;
  transform-origin: 50% 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 20;
  transition: transform 0.05s ease-out;
}

.waypoint-hud-pin:active {
  transform: scale(0.95);
}

body.flir-mode .waypoint-hud-pin {
  border-color: rgba(255, 59, 48, 0.6) !important;
  color: #ff3b30 !important;
}

/* ==========================================
   Full-Bleed 2D Map Viewport (Zero Black Gap, 100% Screen)
   ========================================== */
#view-map {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ==========================================
   3D Trail Street-View Screen Viewport
   Positions viewport cleanly below header and fills available screen space
   ========================================== */
#view-streetview {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  pointer-events: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Clears halved top tactical header (~39px) with 6px breathing room */
  padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 33px) !important;
  /* Clears bottom tactical dock */
  padding-bottom: calc(max(20px, calc(env(safe-area-inset-bottom, 0px) + 8px)) + 29px) !important;
  padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

#view-streetview.active {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#streetview-viewport {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  position: relative !important;
  touch-action: none !important;
}

/* =============================================================
   3D StreetView Top HUD Telemetry Bubbles & 2D MAP Stabilization
   Enforces invariant 32px single-line height, non-wrapping baselines,
   and flush cross-axis centering across all device viewports.
   ============================================================= */
#streetview-top-hud {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

#streetview-top-hud .hud-telemetry-bubble,
#streetview-top-hud #btn-streetview-2d-map {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#streetview-top-hud span,
#streetview-top-hud strong {
  white-space: nowrap !important;
  line-height: 1 !important;
}

@media (max-width: 389px) {
  #streetview-top-hud {
    gap: 4px !important;
  }
  #streetview-top-hud .hud-telemetry-bubble,
  #streetview-top-hud #btn-streetview-2d-map {
    padding: 0 7px !important;
    font-size: 10.5px !important;
  }
}

#streetview-top-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  pointer-events: none !important;
  z-index: 25 !important;
}

#streetview-trail-badge {
  pointer-events: auto !important;
  max-width: 96% !important;
  transition: all 0.2s ease-in-out;
  z-index: 25;
  cursor: pointer !important;
}

#streetview-trail-badge.hidden,
#streetview-trail-badge[style*="display: none"] {
  display: none !important;
}

#streetview-trail-badge > div {
  background: rgba(10, 14, 20, 0.88) !important;
  border: 1px solid rgba(245, 166, 35, 0.45) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

/* Dismiss Button (Apple HIG 44pt Touch Target Clearance) */
.btn-dismiss-3d-trail-badge,
#btn-dismiss-3d-trail-badge {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 6px !important;
  transition: all 0.15s ease-in-out !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-dismiss-3d-trail-badge:hover,
#btn-dismiss-3d-trail-badge:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.btn-dismiss-3d-trail-badge:active,
#btn-dismiss-3d-trail-badge:active {
  transform: scale(0.92) !important;
  background: rgba(255, 255, 255, 0.35) !important;
}

/* 44pt Touch Target Expansion via Pseudo-Element */
.btn-dismiss-3d-trail-badge::after,
#btn-dismiss-3d-trail-badge::after {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  bottom: -10px !important;
  left: -10px !important;
  right: -10px !important;
  pointer-events: auto !important;
}

#lbl-3d-trail-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#flythrough-scrubber {
  position: relative;
  z-index: 2;
  touch-action: none !important;
}

#flythrough-scrubber:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#trail-crosshair-reticle {
  pointer-events: none !important;
  will-change: left, top;
}

#trail-crosshair-reticle.reticle-off-corridor > div {
  border-color: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.85) !important;
}

#trail-crosshair-reticle.reticle-off-corridor > div > div {
  background-color: #ef4444 !important;
}

#sentry-off-trail-hud {
  animation: sentry-pulse 1.8s ease-in-out infinite;
}

@keyframes sentry-pulse {
  0%, 100% { border-color: rgba(239, 68, 68, 0.9); box-shadow: 0 0 16px rgba(239, 68, 68, 0.4); }
  50% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 6px rgba(239, 68, 68, 0.15); }
}

#map-viewport-wrapper {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Consolidated Top Map HUD Stack (Anti-Collision Zero-Obscuration Invariant) */
#map-viewport-wrapper #map-top-hud-stack,
.map-top-hud-stack {
  position: absolute !important;
  top: calc(var(--app-header-bottom, calc(max(12px, env(safe-area-inset-top, 0px)) + 27px)) + 6px) !important;
  left: 12px !important;
  width: calc(100vw - 72px) !important;
  max-width: 420px !important;
  max-height: calc(100vh - 160px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  z-index: 25 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  pointer-events: none !important;
}

#map-viewport-wrapper #map-top-hud-stack::-webkit-scrollbar {
  width: 4px;
}
#map-viewport-wrapper #map-top-hud-stack::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

#map-viewport-wrapper #map-top-hud-stack > * {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* Unified Flow Stack Accordion Styles */
#map-viewport-wrapper #map-top-hud-stack .accordion-item,
.map-top-hud-stack .accordion-item,
#land-ownership-sentinel,
#land-sentinel-banner,
#urban-trails-legend-shelf {
  transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, transform 0.2s ease !important;
}

/* Badges MUST hug content width, never stretch across the map */
#map-viewport-wrapper #map-top-hud-stack .map-top-badges,
#map-viewport-wrapper .map-top-badges {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 15 !important;
  pointer-events: none !important;
  align-self: flex-start !important;
  width: fit-content !important;
  max-width: fit-content !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#map-viewport-wrapper #map-top-hud-stack .map-top-badges > div,
#map-viewport-wrapper .map-top-badges > div {
  width: fit-content !important;
  max-width: fit-content !important;
  display: inline-flex !important;
}

/* Fallback for standalone .map-top-badges if outside stack */
#map-viewport-wrapper:not(:has(#map-top-hud-stack)) .map-top-badges {
  position: absolute !important;
  top: calc(var(--app-header-bottom, calc(max(12px, env(safe-area-inset-top, 0px)) + 27px)) + 6px) !important;
  left: 12px !important;
  z-index: 15 !important;
  width: fit-content !important;
}

#map-viewport-wrapper #land-ownership-sentinel,
#map-viewport-wrapper #land-sentinel-banner,
#land-ownership-sentinel,
#land-sentinel-banner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 22 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Fallback for standalone sentinel if outside stack */
#map-viewport-wrapper:not(:has(#map-top-hud-stack)) #land-ownership-sentinel,
#map-viewport-wrapper:not(:has(#map-top-hud-stack)) #land-sentinel-banner {
  position: absolute !important;
  top: calc(var(--app-header-bottom, calc(max(12px, env(safe-area-inset-top, 0px)) + 27px)) + 38px) !important;
  left: 12px !important;
  max-width: calc(100vw - 72px) !important;
  width: calc(100vw - 72px) !important;
  z-index: 22 !important;
}

#map-viewport-wrapper #land-ownership-sentinel.hidden,
#map-viewport-wrapper #land-sentinel-banner.hidden,
#land-ownership-sentinel.hidden,
#land-sentinel-banner.hidden {
  display: none !important;
}

#map-viewport-wrapper #urban-trails-legend-shelf,
#urban-trails-legend-shelf {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 20 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Fallback for standalone shelf if outside stack */
#map-viewport-wrapper:not(:has(#map-top-hud-stack)) #urban-trails-legend-shelf {
  position: absolute !important;
  top: calc(var(--app-header-bottom, calc(max(12px, env(safe-area-inset-top, 0px)) + 27px)) + 140px) !important;
  left: 12px !important;
  max-width: calc(100vw - 72px) !important;
  z-index: 20 !important;
}

#map-viewport-wrapper #urban-trails-legend-shelf.hidden,
#urban-trails-legend-shelf.hidden {
  display: none !important;
}

#map-viewport-wrapper .map-top-controls {
  top: calc(var(--app-header-bottom, calc(max(12px, env(safe-area-inset-top, 0px)) + 27px)) + 6px) !important;
  right: 12px !important;
  z-index: 15 !important;
}

#map-viewport-wrapper #layer-selector-card {
  top: calc(var(--app-header-bottom, calc(max(12px, env(safe-area-inset-top, 0px)) + 27px)) + 6px) !important;
  right: 64px !important;
  z-index: 25 !important;
}

/* Desktop Header Clearance (39px header: sit cleanly at top: 45px with 6px buffer) */
@media (min-width: 769px) {
  #map-viewport-wrapper #map-top-hud-stack,
  .map-top-hud-stack {
    top: 45px !important;
    max-height: calc(100vh - 120px) !important;
  }
  #map-viewport-wrapper .map-top-controls {
    top: 45px !important;
  }
  #map-viewport-wrapper #layer-selector-card {
    top: 45px !important;
  }
}

/* Landscape & Short Viewports (max-height: 500px): Clean clearance, no telemetry collision */
@media (max-height: 500px) {
  #map-viewport-wrapper #map-top-hud-stack,
  .map-top-hud-stack {
    top: calc(max(38px, calc(env(safe-area-inset-top, 0px) + 6px)) + 6px) !important;
    max-height: calc(100vh - 86px) !important;
    gap: 4px !important;
  }
  #map-viewport-wrapper .map-top-controls {
    top: calc(max(38px, calc(env(safe-area-inset-top, 0px) + 6px)) + 6px) !important;
  }
  #map-viewport-wrapper #layer-selector-card {
    top: calc(max(38px, calc(env(safe-area-inset-top, 0px) + 6px)) + 6px) !important;
  }
  #map-viewport-wrapper #land-ownership-sentinel,
  #map-viewport-wrapper #land-sentinel-banner {
    padding: 6px 8px !important;
  }
  #map-viewport-wrapper #urban-trails-legend-shelf .glass-panel-heavy {
    padding: 6px 8px !important;
  }
}

#map-viewport-wrapper .map-bottom-telemetry,
.map-bottom-telemetry {
  position: absolute !important;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 29px) !important;
  left: 8px !important;
  right: 8px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(8, 28, 20, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 4px 12px !important;
  z-index: 15 !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.40) !important;
}

@media (max-width: 768px) {
  #map-viewport-wrapper .map-bottom-telemetry,
  .map-bottom-telemetry {
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 29px) !important;
  }
}

body.theme-dark #map-viewport-wrapper .map-bottom-telemetry,
.theme-dark #map-viewport-wrapper .map-bottom-telemetry,
body:not(.theme-light) #map-viewport-wrapper .map-bottom-telemetry {
  background: rgba(8, 28, 20, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.40) !important;
}

body.theme-light #map-viewport-wrapper .map-bottom-telemetry,
.theme-light #map-viewport-wrapper .map-bottom-telemetry {
  background: rgba(0, 75, 130, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 4px 16px rgba(0, 30, 60, 0.35) !important;
}

body.flir-mode #map-viewport-wrapper .map-bottom-telemetry {
  background: rgba(20, 2, 2, 0.85) !important;
  border-color: rgba(255, 59, 48, 0.50) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 59, 48, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.60) !important;
}

#explore-minimized-pill {
  position: fixed !important;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 74px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  width: min(calc(100vw - 24px), 440px) !important;
  max-width: 440px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  background: rgba(12, 16, 23, 0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(46, 229, 157, 0.35) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 14px rgba(46, 229, 157, 0.2) !important;
  padding: 8px 12px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  #explore-minimized-pill {
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 52px) !important;
  }
}

#explore-minimized-pill.hidden {
  display: none !important;
}

#park-guide-modal {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#park-guide-modal.hidden {
  display: none !important;
}

#park-guide-modal.open {
  display: flex !important;
}

/* ==========================================
   Tactical Hamburger Drawer & Floating Popovers
   ========================================== */
#tactical-menu-drawer {
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

#tactical-menu-drawer.drawer-open {
  display: block !important;
  opacity: 1 !important;
}

#tactical-menu-drawer .drawer-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 22rem;
  max-width: 88vw;
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(8, 28, 20, 0.96) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  backdrop-filter: blur(36px) saturate(200%);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    -12px 0 40px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, border-color 0.28s ease;
  padding: 0 !important;
}

body.theme-light #tactical-menu-drawer .drawer-content,
.theme-light #tactical-menu-drawer .drawer-content {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(0, 30, 65, 0.40) 100%), 
    rgba(0, 75, 130, 0.98) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 0 rgba(0, 20, 50, 0.65),
    -12px 0 40px rgba(0, 25, 55, 0.70) !important;
}

#tactical-menu-drawer.drawer-open .drawer-content {
  transform: translateX(0) !important;
}

/* Pinned, compact drawer header safe from Dynamic Island / notch */
#tactical-menu-drawer .drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 6px;
  min-height: calc(env(safe-area-inset-top, 0px) + 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(8, 28, 20, 0.92);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  z-index: 10;
  transition: background-color 0.28s ease, border-color 0.28s ease;
}

body.theme-light #tactical-menu-drawer .drawer-header,
.theme-light #tactical-menu-drawer .drawer-header {
  background: rgba(0, 75, 130, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
}

@media (max-width: 768px) {
  #tactical-menu-drawer .drawer-header {
    /* Respect native hardware cutouts safely while keeping bannerbox compact */
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    padding-bottom: 6px !important;
    min-height: calc(env(safe-area-inset-top, 0px) + 40px) !important;
  }
}


/* Scrollable drawer body */
#tactical-menu-drawer .drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px calc(max(24px, env(safe-area-inset-bottom, 24px)) + 20px) 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#layer-selector-card {
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.btn-pack-mass:focus,
.btn-pack-mass:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   URBAN & CITY TRAILS HIGHLIGHT STYLING
   ========================================================================== */
.urban-trail-glow {
  filter: drop-shadow(0 0 6px currentColor);
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke-width 0.2s ease, opacity 0.2s ease;
}

.urban-trail-glow-bike {
  stroke: rgba(16, 185, 129, 0.45) !important;
}

.urban-trail-core-bike {
  stroke: #10b981 !important;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.urban-trail-glow-horse {
  stroke: rgba(245, 158, 11, 0.45) !important;
}

.urban-trail-core-horse {
  stroke: #f59e0b !important;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.urban-trail-glow-walking {
  stroke: rgba(6, 182, 212, 0.45) !important;
}

.urban-trail-core-walking {
  stroke: #06b6d4 !important;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

/* Custom interactive tactical tooltip/popup for urban trails */
.leaflet-popup-content-wrapper.urban-trail-popup-wrapper {
  background: rgba(10, 14, 20, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.75), 0 0 15px rgba(255, 255, 255, 0.05) !important;
  color: #dfe2eb !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important;
}

.leaflet-popup-content-wrapper.urban-trail-popup-wrapper .leaflet-popup-content {
  margin: 0 !important;
  line-height: normal !important;
}

.leaflet-popup-tip-container {
  overflow: visible !important;
}

.leaflet-popup-tip {
  background: rgba(10, 14, 20, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.urban-filter-pill.active {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================
   Public Lands, Parks & Trails Search Modal
   ========================================== */
#modal-parks-search {
  z-index: 90 !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

#modal-parks-search.active {
  display: flex !important;
}

.search-card-glass {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), 
    rgba(18, 24, 34, 0.80);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.25rem;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 28px -4px rgba(0, 0, 0, 0.75),
    0 32px 64px -8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-card-glass:hover, .search-card-glass:active {
  border-color: rgba(46, 229, 157, 0.4);
  background: rgba(22, 30, 42, 0.9);
}

.jur-filter-btn.active {
  background: #2ee59d !important;
  color: #000000 !important;
  border-color: #2ee59d !important;
  box-shadow: 0 0 14px rgba(46, 229, 157, 0.35);
}

.act-filter-btn.active {
  background: rgba(46, 229, 157, 0.2) !important;
  color: #2ee59d !important;
  border-color: rgba(46, 229, 157, 0.5) !important;
  box-shadow: 0 0 10px rgba(46, 229, 157, 0.25);
}

/* =========================================================================
   Hierarchical Explore Menu & Drawer
   ========================================================================= */
#explore-hierarchical-modal {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(4, 7, 12, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(48px, calc(env(safe-area-inset-bottom, 0px) + 36px)) max(12px, env(safe-area-inset-left, 0px));
  pointer-events: auto;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

#explore-hierarchical-modal.open {
  display: flex !important;
}

#explore-hierarchical-container {
  width: min(94vw, 480px);
  max-width: 480px;
  height: min(78vh, 660px);
  max-height: calc(100vh - 160px);
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%), 
    rgba(8, 28, 20, 0.96) !important;
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 24px;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 14px 28px -4px rgba(0, 0, 0, 0.75),
    0 32px 64px -8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: center center;
  animation: exploreScaleIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box !important;
  overscroll-behavior-x: none !important;
  transition: background 0.28s ease, border-color 0.28s ease;
}

body.theme-light #explore-hierarchical-container,
.theme-light #explore-hierarchical-container {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(10, 35, 70, 0.40) 100%), 
    rgba(20, 56, 96, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 0 rgba(10, 30, 60, 0.65),
    0 14px 28px -4px rgba(10, 30, 60, 0.60),
    0 32px 64px -8px rgba(10, 30, 60, 0.70) !important;
}

@keyframes exploreScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#explore-scroll-area {
  flex: 1 1 0%;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y !important;
  scroll-behavior: smooth;
}

#explore-scroll-area * {
  max-width: 100%;
  box-sizing: border-box;
}

#explore-scroll-area::-webkit-scrollbar {
  width: 4px;
  display: block;
}

#explore-scroll-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

#explore-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

#explore-scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.explore-pulse-beacon {
  animation: exploreBeaconPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes exploreBeaconPulse {
  0% {
    transform: scale(0.95);
    stroke-opacity: 1;
    fill-opacity: 0.45;
  }
  50% {
    transform: scale(1.4);
    stroke-opacity: 0.4;
    fill-opacity: 0.15;
  }
  100% {
    transform: scale(0.95);
    stroke-opacity: 1;
    fill-opacity: 0.45;
  }
}

.explore-highlight-tooltip {
  background: rgba(10, 14, 20, 0.92) !important;
  border: 1px solid #00e5ff !important;
  color: #ffffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.4) !important;
  padding: 4px 8px !important;
}

/* ==========================================================================
   Dual-Theme (Dark Forest Green & Light Alpine Blue) Accessibility & Contrast
   ========================================================================== */

/* Dark Mode Typography & Substrates (Forest Green Substrate) */
body.theme-dark .text-\[\#8a9386\],
.theme-dark .text-\[\#8a9386\],
body.theme-dark .text-muted,
.theme-dark .text-muted {
  color: #a4bea4 !important;
}

body.theme-dark html .bg-surfaceHigh,
.theme-dark html .bg-surfaceHigh,
body.theme-dark .stat-tile,
.theme-dark .stat-tile {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(4, 18, 12, 0.45) 100%), 
    rgba(14, 44, 32, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body.theme-dark html .bg-surfaceHighest,
.theme-dark html .bg-surfaceHighest {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(4, 18, 12, 0.50) 100%), 
    rgba(18, 56, 40, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.theme-dark .bg-surface,
.theme-dark .bg-surface {
  background-color: #081c14 !important;
}

#map-container,
#map-container.leaflet-container {
  background-color: #081c14 !important;
}

body.theme-dark #view-minetti .bg-\[\#080c10\],
.theme-dark #view-minetti .bg-\[\#080c10\],
body.theme-dark #streetview-viewport,
.theme-dark #streetview-viewport {
  background-color: rgba(6, 20, 14, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.theme-dark .waypoint-hud-pin,
.theme-dark .waypoint-hud-pin {
  background: rgba(8, 28, 20, 0.90) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.theme-dark #explore-breadcrumb-bar,
.theme-dark #explore-breadcrumb-bar {
  background-color: rgba(6, 20, 14, 0.50) !important;
}

body.theme-dark svg text[fill="#8a9386"],
.theme-dark svg text[fill="#8a9386"] {
  fill: #a4bea4 !important;
}

/* Light Mode Typography & Substrates (Alpine Blue Substrate) */
body.theme-light .text-\[\#8a9386\],
.theme-light .text-\[\#8a9386\],
body.theme-light .text-muted,
.theme-light .text-muted {
  color: #f0f7ff !important;
}

body.theme-light .text-white\/50,
.theme-light .text-white\/50,
body.theme-light .text-white\/60,
.theme-light .text-white\/60 {
  color: rgba(255, 255, 255, 0.90) !important;
}

body.theme-light .text-white\/70,
.theme-light .text-white\/70,
body.theme-light .text-white\/80,
.theme-light .text-white\/80 {
  color: rgba(255, 255, 255, 0.96) !important;
}

body.theme-light html .bg-surfaceHigh,
.theme-light html .bg-surfaceHigh,
body.theme-light .stat-tile,
.theme-light .stat-tile {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(0, 30, 65, 0.40) 100%), 
    rgba(0, 65, 115, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

body.theme-light html .bg-surfaceHighest,
.theme-light html .bg-surfaceHighest {
  background: 
    radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(0, 25, 55, 0.45) 100%), 
    rgba(0, 50, 92, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}

body.theme-light .bg-surface,
.theme-light .bg-surface {
  background-color: #0084bd !important;
}

body.theme-light #map-container,
body.theme-light #map-container.leaflet-container {
  background-color: #0084bd !important;
}

body.theme-light .urban-trail-card,
.theme-light .urban-trail-card {
  background: rgba(0, 58, 102, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

body.theme-light #view-minetti .bg-\[\#080c10\],
.theme-light #view-minetti .bg-\[\#080c10\],
body.theme-light #streetview-viewport,
.theme-light #streetview-viewport {
  background-color: rgba(0, 52, 94, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.theme-light .waypoint-hud-pin,
.theme-light .waypoint-hud-pin {
  background: rgba(0, 65, 115, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

body.theme-light #explore-breadcrumb-bar,
.theme-light #explore-breadcrumb-bar {
  background-color: rgba(0, 52, 94, 0.50) !important;
}

body.theme-light svg text[fill="#8a9386"],
.theme-light svg text[fill="#8a9386"] {
  fill: #f0f7ff !important;
}

/* ==========================================================================
   TRAIL DRIVING COCKPIT HUD (Hands-Free CarPlay / Android Auto Display)
   ========================================================================== */
.trail-driving-cockpit-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(8, 12, 16, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Segoe UI", sans-serif;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.trail-driving-cockpit-hud.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.trail-driving-cockpit-hud.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cockpit-container {
  width: 100%;
  max-width: 640px;
  background: #11171d;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 240, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.cockpit-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-icon {
  font-size: 22px;
}

.auto-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00f0ff;
  text-transform: uppercase;
}

.auto-integration-badges {
  display: flex;
  gap: 6px;
}

.badge-carplay, .badge-android-auto {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  color: #cbd5e1;
}

.cockpit-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Primary Turn Maneuver Card */
.cockpit-maneuver-card {
  display: flex;
  gap: 16px;
  background: #18212a;
  border: 2px solid #00f0ff;
  border-radius: 14px;
  padding: 16px;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.15);
}

.cockpit-maneuver-card.status-danger {
  border-color: #ff334b !important;
  background: rgba(255, 51, 75, 0.15) !important;
  box-shadow: 0 0 25px rgba(255, 51, 75, 0.4) !important;
  animation: pulse-danger 1s infinite alternate;
}

.cockpit-maneuver-card.status-caution {
  border-color: #ffb703 !important;
  background: rgba(255, 183, 3, 0.1) !important;
}

@keyframes pulse-danger {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

.maneuver-icon-box {
  width: 64px;
  height: 64px;
  background: rgba(0, 240, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.maneuver-glyph {
  font-size: 36px;
  color: #00f0ff;
}

.maneuver-text-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.maneuver-distance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.maneuver-distance {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}

.maneuver-drivetrain-badge {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid #00f0ff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  color: #00f0ff;
  text-transform: uppercase;
}

.maneuver-instruction {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #e2e8f0;
}

/* 4x4 Clinometer & Telemetry Grid */
.cockpit-telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.gauge-card {
  background: #18212a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gauge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #94a3b8;
  text-transform: uppercase;
}

.gauge-val {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.gauge-meter-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.roll-fill {
  background: #00f0ff;
}

.roll-gauge.status-caution .roll-fill {
  background: #ffb703;
}

.roll-gauge.status-danger .roll-fill {
  background: #ff334b;
}

.pitch-fill {
  background: #10b981;
}

.gauge-footer {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}

.speed-val {
  font-size: 20px;
  color: #00f0ff;
}

/* Hands-Free Voice Bar */
.cockpit-voice-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
}

.voice-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-pulse-dot {
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.voice-status-text {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

.cockpit-actions {
  display: flex;
  gap: 8px;
}

.cockpit-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.cockpit-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hazard-btn {
  background: rgba(255, 183, 3, 0.2);
  border-color: #ffb703;
  color: #ffb703;
}

/* ============================================================= */
/* Live Crowdsourced Water & Hazard Reports Substrate Styling   */
/* ============================================================= */

.crowd-report-card {
  position: relative;
  background: rgba(13, 42, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-light .crowd-report-card {
  background: rgba(0, 111, 161, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 40, 80, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.crowd-report-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.tactical-dark-popup .leaflet-popup-content-wrapper {
  background: rgba(12, 19, 26, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
}

.tactical-dark-popup .leaflet-popup-tip {
  background: rgba(12, 19, 26, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.crowd-telemetry-pin {
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.crowd-telemetry-pin:hover {
  transform: scale(1.3);
}

.btn-category-pill {
  white-space: nowrap;
  user-select: none;
}

/* Sovereign CSS Layout Grid & Flex Rules for Crowd Reports */
.crowd-mode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
}

.crowd-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

.crowd-card-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.crowd-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.crowd-footer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#view-hazards {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.crowd-reports-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}



/* ==============================================================================
   VETTED TRAIL SCOUTING & OBSTACLE BREAKDOWNS SUBSTRATE
   ============================================================================== */

.vetted-scout-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10500 !important;
  display: flex !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

.vetted-scout-drawer.hidden {
  display: none !important;
  pointer-events: none !important;
}

.vetted-scout-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.vetted-scout-panel {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 100% !important;
  background: rgba(13, 20, 28, 0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  color: #e2e8f0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif !important;
  box-sizing: border-box !important;
  padding: 0 0 calc(max(20px, env(safe-area-inset-bottom, 20px)) + 12px) 0 !important;
}

.vetted-scout-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(13, 20, 28, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding-top: calc(max(16px, env(safe-area-inset-top, 0px)) + 16px) !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.vetted-scout-header-title {
  flex: 1 !important;
}

.vetted-scout-pill-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.15) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  margin-right: 6px !important;
  margin-bottom: 6px !important;
}

.vetted-scout-width-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #00e676 !important;
  background: rgba(0, 230, 118, 0.15) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  margin-bottom: 6px !important;
}

.vetted-scout-width-badge.restricted {
  color: #ff9100 !important;
  background: rgba(255, 145, 0, 0.2) !important;
  border: 1px solid rgba(255, 145, 0, 0.4) !important;
}

.vetted-scout-header-title h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 4px 0 2px 0 !important;
  line-height: 1.2 !important;
}

.vetted-scout-header-title p {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

.vetted-scout-close-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  touch-action: manipulation !important;
  position: relative !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.vetted-scout-close-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 50% !important;
}

.vetted-scout-close-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #ffffff !important;
}

.vetted-scout-close-btn:active {
  transform: scale(0.92) !important;
  background: rgba(255, 255, 255, 0.38) !important;
  border-color: #00e5ff !important;
}

.vetted-scout-trail-selector-row {
  padding: 10px 18px 4px 18px !important;
}

#vscout-selector-card,
.vscout-selector-card {
  flex-shrink: 0 !important;
  margin: 8px 18px 4px 18px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px) !important;
}

.vscout-selector-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #38bdf8 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.vscout-select-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.vscout-trail-select,
.vscout-dropdown {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 38px 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  color: #f8fafc !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vscout-trail-select:focus,
.vscout-dropdown:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

.vscout-trail-select option,
.vscout-dropdown option {
  background: #0f172a !important;
  color: #f8fafc !important;
  padding: 8px 10px !important;
}

.vscout-select-chevron {
  position: absolute !important;
  right: 12px !important;
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
  color: #38bdf8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vscout-selector-active-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 11px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: #94a3b8 !important;
}

.vscout-selector-active-summary span {
  font-weight: 700 !important;
  color: #f8fafc !important;
}

.vetted-scout-dual-rating-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 10px 18px !important;
}

.vscout-rating-box {
  padding: 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vscout-rating-box.mandatory {
  border: 1.5px solid rgba(0, 230, 118, 0.45) !important;
}

.vscout-rating-box.challenge {
  border: 1.5px solid rgba(255, 23, 68, 0.45) !important;
}

.vscout-rating-box.active-view {
  opacity: 1 !important;
}

.vscout-rating-box.mandatory.active-view {
  border: 2px solid #00e676 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.35), inset 0 0 12px rgba(0, 230, 118, 0.1) !important;
}

.vscout-rating-box.challenge.active-view {
  border: 2px solid #ff1744 !important;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.35), inset 0 0 12px rgba(255, 23, 68, 0.1) !important;
}

.vscout-rating-box:not(.active-view) {
  opacity: 0.52 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

.vscout-active-view-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  animation: vscout-badge-pulse 2s infinite ease-in-out !important;
  margin-top: 4px !important;
}

.vscout-active-view-badge.hidden {
  display: none !important;
}

.vscout-active-view-badge.theme-mandatory {
  background: rgba(0, 230, 118, 0.2) !important;
  color: #00e676 !important;
  border: 1px solid rgba(0, 230, 118, 0.6) !important;
}

.vscout-active-view-badge.theme-challenge {
  background: rgba(255, 23, 68, 0.2) !important;
  color: #ff1744 !important;
  border: 1px solid rgba(255, 23, 68, 0.6) !important;
}

@keyframes vscout-badge-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.85;
  }
}

.vscout-rating-label {
  display: flex !important;
  flex-direction: column !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.vscout-rating-box.mandatory .vscout-rating-label span:first-child {
  color: #00e676 !important;
}

.vscout-rating-box.challenge .vscout-rating-label span:first-child {
  color: #ff1744 !important;
}

.vscout-subtag {
  font-size: 9px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

.vscout-rating-value {
  margin: 6px 0 4px 0 !important;
}

.vscout-score {
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.vscout-rating-box.mandatory .vscout-score {
  color: #00e676 !important;
}

.vscout-rating-box.challenge .vscout-score {
  color: #ff1744 !important;
}

.vscout-denom {
  font-size: 16px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.vscout-rating-desc {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  line-height: 1.25 !important;
}

.vetted-scout-mode-switch {
  display: flex !important;
  gap: 8px !important;
  padding: 4px 18px 10px 18px !important;
}

.vscout-mode-btn {
  flex: 1 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
}

.vscout-mode-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 12px !important;
}

.vscout-mode-btn span {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.vscout-mode-btn small {
  font-size: 10px !important;
  margin-top: 2px !important;
}

.vscout-mode-btn.active {
  background: rgba(0, 112, 186, 0.25) !important;
  border-color: #0070ba !important;
  color: #ffffff !important;
}

.vscout-mode-btn#btn-vscout-mode-mandatory.active {
  background: rgba(0, 230, 118, 0.18) !important;
  border-color: #00e676 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.25) !important;
}

.vscout-mode-btn#btn-vscout-mode-challenge.active {
  background: rgba(255, 23, 68, 0.18) !important;
  border-color: #ff1744 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.25) !important;
}

.vetted-scout-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  padding: 4px 18px 12px 18px !important;
}

.vscout-stat-card {
  padding: 8px 4px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  text-align: center !important;
}

.vscout-stat-icon {
  font-size: 14px !important;
}

.vscout-stat-val {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 2px 0 !important;
}

.vscout-stat-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.5px !important;
}

.vetted-scout-legend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 18px 12px 18px !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.vscout-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.vscout-legend-bar {
  display: inline-block !important;
  width: 16px !important;
  height: 4px !important;
  border-radius: 2px !important;
}

.vscout-legend-bar.main { background: #0070ba !important; }
.vscout-legend-bar.bypass { background: #00e676 !important; }
.vscout-legend-bar.harder { background: #ff1744 !important; }
.vscout-legend-bar.social { background: #ff9100 !important; }

.vetted-scout-section-heading {
  padding: 12px 18px 8px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.vetted-scout-section-heading h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.vscout-obstacle-count {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.vetted-scout-obstacles-list {
  padding: 0 18px 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.vscout-obstacle-card {
  padding: 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.vscout-obstacle-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.vscout-rating-bubble {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.vscout-rating-bubble.rating-1,
.vscout-rating-bubble.rating-2,
.vscout-rating-bubble.rating-3 { background: #00e676 !important; }

.vscout-rating-bubble.rating-4,
.vscout-rating-bubble.rating-5 { background: #0070ba !important; }

.vscout-rating-bubble.rating-6,
.vscout-rating-bubble.rating-7 { background: #ff9100 !important; }

.vscout-rating-bubble.rating-8,
.vscout-rating-bubble.rating-9,
.vscout-rating-bubble.rating-10 { background: #ff1744 !important; }

.vscout-obstacle-title-col {
  flex: 1 !important;
}

.vscout-obstacle-title-col h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 2px 0 !important;
}

.vscout-obstacle-subline {
  font-size: 11px !important;
  color: #94a3b8 !important;
  display: flex !important;
  gap: 6px !important;
}

.vscout-badge-bypass {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.vscout-badge-bypass.official {
  color: #00e676 !important;
  background: rgba(0, 230, 118, 0.15) !important;
}

.vscout-badge-bypass.mandatory {
  color: #ff1744 !important;
  background: rgba(255, 23, 68, 0.15) !important;
}

.vscout-badge-bypass.social {
  color: #ff9100 !important;
  background: rgba(255, 145, 0, 0.15) !important;
}

.vscout-obstacle-specs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.vscout-spec-item {
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
}

.vscout-spec-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.5px !important;
}

.vscout-spec-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
}

.vscout-photo-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.vscout-stage-selector {
  display: flex !important;
  gap: 4px !important;
}

.vscout-stage-tab {
  flex: 1 !important;
  padding: 6px 4px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.vscout-stage-tab.active {
  background: #0070ba !important;
  color: #ffffff !important;
  border-color: #0070ba !important;
}

.vscout-photo-viewport {
  position: relative !important;
  height: 175px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #080d14 !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.vscout-obstacle-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.vscout-photo-canvas-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.vscout-camera-reticle {
  position: absolute !important;
  inset: 12px !important;
  pointer-events: none !important;
}

.reticle-corner {
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  border-color: rgba(0, 229, 255, 0.65) !important;
  border-style: solid !important;
}

.reticle-corner.tl { top: 0; left: 0; border-width: 2px 0 0 2px !important; }
.reticle-corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0 !important; }
.reticle-corner.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px !important; }
.reticle-corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0 !important; }

.vscout-photo-title-watermark {
  position: absolute !important;
  top: 8px !important;
  left: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: rgba(10, 16, 26, 0.8) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 0.3px !important;
}

.vscout-exif-hud {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(8, 14, 22, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 6px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 9.5px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  z-index: 3 !important;
}

.vscout-exif-row {
  display: flex !important;
  justify-content: space-between !important;
  color: #94a3b8 !important;
}

.vscout-exif-field.highlight {
  color: #00e5ff !important;
  font-weight: 700 !important;
}

.vscout-bypass-note {
  font-size: 11px !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 6px 8px !important;
  border-left: 2px solid #00e676 !important;
  border-radius: 0 4px 4px 0 !important;
}

.vscout-btn-fly {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(14, 165, 233, 0.12)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.vscout-btn-fly::after {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 12px !important;
}

.vscout-btn-fly:hover {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), rgba(14, 165, 233, 0.25)) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}

.vscout-btn-fly:active {
  transform: scale(0.97) !important;
  background: rgba(2, 132, 199, 0.55) !important;
  border-color: #7dd3fc !important;
}

.vetted-scout-footer-tools {
  padding: 14px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.vscout-btn-primary {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: #0070ba !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vscout-btn-primary:hover {
  background: #0084bd !important;
}

.vscout-wakelock-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vscout-toggle-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.vscout-toggle-text {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.vscout-btn-close-drawer {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  touch-action: manipulation !important;
}

.vscout-btn-close-drawer:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #ffffff !important;
}

.vscout-btn-close-drawer:active {
  transform: scale(0.98) !important;
  background: rgba(255, 255, 255, 0.22) !important;
}

/* =========================================================================
   VETTED SCOUT RIG READINESS & STATUTORY ORDINANCES CARD (R3)
   ========================================================================= */
#vscout-rig-card,
.vscout-rig-card {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
  margin: 4px 18px 12px 18px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

#btn-toggle-rig-card,
.vscout-rig-header {
  width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: none !important;
  color: #f8fafc !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.2s ease !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#btn-toggle-rig-card:hover,
.vscout-rig-header:hover {
  background: rgba(51, 65, 85, 0.7) !important;
}

.vscout-rig-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.vscout-rig-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.vscout-rig-header-titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.vscout-rig-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #f8fafc !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.vscout-rig-subtitle {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.vscout-rig-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}

.vscout-rig-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  text-transform: uppercase !important;
}

#vscout-rig-chevron {
  display: inline-block !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-size: 10px !important;
  color: #38bdf8 !important;
}

#vscout-rig-chevron.expanded {
  transform: rotate(180deg) !important;
}

#vscout-rig-body,
#vscout-rig-content,
.vscout-rig-content {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#vscout-rig-body.hidden,
#vscout-rig-content.hidden,
.vscout-rig-content.hidden {
  display: none !important;
}

/* Sub-sections within rig card */
.vscout-rig-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.vscout-rig-section-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Vehicle spec 2x2 grid */
.vscout-rig-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

@media (max-width: 340px) {
  .vscout-rig-grid {
    grid-template-columns: 1fr !important;
  }
}

.vscout-rig-item {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.vscout-rig-item-lbl {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
}

.vscout-rig-spec-dual {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.vscout-spec-min {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.vscout-spec-rec {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.vscout-rig-sub {
  font-size: 10px !important;
  color: #94a3b8 !important;
  line-height: 1.3 !important;
}

/* Statutory Ordinances List & Cards */
.vscout-ordinance-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vscout-ordinance-card {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.vscout-ordinance-card.danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.vscout-ordinance-card.warning {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.vscout-ordinance-card.info {
  background: rgba(56, 189, 248, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

.vscout-ordinance-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.vscout-ordinance-icon {
  font-size: 14px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.vscout-ordinance-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  letter-spacing: 0.03em !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.vscout-ordinance-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.vscout-ordinance-badge.danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.vscout-ordinance-badge.warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.vscout-ordinance-badge.info {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.vscout-ordinance-agency,
.vscout-ordinance-authority {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

.vscout-ordinance-desc {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
}

/* =========================================================================
   VETTED SCOUT OBSTACLE DRIVING GUIDANCE CARDS (R2 & R4)
   ========================================================================= */
.vscout-line-guidance-card {
  margin: 10px 0 12px 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  transition: all 0.25s ease !important;
}

.vscout-line-guidance-card.theme-bypass {
  background: rgba(0, 230, 118, 0.08) !important;
  border: 1.5px solid rgba(0, 230, 118, 0.45) !important;
  box-shadow: 0 2px 10px rgba(0, 230, 118, 0.15) !important;
}

.vscout-line-guidance-card.theme-hardline {
  background: rgba(255, 23, 68, 0.08) !important;
  border: 1.5px solid rgba(255, 23, 68, 0.45) !important;
  box-shadow: 0 2px 10px rgba(255, 23, 68, 0.15) !important;
}

.vscout-line-guidance-card.theme-mandatory-nobypass {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15) !important;
}

.vscout-line-guidance-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.vscout-line-guidance-title {
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.vscout-line-guidance-card.theme-bypass .vscout-line-guidance-title {
  color: #00e676 !important;
}

.vscout-line-guidance-card.theme-hardline .vscout-line-guidance-title {
  color: #ff1744 !important;
}

.vscout-line-guidance-card.theme-mandatory-nobypass .vscout-line-guidance-title {
  color: #f59e0b !important;
}

.vscout-line-guidance-text {
  color: #e2e8f0 !important;
  font-size: 11.5px !important;
  margin: 0 !important;
}

.vscout-line-guidance-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.vscout-guidance-tag {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

/* Public Lands & MAPLand Toggle Button States (Highlighted when on, shaded when not) */
#btn-toggle-cadastral.active,
#btn-toggle-cadastral[aria-pressed="true"] {
  background: #facc15 !important;
  color: #09150d !important;
  border-color: #fde047 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.75), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  font-weight: 800 !important;
}
#btn-toggle-cadastral.active span,
#btn-toggle-cadastral[aria-pressed="true"] span,
#btn-toggle-cadastral.active #btn-toggle-cadastral-text,
#btn-toggle-cadastral[aria-pressed="true"] #btn-toggle-cadastral-text {
  color: #09150d !important;
  font-weight: 800 !important;
}

#btn-toggle-cadastral {
  min-width: 58px !important;
  width: 58px !important;
  height: 26px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.12s ease !important;
}

#btn-toggle-cadastral::after {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  bottom: -8px !important;
  left: -8px !important;
  right: -8px !important;
  pointer-events: auto !important;
  border-radius: 9999px !important;
}

#btn-toggle-cadastral:active {
  transform: scale(0.96) !important;
}

#btn-toggle-cadastral * {
  pointer-events: none !important;
}

#btn-toggle-cadastral #btn-toggle-cadastral-text {
  font-size: 10.5px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  display: inline-block !important;
  z-index: 1 !important;
  transition: color 0.2s ease, opacity 0.15s ease !important;
}

#btn-toggle-cadastral.active #btn-toggle-cadastral-text,
#btn-toggle-cadastral[aria-pressed="true"] #btn-toggle-cadastral-text {
  margin-left: 9px !important;
  margin-right: auto !important;
  color: #09150d !important;
  font-weight: 800 !important;
}

#btn-toggle-cadastral .toggle-knob {
  position: absolute !important;
  top: 50% !important;
  left: 4px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
}

#btn-toggle-cadastral.active .toggle-knob,
#btn-toggle-cadastral[aria-pressed="true"] .toggle-knob {
  background-color: #09150d !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-50%) translateX(36px) !important;
}

#btn-toggle-cadastral.muted,
#btn-toggle-cadastral[aria-pressed="false"] {
  background: rgba(12, 16, 13, 0.90) !important;
  color: rgba(138, 147, 134, 0.70) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75) !important;
  font-weight: 600 !important;
}
#btn-toggle-cadastral.muted span,
#btn-toggle-cadastral[aria-pressed="false"] span,
#btn-toggle-cadastral.muted #btn-toggle-cadastral-text,
#btn-toggle-cadastral[aria-pressed="false"] #btn-toggle-cadastral-text {
  color: rgba(138, 147, 134, 0.70) !important;
  font-weight: 600 !important;
}
#btn-toggle-cadastral.muted #btn-toggle-cadastral-text,
#btn-toggle-cadastral[aria-pressed="false"] #btn-toggle-cadastral-text {
  margin-left: auto !important;
  margin-right: 8px !important;
}
#btn-toggle-cadastral.muted .toggle-knob,
#btn-toggle-cadastral[aria-pressed="false"] .toggle-knob {
  background-color: #64748b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  transform: translateY(-50%) translateX(0px) !important;
}

body.theme-light #btn-toggle-cadastral.muted,
.theme-light #btn-toggle-cadastral.muted,
body.theme-light #btn-toggle-cadastral[aria-pressed="false"],
.theme-light #btn-toggle-cadastral[aria-pressed="false"] {
  background: rgba(226, 232, 240, 0.8) !important;
  color: #64748b !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
body.theme-light #btn-toggle-cadastral.muted span,
.theme-light #btn-toggle-cadastral.muted span,
body.theme-light #btn-toggle-cadastral.muted #btn-toggle-cadastral-text,
.theme-light #btn-toggle-cadastral.muted #btn-toggle-cadastral-text {
  color: #64748b !important;
}
body.theme-light #btn-toggle-cadastral.muted .toggle-knob,
.theme-light #btn-toggle-cadastral.muted .toggle-knob {
  background-color: #94a3b8 !important;
}

/* ==============================================================================
   IPHONE DUO: CSS VIEWPORT SEGMENTS & DUAL-SCREEN LAYOUT ENGINE (FEATURES F5-F8)
   WebKit Standard Viewport Segments Media Queries, Mechanical Hinge Seam Reservation,
   and Symmetrical Variable / Fallback Architecture
   ============================================================================== */

/* 1. WebKit Standard Viewport Segment Media Queries */
@media (horizontal-viewport-segments: 2) {
  :root {
    --duo-is-dual-screen: 1;
    --duo-posture: flatOpen;
    --duo-screen1-left: env(viewport-segment-left 0 0);
    --duo-screen1-top: env(viewport-segment-top 0 0);
    --duo-screen1-width: env(viewport-segment-width 0 0);
    --duo-screen1-height: env(viewport-segment-height 0 0);
    --duo-screen1-right: env(viewport-segment-right 0 0);
    --duo-screen1-bottom: env(viewport-segment-bottom 0 0);

    --duo-screen2-left: env(viewport-segment-left 1 0);
    --duo-screen2-top: env(viewport-segment-top 1 0);
    --duo-screen2-width: env(viewport-segment-width 1 0);
    --duo-screen2-height: env(viewport-segment-height 1 0);
    --duo-screen2-right: env(viewport-segment-right 1 0);
    --duo-screen2-bottom: env(viewport-segment-bottom 1 0);

    --duo-hinge-x: env(viewport-segment-right 0 0);
    --duo-hinge-width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
    --duo-hinge-y: 0px;
    --duo-hinge-height: 0px;
  }
}

@media (vertical-viewport-segments: 2) {
  :root {
    --duo-is-dual-screen: 1;
    --duo-posture: laptopMode;
    --duo-screen1-left: env(viewport-segment-left 0 0);
    --duo-screen1-top: env(viewport-segment-top 0 0);
    --duo-screen1-width: env(viewport-segment-width 0 0);
    --duo-screen1-height: env(viewport-segment-height 0 0);
    --duo-screen1-right: env(viewport-segment-right 0 0);
    --duo-screen1-bottom: env(viewport-segment-bottom 0 0);

    --duo-screen2-left: env(viewport-segment-left 0 1);
    --duo-screen2-top: env(viewport-segment-top 0 1);
    --duo-screen2-width: env(viewport-segment-width 0 1);
    --duo-screen2-height: env(viewport-segment-height 0 1);
    --duo-screen2-right: env(viewport-segment-right 0 1);
    --duo-screen2-bottom: env(viewport-segment-bottom 0 1);

    --duo-hinge-x: 0px;
    --duo-hinge-width: 0px;
    --duo-hinge-y: env(viewport-segment-bottom 0 0);
    --duo-hinge-height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
  }
}

/* 2. Symmetrical Fallback Selectors & Classes */
:is(.iphone-duo-dual-screen, .duo-flat-open, [data-duo-posture="flatOpen"]) {
  --duo-is-dual-screen: 1;
  --duo-posture: flatOpen;
}

:is(.duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) {
  --duo-is-dual-screen: 1;
  --duo-posture: laptopMode;
}

/* 3. Base State for Tactical Shelf and Cockpit Console */
#duo-tactical-shelf {
  display: none;
}

#duo-tabletop-console {
  display: none;
}

/* Single-Screen Phone Mode (Default / Closed):
   #streetview-viewport stays flex: 1, console Module 1 is displayed flush above bottom dock.
   Module 2 & 3 remain hidden on single screen and expand in dual-screen tabletop mode. */
#streetview-cockpit-console {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}

#streetview-cockpit-console .cockpit-module-1 {
  display: flex;
}

#streetview-cockpit-console .cockpit-module-2,
#streetview-cockpit-console .cockpit-module-3 {
  display: none;
}

#streetview-cockpit-console #btn-demo-walk {
  display: inline-flex !important;
}

#streetview-cockpit-console #btn-play-flythrough,
#streetview-cockpit-console #btn-demo-walk,
#streetview-cockpit-console #lbl-3d-gps-status {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 3D Playback Speed Steppers & Interactive Badge */
#streetview-cockpit-console .btn-speed-stepper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8a9386;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

#streetview-cockpit-console .btn-speed-stepper:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

#streetview-cockpit-console .btn-speed-stepper:active {
  transform: scale(0.90);
  background: rgba(56, 224, 123, 0.20);
  color: var(--primary, #38e07b);
  border-color: rgba(56, 224, 123, 0.40);
}

/* Expanded 44pt hit target for mobile touch glass (Apple HIG) */
#streetview-cockpit-console .btn-speed-stepper::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  pointer-events: auto;
}

#streetview-cockpit-console #btn-speed-down::after {
  left: -24px;
  right: 0px;
}

#streetview-cockpit-console #btn-speed-up::after {
  left: 0px;
  right: -24px;
}

#streetview-cockpit-console #lbl-playback-speed {
  position: relative;
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 4px;
  border-radius: 4px;
}

#streetview-cockpit-console #lbl-playback-speed:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-cam-mode {
  position: relative;
  z-index: 2;
}

/* Active Contrast Fix for Demo Walk & Live GPS Track on .glass-panel-heavy */
body.theme-dark .glass-panel-heavy.bg-tertiary,
.theme-dark .glass-panel-heavy.bg-tertiary,
body:not(.theme-light) .glass-panel-heavy.bg-tertiary {
  background:
    radial-gradient(130% 90% at 50% -25%, rgba(0, 229, 255, 0.35) 0%, rgba(0, 229, 255, 0.12) 55%, rgba(6, 28, 36, 0.92) 100%),
    rgba(6, 28, 36, 0.92) !important;
  color: #67e8f9 !important;
  border: 1px solid rgba(0, 229, 255, 0.65) !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

body.theme-dark .glass-panel-heavy.bg-secondary,
.theme-dark .glass-panel-heavy.bg-secondary,
body:not(.theme-light) .glass-panel-heavy.bg-secondary {
  background:
    radial-gradient(130% 90% at 50% -25%, rgba(74, 222, 128, 0.35) 0%, rgba(74, 222, 128, 0.12) 55%, rgba(8, 32, 20, 0.92) 100%),
    rgba(8, 32, 20, 0.92) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.65) !important;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

#streetview-cockpit-console #lbl-3d-gps-status {
  max-width: 184px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

@media (max-width: 440px) {
  #streetview-cockpit-console #btn-play-flythrough,
  #streetview-cockpit-console #btn-demo-walk {
    padding: 3px 7px !important;
    font-size: 9.5px !important;
    gap: 3px !important;
  }
  #streetview-cockpit-console #lbl-3d-gps-status {
    font-size: 9.5px !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: -0.2px !important;
  }
}

/* FLIR Night Red Mode Integration */
body.flir-mode #streetview-cockpit-console .btn-speed-stepper {
  background: rgba(255, 59, 48, 0.08) !important;
  border-color: rgba(255, 59, 48, 0.25) !important;
  color: #ff3b30 !important;
}

body.flir-mode #streetview-cockpit-console .btn-speed-stepper:active {
  background: rgba(255, 59, 48, 0.30) !important;
  color: #ffffff !important;
}

body.flir-mode #streetview-cockpit-console #lbl-playback-speed {
  color: #ff3b30 !important;
}

/* 4. Horizontal Dual-Screen (Book Mode / Flat Open) Layout Negotiation */
/* Screen 1 (Left Display: Map / Streetview Canvas) */
@media (horizontal-viewport-segments: 2) {
  #view-map,
  #view-streetview {
    position: absolute !important;
    left: env(viewport-segment-left 0 0, 0px) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--duo-screen1-width, env(viewport-segment-width 0 0, calc(50vw - 10px))) !important;
    max-width: var(--duo-screen1-width, env(viewport-segment-width 0 0, calc(50vw - 10px))) !important;
    right: auto !important;
    z-index: 10 !important;
  }

  /* Screen 1 Floating Controls Bounded Strictly before Mechanical Hinge Seam */
  #view-map .map-top-controls {
    right: 12px !important;
    left: auto !important;
  }

  #view-map #map-bottom-telemetry {
    left: 12px !important;
    right: 12px !important;
    max-width: calc(var(--duo-screen1-width, env(viewport-segment-width 0 0, calc(50vw - 10px))) - 24px) !important;
  }

  /* Re-anchor Centered Pills to Screen 1 Optical Center (Never in Hinge Seam) */
  #explore-minimized-pill,
  #sentry-off-trail-hud {
    left: calc(var(--duo-screen1-width, env(viewport-segment-width 0 0, calc(50vw - 10px))) / 2) !important;
    transform: translateX(-50%) !important;
  }

  /* Dock strictly bounded to Screen 1 so zero buttons fall in mechanical hinge seam */
  .tactical-dock {
    width: var(--duo-screen1-width, env(viewport-segment-width 0 0, calc(50vw - 10px))) !important;
    max-width: var(--duo-screen1-width, env(viewport-segment-width 0 0, calc(50vw - 10px))) !important;
    right: auto !important;
  }

  /* Screen 2 (Right Display): Dedicated Tactical Shelf Container */
  #duo-tactical-shelf {
    display: flex !important;
    position: absolute !important;
    left: calc(var(--duo-hinge-x, env(viewport-segment-right 0 0, 50vw)) + var(--duo-hinge-width, calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw)))) !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--duo-screen2-width, env(viewport-segment-width 1 0, calc(50vw - 10px))) !important;
    z-index: 30 !important;
    background: rgba(10, 20, 16, 0.95) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 27px) !important;
    padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 36px) !important;
  }
}

/* Symmetrical Fallback Rules for Book Mode via Classes */
:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #view-map,
:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #view-streetview {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--duo-screen1-width, calc(50vw - 10px)) !important;
  max-width: var(--duo-screen1-width, calc(50vw - 10px)) !important;
  right: auto !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) .tactical-dock {
  width: var(--duo-screen1-width, calc(50vw - 10px)) !important;
  max-width: var(--duo-screen1-width, calc(50vw - 10px)) !important;
  right: auto !important;
}

:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #view-map .map-top-controls {
  right: 12px !important;
  left: auto !important;
}

:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #view-map #map-bottom-telemetry {
  left: 12px !important;
  right: 12px !important;
  max-width: calc(var(--duo-screen1-width, calc(50vw - 10px)) - 24px) !important;
}

:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #explore-minimized-pill,
:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #sentry-off-trail-hud {
  left: calc(var(--duo-screen1-width, calc(50vw - 10px)) / 2) !important;
  transform: translateX(-50%) !important;
}

:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) #duo-tactical-shelf {
  display: flex !important;
  position: absolute !important;
  left: calc(var(--duo-hinge-x, 50vw) + var(--duo-hinge-width, 20px)) !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--duo-screen2-width, calc(50vw - 10px)) !important;
  z-index: 30 !important;
  background: rgba(10, 20, 16, 0.95) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 27px) !important;
  padding-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 36px) !important;
}

/* Suppress full-screen modal backdrops in dual-screen mode so left map remains active and clear */
:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) .vetted-scout-backdrop,
:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) .trail-dossier-modal-overlay,
:is(.iphone-duo-dual-screen.duo-flat-open, .duo-flat-open, [data-duo-posture="flatOpen"]) .modal-dimming-overlay {
  display: none !important;
  pointer-events: none !important;
}

/* 5. Vertical Dual-Screen (Laptop / Tabletop Mode) Layout Negotiation */
/* Top Screen: 3D Viewport or Map Horizon; Bottom Screen: Tactical Cockpit Console */
@media (vertical-viewport-segments: 2) {
  #view-streetview,
  #view-map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    bottom: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    z-index: 10 !important;
    overflow: hidden !important;
  }

  /* Top Screen: Screen 0 bounds [0, env(viewport-segment-bottom 0 0, calc(50vh - 10px))] */
  #streetview-viewport {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--duo-screen1-height, env(viewport-segment-bottom 0 0, calc(50vh - 10px))) !important;
    width: 100% !important;
    border-radius: 0 0 16px 16px !important;
    z-index: 10 !important;
  }

  /* Mechanical Hinge Gap: calc(env(viewport-segment-top 0 1, calc(50vh + 10px)) - env(viewport-segment-bottom 0 0, calc(50vh - 10px)))
     Bottom Screen: Screen 1 bounds with dark glass cockpit styling */
  #streetview-cockpit-console,
  #duo-tabletop-console {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    position: absolute !important;
    top: calc(var(--duo-hinge-y, env(viewport-segment-bottom 0 0, calc(50vh - 10px))) + var(--duo-hinge-height, calc(env(viewport-segment-top 0 1, calc(50vh + 10px)) - env(viewport-segment-bottom 0 0, calc(50vh - 10px))))) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--duo-screen2-height, calc(100vh - env(viewport-segment-top 0 1, calc(50vh + 10px)))) !important;
    background: rgba(8, 20, 16, 0.96) !important;
    backdrop-filter: blur(32px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 25 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #streetview-cockpit-console .cockpit-module-1 {
    grid-column: 1 / -1 !important;
    display: flex !important;
  }
  #streetview-cockpit-console .cockpit-module-2 {
    grid-column: 1 !important;
    display: flex !important;
  }
  #streetview-cockpit-console .cockpit-module-3 {
    grid-column: 2 !important;
    display: flex !important;
  }
  #streetview-cockpit-console #btn-demo-walk {
    display: inline-flex !important;
  }
}

/* Symmetrical Fallback Rules for Tabletop / Laptop Mode via Classes */
:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #view-streetview,
:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #view-map {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  bottom: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #streetview-viewport {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--duo-screen1-height, calc(50vh - 10px)) !important;
  width: 100% !important;
  border-radius: 0 0 16px 16px !important;
  z-index: 10 !important;
}

:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #streetview-cockpit-console,
:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #duo-tabletop-console {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  position: absolute !important;
  top: calc(var(--duo-hinge-y, calc(50vh - 10px)) + var(--duo-hinge-height, 20px)) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--duo-screen2-height, calc(50vh - 10px)) !important;
  background: rgba(8, 20, 16, 0.96) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px 16px 0 0 !important;
  z-index: 25 !important;
  overflow-y: auto !important;
  padding: 12px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #streetview-cockpit-console .cockpit-module-1 {
  grid-column: 1 / -1 !important;
  display: flex !important;
}
:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #streetview-cockpit-console .cockpit-module-2 {
  grid-column: 1 !important;
  display: flex !important;
}
:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #streetview-cockpit-console .cockpit-module-3 {
  grid-column: 2 !important;
  display: flex !important;
}
:is(.iphone-duo-dual-screen.duo-laptop-mode, .duo-laptop-mode, .duo-tabletop-mode, [data-duo-posture="laptopMode"]) #streetview-cockpit-console #btn-demo-walk {
  display: inline-flex !important;
}