:root {
  color-scheme: dark;
  --luma-color-app: #171512;
  --luma-color-map-overlay: rgba(25, 23, 20, 0.88);
  --luma-surface-primary: #24211d;
  --luma-surface-sheet: var(--luma-surface-primary);
  --luma-surface-elevated: #2c2823;
  --luma-surface-grouped: rgba(255, 248, 235, 0.045);
  --luma-surface-interactive: rgba(255, 248, 235, 0.065);
  --luma-surface-pressed: rgba(255, 248, 235, 0.11);
  --luma-surface-selected: rgba(237, 181, 72, 0.14);
  --luma-text-primary: #fff8eb;
  --luma-text-secondary: #d8cdbd;
  --luma-text-muted: #a99e90;
  --luma-text-inverse: #221a0e;
  --luma-text-link: #f6ca70;
  --luma-text-error: #dc766b;
  --luma-accent: #edb548;
  --luma-accent-strong: #f6ca70;
  --luma-accent-hover: #f2be57;
  --luma-accent-pressed: #dca33c;
  --luma-accent-soft: rgba(237, 181, 72, 0.14);
  --luma-success: #93c99d;
  --luma-resolved: var(--luma-success);
  --luma-info: #8fb9d1;
  --luma-limited: #b8a5cf;
  --luma-warning: #dda45d;
  --luma-error: #dc766b;
  --luma-destructive: var(--luma-error);
  --luma-unavailable: #91897e;
  --luma-divider: rgba(255, 248, 235, 0.1);
  --luma-focus-ring: #f8d486;
  --luma-scrim: rgba(13, 11, 9, 0.48);
  --luma-font-display: "Avenir Next", "Segoe UI Variable Display", ui-rounded, system-ui, sans-serif;
  --luma-font-body: "Segoe UI Variable Text", "Avenir Next", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --luma-type-display-size: clamp(1.55rem, 6vw, 2rem);
  --luma-type-sheet-size: clamp(1.25rem, 5vw, 1.55rem);
  --luma-type-section-size: 0.92rem;
  --luma-type-card-size: 0.88rem;
  --luma-type-body-size: 0.88rem;
  --luma-type-secondary-size: 0.78rem;
  --luma-type-label-size: 0.75rem;
  --luma-type-metadata-size: 0.68rem;
  --luma-type-button-size: 0.84rem;
  --luma-type-status-size: 0.72rem;
  --luma-radius-sheet: 28px;
  --luma-radius-card: 18px;
  --luma-radius-row: 14px;
  --luma-radius-button: 14px;
  --luma-radius-chip: 11px;
  --luma-radius-art: 12px;
  --luma-elevation-sheet: 0 -14px 42px rgba(11, 8, 6, 0.32);
  --luma-elevation-raised: 0 12px 30px rgba(11, 8, 6, 0.24);
  --luma-elevation-overlay: 0 18px 48px rgba(8, 6, 4, 0.38);
  --luma-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bg: var(--luma-color-app);
  --charcoal: #1d1a17;
  --panel: var(--luma-color-map-overlay);
  --panel-strong: rgba(36, 33, 29, 0.97);
  --panel-soft: rgba(44, 40, 35, 0.72);
  --line: var(--luma-divider);
  --text: var(--luma-text-primary);
  --muted: var(--luma-text-secondary);
  --subtle: var(--luma-text-muted);
  --gold: var(--luma-accent);
  --gold-strong: var(--luma-accent-strong);
  --gold-soft: var(--luma-accent-strong);
  --green: var(--luma-success);
  --green-deep: #6fae78;
  --run-blue: #65a7ff;
  --run-blue-soft: #9cc8ff;
  --yellow: #e8c05c;
  --orange: #d9824b;
  --red: var(--luma-error);
  --grey: #91897e;
  --shadow: var(--luma-elevation-overlay);
  --radius: var(--luma-radius-sheet);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --tap-target: 44px;
  --motion-fast: 170ms;
  --motion-normal: 240ms;
  --motion-major: 280ms;
  /* Map overlay order: map -> map features -> puck -> controls -> HUD -> maneuver -> sheets -> critical. */
  --layer-map: 0;
  --layer-map-features: 5;
  --layer-user-puck: 8;
  --layer-map-controls: 12;
  --layer-journey-hud: 20;
  --layer-maneuver: 21;
  --layer-major-sheet: 40;
  --layer-critical: 72;
  --layer-prompt: 71;
  --layer-dialog: 72;
  --search-font: var(--luma-font-body);
  --body-font: var(--luma-font-body);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  overflow-x: hidden;
  overflow: clip;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(231, 178, 77, 0.18), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(111, 174, 120, 0.08), transparent 26%),
    linear-gradient(180deg, #191713 0%, #0f0e0c 100%);
  color: var(--text);
  font-family: var(--luma-font-body);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

input,
textarea,
select {
  font-size: max(16px, 1rem);
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-strong);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(18, 17, 15, 0.78);
}

img,
svg {
  max-width: 100%;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  height: min(100dvh, 932px);
  min-height: min(720px, 100dvh);
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
  background: var(--bg);
  border: 1px solid rgba(244, 234, 215, 0.09);
  box-shadow: 0 30px 100px rgba(14, 9, 4, 0.68);
  isolation: isolate;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.app-splash {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 38%, rgba(231, 178, 77, 0.2), transparent 28%),
    radial-gradient(circle at 50% 62%, rgba(111, 174, 120, 0.09), transparent 30%),
    linear-gradient(180deg, #171511 0%, #0b0a08 100%);
  animation: splashExit 900ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}

.splash-logo-frame {
  position: relative;
  width: min(44vw, 184px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.14);
  border-radius: 38px;
  background: #050504;
  box-shadow:
    0 0 0 1px rgba(231, 178, 77, 0.08),
    0 0 34px rgba(231, 178, 77, 0.25),
    0 22px 54px rgba(0, 0, 0, 0.45);
  animation: splashLogoIn 1300ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.splash-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}

.splash-night-scene {
  --splash-scroll: 0px;
  position: relative;
  width: min(76vw, 286px);
  height: 282px;
  overflow: hidden;
  border-bottom: 1px solid rgba(243, 201, 106, 0.12);
  background:
    linear-gradient(116deg, transparent 0 48%, rgba(244, 234, 215, 0.025) 49% 50%, transparent 51% 100%),
    linear-gradient(180deg, rgba(27, 25, 22, 0.18), rgba(8, 8, 7, 0.76));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 91%, transparent 100%);
  animation: splashSceneIn 1100ms ease both;
}

.splash-streetlight {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: 44px;
  width: 3px;
  height: 96px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a352c, #171613);
  box-shadow: 1px 0 0 rgba(243, 201, 106, 0.16);
}

.splash-streetlight::after {
  content: "";
  position: absolute;
  left: -17px;
  bottom: -2px;
  width: 22px;
  height: 7px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #4a4235, #211f1a);
  box-shadow: 0 3px 9px rgba(243, 201, 106, 0.36);
}

.splash-streetlight::before {
  content: "";
  position: absolute;
  left: -92px;
  top: 91px;
  width: 166px;
  height: 172px;
  clip-path: polygon(41% 0, 58% 0, 92% 100%, 7% 100%);
  background: linear-gradient(180deg, rgba(243, 201, 106, 0.16), rgba(231, 178, 77, 0.04) 68%, transparent);
  filter: blur(4px);
  pointer-events: none;
}

.splash-light-pool {
  position: absolute;
  z-index: 1;
  right: 4px;
  bottom: 18px;
  width: 184px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(243, 201, 106, 0.17), rgba(231, 178, 77, 0.04) 54%, transparent 76%);
  filter: blur(5px);
  animation: splashLightBreathe 2400ms ease-in-out infinite;
}

.splash-route-trace {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 5px;
  width: 100%;
  height: 76px;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(243, 201, 106, 0.38));
}

.splash-route-trace path {
  fill: none;
  stroke: rgba(243, 201, 106, 0.74);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: splashRouteDraw 1900ms 260ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.splash-walking-figure {
  position: absolute;
  z-index: 4;
  left: calc(50% - 58px);
  bottom: 26px;
  width: 92px;
  height: 180px;
  overflow: visible;
  opacity: 0.96;
  filter:
    drop-shadow(2px 0 2px rgba(231, 178, 77, 0.22))
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
  transform: translate3d(var(--splash-scroll), 0, 0);
  transition: transform 180ms ease-out;
}

.splash-figure-shadow {
  fill: rgba(0, 0, 0, 0.55);
  filter: url(#splash-soft-shadow);
}

.splash-figure-motion {
  transform-box: view-box;
  transform-origin: 46px 128px;
  animation: splashFigureSway 1900ms ease-in-out infinite;
}

.splash-figure-coat,
.splash-figure-neck,
.splash-figure-head {
  fill: url(#splash-figure-shadow) #11110f;
  stroke: url(#splash-figure-rim) rgba(231, 178, 77, 0.48);
  stroke-width: 1.2;
}

.splash-figure-rim,
.splash-figure-head-rim {
  fill: none;
  stroke: rgba(243, 201, 106, 0.78);
  stroke-width: 1.35;
  stroke-linecap: round;
  filter: blur(0.25px);
}

.splash-figure-leg,
.splash-figure-arm {
  fill: none;
  stroke: #11110f;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.splash-figure-leg.front,
.splash-figure-arm.front {
  stroke: #201d18;
  filter: drop-shadow(1.5px 0 0 rgba(231, 178, 77, 0.44));
}

.splash-figure-leg,
.splash-figure-arm {
  transform-box: view-box;
}

.splash-figure-leg {
  transform-origin: 46px 110px;
}

.splash-figure-arm {
  transform-origin: 46px 60px;
}

.splash-figure-leg.rear {
  animation: splashLegRear 1900ms ease-in-out infinite;
}

.splash-figure-leg.front {
  animation: splashLegFront 1900ms ease-in-out infinite;
}

.splash-figure-arm.rear {
  animation: splashArmRear 1900ms ease-in-out infinite;
}

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

@keyframes splashFigureSway {
  0%, 100% { transform: translate(-1px, 1px) rotate(-0.7deg); }
  50% { transform: translate(1px, -1px) rotate(0.7deg); }
}

@keyframes splashLegRear {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(-5deg); }
}

@keyframes splashLegFront {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

@keyframes splashArmRear {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(3deg); }
}

@keyframes splashLightBreathe {
  0%, 100% { opacity: 0.6; transform: scaleX(0.94); }
  50% { opacity: 1; transform: scaleX(1.04); }
}

@keyframes splashRouteDraw {
  to { stroke-dashoffset: 0; }
}

.splash-wordmark {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  animation: splashTextIn 1400ms ease both;
}

.splash-wordmark h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(40px, 13vw, 68px);
  font-weight: 800;
  line-height: 0.95;
  text-shadow: 0 0 22px rgba(244, 234, 215, 0.14);
}

.splash-wordmark p {
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(231, 178, 77, 0.22);
}

.app-splash.hidden {
  display: none;
}

.map-experience,
.map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.map-viewport {
  touch-action: none;
  cursor: default;
  background: #302c27;
}

.luma-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: #37322c;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 180ms ease;
}

.map-loading-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  color: rgba(244, 234, 215, 0.72);
  background:
    radial-gradient(circle at 50% 46%, rgba(231, 178, 77, 0.09), transparent 26%),
    linear-gradient(160deg, #342f2a 0%, #292622 58%, #24221f 100%);
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.map-loading-surface small {
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-loading-orbit {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(244, 234, 215, 0.14);
  border-top-color: rgba(231, 178, 77, 0.88);
  border-radius: 50%;
  animation: mapLoadingOrbit 900ms linear infinite;
}

.luma-map::before,
.luma-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.luma-map.mapboxgl-map {
  position: absolute;
  width: 100%;
  height: 100%;
}

.luma-map a,
.luma-map button,
.luma-map .mapboxgl-ctrl-attrib {
  pointer-events: auto;
}

.luma-map .mapboxgl-canvas {
  outline: 0;
}

.luma-maplibre-marker-host {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: none !important;
}

.luma-maplibre-marker-host[hidden] {
  display: none !important;
  pointer-events: none;
}

.luma-maplibre-marker-host .luma-leaflet-marker {
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.luma-maplibre-marker-host:focus-visible .luma-leaflet-marker {
  outline: 2px solid rgba(255, 236, 180, 0.92);
  outline-offset: 3px;
}

.luma-maplibre-marker-host:hover,
.luma-maplibre-marker-host:focus-visible {
  z-index: 1000 !important;
}

.luma-map .mapboxgl-ctrl-bottom-right {
  right: 8px;
  bottom: 82px;
}

.luma-map .mapboxgl-ctrl-bottom-left {
  left: 112px;
  bottom: 76px;
}

.luma-map .mapboxgl-ctrl-top-left {
  top: 176px;
  left: 12px;
}

.luma-map .mapboxgl-ctrl-group {
  overflow: hidden;
  border: 1px solid rgba(244, 225, 190, 0.12);
  border-radius: 14px;
  background: rgba(35, 31, 27, 0.84);
  box-shadow: 0 8px 22px rgba(18, 15, 12, 0.2);
  backdrop-filter: blur(10px);
}

.luma-map .mapboxgl-ctrl-group button {
  background-color: transparent;
}

.luma-map .mapboxgl-ctrl-icon {
  filter: invert(88%) sepia(9%) saturate(389%) hue-rotate(351deg) brightness(92%);
}

.luma-map .mapboxgl-ctrl-attrib {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid rgba(244, 225, 190, 0.11);
  border-radius: 9px;
  background: rgba(35, 31, 27, 0.9);
  color: #e0d6c7;
  font-size: 10px;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(18, 15, 12, 0.18);
  backdrop-filter: blur(10px);
}

.luma-map .mapboxgl-ctrl-attrib-inner {
  display: block;
  white-space: normal;
}

.luma-map .mapboxgl-ctrl-attrib a {
  color: #f0c56c;
  text-decoration-color: rgba(240, 197, 108, 0.46);
  text-underline-offset: 2px;
}

.luma-map .mapboxgl-ctrl-attrib-button {
  display: block;
}

.luma-map::before {
  z-index: 245;
  background: linear-gradient(180deg, rgba(68, 53, 42, 0.2), rgba(49, 42, 37, 0.25));
  mix-blend-mode: multiply;
}

.luma-map::after {
  z-index: 255;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(28, 31, 37, 0.035), transparent 42%, rgba(38, 30, 23, 0.055)),
    radial-gradient(ellipse at 50% 48%, transparent 72%, rgba(27, 22, 18, 0.12) 100%);
}

.luma-map.mapbox-base-ready {
  background: #f3efe7;
}

.luma-map.mapbox-base-ready::before {
  background: none;
  mix-blend-mode: normal;
}

.luma-map.mapbox-base-ready::after {
  opacity: 0;
  background: none;
}

.phone-shell.map-engine-ready .luma-map {
  opacity: 1;
}

.phone-shell.map-engine-ready .map-loading-surface {
  opacity: 0;
  visibility: hidden;
}

.phone-shell.map-engine-ready .map-viewport {
  cursor: default;
}

@keyframes mapLoadingOrbit {
  to {
    transform: rotate(360deg);
  }
}

.luma-leaflet-marker.destination {
  position: relative;
  z-index: 5;
  width: 36px;
  height: 36px;
  overflow: visible;
  color: #fff1b8;
  border-color: rgba(243, 201, 106, 0.44);
  background: rgba(22, 20, 16, 0.92);
  box-shadow:
    0 0 0 4px rgba(231, 178, 77, 0.08),
    0 0 24px rgba(243, 201, 106, 0.64),
    0 7px 18px rgba(18, 12, 6, 0.34);
}

.luma-leaflet-marker.destination svg {
  width: 25px;
  height: 34px;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255, 225, 65, 0.84));
}

.luma-leaflet-marker.destination::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 1px solid rgba(243, 201, 106, 0.34);
  border-radius: 50%;
  animation: destinationLampPulse 2.1s ease-out infinite;
  will-change: transform, opacity;
}

.luma-route-tooltip {
  font-weight: 700;
}

.luma-map.is-zooming .luma-leaflet-marker,
.luma-map.is-zooming .campus-map-logo {
  transition: none !important;
}

.luma-leaflet-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(244, 234, 215, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 246, 220, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(47, 43, 37, 0.98), rgba(24, 22, 19, 0.98));
  color: var(--gold-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 229, 0.08),
    0 0 0 3px rgba(231, 178, 77, 0.07),
    0 0 11px rgba(231, 178, 77, 0.24),
    0 6px 14px rgba(18, 12, 6, 0.32);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.luma-leaflet-marker svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}

.luma-leaflet-marker.report {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 247, 224, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(47, 43, 37, 0.98), rgba(24, 22, 19, 0.98));
}

.luma-leaflet-marker.report svg {
  position: relative;
  z-index: 1;
  width: 12.5px;
  height: 12.5px;
  stroke-width: 1.85;
  filter: drop-shadow(0 0 3px currentColor);
}

.luma-leaflet-marker.report.red {
  color: #f2a08f;
  border-color: rgba(242, 160, 143, 0.54);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 228, 220, 0.13), transparent 35%),
    linear-gradient(145deg, rgba(66, 38, 32, 0.98), rgba(29, 23, 20, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 230, 0.08),
    0 0 0 3px rgba(216, 106, 93, 0.07),
    0 0 12px rgba(216, 106, 93, 0.28),
    0 6px 14px rgba(18, 12, 6, 0.32);
}

.luma-leaflet-marker.report.orange {
  color: #f3c06d;
  border-color: rgba(243, 192, 109, 0.5);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 240, 207, 0.14), transparent 35%),
    linear-gradient(145deg, rgba(65, 45, 28, 0.98), rgba(29, 24, 20, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 215, 0.08),
    0 0 0 3px rgba(217, 130, 75, 0.07),
    0 0 12px rgba(217, 130, 75, 0.27),
    0 6px 14px rgba(18, 12, 6, 0.32);
}

.luma-leaflet-marker.report.green {
  color: #9fdaa9;
  border-color: rgba(159, 218, 169, 0.52);
  background:
    radial-gradient(circle at 35% 25%, rgba(225, 255, 229, 0.13), transparent 35%),
    linear-gradient(145deg, rgba(34, 57, 38, 0.98), rgba(23, 29, 23, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(231, 255, 234, 0.08),
    0 0 0 3px rgba(139, 203, 150, 0.07),
    0 0 12px rgba(139, 203, 150, 0.27),
    0 6px 14px rgba(18, 12, 6, 0.32);
}

.luma-leaflet-marker.alert {
  width: 21px;
  height: 21px;
  border-color: rgba(243, 201, 106, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 246, 220, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(45, 41, 35, 0.98), rgba(24, 22, 19, 0.98));
  color: #f3c96a;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 229, 0.07),
    0 0 0 3px rgba(231, 178, 77, 0.04),
    0 0 9px rgba(231, 178, 77, 0.18),
    0 5px 12px rgba(18, 12, 6, 0.28);
}

.luma-leaflet-marker.alert svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.85;
  filter: drop-shadow(0 0 2px currentColor);
}

.luma-leaflet-marker.alert.dark {
  color: #eab86a;
}

.luma-leaflet-marker.alert.concern {
  color: #e8aa9c;
  border-color: rgba(232, 170, 156, 0.34);
  background: linear-gradient(145deg, rgba(57, 38, 34, 0.97), rgba(27, 23, 21, 0.98));
  box-shadow: 0 0 0 3px rgba(217, 154, 140, 0.05), 0 0 10px rgba(217, 154, 140, 0.2);
}

.luma-leaflet-marker.alert.blocked,
.luma-leaflet-marker.alert.other {
  color: #d8cdb9;
  border-color: rgba(216, 205, 185, 0.24);
}

.luma-leaflet-marker.alert.resolved {
  color: #9fdaa9;
  border-color: rgba(139, 203, 150, 0.3);
  opacity: 0.68;
}

.luma-leaflet-marker.safe {
  width: 22px;
  height: 22px;
  color: var(--green);
  border-color: rgba(139, 203, 150, 0.38);
  background:
    radial-gradient(circle at 35% 27%, rgba(226, 255, 231, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(34, 50, 36, 0.98), rgba(22, 27, 23, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(231, 255, 234, 0.08),
    0 0 0 3px rgba(139, 203, 150, 0.07),
    0 0 12px rgba(139, 203, 150, 0.28),
    0 6px 14px rgba(18, 12, 6, 0.26);
}

.luma-leaflet-marker.safe svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 2px currentColor);
}

.luma-leaflet-marker.safe.symbol-shop,
.luma-leaflet-marker.safe.symbol-cafe,
.luma-leaflet-marker.safe.symbol-lamp,
.luma-leaflet-marker.safe.symbol-publicBuilding {
  color: #f3c96a;
  border-color: rgba(243, 201, 106, 0.38);
  background: linear-gradient(145deg, rgba(54, 45, 29, 0.98), rgba(26, 23, 19, 0.98));
  box-shadow: 0 0 0 3px rgba(231, 178, 77, 0.06), 0 0 12px rgba(231, 178, 77, 0.25), 0 6px 14px rgba(18, 12, 6, 0.26);
}

.luma-leaflet-marker.safe.symbol-hospital {
  color: #f0b8aa;
  border-color: rgba(240, 184, 170, 0.4);
  background: linear-gradient(145deg, rgba(57, 39, 35, 0.98), rgba(27, 23, 21, 0.98));
}

.luma-leaflet-marker.safe.symbol-bus,
.luma-leaflet-marker.safe.symbol-train,
.luma-leaflet-marker.safe.symbol-taxi {
  color: #d8d2c3;
  border-color: rgba(216, 210, 195, 0.34);
  background: linear-gradient(145deg, rgba(47, 45, 40, 0.98), rgba(24, 23, 21, 0.98));
}

.luma-leaflet-marker.safe.symbol-nightlife {
  color: #f1bd7d;
  border-color: rgba(241, 189, 125, 0.42);
  background: linear-gradient(145deg, rgba(60, 42, 31, 0.98), rgba(27, 23, 20, 0.98));
  box-shadow: 0 0 0 3px rgba(235, 165, 102, 0.06), 0 0 13px rgba(235, 165, 102, 0.28), 0 6px 14px rgba(18, 12, 6, 0.26);
}

.luma-leaflet-marker.safe.closed {
  color: #f08d7c;
  border-color: rgba(240, 141, 124, 0.46);
  opacity: 0.76;
  box-shadow: 0 0 0 3px rgba(240, 141, 124, 0.08), 0 0 14px rgba(240, 141, 124, 0.22), 0 8px 18px rgba(18, 12, 6, 0.28);
}

.luma-leaflet-marker.safe.unknown,
.luma-leaflet-marker.safe.restricted {
  color: var(--muted);
  border-color: rgba(244, 234, 215, 0.16);
  opacity: 0.72;
  box-shadow: 0 0 0 3px rgba(244, 234, 215, 0.05), 0 8px 18px rgba(18, 12, 6, 0.28);
}

.luma-leaflet-marker.safe.nearby-highlight {
  transform: scale(1.1);
  border-color: rgba(139, 203, 150, 0.82);
  box-shadow: 0 0 0 8px rgba(139, 203, 150, 0.14), 0 0 26px rgba(139, 203, 150, 0.5);
}

/* Luma pathfinder marker restored from the approved pre-regression visual. */
.luma-leaflet-marker.user {
  --luma-walker-step: 0.96s;
  --turn-lean: 0deg;
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 32px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #e7b24d;
  overflow: visible;
  scale: 1;
}

.phone-shell.navigation-camera:not(.mapbox-native-bearing) .luma-leaflet-marker.user {
  scale: 1;
}

.luma-leaflet-marker.user::before,
.luma-leaflet-marker.user::after,
.luma-leaflet-marker.user.has-heading::before {
  content: none;
  display: none;
}

.luma-leaflet-marker.user .luma-direction-beacon {
  position: relative;
  z-index: 2;
  display: block;
  width: 32px;
  height: 42px;
  overflow: visible;
  filter:
    drop-shadow(0 1.5px 2.4px rgba(20, 14, 7, 0.3))
    drop-shadow(0 0 4px rgba(255, 176, 31, 0.18));
}

.luma-direction-heading {
  transform-box: view-box;
  transform-origin: 32px 39.4px;
  transform: rotate(var(--heading, 0deg));
  will-change: transform;
}

.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-steps {
  opacity: 0;
}

.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-shadow {
  opacity: 0.58;
}

.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-shell {
  opacity: 0.86;
}

.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-inner-shade,
.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-front-light {
  opacity: 0.78;
}

.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-ring {
  stroke-width: 3.6;
}

.luma-leaflet-marker.user:not(.has-heading) .luma-pathfinder-aura {
  opacity: 0.42;
}

.luma-leaflet-marker.user[data-heading-confidence="low"] .luma-pathfinder-aura,
.luma-leaflet-marker.user[data-position-state="degraded"] .luma-pathfinder-aura {
  opacity: 0.48;
}

.luma-leaflet-marker.user[data-position-state="stale"] .luma-direction-beacon {
  opacity: 0.76;
  filter:
    saturate(0.72)
    drop-shadow(0 1.5px 2.4px rgba(20, 14, 7, 0.28));
}

.luma-leaflet-marker.user.is-walking .luma-direction-heading {
  transform-origin: 32px 39.4px;
}

.luma-pathfinder-aura {
  fill: rgba(255, 184, 34, 0.34);
  filter: url(#luma-pathfinder-glow);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: lumaPathfinderAura 2100ms ease-in-out infinite;
}

.luma-pathfinder-shadow {
  fill: none;
  stroke: rgba(55, 31, 10, 0.32);
  stroke-width: 6;
  stroke-linecap: round;
  filter: blur(1.6px);
  opacity: 0.62;
}

.luma-pathfinder-shell {
  fill: url(#luma-pathfinder-shell) #ffb51f;
  stroke: rgba(255, 238, 153, 0.82);
  stroke-width: 1.25;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 3px rgba(255, 204, 79, 0.62))
    drop-shadow(0 2px 3px rgba(23, 14, 5, 0.38));
}

.luma-pathfinder-inner-shade {
  fill: rgba(29, 19, 8, 0.18);
}

.luma-pathfinder-front-light {
  fill: rgba(255, 237, 140, 0.88);
  filter:
    drop-shadow(0 0 2px rgba(255, 244, 184, 0.92))
    drop-shadow(0 0 7px rgba(255, 190, 42, 0.72));
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: lumaPathfinderFrontLight 1800ms ease-in-out infinite;
}

.luma-pathfinder-ring {
  fill: rgba(34, 23, 9, 0.58);
  stroke: rgba(255, 216, 94, 0.5);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 2px rgba(255, 190, 42, 0.3));
}

.luma-pathfinder-orb {
  fill: url(#luma-pathfinder-core) #ffd84a;
  stroke: rgba(255, 250, 218, 0.94);
  stroke-width: 0.7;
  filter:
    drop-shadow(0 0 2px rgba(255, 246, 191, 0.94))
    drop-shadow(0 0 6px rgba(255, 180, 32, 0.58));
  transform-box: fill-box;
  transform-origin: center;
  animation: lumaPathfinderOrb 2100ms ease-in-out infinite;
}

.luma-pathfinder-glint {
  fill: rgba(255, 255, 244, 0.98);
  filter: blur(0.16px);
}

.luma-pathfinder-steps {
  pointer-events: none;
}

.luma-pathfinder-step {
  fill: rgba(255, 183, 45, 0.56);
  filter:
    drop-shadow(0 0 2px rgba(255, 180, 32, 0.48))
    drop-shadow(0 0 5px rgba(255, 176, 31, 0.24));
  opacity: 0.34;
  transform-box: fill-box;
  transform-origin: center;
}

.luma-pathfinder-step.step-one {
  opacity: 0.34;
  transform: rotate(-9deg) scale(0.74);
}

.luma-pathfinder-step.step-two {
  opacity: 0.22;
  transform: rotate(14deg) scale(0.63);
}

.luma-pathfinder-step.step-three {
  opacity: 0.16;
  transform: rotate(-13deg) scale(0.54);
}

.luma-leaflet-marker.user.is-walking .luma-pathfinder-step.step-one {
  animation: lumaPathfinderStepOne 960ms ease-in-out infinite;
}

.luma-leaflet-marker.user.is-walking .luma-pathfinder-step.step-two {
  animation: lumaPathfinderStepTwo 960ms ease-in-out infinite;
}

.luma-leaflet-marker.user.is-walking .luma-pathfinder-step.step-three {
  animation: lumaPathfinderStepThree 960ms ease-in-out infinite;
}

@keyframes lumaPathfinderAura {
  0%, 100% { opacity: 0.46; transform: scale(0.96); }
  50% { opacity: 0.78; transform: scale(1.035); }
}

@keyframes lumaPathfinderOrb {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.04); }
}

@keyframes lumaPathfinderFrontLight {
  0%, 100% { opacity: 0.72; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes lumaPathfinderStepOne {
  0%, 100% { opacity: 0.34; transform: translateY(0) rotate(-9deg) scale(0.7); }
  45% { opacity: 0.72; transform: translateY(-1.2px) rotate(-9deg) scale(0.8); }
}

@keyframes lumaPathfinderStepTwo {
  0%, 100% { opacity: 0.24; transform: translateY(0) rotate(14deg) scale(0.58); }
  45% { opacity: 0.5; transform: translateY(-0.8px) rotate(14deg) scale(0.68); }
}

@keyframes lumaPathfinderStepThree {
  0%, 100% { opacity: 0.16; transform: translateY(0) rotate(-13deg) scale(0.5); }
  45% { opacity: 0.34; transform: translateY(-0.5px) rotate(-13deg) scale(0.58); }
}

.top-hud {
  position: absolute;
  z-index: 12;
  top: max(12px, calc(env(safe-area-inset-top) + 10px));
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  display: grid;
  justify-items: end;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transform-origin: top left;
  transition:
    opacity 170ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear;
}

.brand-pill,
.icon-button,
.destination-pill,
.floating-card,
.community-pulse,
.map-controls,
.floating-nav,
.bottom-sheet,
.success-card,
.toast {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(42, 38, 32, 0.74), rgba(27, 25, 22, 0.72)),
    var(--panel);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
}

.brand-pill {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 7px 14px 7px 8px;
  border-radius: 21px;
  pointer-events: auto;
  transition:
    width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    flex-basis 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    min-height 220ms ease,
    padding 220ms ease,
    border-radius 220ms ease;
}

.brand-pill > div {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 150ms ease,
    transform 220ms ease;
}

.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 13px;
  object-fit: contain;
  object-position: center;
  background: #050504;
  box-shadow: 0 0 14px rgba(231, 178, 77, 0.32);
}

.brand-pill strong,
.brand-pill span {
  display: block;
}

.brand-pill strong {
  font-size: 17px;
  line-height: 1;
}

.brand-pill span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
}

.icon-button {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: 50%;
  color: var(--gold);
  pointer-events: auto;
  transition: width 200ms ease, opacity 150ms ease, transform 220ms ease;
}

.phone-shell.hud-compact .top-hud {
  opacity: 0;
  transform: translateY(-18px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 220ms;
}

.phone-shell.hud-compact .brand-pill {
  flex: 0 0 46px;
  width: 46px;
  min-height: 46px;
  padding: 5px;
  border-radius: 17px;
}

.phone-shell.hud-compact .brand-pill > div {
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
}

.phone-shell.hud-compact .brand-logo {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 12px;
}

.phone-shell.hud-compact .icon-button {
  width: 0;
  opacity: 0;
  transform: translateX(-8px) scale(0.9);
  pointer-events: none;
}

.destination-pill {
  position: absolute;
  z-index: 12;
  top: max(12px, calc(env(safe-area-inset-top) + 10px));
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  right: max(72px, calc(env(safe-area-inset-right) + 72px));
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: text;
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear;
}

.phone-shell.journey-active .destination-pill,
.phone-shell.routes-ready .destination-pill {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 240ms;
}

.phone-shell.hud-compact .destination-pill {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 220ms;
}

.destination-pill input,
.route-input input,
.sheet-field textarea,
.bottom-sheet select {
  width: 100%;
  border: 1px solid rgba(244, 234, 215, 0.11);
  background: rgba(244, 234, 215, 0.06);
  color: var(--text);
  outline: 0;
}

.destination-pill input {
  border: 0;
  background: transparent;
  font-family: var(--search-font);
  font-weight: 600;
  font-kerning: normal;
  font-optical-sizing: auto;
  letter-spacing: 0.006em;
  line-height: 1.3;
  text-rendering: optimizeLegibility;
  caret-color: var(--gold-strong);
  min-width: 0;
  cursor: text;
}

.destination-pill input::placeholder,
.route-input input::placeholder {
  color: var(--muted);
  font-family: var(--search-font);
  font-weight: 500;
  letter-spacing: 0.008em;
  opacity: 0.78;
}

.primary-button,
.secondary-button,
.success-actions button {
  border-radius: 999px;
  font-weight: 800;
}

.primary-button,
.success-actions button:first-child {
  background: var(--gold);
  color: #21180b;
}

.app-status-banner {
  position: absolute;
  z-index: 15;
  top: max(132px, calc(env(safe-area-inset-top) + 132px));
  left: max(16px, calc(env(safe-area-inset-left) + 16px));
  right: max(16px, calc(env(safe-area-inset-right) + 16px));
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid rgba(231, 178, 77, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 16%, rgba(231, 178, 77, 0.16), transparent 42%),
    rgba(34, 32, 28, 0.88);
  color: var(--text);
  box-shadow: 0 14px 36px rgba(18, 12, 6, 0.34);
  backdrop-filter: blur(18px);
  animation: statusBannerIn 220ms ease both;
}

.app-status-banner[hidden] {
  display: none !important;
}

.app-status-banner strong {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

.app-status-banner span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.floating-card {
  position: absolute;
  z-index: 13;
  left: 18px;
  right: 18px;
  border-radius: 22px;
  padding: 16px;
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms ease;
  backface-visibility: hidden;
}

.floating-card:not(.show) {
  visibility: hidden;
}

.alert-card {
  z-index: 35;
  top: 226px;
  left: 18px;
  right: auto;
  width: min(252px, calc(100% - 116px));
  padding: 11px 11px 10px;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 19px;
  transform: translateY(10px) scale(0.98);
  background:
    radial-gradient(circle at 14% 20%, rgba(231, 178, 77, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(34, 32, 28, 0.9), rgba(27, 25, 22, 0.84)),
    var(--panel);
  box-shadow: 0 14px 34px rgba(18, 12, 6, 0.38), 0 0 18px rgba(231, 178, 77, 0.08);
  backdrop-filter: blur(18px);
}

.floating-card.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  will-change: transform, opacity;
}

.floating-card.rating-complete {
  transform: translateY(8px) scale(0.985);
  opacity: 0;
}

.alert-card.show {
  transform: translateY(0) scale(1);
}

.alert-card .card-close {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.verification-card {
  top: 226px;
  left: 18px;
  right: auto;
  width: min(252px, calc(100% - 116px));
  padding: 11px 11px 10px;
  border-radius: 19px;
}

.rating-card {
  top: 226px;
  left: 18px;
  right: auto;
  width: min(252px, calc(100% - 116px));
  padding: 11px 38px 11px 12px;
  border-radius: 19px;
}

.rating-card .card-close {
  top: 9px;
  right: 9px;
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.rating-card > h2 {
  margin-bottom: 9px;
  color: rgba(255, 247, 231, 0.94);
  font-size: 14px;
  line-height: 1.25;
}

.rating-card .inline-stars {
  margin-top: 0;
}

.rating-card .stars {
  gap: 5px;
}

.rating-card .stars button {
  --star-size: 31px;
}

.rating-card .rating-scale {
  display: none;
}

.quick-rating-location,
.quick-rating-status {
  margin: 7px 0 0;
  color: rgba(246, 238, 222, 0.68);
  font-size: 0.72rem;
  line-height: 1.35;
}

.quick-rating-status[data-quick-rating-state="saved"] {
  color: #a9dc91;
}

.quick-rating-status[data-quick-rating-state="failed"] {
  color: #f1ad9e;
}

.nudge-card {
  top: 226px;
  left: 18px;
  right: auto;
  width: min(252px, calc(100% - 116px));
  padding: 11px 38px 12px 12px;
  border-radius: 19px;
}

.nudge-card h2 {
  font-size: 14px;
  line-height: 1.2;
}

.nudge-stars {
  gap: 5px;
  margin-top: 11px;
}

.stars.nudge-stars button {
  --star-size: 31px;
}

.safe-nearby-card {
  z-index: 34;
  top: 218px;
  left: 18px;
  right: auto;
  width: min(182px, calc(100% - 184px));
  padding: 8px;
  border-radius: 16px;
  border-color: rgba(139, 203, 150, 0.24);
  background:
    radial-gradient(circle at 12% 28%, rgba(139, 203, 150, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(42, 38, 32, 0.78), rgba(27, 25, 22, 0.76)),
    var(--panel);
  box-shadow:
    0 16px 42px rgba(18, 12, 6, 0.38),
    0 0 28px rgba(139, 203, 150, 0.1);
}

.safe-nearby-card::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(139, 203, 150, 0.62);
}

.floating-card.safe-nearby-card p,
.floating-card.safe-nearby-card h2,
.floating-card.safe-nearby-card strong {
  padding-left: 13px;
}

.floating-card.safe-nearby-card p {
  margin-bottom: 3px;
  color: var(--green);
  font-size: 8px;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.floating-card.safe-nearby-card h2 {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.12;
}

.floating-card.safe-nearby-card strong {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.22;
}

.safe-nearby-actions {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.safe-nearby-actions button {
  min-height: 26px;
  padding: 0 7px;
  font-size: 9px;
}

.safe-nearby-actions button:first-child {
  background: var(--green);
  color: #102015;
  box-shadow: 0 0 18px rgba(139, 203, 150, 0.24);
}

.safe-nearby-actions button:last-child {
  min-width: 58px;
  background: rgba(139, 203, 150, 0.1);
  color: var(--green);
}

.run-context-card {
  z-index: 35;
  top: 218px;
  left: 18px;
  right: auto;
  width: min(250px, calc(100% - 112px));
  padding: 12px;
  border: 1px solid rgba(139, 203, 150, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 14% 18%, rgba(139, 203, 150, 0.16), transparent 38%),
    radial-gradient(circle at 86% 12%, rgba(231, 178, 77, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(36, 35, 30, 0.9), rgba(25, 24, 21, 0.84)),
    var(--panel);
  box-shadow:
    0 16px 42px rgba(18, 12, 6, 0.38),
    0 0 24px rgba(139, 203, 150, 0.08);
  backdrop-filter: blur(18px);
}

.run-context-card .card-close {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.floating-card.run-context-card p {
  margin-bottom: 5px;
  color: var(--green);
  font-size: 9px;
  line-height: 1.1;
}

.floating-card.run-context-card h2 {
  max-width: calc(100% - 28px);
  font-size: 14px;
  line-height: 1.18;
}

.floating-card.run-context-card > strong {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.run-context-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.run-context-metrics span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(244, 234, 215, 0.08);
  border-radius: 14px;
  background: rgba(18, 17, 15, 0.3);
}

.run-context-metrics strong,
.run-context-metrics small {
  display: block;
}

.run-context-metrics strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.05;
}

.run-context-metrics small {
  margin-top: 2px;
  color: var(--subtle);
  font-size: 9px;
  font-weight: 800;
}

.run-context-actions {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.run-context-actions button {
  min-height: 30px;
  padding-inline: 8px;
  font-size: 10px;
}

.run-context-actions button:first-child {
  background: var(--green);
  color: #102015;
  box-shadow: 0 0 18px rgba(139, 203, 150, 0.22);
}

.run-context-actions button:last-child {
  background: rgba(139, 203, 150, 0.1);
  color: var(--green);
}

.phone-shell.run-mode [data-sheet="pin-detail"] .location-preview-photo,
.phone-shell.run-mode [data-sheet="safe-zone"] .location-preview-photo,
.phone-shell.run-mode [data-sheet="reports"] .report-photo-top {
  display: none;
}

.phone-shell.hud-compact .alert-card,
.phone-shell.hud-compact .verification-card,
.phone-shell.hud-compact .rating-card,
.phone-shell.hud-compact .nudge-card,
.phone-shell.hud-compact .safe-nearby-card,
.phone-shell.hud-compact .run-context-card {
  top: max(14px, calc(env(safe-area-inset-top) + 12px));
}

.phone-shell.hud-compact .alert-card,
.phone-shell.hud-compact .verification-card,
.phone-shell.hud-compact .rating-card,
.phone-shell.hud-compact .nudge-card {
  left: 12px;
  width: min(232px, calc(100% - 84px));
  padding-top: 10px;
  padding-bottom: 9px;
  border-radius: 17px;
}

.phone-shell.hud-compact .verification-card h2,
.phone-shell.hud-compact .nudge-card h2 {
  padding-right: 20px;
  font-size: 13px;
  line-height: 1.2;
}

.phone-shell.hud-compact .verification-card p,
.phone-shell.hud-compact .nudge-card p {
  margin-bottom: 5px;
  font-size: 9px;
}

.phone-shell.hud-compact .quick-actions {
  gap: 5px;
  margin-top: 8px;
}

.phone-shell.hud-compact .quick-actions button {
  min-height: 32px;
  padding-inline: 7px;
  font-size: 10px;
}

.phone-shell.hud-compact .rating-card .stars button,
.phone-shell.hud-compact .nudge-card .stars button {
  --star-size: 28px;
}

.phone-shell.hud-compact .safe-nearby-card {
  left: 12px;
  width: min(176px, calc(100% - 150px));
}

.phone-shell.hud-compact .run-context-card {
  left: 12px;
  width: min(232px, calc(100% - 84px));
  padding: 10px;
}

.phone-shell.prompt-active .journey-status-card,
.phone-shell.prompt-active .map-live-update.show {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
}

.map-live-update {
  position: absolute;
  z-index: 12;
}

.map-live-update {
  top: 246px;
  left: 22px;
  max-width: 260px;
  min-height: 36px;
  display: grid;
  place-items: center start;
  padding: 8px 12px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 999px;
  background: rgba(34, 32, 28, 0.74);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(18, 12, 6, 0.32);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.map-live-update.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.map-live-update,
.map-live-update.show {
  display: none !important;
}

.navigation-instruction-banner {
  position: absolute;
  z-index: 15;
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  right: max(68px, calc(env(safe-area-inset-right) + 68px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 10px 13px 10px 10px;
  border: 1px solid rgba(244, 234, 215, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(231, 178, 77, 0.17), transparent 45%),
    rgba(28, 26, 23, 0.9);
  color: var(--text);
  box-shadow: 0 18px 42px rgba(18, 12, 6, 0.38);
  backdrop-filter: blur(20px);
  animation: navigationBannerIn 220ms ease both;
}

.navigation-instruction-banner[hidden] {
  display: none !important;
}

.navigation-maneuver-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(243, 201, 106, 0.35);
  border-radius: 16px;
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold-soft);
  font-size: 29px;
  font-weight: 950;
  line-height: 1;
}

.navigation-maneuver-icon[data-maneuver="arrive"] {
  color: #9ed7a8;
  border-color: rgba(139, 203, 150, 0.35);
  background: rgba(139, 203, 150, 0.12);
}

.navigation-instruction-copy {
  min-width: 0;
}

.navigation-instruction-copy > strong {
  display: block;
  overflow: hidden;
  color: #fffaf0;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-instruction-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 5px;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 850;
}

.navigation-instruction-meta span + span::before {
  content: "•";
  margin-right: 7px;
  color: rgba(244, 234, 215, 0.42);
}

.navigation-instruction-meta span:last-child {
  overflow: hidden;
  color: #d9cfbf;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-instruction-copy small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes navigationBannerIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.journey-status-card {
  position: absolute;
  z-index: 13;
  top: max(134px, calc(env(safe-area-inset-top) + 134px));
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 0%, rgba(231, 178, 77, 0.13), transparent 40%),
    radial-gradient(circle at 88% 100%, rgba(139, 203, 150, 0.1), transparent 36%),
    rgba(34, 32, 28, 0.78);
  box-shadow:
    0 18px 42px rgba(18, 12, 6, 0.34),
    0 0 22px rgba(231, 178, 77, 0.08);
  backdrop-filter: blur(18px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 190ms ease, transform 220ms ease;
}

.journey-status-card.run-active {
  grid-template-columns: minmax(0, 1fr);
}

.phone-shell.journey-active .journey-status-card {
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
}

.phone-shell.journey-active .journey-status-card.active-navigation-walk {
  top: auto;
  bottom: calc(142px + env(safe-area-inset-bottom));
  grid-template-columns: minmax(64px, 1fr) minmax(72px, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 19px;
}

.journey-status-card.active-navigation-walk > article:nth-of-type(3),
.journey-status-card.active-navigation-walk > [data-run-status-extra] {
  display: none !important;
}

.journey-status-card.active-navigation-walk .navigation-status-message {
  grid-column: 1 / -1;
  grid-row: 3;
}

.journey-status-card.active-navigation-walk .navigation-status-actions {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

.navigation-guidance-controls {
  display: none;
  grid-column: 1 / 3;
  grid-row: 2;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.journey-status-card.active-navigation-walk .navigation-guidance-controls {
  display: flex;
}

.navigation-guidance-controls[hidden],
.navigation-guidance-controls button[hidden] {
  display: none !important;
}

.navigation-guidance-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 11px;
  background: rgba(244, 234, 215, 0.045);
  color: #cfc4b3;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.navigation-guidance-controls button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navigation-guidance-controls button[data-spoken-guidance] svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.navigation-guidance-controls button[aria-pressed="true"] {
  border-color: rgba(231, 178, 77, 0.34);
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold-soft);
}

.navigation-guidance-controls button:disabled {
  border-color: rgba(244, 234, 215, 0.08);
  background: rgba(244, 234, 215, 0.025);
  color: rgba(222, 212, 195, 0.48);
  cursor: default;
}

.navigation-status-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 8px 1px;
  color: #ded4c3;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
}

.navigation-status-message[hidden] {
  display: none !important;
}

.navigation-status-actions {
  display: none;
  align-items: center;
  gap: 5px;
}

.journey-status-card.active-navigation-walk .navigation-status-actions {
  display: flex;
}

.navigation-status-actions button {
  min-width: 48px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(244, 234, 215, 0.13);
  border-radius: 13px;
  background: rgba(244, 234, 215, 0.06);
  color: #eee5d6;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.navigation-status-actions button[data-navigation-recenter],
.navigation-status-actions button[data-navigation-retry] {
  color: var(--gold-soft);
  border-color: rgba(231, 178, 77, 0.28);
  background: rgba(231, 178, 77, 0.1);
}

.navigation-status-actions button[hidden] {
  display: none !important;
}

.phone-shell.prompt-active .navigation-instruction-banner {
  opacity: 0.18;
  pointer-events: none;
}

.journey-status-card[hidden] {
  display: none !important;
}

.phone-shell.routes-ready .journey-status-card,
.phone-shell.routes-ready .journey-stop-button {
  display: none !important;
}

.journey-status-card article {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.055);
  text-align: center;
}

.journey-status-card strong,
.journey-status-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-status-card strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.journey-status-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.journey-status-card article:first-child {
  background:
    radial-gradient(circle at 50% 0%, rgba(231, 178, 77, 0.15), transparent 58%),
    rgba(231, 178, 77, 0.08);
}

.journey-status-card article:first-child strong {
  color: var(--gold-soft);
}

.journey-stop-button {
  position: absolute;
  z-index: 14;
  left: max(18px, calc(env(safe-area-inset-left) + 18px));
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: inline-grid;
  place-items: center;
  min-width: 142px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(231, 178, 77, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 20%, rgba(243, 201, 106, 0.16), transparent 42%),
    rgba(34, 32, 28, 0.84);
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    0 16px 36px rgba(18, 12, 6, 0.32),
    0 0 0 5px rgba(231, 178, 77, 0.06);
  backdrop-filter: blur(18px);
}

.journey-stop-button[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .navigation-instruction-banner {
    animation: none;
  }
}

/* Mission 3A.3: decision-first routes and a quiet active-journey map. */
.phone-shell.routes-ready .top-hud,
.phone-shell.routes-ready .destination-pill,
.phone-shell.routes-ready .floating-nav,
.phone-shell.routes-ready .report-fab,
.phone-shell.routes-ready .emergency-map-button,
.phone-shell.routes-ready .map-controls,
.phone-shell.routes-ready .share-status-card,
.phone-shell.routes-ready .floating-card,
.phone-shell.routes-ready .contextual-guidance-card,
.phone-shell.routes-ready .app-status-banner {
  display: none !important;
}

.navigation-drawer-summary {
  display: none;
}

.phone-shell.turn-by-turn-active .navigation-instruction-banner {
  display: none !important;
}

.phone-shell.turn-by-turn-active .report-fab {
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(154px, calc(env(safe-area-inset-bottom) + 152px));
  display: grid !important;
  width: var(--tap-target);
  height: var(--tap-target);
  box-shadow: var(--luma-elevation-raised);
}

.phone-shell.turn-by-turn-active .emergency-map-button {
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  bottom: max(154px, calc(env(safe-area-inset-bottom) + 152px));
  display: inline-flex !important;
  min-height: var(--tap-target);
  padding-inline: 12px;
}

.phone-shell.journey-active .journey-status-card.active-navigation-walk {
  left: max(10px, calc(env(safe-area-inset-left) + 10px));
  right: max(10px, calc(env(safe-area-inset-right) + 10px));
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border-radius: var(--luma-radius-card);
}

.journey-status-card.active-navigation-walk .navigation-drawer-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 116px;
  padding: 9px 10px 8px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--luma-text-primary);
  text-align: left;
}

.journey-status-card.active-navigation-walk .navigation-drawer-summary:focus-visible {
  outline: 2px solid var(--luma-accent-strong);
  outline-offset: 2px;
}

.journey-status-card.active-navigation-walk .navigation-maneuver-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--luma-radius-row);
  font-size: 25px;
}

.journey-status-card.active-navigation-walk .navigation-instruction-copy {
  align-self: center;
  min-width: 0;
}

.journey-status-card.active-navigation-walk .navigation-instruction-copy > strong {
  font-size: clamp(0.88rem, 3.8vw, 1rem);
}

.journey-status-card.active-navigation-walk .navigation-instruction-meta {
  margin-top: 3px;
  font-size: var(--luma-type-metadata-size);
}

.journey-status-card.active-navigation-walk .navigation-drawer-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid var(--luma-divider);
}

.journey-status-card.active-navigation-walk .navigation-drawer-facts > span {
  min-width: 0;
  margin: 0;
  text-align: left;
  text-transform: none;
}

.journey-status-card.active-navigation-walk .navigation-drawer-facts strong,
.journey-status-card.active-navigation-walk .navigation-drawer-facts small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-status-card.active-navigation-walk .navigation-drawer-facts strong {
  color: var(--luma-text-primary);
  font-size: var(--luma-type-body-size);
  line-height: 1.1;
}

.journey-status-card.active-navigation-walk .navigation-drawer-facts small {
  margin-top: 2px;
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
  font-weight: 650;
}

.journey-status-card.active-navigation-walk .navigation-drawer-chevron {
  align-self: start;
  margin: 1px 0 0;
  color: var(--luma-text-muted);
  font-size: 1rem;
  text-align: center;
}

.journey-status-card.active-navigation-walk .journey-metrics,
.journey-status-card.active-navigation-walk .navigation-hud-actions {
  display: none !important;
}

.journey-status-card.active-navigation-walk .navigation-status-message {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  max-width: min(72%, 320px);
  padding: 8px 10px;
  border-radius: var(--luma-radius-row);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(14px);
}

.journey-status-card.active-navigation-walk .navigation-status-actions {
  right: 0;
  bottom: calc(100% + 8px);
}

.journey-status-card.active-navigation-walk .navigation-status-message:not([hidden]) ~ .navigation-status-actions {
  right: auto;
  left: 0;
}

.journey-option-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-3);
  padding-block: var(--space-2);
  border-block: 1px solid var(--luma-divider);
}

.journey-option-summary article {
  min-width: 0;
  padding: 4px var(--space-2);
}

.journey-option-summary article + article {
  border-left: 1px solid var(--luma-divider);
}

.journey-option-summary span,
.journey-option-summary strong {
  display: block;
}

.journey-option-summary span {
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
}

.journey-option-summary strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--luma-text-primary);
  font-size: var(--luma-type-body-size);
}

.journey-option-summary .journey-option-condition {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--luma-divider);
  border-left: 0;
}

.journey-option-toggles button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-option-toggles button[data-spoken-guidance] svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.journey-option-toggles button[data-spoken-guidance][aria-pressed="false"] svg {
  opacity: 0.64;
}

.phone-shell.journey-detail-open .journey-status-card.active-navigation-walk {
  display: none !important;
}

.phone-shell.journey-detail-open .report-fab,
.phone-shell.journey-detail-open .emergency-map-button {
  bottom: calc(min(55vh, 470px) + 18px);
}

/* Attribution remains complete and interactive, with less visual weight than task controls. */
.luma-map .mapboxgl-ctrl-attrib {
  padding: 2px 5px;
  border-color: rgba(244, 225, 190, 0.08);
  border-radius: 7px;
  background: rgba(35, 31, 27, 0.78);
  color: #d8cfc1;
  font-size: 9px;
  line-height: 1.25;
  box-shadow: none;
  backdrop-filter: none;
}

.phone-shell.turn-by-turn-active .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(210px, calc(env(safe-area-inset-bottom) + 208px));
}

.phone-shell.journey-detail-open .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(min(55vh, 470px) + 18px);
}

@media (max-width: 430px) {
  .journey-status-card.active-navigation-walk .navigation-drawer-summary {
    min-height: 66px;
  }

  .phone-shell.journey-detail-open .report-fab,
  .phone-shell.journey-detail-open .emergency-map-button,
  .phone-shell.journey-detail-open .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(min(52vh, 460px) + 18px);
  }
}

/* Mission 3A.4: inspect on tap, route on hold, and a glanceable active walk. */
.map-route-here-card {
  position: absolute;
  z-index: 33;
  right: max(10px, calc(env(safe-area-inset-right) + 10px));
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 84px));
  left: max(10px, calc(env(safe-area-inset-left) + 10px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-card);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(16px);
}

.map-route-here-card[hidden] {
  display: none !important;
}

.map-route-here-card > div {
  min-width: 0;
}

.map-route-here-card :is(strong, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-route-here-card strong {
  color: var(--luma-text-primary);
  font-size: var(--luma-type-body-size);
}

.map-route-here-card small {
  margin-top: 2px;
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
}

.map-route-here-card button {
  min-height: var(--tap-target);
  padding-inline: 14px;
  white-space: nowrap;
}

.map-route-here-card .map-route-here-cancel {
  padding-inline: 10px;
  background: transparent;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-label-size);
}

.navigation-guidance-card {
  position: absolute;
  z-index: 18;
  top: max(10px, calc(env(safe-area-inset-top) + 10px));
  right: max(12px, calc(env(safe-area-inset-right) + 12px));
  left: max(12px, calc(env(safe-area-inset-left) + 12px));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 66px;
  padding: 9px 12px;
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-card);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(16px);
}

.navigation-guidance-card[hidden] {
  display: none !important;
}

.navigation-guidance-card .navigation-maneuver-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--luma-radius-row);
  background: var(--luma-accent-soft);
  color: var(--gold-soft);
  font-size: 25px;
  font-weight: 950;
}

.navigation-guidance-card .navigation-instruction-copy {
  min-width: 0;
}

.navigation-guidance-card .navigation-instruction-copy > strong {
  display: block;
  overflow: hidden;
  color: var(--luma-text-primary);
  font-size: clamp(0.9rem, 3.8vw, 1.02rem);
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-guidance-card .navigation-instruction-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-metadata-size);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-condition-alert {
  position: absolute;
  z-index: 17;
  top: max(90px, calc(env(safe-area-inset-top) + 88px));
  left: max(12px, calc(env(safe-area-inset-left) + 12px));
  display: block;
  width: max-content;
  max-width: min(210px, calc(100% - 96px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  padding: 8px 10px;
  border: 1px solid rgba(231, 178, 77, 0.26);
  border-radius: var(--luma-radius-row);
  background: rgba(42, 35, 27, 0.9);
  color: var(--luma-text-primary);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(14px);
}

.navigation-condition-alert[hidden] {
  display: none !important;
}

.navigation-condition-alert :is(strong, span) {
  display: block;
}

.navigation-condition-alert strong {
  font-size: var(--luma-type-label-size);
  line-height: 1.25;
}

.navigation-condition-alert span {
  margin-top: 2px;
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
}

.journey-status-card.active-navigation-walk .navigation-drawer-summary {
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 6px;
  min-height: 60px;
  padding: 4px 10px;
  text-align: center;
}

.journey-status-card.active-navigation-walk .navigation-eta-block {
  display: grid;
  gap: 0;
  justify-items: center;
  min-width: 0;
  line-height: 1;
}

.journey-status-card.active-navigation-walk .navigation-arrival-time {
  color: var(--gold-soft);
  font-size: clamp(1.45rem, 6vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1;
}

.journey-status-card.active-navigation-walk .navigation-remaining-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
  color: var(--luma-text-primary);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.journey-status-card.active-navigation-walk .navigation-remaining-summary > span {
  display: inline;
}

.journey-status-card.active-navigation-walk .navigation-eta-block > small {
  margin-top: 2px;
  color: var(--luma-text-muted);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.journey-status-card.active-navigation-walk .navigation-drawer-chevron {
  align-self: center;
}

.phone-shell.turn-by-turn-active :is(.report-fab, .emergency-map-button) {
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 110px));
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}

.phone-shell.turn-by-turn-active .report-fab {
  width: var(--tap-target);
  height: var(--tap-target);
  box-shadow: 0 8px 20px rgba(18, 12, 6, 0.24);
}

.phone-shell.turn-by-turn-active .emergency-map-button {
  gap: 4px;
  padding-inline: 9px;
  box-shadow: 0 8px 20px rgba(18, 12, 6, 0.24);
}

.phone-shell.turn-by-turn-active .emergency-map-button svg {
  width: 15px;
  height: 15px;
}

.phone-shell.turn-by-turn-active .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(166px, calc(env(safe-area-inset-bottom) + 164px));
}

.phone-shell.turn-by-turn-active .journey-status-card.active-navigation-walk .navigation-status-actions {
  left: 50%;
  right: auto;
  bottom: calc(100% + 8px);
  z-index: 5;
  transform: translateX(-50%);
}

.phone-shell.turn-by-turn-active .journey-status-card.active-navigation-walk .navigation-status-actions button {
  min-height: var(--tap-target);
}

@media (max-width: 374px) {
  .map-route-here-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  .map-route-here-card [data-map-route-here] {
    padding-inline: 10px;
  }

  .map-route-here-card .map-route-here-cancel {
    grid-column: auto;
    padding-inline: 6px;
  }

  .navigation-guidance-card .navigation-instruction-copy > strong {
    font-size: 0.88rem;
  }

  .navigation-condition-alert {
    max-width: min(190px, calc(100% - 84px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-route-here-card,
  .navigation-guidance-card,
  .navigation-condition-alert,
  .navigation-arrival-time {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 374px) {
  .journey-status-card.active-navigation-walk .navigation-drawer-summary {
    grid-template-columns: minmax(0, 1fr) 14px;
    gap: 7px;
    padding-inline: 8px;
  }

  .journey-status-card.active-navigation-walk .navigation-maneuver-icon {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-drawer-summary,
  .journey-option-summary,
  .phone-shell.turn-by-turn-active :is(.report-fab, .emergency-map-button) {
    transition: none !important;
    animation: none !important;
  }
}

/* Mission 3A.2: destination-first Search and a lighter Campus first fold. */
.route-endpoint-change {
  display: none;
  color: var(--luma-accent-strong);
  font-size: var(--luma-type-label-size);
  font-style: normal;
  font-weight: 680;
}

.route-endpoint-clear {
  display: none;
}

.route-endpoint-planner[data-disclosure-state="selected"] .route-endpoint-clear {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: end;
  align-items: center;
  min-height: var(--tap-target);
  margin: calc(var(--space-2) * -1) var(--space-1) calc(var(--space-1) * -1);
  padding-inline: var(--space-2);
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-label-size);
}

.route-endpoint-planner[data-disclosure-state="initial"] {
  display: block;
  margin: var(--space-1) 0 var(--space-2);
  padding: 0;
  background: transparent;
}

.route-endpoint-planner[data-disclosure-state="initial"] [data-route-endpoint="destination"],
.route-endpoint-planner[data-disclosure-state="initial"] .route-endpoint-swap {
  display: none;
}

.route-endpoint-planner[data-disclosure-state="initial"] [data-route-endpoint="origin"] {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: 0 var(--space-1);
  color: var(--luma-text-secondary);
}

.route-endpoint-planner[data-disclosure-state="initial"] [data-route-endpoint="origin"] > .route-endpoint-marker,
.route-endpoint-planner[data-disclosure-state="initial"] .route-endpoint-chevron {
  display: none;
}

.route-endpoint-planner[data-disclosure-state="initial"] .route-endpoint-copy {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.route-endpoint-planner[data-disclosure-state="initial"] [data-route-endpoint="origin"] small {
  font-size: var(--luma-type-metadata-size);
  font-weight: 620;
}

.route-endpoint-planner[data-disclosure-state="initial"] [data-route-endpoint="origin"] small::after {
  content: ":";
}

.route-endpoint-planner[data-disclosure-state="initial"] [data-route-endpoint="origin"] strong {
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  font-weight: 650;
}

.route-endpoint-planner[data-disclosure-state="initial"] .route-endpoint-change {
  display: inline;
}

.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > .route-endpoint-planner {
  flex: 0 0 auto;
}

.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"] > [data-run-search-control][hidden] {
  display: none !important;
}

.luma-standard-sheet[data-sheet="campus"] > .campus-mode-title {
  margin: 0;
  color: var(--luma-text-muted);
  font: 700 var(--luma-type-label-size)/1.25 var(--luma-font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.luma-standard-sheet[data-sheet="campus"] .campus-picker-card {
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
}

.luma-standard-sheet[data-sheet="campus"] .campus-picker-button {
  min-height: var(--tap-target);
  padding: var(--space-1) 0;
  background: transparent;
}

.luma-standard-sheet[data-sheet="campus"] .campus-picker-button strong {
  font-size: var(--luma-type-section-size);
  font-weight: 740;
}

.luma-standard-sheet[data-sheet="campus"] .campus-picker-label small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.luma-standard-sheet[data-sheet="campus"] .campus-primary-actions {
  margin-top: var(--space-2);
}

.luma-standard-sheet[data-sheet="campus"] .campus-action-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.luma-standard-sheet[data-sheet="campus"] .campus-action-row .primary-button {
  grid-column: auto;
}

.luma-standard-sheet[data-sheet="campus"] .campus-report-quiet {
  padding-inline: var(--space-3);
  border-color: transparent;
  background: transparent;
  color: var(--luma-text-secondary);
}

.luma-standard-sheet[data-sheet="campus"] .campus-explore-section {
  margin-top: var(--space-3);
  padding-top: 0;
  border-top: 0;
}

.luma-standard-sheet[data-sheet="campus"] .campus-explore-grid {
  margin-top: var(--space-1);
}

.luma-standard-sheet[data-sheet="campus"] .campus-safety-card {
  min-height: var(--tap-target);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--luma-radius-row);
  box-shadow: inset 2px 0 0 var(--luma-warning);
}

.luma-standard-sheet[data-sheet="campus"] .campus-safety-card > div > strong {
  font-size: var(--luma-type-secondary-size);
}

.luma-standard-sheet[data-sheet="campus"] .campus-safety-card > div > b {
  display: none;
}

.luma-standard-sheet[data-sheet="campus"] .campus-safety-card > div > small {
  display: block;
  margin-top: 1px;
}

.luma-standard-sheet[data-sheet="campus"] .campus-support-actions :is(a, button) {
  min-width: 52px;
  min-height: var(--tap-target);
  padding-inline: var(--space-2);
}

.luma-standard-sheet[data-sheet="campus"] .campus-safe-list {
  margin-top: var(--space-1);
}

@media (max-width: 374px) {
  .luma-standard-sheet[data-sheet="campus"] .campus-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .luma-standard-sheet[data-sheet="campus"] .campus-safety-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Mission 2A.5-A: isolated, fixture-only Impact preview. */
.mission2-profile-preview-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--luma-accent) 24%, var(--luma-divider));
  border-radius: var(--luma-radius-card);
  background: color-mix(in srgb, var(--luma-surface-elevated) 88%, var(--luma-accent) 12%);
}

.mission2-profile-preview-entry[hidden] {
  display: none !important;
}

.mission2-profile-preview-entry strong,
.mission2-profile-preview-entry p {
  display: block;
}

.mission2-profile-preview-entry p {
  margin: 4px 0 0;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  line-height: 1.4;
}

.mission2-preview-label {
  display: inline-flex;
  width: max-content;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--luma-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--luma-accent) 11%, transparent);
  color: var(--luma-accent-strong);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bottom-sheet.mission2-impact-sheet {
  width: min(100% - 16px, 560px);
  height: min(84dvh, 760px);
  max-height: calc(100dvh - 72px - env(safe-area-inset-top));
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: color-mix(in srgb, var(--luma-surface-sheet) 98%, #17130e 2%);
  box-shadow: var(--luma-elevation-sheet), inset 0 2px 0 color-mix(in srgb, var(--luma-accent) 42%, transparent);
}

.mission2-preview-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin: 22px 38px var(--space-3) 0;
}

.mission2-preview-toolbar label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--luma-text-muted);
  font-size: 0.66rem;
}

.mission2-preview-toolbar select {
  width: min(44vw, 190px);
  min-height: 38px;
  padding: 5px 26px 5px 9px;
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-row);
  background-color: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  font-size: 0.68rem;
}

.mission2-completion-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0 var(--space-3);
}

.mission2-completion-heading h2,
.mission2-completion-heading p {
  margin: 0;
}

.mission2-completion-heading h2:focus,
.mission2-profile-impact h2:focus {
  outline: 0;
  box-shadow: none;
}

.mission2-completion-heading [data-m2-journey-meta] {
  margin-top: 3px;
  color: var(--luma-text-secondary);
  font-size: 0.74rem;
}

.mission2-completion-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--luma-accent) 15%, var(--luma-surface-interactive));
  color: var(--luma-accent-strong);
}

.mission2-completion-mark svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mission2-impact-hero {
  padding: var(--space-4) 0 var(--space-3);
  border-block: 1px solid var(--luma-divider);
}

.mission2-impact-hero :is(p, h3) {
  margin: 0;
}

.mission2-impact-kicker {
  color: var(--luma-accent-strong);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission2-impact-value {
  display: block;
  margin: 4px 0 1px;
  color: var(--luma-text-primary);
  font-family: var(--luma-font-display);
  font-size: clamp(2.7rem, 15vw, 4.6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.mission2-impact-hero h3 {
  color: var(--luma-text-primary);
  font-size: clamp(1rem, 4.8vw, 1.25rem);
  line-height: 1.2;
}

.mission2-impact-hero [data-m2-impact-copy] {
  margin-top: var(--space-2);
  color: var(--luma-text-secondary);
  font-size: 0.78rem;
}

.mission2-calculation-toggle {
  min-height: 44px;
  margin-top: var(--space-1);
  padding-inline: 0;
  color: var(--luma-text-muted);
  font-size: 0.68rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mission2-calculation-note {
  max-width: 48ch;
  padding: 0 0 var(--space-1);
  color: var(--luma-text-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.mission2-route-ribbon {
  margin: var(--space-3) 0;
}

.mission2-route-ribbon > div {
  display: flex;
  align-items: center;
  height: 16px;
  overflow: hidden;
}

.mission2-route-ribbon span {
  position: relative;
  flex: 1;
  height: 4px;
  background: color-mix(in srgb, var(--luma-text-muted) 46%, transparent);
}

.mission2-route-ribbon span + span::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid var(--luma-surface-sheet);
  border-radius: 50%;
  background: var(--luma-text-muted);
  transform: translate(-50%, -50%);
}

.mission2-route-ribbon span.is-improved {
  background: var(--luma-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--luma-accent) 34%, transparent);
}

.mission2-route-ribbon span.is-improved + span::before {
  background: var(--luma-accent);
}

.mission2-route-ribbon figcaption {
  margin-top: 3px;
  color: var(--luma-text-muted);
  font-size: 0.66rem;
}

.mission2-coverage-card {
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--luma-accent) 78%, transparent);
}

.mission2-coverage-heading {
  display: flex;
  gap: var(--space-3);
  align-items: end;
  justify-content: space-between;
}

.mission2-coverage-heading :is(p, strong) {
  display: block;
  margin: 0;
}

.mission2-coverage-heading strong {
  margin-top: 2px;
  color: var(--luma-text-primary);
  font-family: var(--luma-font-display);
  font-size: 1.42rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mission2-coverage-heading > span {
  color: var(--luma-text-muted);
  font-size: 0.62rem;
  white-space: nowrap;
}

.mission2-coverage-progress {
  height: 7px;
  margin: var(--space-3) 0 var(--space-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--luma-text-muted) 18%, transparent);
  overflow: hidden;
}

.mission2-coverage-progress span {
  display: block;
  width: var(--luma-m2-coverage, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--luma-accent);
  transition: width 420ms var(--luma-ease);
}

.mission2-coverage-details {
  display: grid;
  gap: 3px;
  color: var(--luma-text-secondary);
  font-size: 0.68rem;
}

.mission2-coverage-details span:empty {
  display: none;
}

.mission2-quick-check {
  min-width: 0;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: 1px solid var(--luma-divider);
}

.mission2-quick-check legend {
  padding: 0;
  color: var(--luma-accent-strong);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission2-quick-check > strong {
  display: block;
  color: var(--luma-text-primary);
  font-size: 0.92rem;
  line-height: 1.35;
}

.mission2-quick-check > p {
  margin: var(--space-1) 0;
  color: var(--luma-text-secondary);
  font-size: 0.7rem;
  line-height: 1.4;
}

.mission2-quick-location {
  color: var(--luma-text-muted) !important;
}

.mission2-quick-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.mission2-quick-options button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
  font-size: 0.67rem;
}

.mission2-quick-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--luma-accent) 58%, transparent);
  background: var(--luma-surface-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--luma-accent) 24%, transparent);
}

.mission2-quick-status {
  min-height: 1.4em;
  color: var(--luma-text-muted) !important;
}

.mission2-impact-actions {
  position: sticky;
  bottom: calc(-1 * var(--space-4) - env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-4) calc(-1 * var(--space-1)) 0;
  padding: var(--space-3) var(--space-1) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--luma-surface-sheet) 28%);
}

.mission2-profile-impact {
  padding-top: var(--space-2);
}

.mission2-back-button {
  min-height: 44px;
  padding-left: 0;
}

.mission2-profile-impact > h2,
.mission2-profile-impact > .eyebrow {
  margin-bottom: var(--space-2);
}

.mission2-profile-hero {
  margin: var(--space-4) 0;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--luma-divider);
}

.mission2-profile-hero strong,
.mission2-profile-hero span {
  display: block;
}

.mission2-profile-hero strong {
  color: var(--luma-text-primary);
  font-family: var(--luma-font-display);
  font-size: clamp(2.6rem, 15vw, 4.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}

.mission2-profile-hero span {
  margin-top: var(--space-1);
  color: var(--luma-text-secondary);
}

.mission2-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-block: 1px solid var(--luma-divider);
}

.mission2-profile-grid article {
  min-width: 0;
  min-height: 94px;
  padding: var(--space-3);
  border-right: 1px solid var(--luma-divider);
  border-bottom: 1px solid var(--luma-divider);
}

.mission2-profile-grid article:nth-child(2n) {
  border-right: 0;
}

.mission2-profile-grid article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.mission2-profile-grid strong,
.mission2-profile-grid span {
  display: block;
}

.mission2-profile-grid strong {
  color: var(--luma-text-primary);
  font-size: 1.2rem;
}

.mission2-profile-grid span,
.mission2-profile-privacy {
  margin-top: 4px;
  color: var(--luma-text-secondary);
  font-size: 0.68rem;
  line-height: 1.35;
}

.mission2-profile-impact > .primary-button {
  width: 100%;
  margin-top: var(--space-4);
}

.mission2-impact-sheet[data-mission2-impact-state="pending"] .mission2-impact-hero,
.mission2-impact-sheet[data-mission2-impact-state="none"] .mission2-impact-hero {
  box-shadow: inset 3px 0 0 var(--luma-limited);
  padding-left: var(--space-3);
}

.mission2-impact-sheet[data-mission2-impact-state="rejected"] .mission2-impact-hero {
  box-shadow: inset 3px 0 0 var(--luma-error);
  padding-left: var(--space-3);
}

.mission2-impact-sheet.open .mission2-impact-hero,
.mission2-impact-sheet.open .mission2-coverage-card {
  animation: mission2ImpactReveal 360ms var(--luma-ease) both;
}

.mission2-impact-sheet.open .mission2-coverage-card {
  animation-delay: 70ms;
}

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

@media (max-width: 390px) {
  .bottom-sheet.mission2-impact-sheet {
    width: calc(100% - 10px);
    height: min(735px, calc(var(--luma-visual-height, 100dvh) - 82px)) !important;
    max-height: calc(var(--luma-visual-height, 100dvh) - 82px) !important;
    padding-inline: var(--space-3);
  }

  .mission2-preview-toolbar {
    margin-right: 36px;
  }

  .mission2-preview-toolbar label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .mission2-preview-toolbar select {
    width: min(48vw, 176px);
  }

  .mission2-impact-hero {
    padding-block: var(--space-3);
  }

  .mission2-impact-value {
    font-size: clamp(2.55rem, 14vw, 3.4rem);
  }

  .mission2-route-ribbon {
    margin-block: var(--space-2);
  }
}

@media (max-width: 370px) {
  .mission2-profile-preview-entry {
    grid-template-columns: 1fr;
  }

  .mission2-profile-preview-entry .secondary-button {
    width: 100%;
  }

  .mission2-completion-heading {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .mission2-completion-mark {
    width: 38px;
    height: 38px;
  }

  .mission2-quick-options {
    grid-template-columns: 1fr;
  }

  .mission2-quick-options button {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission2-impact-sheet,
  .mission2-impact-sheet *,
  .mission2-coverage-progress span {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.bottom-sheet.mission2-local-progress-sheet {
  width: min(560px, calc(100% - 18px));
  height: min(780px, calc(var(--luma-visual-height, 100dvh) - 76px)) !important;
  max-height: calc(var(--luma-visual-height, 100dvh) - 76px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--luma-accent) 10%, transparent), transparent 28%),
    var(--luma-surface-sheet);
}

.mission2-local-progress-heading {
  margin: var(--space-3) 0 var(--space-4);
}

.mission2-local-progress-heading h2,
.mission2-local-progress-heading p,
.mission2-community-goal h3,
.mission2-community-milestone p {
  overflow-wrap: anywhere;
}

.mission2-local-progress-heading h2 {
  margin: var(--space-1) 0;
  color: var(--luma-text-primary);
}

.mission2-local-progress-heading > p:last-child {
  margin: 0;
  color: var(--luma-text-secondary);
  line-height: 1.45;
}

.mission2-community-goal {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--luma-accent) 26%, var(--luma-divider));
  border-radius: var(--luma-radius-card);
  background: color-mix(in srgb, var(--luma-surface-elevated) 92%, var(--luma-accent));
  box-shadow: var(--luma-shadow-card);
}

.mission2-community-goal :is(.eyebrow, h3) {
  margin: 0 0 var(--space-1);
}

.mission2-community-goal > strong {
  display: inline-block;
  color: var(--luma-text-primary);
  font-family: var(--luma-font-display);
  font-size: clamp(2rem, 10vw, 3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.mission2-community-goal [data-m2-goal-change] {
  margin-left: var(--space-2);
  color: var(--luma-accent-strong);
  font-size: 0.75rem;
  font-weight: 750;
}

.mission2-goal-progress {
  height: 7px;
  margin: var(--space-3) 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--luma-text-primary) 12%, transparent);
}

.mission2-goal-progress span {
  display: block;
  width: var(--luma-m2-goal, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--luma-accent);
  transition: width 320ms var(--luma-ease);
}

.mission2-goal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--luma-text-secondary);
  font-size: 0.72rem;
  line-height: 1.4;
}

.mission2-local-missions {
  margin-top: var(--space-5);
}

.mission2-local-missions > h3,
.mission2-other-opportunities > h3 {
  margin: 0 0 var(--space-2);
  color: var(--luma-text-primary);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.mission2-mission-card {
  min-width: 0;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
}

.mission2-mission-card.is-dominant {
  padding: var(--space-4);
  border-color: color-mix(in srgb, var(--luma-accent) 32%, var(--luma-divider));
  box-shadow: var(--luma-shadow-card);
}

.mission2-mission-card.is-viewing {
  border-color: color-mix(in srgb, var(--luma-accent) 58%, transparent);
}

.mission2-mission-card :is(.eyebrow, h3, h4, p) {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.mission2-mission-card :is(h3, h4) {
  margin-bottom: 3px;
  color: var(--luma-text-primary);
  font-size: 1rem;
}

.mission2-mission-card > p:not(.eyebrow) {
  margin-bottom: var(--space-2);
  color: var(--luma-text-secondary);
  font-size: 0.76rem;
  line-height: 1.4;
}

.mission2-mission-area,
.mission2-mission-expiry {
  color: var(--luma-text-muted) !important;
}

.mission2-mission-need,
.mission2-mission-fit {
  display: block;
  color: var(--luma-accent-strong);
  font-size: 0.76rem;
}

.mission2-mission-note {
  margin-top: var(--space-2) !important;
}

.mission2-mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.mission2-mission-actions button {
  min-height: 44px;
}

.mission2-other-opportunities {
  margin-top: var(--space-4);
}

.mission2-community-milestone {
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border-block: 1px solid var(--luma-divider);
}

.mission2-community-milestone p:last-child,
.mission2-local-status,
.mission2-no-missions {
  margin: 0;
  color: var(--luma-text-secondary);
  font-size: 0.74rem;
  line-height: 1.45;
}

.mission2-local-status {
  min-height: 1.5em;
  margin-top: var(--space-3);
}

.mission2-local-done {
  position: sticky;
  bottom: calc(-1 * var(--space-4) - env(safe-area-inset-bottom));
  width: 100%;
  margin-top: var(--space-3);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

.mission2-local-opportunity {
  margin-top: var(--space-4);
  border-top-color: color-mix(in srgb, var(--luma-accent) 32%, var(--luma-divider));
}

@media (max-width: 390px) {
  .bottom-sheet.mission2-local-progress-sheet {
    width: calc(100% - 10px);
    height: min(735px, calc(var(--luma-visual-height, 100dvh) - 82px)) !important;
    max-height: calc(var(--luma-visual-height, 100dvh) - 82px) !important;
    padding-inline: var(--space-3);
  }

  .mission2-community-goal,
  .mission2-mission-card.is-dominant {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission2-local-progress-sheet,
  .mission2-local-progress-sheet *,
  .mission2-goal-progress span {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.bottom-sheet.mission2-weekly-board-sheet {
  width: min(520px, calc(100% - 18px));
  height: min(760px, calc(var(--luma-visual-height, 100dvh) - 76px)) !important;
  max-height: calc(var(--luma-visual-height, 100dvh) - 76px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at 88% 1%, color-mix(in srgb, var(--luma-accent) 12%, transparent), transparent 31%),
    var(--luma-surface-sheet);
}

.mission2-weekly-board-heading {
  margin: var(--space-3) 0 var(--space-4);
}

.mission2-weekly-board-heading :is(.eyebrow, h2, p),
.mission2-weekly-private :is(.eyebrow, p),
.mission2-weekly-education :is(h3, p),
.mission2-weekly-cohort :is(h3, p) {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.mission2-weekly-board-heading h2 {
  margin-bottom: 4px;
  color: var(--luma-text-primary);
  font-size: clamp(1.45rem, 6vw, 2rem);
}

.mission2-weekly-board-heading > p:last-child,
.mission2-weekly-education > p,
.mission2-weekly-private > p,
.mission2-weekly-cohort > p,
.mission2-weekly-status {
  color: var(--luma-text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.mission2-weekly-private,
.mission2-weekly-education,
.mission2-weekly-cohort {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
}

.mission2-weekly-private strong {
  display: block;
  margin-bottom: 4px;
  color: var(--luma-text-primary);
  font-size: 1.05rem;
}

.mission2-weekly-alias-field {
  display: grid;
  gap: 6px;
  margin-top: var(--space-3);
  color: var(--luma-text-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.mission2-weekly-alias-field :is(input, select) {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-row);
  color: var(--luma-text-primary);
  background: var(--luma-surface-interactive);
}

.mission2-weekly-alias-field :is(input, select)[aria-invalid="true"] {
  border-color: var(--danger);
}

.mission2-weekly-alias-error {
  min-height: 1.3em;
  margin: 5px 0 0;
  color: var(--danger);
  font-size: 0.72rem;
}

.mission2-weekly-actions,
.mission2-weekly-tabs,
.mission2-weekly-board-title-row,
.mission2-weekly-local-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mission2-weekly-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.mission2-weekly-actions button,
.mission2-weekly-tabs button,
.mission2-weekly-joined > button,
.mission2-weekly-local-entry button {
  min-height: 44px;
}

.mission2-weekly-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-3);
  padding: 3px;
  border-radius: var(--luma-radius-pill);
  background: var(--luma-surface-interactive);
}

.mission2-weekly-tabs button {
  border: 0;
  border-radius: var(--luma-radius-pill);
  color: var(--luma-text-secondary);
  background: transparent;
  font-weight: 750;
}

.mission2-weekly-tabs button[aria-pressed="true"] {
  color: var(--luma-text-primary);
  background: var(--luma-surface-elevated);
  box-shadow: var(--luma-shadow-card);
}

.mission2-weekly-board-title-row {
  margin-bottom: var(--space-2);
}

.mission2-weekly-board-title-row :is(h3, span) {
  margin: 0;
}

.mission2-weekly-board-title-row span {
  color: var(--luma-text-muted);
  font-size: 0.7rem;
}

.mission2-weekly-board-list,
.mission2-weekly-board-context-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission2-weekly-board-context-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--luma-divider);
}

.mission2-weekly-board-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--luma-radius-row);
  color: var(--luma-text-primary);
}

.mission2-weekly-board-row[data-current-user="true"] {
  background: color-mix(in srgb, var(--luma-accent) 14%, var(--luma-surface-interactive));
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.mission2-weekly-board-row[data-rank="1"],
.mission2-weekly-board-row[data-rank="2"],
.mission2-weekly-board-row[data-rank="3"] {
  font-weight: 650;
}

.mission2-weekly-board-row > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission2-weekly-board-row > span:last-child {
  color: var(--luma-accent-strong);
  font-size: 0.74rem;
  font-weight: 750;
}

.mission2-weekly-status {
  min-height: 1.5em;
  margin: var(--space-3) 0;
}

.mission2-weekly-done {
  position: sticky;
  bottom: calc(-1 * var(--space-4) - env(safe-area-inset-bottom));
  width: 100%;
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

.mission2-weekly-local-entry {
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border-block: 1px solid var(--luma-divider);
}

.mission2-weekly-local-entry :is(.eyebrow, h3, p) {
  margin-top: 0;
  margin-bottom: 3px;
}

@media (max-width: 390px) {
  .bottom-sheet.mission2-weekly-board-sheet {
    width: calc(100% - 10px);
    height: min(735px, calc(var(--luma-visual-height, 100dvh) - 82px)) !important;
    max-height: calc(var(--luma-visual-height, 100dvh) - 82px) !important;
    padding-inline: var(--space-3);
  }

  .mission2-weekly-private,
  .mission2-weekly-education,
  .mission2-weekly-cohort {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission2-weekly-board-sheet,
  .mission2-weekly-board-sheet * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.mission2-resolution-updates {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--luma-accent) 24%, var(--luma-divider));
  border-radius: var(--luma-radius-card);
  background: color-mix(in srgb, var(--luma-surface-elevated) 94%, var(--luma-accent));
}

.mission2-resolution-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mission2-resolution-section-heading > strong {
  margin: 0;
  color: var(--luma-text-primary);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.mission2-resolution-updates-list {
  display: grid;
  gap: var(--space-2);
}

.mission2-resolution-update-card {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: var(--space-3);
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.mission2-resolution-update-card[data-m2-resolution-viewed="true"] {
  box-shadow: inset 3px 0 0 var(--luma-text-muted);
}

.mission2-resolution-update-card :is(.eyebrow, h4, p, time) {
  margin: 0;
  overflow-wrap: anywhere;
}

.mission2-resolution-update-card h4 {
  color: var(--luma-text-primary);
  font-size: 0.9rem;
}

.mission2-resolution-update-card > p:not(.eyebrow),
.mission2-resolution-update-card time {
  color: var(--luma-text-secondary);
  font-size: 0.72rem;
  line-height: 1.4;
}

.mission2-resolution-update-card button {
  min-height: 44px;
  margin-top: var(--space-2);
  justify-self: start;
}

.bottom-sheet.mission2-resolution-sheet {
  width: min(540px, calc(100% - 18px));
  height: min(760px, calc(var(--luma-visual-height, 100dvh) - 76px)) !important;
  max-height: calc(var(--luma-visual-height, 100dvh) - 76px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--luma-accent) 11%, transparent), transparent 30%),
    var(--luma-surface-sheet);
}

.mission2-resolution-heading {
  margin: var(--space-3) 0 var(--space-4);
}

.mission2-resolution-heading :is(.eyebrow, h2, p),
.mission2-resolution-current :is(.eyebrow, h3, p),
.mission2-resolution-explanation :is(h3, p),
.mission2-resolution-outcome :is(h3, p, small) {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.mission2-resolution-heading h2 {
  margin-bottom: 2px;
  color: var(--luma-text-primary);
}

.mission2-resolution-heading > p:last-child {
  margin-bottom: 0;
  color: var(--luma-text-secondary);
}

.mission2-resolution-current {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--luma-accent) 30%, var(--luma-divider));
  border-radius: var(--luma-radius-card);
  background: color-mix(in srgb, var(--luma-surface-elevated) 92%, var(--luma-accent));
  box-shadow: var(--luma-shadow-card);
}

.mission2-resolution-current h3 {
  margin-bottom: var(--space-1);
  color: var(--luma-text-primary);
  font-size: 1.14rem;
}

.mission2-resolution-current p:last-child {
  margin-bottom: 0;
  color: var(--luma-text-secondary);
  line-height: 1.45;
}

.mission2-resolution-sheet[data-m2-resolution-state="resolved"] .mission2-resolution-current {
  border-color: color-mix(in srgb, var(--luma-success) 38%, var(--luma-divider));
  background: color-mix(in srgb, var(--luma-surface-elevated) 90%, var(--luma-success));
}

.mission2-resolution-timeline-section {
  margin-top: var(--space-5);
}

.mission2-resolution-timeline-section > h3 {
  margin: 0 0 var(--space-3);
  color: var(--luma-text-primary);
  font-size: 0.9rem;
}

.mission2-resolution-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission2-resolution-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-height: 52px;
  padding: 2px 0 var(--space-3) 28px;
  color: var(--luma-text-secondary);
}

.mission2-resolution-timeline li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--luma-surface-sheet);
  border-radius: 50%;
  background: var(--luma-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--luma-accent) 46%, var(--luma-divider));
}

.mission2-resolution-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: 8px;
  width: 2px;
  background: color-mix(in srgb, var(--luma-accent) 46%, var(--luma-divider));
}

.mission2-resolution-timeline li[data-m2-resolution-timeline-state="current"]::before {
  background: var(--luma-warning);
}

.mission2-resolution-timeline strong {
  min-width: 0;
  color: var(--luma-text-primary);
  overflow-wrap: anywhere;
}

.mission2-resolution-timeline time {
  color: var(--luma-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.mission2-resolution-explanation {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mission2-resolution-explanation > div {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--luma-divider);
}

.mission2-resolution-explanation h3 {
  margin-bottom: 4px;
  color: var(--luma-text-primary);
  font-size: 0.82rem;
}

.mission2-resolution-explanation p,
.mission2-resolution-private-status {
  margin-bottom: 0;
  color: var(--luma-text-secondary);
  font-size: 0.76rem;
  line-height: 1.45;
}

.mission2-resolution-actions {
  position: sticky;
  bottom: calc(-1 * var(--space-4) - env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.2fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--luma-surface-sheet) 24%);
}

.mission2-resolution-actions button {
  min-height: 44px;
}

.mission2-resolution-outcome {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--luma-success) 28%, var(--luma-divider));
  border-radius: var(--luma-radius-card);
  background: color-mix(in srgb, var(--luma-surface-elevated) 92%, var(--luma-success));
}

.mission2-resolution-outcome h3 {
  margin-bottom: var(--space-1);
  color: var(--luma-text-primary);
  font-size: 0.92rem;
}

.mission2-resolution-outcome p,
.mission2-resolution-outcome small {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--luma-text-secondary);
  line-height: 1.4;
}

.mission2-resolution-outcome button {
  min-height: 44px;
}

@media (max-width: 390px) {
  .bottom-sheet.mission2-resolution-sheet {
    width: calc(100% - 10px);
    height: min(735px, calc(var(--luma-visual-height, 100dvh) - 82px)) !important;
    max-height: calc(var(--luma-visual-height, 100dvh) - 82px) !important;
    padding-inline: var(--space-3);
  }

  .mission2-resolution-current {
    padding: var(--space-3);
  }

  .mission2-resolution-timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .mission2-resolution-timeline time {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission2-resolution-sheet,
  .mission2-resolution-sheet *,
  .mission2-resolution-update-card,
  .mission2-resolution-outcome {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Release navigation focus: one maneuver region, one compact journey HUD, and no unsolicited overlays. */
.navigation-instruction-banner {
  z-index: var(--layer-maneuver);
}

.journey-status-card {
  z-index: var(--layer-journey-hud);
}

.map-controls,
.report-fab,
.emergency-map-button {
  z-index: var(--layer-map-controls);
}

.sheet-backdrop {
  z-index: calc(var(--layer-major-sheet) - 2);
}

.bottom-sheet {
  z-index: var(--layer-major-sheet);
}

.phone-shell.turn-by-turn-active .top-hud,
.phone-shell.turn-by-turn-active .destination-pill,
.phone-shell.turn-by-turn-active .floating-nav,
.phone-shell.turn-by-turn-active .report-fab,
.phone-shell.turn-by-turn-active .emergency-map-button,
.phone-shell.turn-by-turn-active .map-controls,
.phone-shell.turn-by-turn-active .share-status-card,
.phone-shell.turn-by-turn-active .floating-card,
.phone-shell.turn-by-turn-active .contextual-guidance-card,
.phone-shell.turn-by-turn-active .journey-voice-prompt,
.phone-shell.turn-by-turn-active .app-status-banner {
  display: none !important;
}

.phone-shell.turn-by-turn-active.prompt-active .navigation-instruction-banner {
  opacity: 1;
  pointer-events: auto;
}

.phone-shell.turn-by-turn-active .navigation-instruction-banner {
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
}

.journey-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.journey-status-card.run-active .journey-metrics {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phone-shell.journey-active:has(.journey-status-card.run-active:not([hidden])) :is(.top-hud, .destination-pill) {
  display: none !important;
}

.phone-shell.journey-active .journey-status-card.run-active {
  top: max(8px, calc(env(safe-area-inset-top) + 8px));
  left: max(10px, calc(env(safe-area-inset-left) + 10px));
  right: max(10px, calc(env(safe-area-inset-right) + 10px));
  gap: 6px;
  padding: 8px;
}

.navigation-hud-actions {
  display: none;
}

.phone-shell.journey-active .journey-status-card.active-navigation-walk {
  top: auto;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
  padding: 8px 9px;
  border-radius: var(--luma-radius-card);
}

.journey-status-card.active-navigation-walk .journey-metrics {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.journey-status-card.active-navigation-walk .journey-metrics > article {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.journey-status-card.active-navigation-walk .journey-metrics > article:nth-of-type(3),
.journey-status-card.active-navigation-walk .journey-metrics > [data-run-status-extra] {
  display: none !important;
}

.journey-status-card.active-navigation-walk .journey-metrics > article + article::before {
  content: "\00B7";
  position: absolute;
  top: 50%;
  left: -10px;
  color: var(--luma-text-muted);
  transform: translateY(-54%);
}

.journey-status-card.active-navigation-walk .journey-metrics strong {
  color: var(--luma-text-primary);
  font-size: clamp(0.9rem, 4vw, 1.03rem);
  line-height: 1.1;
}

.journey-status-card.active-navigation-walk .journey-metrics span {
  display: none;
}

.journey-status-card.active-navigation-walk .navigation-hud-actions {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.journey-status-card.active-navigation-walk .navigation-guidance-controls {
  display: flex;
  grid-column: auto;
  grid-row: auto;
}

.journey-status-card.active-navigation-walk .navigation-guidance-controls[hidden] {
  display: none;
}

.journey-status-card.active-navigation-walk .navigation-hud-actions button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--tap-target);
  min-width: var(--tap-target);
  height: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
}

.journey-status-card.active-navigation-walk .navigation-hud-actions button svg {
  width: 19px;
  height: 19px;
}

.journey-status-card.active-navigation-walk .navigation-hud-actions button[aria-pressed="true"] {
  background: var(--luma-accent-soft);
  color: var(--luma-accent-strong);
}

.journey-status-card.active-navigation-walk button[data-spoken-guidance][aria-pressed="false"]::after {
  content: "";
  position: absolute;
  width: 21px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-45deg);
}

.journey-status-card.active-navigation-walk button[data-navigation-emergency] {
  color: var(--luma-accent-strong);
}

.journey-status-card.active-navigation-walk button[data-navigation-options] > span {
  display: block;
  margin: 0;
  color: currentColor;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: none;
}

.journey-status-card.active-navigation-walk .navigation-status-message {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 0 4px 2px;
  text-align: left;
}

.journey-status-card.active-navigation-walk .navigation-status-actions {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  grid-column: auto;
  grid-row: auto;
}

.journey-status-card.active-navigation-walk .navigation-status-actions button {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  border: 0;
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(14px);
}

.journey-options-sheet {
  max-height: min(55vh, 470px);
}

.journey-options-sheet h2 {
  padding-right: 34px;
}

.journey-options-sheet h2 span {
  color: var(--luma-accent-strong);
}

.journey-option-toggles,
.journey-option-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.journey-option-toggles:empty {
  display: none;
}

.journey-option-toggles button,
.journey-option-actions button {
  min-height: var(--tap-target);
  justify-content: flex-start;
  gap: var(--space-2);
  text-align: left;
}

.journey-option-toggles button[aria-pressed="true"] {
  background: var(--luma-accent-soft);
  color: var(--luma-accent-strong);
}

.journey-option-actions .destructive {
  grid-column: 1 / -1;
  color: var(--luma-error);
}

.luma-map .mapboxgl-ctrl-bottom-left {
  left: max(8px, calc(env(safe-area-inset-left) + 8px));
  right: max(8px, calc(env(safe-area-inset-right) + 8px));
  bottom: max(128px, calc(env(safe-area-inset-bottom) + 126px));
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.phone-shell.turn-by-turn-active .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 86px));
}

.luma-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
  float: none;
  margin: 0;
}

.luma-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-logo {
  flex: 0 0 88px;
  width: 88px;
  height: 23px;
  min-height: 23px;
  background-position: 0 0;
  background-size: 88px 23px;
}

.luma-map .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib {
  max-width: 24px;
  flex: 0 0 24px;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  overflow: hidden;
  border-radius: 7px;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
  display: none;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show {
  width: auto;
  height: auto;
  max-width: min(330px, calc(100vw - 26px));
  flex-basis: auto;
  padding: 2px 5px;
  overflow: visible;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
  display: block;
}

.phone-shell:has(.bottom-sheet.open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(min(78vh, 680px) + 18px);
}

.phone-shell:has(.bottom-sheet[data-sheet="campus"].open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(min(78vh, 680px) + 64px);
}

.phone-shell:has(.bottom-sheet.compact.open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(min(58vh, 520px) + 18px);
}

.phone-shell:has(.bottom-sheet.route-compare-sheet.open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(86px + min(31vh, 248px) + 18px + env(safe-area-inset-bottom));
}

.phone-shell:has(.bottom-sheet.route-compare-sheet.sheet-expanded.open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(86px + min(58vh, 500px) + 18px + env(safe-area-inset-bottom));
}

.phone-shell.run-mode:has(.bottom-sheet.route-compare-sheet.open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(86px + min(47vh, 390px) + 18px + env(safe-area-inset-bottom));
}

.phone-shell:has(.destination-map-picker:not([hidden])) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(218px, calc(env(safe-area-inset-bottom) + 216px));
}

.phone-shell:has(.custom-run-map-builder:not([hidden])) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(286px, calc(env(safe-area-inset-bottom) + 284px));
}

.luma-map .mapboxgl-ctrl-logo {
  pointer-events: auto;
}

@media (max-width: 430px) {
  .phone-shell:has(.bottom-sheet.open) .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(min(68vh, 590px) + 18px);
  }

  .phone-shell:has(.bottom-sheet.compact.open) .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(min(52vh, 460px) + 18px);
  }

  .phone-shell:has(.bottom-sheet:is([data-sheet="reports"], [data-sheet="campus"]).open) .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(min(62%, calc(100% - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) + 18px);
  }

  .phone-shell:has(.bottom-sheet[data-sheet="campus"].open) .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(min(62%, calc(100% - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) + 64px);
  }

  .phone-shell:has(.bottom-sheet.route-compare-sheet.open) .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(86px + min(31vh, 248px) + 18px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .phone-shell.journey-active .journey-status-card.active-navigation-walk {
    left: max(8px, calc(env(safe-area-inset-left) + 8px));
    right: max(8px, calc(env(safe-area-inset-right) + 8px));
    gap: 5px;
    padding-inline: 7px;
  }

  .journey-status-card.active-navigation-walk .journey-metrics {
    gap: 12px;
  }

  .journey-status-card.active-navigation-walk .journey-metrics > article + article::before {
    left: -8px;
  }

  .journey-status-card.active-navigation-walk .navigation-hud-actions {
    gap: 3px;
  }

  .journey-status-card.active-navigation-walk .navigation-hud-actions button {
    width: 42px;
    min-width: 42px;
    height: 44px;
  }

  .journey-option-toggles,
  .journey-option-actions {
    grid-template-columns: 1fr;
  }

  .journey-option-actions .destructive {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-instruction-banner,
  .journey-status-card,
  .journey-options-sheet,
  .journey-status-card.active-navigation-walk .navigation-hud-actions button {
    transition: none !important;
    animation: none !important;
  }
}

.run-mode-panel {
  display: grid;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 11px;
  border: 1px solid rgba(101, 167, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(101, 167, 255, 0.1), transparent 42%),
    rgba(244, 234, 215, 0.035);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.05);
  animation: pageIn 220ms ease both;
}

.run-mode-panel[hidden] {
  display: none !important;
}

.run-availability-note,
.run-lighting-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(231, 178, 77, 0.2);
  border-radius: 13px;
  background: rgba(231, 178, 77, 0.07);
  color: #d9cfbf;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.run-availability-note[hidden],
.run-lighting-note[hidden] {
  display: none !important;
}

.run-panel-head,
.run-setting-group.two-column {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.run-panel-head h3 {
  margin: 2px 0 0;
  font-size: 15px;
}

.run-panel-head > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(101, 167, 255, 0.11);
  color: var(--run-blue-soft);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.run-custom-builder,
.share-safety-settings {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(231, 178, 77, 0.1), transparent 44%),
    rgba(244, 234, 215, 0.045);
}

.run-custom-builder {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: none;
}

.custom-run-sheet {
  max-height: min(72vh, 640px);
}

.custom-run-sheet .sheet-copy {
  margin-bottom: 10px;
}

.custom-run-actions {
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.custom-run-sheet .run-custom-builder {
  border-color: transparent;
  background: var(--luma-surface-elevated);
}

.run-custom-builder[hidden],
.share-safety-settings[hidden] {
  display: none !important;
}

.run-builder-head,
.share-safety-settings > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.run-builder-head strong,
.share-safety-settings strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.run-builder-head strong {
  color: var(--luma-text-primary);
  font-size: var(--luma-type-card-size);
}

.run-builder-head span,
.share-safety-settings span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.run-builder-head span {
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
}

.run-builder-head button,
.subtle-button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.07);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.run-builder-head button,
.run-custom-edit-actions .subtle-button {
  min-height: var(--tap-target);
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
}

.run-builder-head button.active,
.run-builder-head button[aria-pressed="true"] {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.run-custom-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.run-custom-mode-row button {
  min-height: var(--tap-target);
  padding: 8px 10px;
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-label-size);
  font-weight: 900;
  transition: background var(--motion-fast) var(--luma-ease), color var(--motion-fast) var(--luma-ease), transform var(--motion-fast) var(--luma-ease);
}

.run-custom-mode-row button.active {
  border-color: transparent;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.run-custom-mode-row button:active {
  transform: scale(0.98);
}

.run-custom-instruction {
  margin: -2px 0 0;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  font-weight: 760;
  line-height: 1.35;
}

.share-safety-grid {
  display: grid;
  gap: 8px;
}

.share-safety-grid {
  grid-template-columns: 1fr;
}

.share-safety-grid label {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 15px;
  background: rgba(18, 17, 15, 0.24);
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.destination-suggestions .run-area-toggle {
  grid-column: 1 / -1;
  min-height: 38px;
  margin-top: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.destination-suggestions .run-area-toggle {
  flex-direction: row;
  color: var(--gold);
}

.share-safety-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.25;
}

.share-safety-grid input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}

.run-custom-points {
  display: grid;
  gap: 7px;
}

.run-custom-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.run-custom-point {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 4px 4px 8px;
  border-radius: var(--luma-radius-row);
  border: 0;
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
  font-size: var(--luma-type-label-size);
  font-weight: 900;
  width: 100%;
  text-align: left;
}

.run-custom-point.selected {
  box-shadow: inset 0 0 0 2px rgba(231, 178, 77, 0.62);
}

.run-custom-point > i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  font-style: normal;
}

.run-custom-point > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtle-button {
  width: 100%;
  color: var(--luma-text-secondary);
}

.run-setting-group {
  display: grid;
  gap: 8px;
}

.run-setting-group > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.run-weight-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 10px;
  border: 1px solid rgba(101, 167, 255, 0.14);
  border-radius: 14px;
  background: rgba(18, 17, 15, 0.24);
}

.run-weight-setting > span:first-child {
  color: var(--cream);
  font-size: 12px;
  font-weight: 850;
}

.run-weight-input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(244, 234, 215, 0.14);
  border-radius: 10px;
  background: rgba(244, 234, 215, 0.055);
}

.run-weight-input-wrap input {
  min-width: 0;
  width: 100%;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-weight: 800;
}

.run-weight-input-wrap strong {
  color: var(--muted);
  font-size: 11px;
}

.run-weight-setting small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.run-gender-setting {
  grid-template-columns: minmax(0, 1fr) minmax(126px, 145px);
}

.run-gender-setting select {
  min-width: 0;
  width: 100%;
  padding: 8px 28px 8px 9px;
  border: 1px solid rgba(244, 234, 215, 0.14);
  border-radius: 10px;
  outline: 0;
  background: rgba(244, 234, 215, 0.055);
  color: var(--cream);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.run-gender-setting select option {
  background: #171410;
  color: var(--cream);
}

.run-profile-setup-sheet .sheet-copy {
  margin-bottom: 14px;
}

.run-profile-setup-fields,
.run-settings-fields {
  display: grid;
  gap: 10px;
}

.run-profile-setup-help,
.run-settings-help {
  margin: 10px 2px 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.run-profile-setup-help.error {
  color: #f09a8e !important;
}

.run-profile-setup-actions {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.run-custom-distance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 8px 9px 8px 11px;
  border: 1px solid rgba(139, 203, 150, 0.16);
  border-radius: 14px;
  background: rgba(18, 17, 15, 0.26);
}

.run-custom-distance[hidden] {
  display: none !important;
}

.run-custom-distance span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.run-distance-stepper {
  display: inline-grid;
  grid-template-columns: 34px minmax(58px, auto) 34px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.run-distance-stepper button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(231, 178, 77, 0.2);
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.1);
  color: var(--gold-soft);
  font-size: 16px;
  font-weight: 950;
}

.run-distance-stepper strong {
  min-width: 58px;
  padding: 0 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.run-distance-stepper button:active {
  transform: scale(0.96);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip-row button,
.run-toggle {
  min-height: 36px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.chip-row button {
  padding: 0 12px;
}

.chip-row button.active {
  border-color: rgba(231, 178, 77, 0.46);
  background: rgba(231, 178, 77, 0.16);
  color: var(--gold-soft);
  box-shadow: 0 0 16px rgba(231, 178, 77, 0.1);
}

.run-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.run-shape-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.run-shape-row button {
  width: 100%;
  padding-inline: 7px;
  font-size: 11px;
}

.just-run-actions {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(231, 178, 77, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0%, rgba(243, 201, 106, 0.13), transparent 42%),
    radial-gradient(circle at 94% 100%, rgba(139, 203, 150, 0.1), transparent 42%),
    rgba(244, 234, 215, 0.045);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.055);
}

.just-run-actions[hidden] {
  display: none !important;
}

.just-run-actions strong {
  display: block;
  color: var(--cream);
  font-size: 14px;
  font-weight: 950;
}

.just-run-actions span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.just-run-actions .journey-actions {
  margin-top: 0;
}

.run-toggle input {
  accent-color: var(--gold);
}

.run-confidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.run-confidence-grid article {
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: rgba(18, 17, 15, 0.28);
}

.run-confidence-grid span,
.run-confidence-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-confidence-grid span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.run-confidence-grid strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
}

.strava-export-button {
  width: 100%;
  margin-top: 12px;
}

.floating-card p,
.eyebrow {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.floating-card h2,
.bottom-sheet h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: 0;
}

.alert-card strong {
  display: none;
}

.alert-card p {
  display: none;
  margin-right: 26px;
  margin-bottom: 5px;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.alert-card h2 {
  padding-right: 20px;
  font-size: 13px;
  line-height: 1.22;
}

.alert-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.alert-actions button:nth-child(2) {
  background: rgba(244, 234, 215, 0.1);
  color: var(--text);
}

.alert-actions button:nth-child(3) {
  grid-column: auto;
}

.nudge-actions {
  grid-template-columns: 1fr 1fr;
}

.card-close,
.sheet-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(244, 234, 215, 0.08);
  color: var(--muted);
}

.card-close {
  top: 10px;
  right: 10px;
}

.quick-actions,
.verify-row,
.success-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.quick-actions button,
.verify-row button {
  min-height: 42px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.08);
  color: var(--text);
  font-weight: 800;
}

.alert-actions button {
  min-height: 30px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 1.1;
}

.quick-actions button:first-child,
.verify-row button:first-child {
  background: rgba(231, 178, 77, 0.18);
  color: var(--gold);
}

.stars {
  display: flex;
  gap: 7px;
}

.stars button {
  --star-size: 40px;
  position: relative;
  flex: 0 0 var(--star-size);
  display: grid;
  place-items: center;
  width: var(--star-size);
  min-width: var(--star-size);
  height: var(--star-size);
  min-height: var(--star-size);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(244, 234, 215, 0.08), transparent 58%),
    rgba(244, 234, 215, 0.055);
  color: rgba(244, 234, 215, 0.48);
  font-size: 0;
  line-height: 0;
  text-shadow: 0 0 12px rgba(231, 178, 77, 0);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.08), 0 8px 18px rgba(18, 12, 6, 0.16);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.stars button::before {
  content: none;
}

.stars button .rating-star-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(var(--star-size) * 0.53);
  height: calc(var(--star-size) * 0.53);
  overflow: visible;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 8px rgba(231, 178, 77, 0));
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  transition: filter 180ms ease, transform 180ms ease;
}

.stars button.active,
.stars button:hover {
  border-color: rgba(231, 178, 77, 0.32);
  background:
    radial-gradient(circle at 50% 38%, rgba(244, 234, 215, 0.24), transparent 48%),
    linear-gradient(180deg, rgba(231, 178, 77, 0.26), rgba(231, 178, 77, 0.1));
  color: var(--gold);
  text-shadow: 0 0 14px rgba(231, 178, 77, 0.56);
  box-shadow: 0 0 0 5px rgba(231, 178, 77, 0.08), 0 12px 24px rgba(18, 12, 6, 0.24), 0 0 18px rgba(231, 178, 77, 0.18);
  transform: translateY(-2px) scale(1.03);
}

.stars button.active .rating-star-icon,
.stars button:hover .rating-star-icon {
  filter: drop-shadow(0 0 9px rgba(231, 178, 77, 0.48));
  transform: translate(-50%, -50%) scale(1.04);
}

.stars button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.stars button:focus-visible {
  outline: 2px solid rgba(255, 216, 130, 0.96);
  outline-offset: 3px;
}

.stars button.rating-pop {
  animation: starRewardPop 620ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.rating-dazzle {
  position: absolute;
  z-index: 70;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.rating-dazzle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(244, 234, 215, 0.72), rgba(243, 201, 106, 0.34) 30%, transparent 68%);
  filter: blur(1px);
  transform: translate(-50%, -50%) scale(0.2);
  animation: ratingGlowBurst 780ms ease-out forwards;
}

.rating-dazzle span {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-strong);
  box-shadow: 0 0 14px rgba(243, 201, 106, 0.78);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: ratingSpark 820ms ease-out forwards;
}

.rating-dazzle span:nth-child(1) {
  --spark-x: -36px;
  --spark-y: -18px;
}

.rating-dazzle span:nth-child(2) {
  --spark-x: -18px;
  --spark-y: -34px;
  animation-delay: 35ms;
}

.rating-dazzle span:nth-child(3) {
  --spark-x: 24px;
  --spark-y: -30px;
  animation-delay: 70ms;
}

.rating-dazzle span:nth-child(4) {
  --spark-x: 38px;
  --spark-y: -4px;
  animation-delay: 105ms;
}

.rating-dazzle span:nth-child(5) {
  --spark-x: 18px;
  --spark-y: 30px;
  animation-delay: 140ms;
}

.rating-dazzle span:nth-child(6) {
  --spark-x: -28px;
  --spark-y: 24px;
  animation-delay: 175ms;
}

.inline-stars {
  margin-top: 12px;
}

.rating-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.community-pulse {
  position: absolute;
  z-index: 12;
  left: 18px;
  right: 86px;
  bottom: 106px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 10px 10px 12px;
  border-radius: 24px;
}

.community-pulse strong,
.community-pulse span {
  display: block;
}

.community-pulse strong {
  font-size: 13px;
  line-height: 1.15;
}

.community-pulse span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.community-pulse button {
  min-width: 48px;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.18);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.start-walk-button {
  position: absolute;
  z-index: 13;
  left: 18px;
  bottom: 114px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(231, 178, 77, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(231, 178, 77, 0.96), rgba(214, 155, 49, 0.94));
  color: #21180b;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 14px 30px rgba(18, 12, 6, 0.34), 0 0 24px rgba(231, 178, 77, 0.22);
}

.start-walk-button.active {
  border-color: rgba(139, 203, 150, 0.42);
  background:
    linear-gradient(180deg, rgba(139, 203, 150, 0.96), rgba(111, 174, 120, 0.92));
  color: #101b12;
  box-shadow: 0 14px 30px rgba(18, 12, 6, 0.34), 0 0 24px rgba(139, 203, 150, 0.18);
}

.share-walk-map {
  position: absolute;
  z-index: 13;
  left: 130px;
  bottom: 114px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 999px;
  background: rgba(34, 32, 28, 0.78);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(18, 12, 6, 0.3);
  backdrop-filter: blur(16px);
}

.share-status-card {
  position: absolute;
  z-index: 13;
  left: 130px;
  right: 18px;
  bottom: calc(184px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 9px 9px 12px;
  border: 1px solid rgba(139, 203, 150, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 24%, rgba(139, 203, 150, 0.12), transparent 42%),
    rgba(34, 32, 28, 0.8);
  box-shadow: 0 14px 34px rgba(18, 12, 6, 0.34), 0 0 22px rgba(139, 203, 150, 0.08);
  backdrop-filter: blur(18px);
}

.share-walk-map[hidden],
.share-status-card[hidden] {
  display: none !important;
}

.emergency-map-button {
  position: absolute;
  z-index: 13;
  left: 18px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(244, 234, 215, 0.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 20%, rgba(231, 178, 77, 0.16), transparent 42%),
    rgba(34, 32, 28, 0.78);
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(18, 12, 6, 0.28);
  backdrop-filter: blur(16px);
}

.emergency-map-button svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
}

.emergency-map-button:hover {
  border-color: rgba(231, 178, 77, 0.32);
  background:
    radial-gradient(circle at 28% 20%, rgba(231, 178, 77, 0.24), transparent 42%),
    rgba(34, 32, 28, 0.88);
}

.share-status-card strong,
.share-status-card span {
  display: block;
}

.share-status-card strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.18;
}

.share-status-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.share-status-card button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.08);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
}

.sheet-handle.mini {
  position: static;
  margin: 0 auto 3px;
}

.map-controls {
  position: absolute;
  z-index: 12;
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  top: 218px;
  display: grid;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
}

.map-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(244, 234, 215, 0.08);
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  transition: transform 170ms ease, background 170ms ease, color 170ms ease, opacity 170ms ease;
}

.map-controls button:hover,
.map-controls button.pressed {
  background: rgba(231, 178, 77, 0.16);
  color: var(--gold);
  transform: scale(1.05);
}

.map-controls button:disabled {
  opacity: 0.38;
  transform: none;
  cursor: default;
}

.map-controls button.recenter-needed {
  background: rgba(231, 178, 77, 0.22);
  color: var(--gold);
  box-shadow: 0 0 0 2px rgba(231, 178, 77, 0.2);
}

.map-controls button.is-locating,
.navigation-status-actions button[data-navigation-recenter].is-locating {
  color: var(--gold);
  box-shadow: 0 0 0 2px rgba(231, 178, 77, 0.2);
}

.map-controls button.is-locating svg {
  animation: lumaLocatePulse 900ms ease-in-out infinite;
}

@keyframes lumaLocatePulse {
  0%, 100% { transform: scale(0.88); opacity: 0.58; }
  50% { transform: scale(1); opacity: 1; }
}

.navigation-orientation-control svg {
  width: 21px;
  height: 21px;
}

.navigation-orientation-control.pressed svg {
  filter: drop-shadow(0 0 4px rgba(231, 178, 77, 0.3));
}

.report-fab {
  position: absolute;
  z-index: 13;
  right: max(18px, calc(env(safe-area-inset-right) + 18px));
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gold);
  color: #21180b;
  box-shadow: 0 0 0 6px rgba(231, 178, 77, 0.12), 0 14px 34px rgba(231, 178, 77, 0.34);
}

.report-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

.report-fab .report-fab-plus {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.floating-nav {
  position: absolute;
  z-index: 34;
  left: max(6px, env(safe-area-inset-left));
  right: max(6px, env(safe-area-inset-right));
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 5px 6px max(5px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
}

.tab-page {
  position: absolute;
  inset: 0;
  z-index: 26;
  display: none;
  overflow-y: auto;
  padding:
    calc(22px + env(safe-area-inset-top))
    max(16px, calc(env(safe-area-inset-right) + 16px))
    calc(112px + env(safe-area-inset-bottom))
    max(16px, calc(env(safe-area-inset-left) + 16px));
  background:
    radial-gradient(circle at 50% 0%, rgba(231, 178, 77, 0.13), transparent 32%),
    radial-gradient(circle at 90% 88%, rgba(139, 203, 150, 0.08), transparent 26%),
    linear-gradient(180deg, #1b1916 0%, #12110f 100%);
}

.tab-page.active {
  display: block;
  animation: pageIn 220ms ease both;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.page-header h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0;
}

.page-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-hero,
.profile-progress-card,
.status-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(244, 234, 215, 0.045);
  box-shadow: 0 18px 44px rgba(18, 12, 6, 0.28);
}

.profile-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
  padding: 18px;
}

.profile-hero p,
.profile-progress-card p,
.status-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-hero h2 {
  margin: 5px 0;
  font-size: 24px;
}

.profile-hero strong {
  color: var(--gold);
}

.profile-progress-card {
  margin-top: 12px;
  padding: 16px;
}

.profile-progress-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.profile-stats.large {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 12px;
}

.profile-stats.large article {
  min-height: 94px;
  padding: 18px 12px;
}

.profile-stats.large strong {
  font-size: 24px;
}

.status-card {
  margin-top: 12px;
  padding: 18px;
}

.status-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.status-card p:not(.eyebrow) {
  line-height: 1.5;
}

.settings-panel.standalone {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  background: rgba(244, 234, 215, 0.04);
}

.floating-nav button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: 15px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.floating-nav button.active,
.floating-nav button:hover {
  background: rgba(231, 178, 77, 0.14);
  color: var(--gold);
}

.floating-nav svg {
  width: 17px;
  height: 17px;
}

.sheet-backdrop,
.success-modal {
  position: absolute;
  inset: 0;
  z-index: 38;
  background: rgba(18, 12, 6, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.success-modal:not(.show) {
  visibility: hidden;
}

.sheet-backdrop.visible,
.success-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.phone-shell.quick-rating-map-pick .sheet-backdrop.visible {
  pointer-events: none;
}

.phone-shell.routes-ready .sheet-backdrop.visible {
  opacity: 0;
  pointer-events: auto;
}

.bottom-sheet {
  position: absolute;
  z-index: 40;
  left: max(10px, calc(env(safe-area-inset-left) + 10px));
  right: max(10px, calc(env(safe-area-inset-right) + 10px));
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
  max-height: min(78vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    24px
    18px
    calc(20px + env(safe-area-inset-bottom))
    18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(231, 178, 77, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(34, 32, 28, 0.98), rgba(27, 25, 22, 0.98));
  transform: translate3d(0, calc(100% + 18px), 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  backdrop-filter: none;
  contain: layout paint style;
  transition:
    transform 260ms cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity 180ms ease,
    visibility 0s linear 260ms;
}

.bottom-sheet.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  will-change: transform, opacity;
  transition:
    transform 260ms cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity 180ms ease,
    visibility 0s;
}

.bottom-sheet.dragging {
  user-select: none;
}

.bottom-sheet.soft-refresh {
  animation: sheetContentSettle 180ms ease both;
}

@keyframes sheetContentSettle {
  from {
    filter: saturate(0.92) brightness(0.96);
  }
  to {
    filter: saturate(1) brightness(1);
  }
}

.bottom-sheet.compact {
  max-height: min(58vh, 520px);
}

.bottom-sheet.more-sheet {
  max-height: min(52vh, 430px);
}

.more-action-list {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.more-action-list > button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid rgba(244, 234, 215, 0.11);
  border-radius: 18px;
  background: rgba(244, 234, 215, 0.055);
  color: var(--text);
  text-align: left;
}

.more-action-list > button:hover,
.more-action-list > button:focus-visible {
  border-color: rgba(231, 178, 77, 0.34);
  background: rgba(231, 178, 77, 0.1);
  outline: 0;
}

.more-action-list svg {
  width: 24px;
  height: 24px;
  justify-self: center;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.more-action-list strong,
.more-action-list small {
  display: block;
}

.more-action-list strong {
  font-size: 14px;
  line-height: 1.2;
}

.more-action-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.bottom-sheet.compact.map-place-sheet {
  max-height: min(76vh, 650px);
  border: 1px solid rgba(231, 178, 77, 0.16);
  background:
    radial-gradient(circle at 18% 0%, rgba(231, 178, 77, 0.13), transparent 40%),
    linear-gradient(180deg, rgba(35, 33, 29, 0.985), rgba(26, 24, 21, 0.99));
  box-shadow: 0 -18px 46px rgba(18, 12, 6, 0.28);
}

.map-place-photo {
  position: relative;
  min-height: 116px;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.11);
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 26%, rgba(231, 178, 77, 0.2), transparent 37%),
    linear-gradient(135deg, rgba(80, 69, 49, 0.46), rgba(31, 29, 25, 0.92));
}

.map-place-photo img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.map-place-photo img[hidden],
.map-place-photo-placeholder[hidden] {
  display: none;
}

.map-place-photo-placeholder {
  display: grid;
  min-height: 116px;
  place-content: center;
  gap: 5px;
  padding: 20px;
  text-align: center;
}

.map-place-photo-placeholder span {
  color: var(--gold);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-place-photo-placeholder strong {
  color: rgba(244, 234, 215, 0.78);
  font-size: 12px;
}

.map-place-photo-placeholder.campus-category-placeholder {
  min-height: 116px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--campus-art, #e7b24d) 24%, transparent), transparent 52%),
    linear-gradient(145deg, rgba(47, 41, 32, 0.82), rgba(23, 21, 18, 0.94));
}

.campus-detail-art {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 5px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--campus-art, #e7b24d) 34%, rgba(244, 234, 215, 0.12));
  border-radius: 18px;
  background: color-mix(in srgb, var(--campus-art, #e7b24d) 13%, rgba(20, 18, 15, 0.82));
  color: var(--campus-art, var(--gold-soft));
}

.campus-detail-art svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-place-photo figcaption {
  position: absolute;
  right: 9px;
  bottom: 9px;
  max-width: calc(100% - 18px);
  padding: 5px 8px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.78);
  color: rgba(244, 234, 215, 0.8);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.025em;
  backdrop-filter: blur(8px);
}

.map-place-photo-contribute {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin-top: 9px;
}

.map-place-photo-upload {
  min-height: 36px;
  padding: 8px 13px;
  border-color: rgba(231, 178, 77, 0.26);
  color: var(--gold);
  font-size: 10px;
  white-space: nowrap;
}

.map-place-photo-contribute small {
  max-width: 150px;
  color: rgba(244, 234, 215, 0.56);
  font-size: 8px;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.map-place-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.map-place-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.055);
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.map-place-meta span:first-child {
  border-color: rgba(231, 178, 77, 0.2);
  background: rgba(231, 178, 77, 0.09);
  color: var(--gold);
}

.map-place-prototype-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(231, 178, 77, 0.42);
  border-radius: 0 12px 12px 0;
  background: rgba(231, 178, 77, 0.055);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.map-place-details {
  display: grid;
  gap: 1px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.085);
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.035);
}

.map-place-details > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.7fr) minmax(0, 1.6fr);
  gap: 12px;
  padding: 10px 12px;
  background: rgba(20, 18, 15, 0.34);
}

.map-place-details > div[hidden] {
  display: none;
}

.map-place-details dt,
.map-place-details dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.map-place-details dt {
  color: var(--muted);
  font-weight: 750;
}

.map-place-details dd {
  color: rgba(244, 234, 215, 0.9);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.map-place-phone-list {
  display: grid;
  gap: 6px;
}

.map-place-phone-link {
  color: var(--gold);
  font: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
}

.map-place-phone-link:hover,
.map-place-phone-link:focus-visible {
  text-decoration: underline;
}

.map-place-contact-unavailable {
  color: var(--muted);
  font-weight: 650;
}

.map-place-website {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(231, 178, 77, 0.2);
  border-radius: 12px;
  background: rgba(231, 178, 77, 0.08);
  color: var(--gold);
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
}

.map-place-website[hidden] {
  display: none;
}

.map-place-website[aria-disabled="true"] {
  border-color: rgba(244, 234, 215, 0.08);
  background: rgba(244, 234, 215, 0.035);
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}

.map-place-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.map-place-actions:has(.map-place-call:not([hidden])) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.map-place-call {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.map-place-call[hidden] {
  display: none;
}

.map-place-actions .primary-button,
.map-place-actions .secondary-button {
  min-height: 50px;
  margin-top: 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.2;
}

.bottom-sheet[data-sheet="reports"],
.bottom-sheet[data-sheet="safe-zones"],
.bottom-sheet[data-sheet="campus"] {
  bottom: calc(58px + max(6px, env(safe-area-inset-bottom)));
  max-height: min(72%, calc(100% - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  min-height: 180px;
  scroll-padding-top: 44px;
}

.bottom-sheet.route-compare-sheet {
  left: max(12px, calc(env(safe-area-inset-left) + 12px));
  right: max(12px, calc(env(safe-area-inset-right) + 12px));
  bottom: calc(86px + env(safe-area-inset-bottom));
  max-height: min(33vh, 272px);
  padding: 16px 12px 12px;
  border-radius: 26px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(231, 178, 77, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(34, 32, 28, 0.9), rgba(27, 25, 22, 0.92));
}

.bottom-sheet.route-compare-sheet .sheet-handle {
  width: 68px;
  height: 28px;
  margin: -13px auto 0;
}

.bottom-sheet.route-compare-sheet > .eyebrow,
.bottom-sheet.route-compare-sheet > h2,
.bottom-sheet.route-compare-sheet .route-input,
.bottom-sheet.route-compare-sheet .destination-suggestions,
.bottom-sheet.route-compare-sheet .route-helper,
.bottom-sheet.route-compare-sheet [data-show-routes],
.bottom-sheet.route-compare-sheet .route-patch-note {
  display: none !important;
}

.bottom-sheet.route-compare-sheet .sheet-close {
  top: 4px;
  right: 4px;
  z-index: 3;
  display: grid !important;
  width: 42px;
  height: 42px;
  background: rgba(244, 234, 215, 0.09);
  color: var(--text);
  font-size: 17px;
}

.bottom-sheet.route-compare-sheet .route-destination-label {
  padding-right: 48px;
}

.sheet-handle {
  position: relative;
  display: block;
  width: 68px;
  min-height: 44px;
  height: 44px;
  margin: -17px auto 2px;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
}

.sheet-handle::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(203, 191, 168, 0.48);
  transform: translateX(-50%);
  transition: width 160ms ease, background-color 160ms ease;
}

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

.sheet-handle:active::after,
.bottom-sheet.dragging .sheet-handle::after {
  width: 52px;
  background: rgba(243, 201, 106, 0.72);
}

.sheet-close {
  top: 7px;
  right: 7px;
  width: 44px;
  height: 44px;
}

.sheet-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.sheet-metrics article,
.profile-stats article,
.compact-list article,
.route-options article,
.area-action-card article {
  border: 1px solid rgba(244, 234, 215, 0.1);
  background: rgba(244, 234, 215, 0.045);
  border-radius: 18px;
}

.sheet-metrics article {
  min-height: 76px;
  padding: 11px 10px;
}

.sheet-metrics span,
.profile-stats span,
.route-options span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.sheet-metrics strong {
  display: block;
  margin-top: 7px;
  font-size: 14px;
}

.emergency-sheet,
.emergency-active-sheet,
.emergency-auth-sheet {
  border-color: rgba(244, 234, 215, 0.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(231, 178, 77, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(34, 32, 28, 0.99), rgba(27, 25, 22, 0.99));
}

.emergency-active-sheet {
  max-height: min(82vh, 720px);
}

.bottom-sheet.compact.emergency-sheet {
  max-height: min(76vh, 620px);
}

.emergency-contact-preview,
.emergency-number-card,
.emergency-service-picker,
.emergency-location-card,
.emergency-route-card,
.emergency-contact-list article {
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(231, 178, 77, 0.1), transparent 46%),
    rgba(244, 234, 215, 0.045);
}

.emergency-contact-preview,
.emergency-number-card,
.emergency-service-picker,
.emergency-route-card {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 13px;
}

.emergency-contact-preview strong,
.emergency-service-picker strong,
.emergency-location-card strong,
.emergency-route-card strong,
.emergency-contact-list strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.emergency-contact-preview span,
.emergency-number-card span,
.emergency-service-picker p,
.emergency-route-card span,
.emergency-contact-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.emergency-service-picker {
  gap: 10px;
  border-color: rgba(231, 178, 77, 0.14);
}

.emergency-service-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.emergency-service-picker button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 66px;
  padding: 9px 7px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 17px;
  background: rgba(18, 17, 15, 0.24);
  color: var(--text);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.emergency-service-picker button:hover {
  border-color: rgba(244, 234, 215, 0.18);
  background: rgba(244, 234, 215, 0.06);
}

.emergency-service-picker button.selected {
  border-color: rgba(231, 178, 77, 0.48);
  background:
    radial-gradient(circle at 12% 0%, rgba(231, 178, 77, 0.18), transparent 42%),
    rgba(231, 178, 77, 0.1);
  box-shadow:
    0 0 0 1px rgba(231, 178, 77, 0.08),
    0 12px 28px rgba(231, 178, 77, 0.1);
  transform: translateY(-1px);
}

.emergency-service-picker button span {
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
}

.emergency-service-picker button small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
}

.emergency-service-picker p {
  margin: 0;
}

.emergency-contact-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.emergency-favorite-block {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.emergency-favorite-block[hidden] {
  display: none;
}

.emergency-favorite-block small {
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
}

.emergency-favorite-options {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.emergency-favorite-options::-webkit-scrollbar {
  display: none;
}

.emergency-favorite-options button {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(231, 178, 77, 0.28);
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.07);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.emergency-favorite-options button span {
  color: var(--gold);
  font-size: 13px;
}

.emergency-favorite-options button.selected {
  border-color: rgba(243, 201, 106, 0.62);
  background: rgba(231, 178, 77, 0.16);
  box-shadow: 0 0 16px rgba(231, 178, 77, 0.14);
}

.emergency-contact-options button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(18, 17, 15, 0.28);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(244, 234, 215, 0.1);
}

.emergency-contact-options button.selected {
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 203, 150, 0.18), transparent 42%),
    rgba(139, 203, 150, 0.1);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(139, 203, 150, 0.28), 0 0 14px rgba(139, 203, 150, 0.08);
}

.emergency-number-card {
  border-color: rgba(139, 203, 150, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 203, 150, 0.12), transparent 48%),
    rgba(244, 234, 215, 0.045);
}

.emergency-hold-button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  width: 100%;
  min-height: 72px;
  margin: 14px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 210, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(180deg, #d34d3f, #a92e28);
  color: #fff7ef;
  box-shadow:
    0 18px 38px rgba(87, 24, 17, 0.38),
    0 0 0 5px rgba(211, 77, 63, 0.1);
}

.emergency-hold-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 247, 239, 0.28), rgba(255, 247, 239, 0.08));
  transform: scaleX(0);
  transform-origin: left;
}

.emergency-hold-button.holding::before {
  animation: emergencyHoldFill 3000ms linear forwards;
}

.emergency-hold-button span,
.emergency-hold-button small {
  position: relative;
  z-index: 1;
}

.emergency-hold-button span {
  font-size: 15px;
  font-weight: 950;
}

.emergency-hold-button small {
  color: rgba(255, 247, 239, 0.82);
  font-size: 11px;
  font-weight: 850;
}

.emergency-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.emergency-location-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
}

.emergency-location-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.emergency-location-card a {
  min-height: 36px;
  padding: 0 12px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.16);
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.emergency-metrics {
  grid-template-columns: 1fr;
}

.emergency-contact-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.emergency-contact-list article {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.emergency-contact-list strong,
.emergency-contact-list span,
.emergency-contact-list small {
  display: block;
}

.emergency-contact-list span {
  margin-top: 4px;
}

.emergency-contact-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.emergency-contact-list button {
  min-height: 38px;
  border: 1px solid rgba(139, 203, 150, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 203, 150, 0.16), transparent 46%),
    rgba(139, 203, 150, 0.08);
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

.emergency-contact-list:not(.expanded) article {
  grid-template-columns: 1fr;
}

.emergency-contact-list.expanded article {
  border-color: rgba(139, 203, 150, 0.18);
  background:
    radial-gradient(circle at 14% 0%, rgba(139, 203, 150, 0.12), transparent 42%),
    rgba(244, 234, 215, 0.045);
}

.emergency-active-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.biometric-button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  margin: 14px 0 12px;
  place-items: center;
  border: 1px solid rgba(139, 203, 150, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 203, 150, 0.18), transparent 50%),
    rgba(139, 203, 150, 0.08);
  color: var(--green);
  font-weight: 950;
}

.biometric-button.authenticating {
  border-color: rgba(243, 201, 106, 0.42);
  background:
    radial-gradient(circle at 18% 50%, rgba(243, 201, 106, 0.18), transparent 44%),
    rgba(42, 38, 32, 0.92);
}

.biometric-button:disabled {
  cursor: wait;
  opacity: 0.78;
}

.biometric-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.emergency-auth-field {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.emergency-auth-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 16px;
  padding: 0 13px;
  background:
    radial-gradient(circle at 14% 0%, rgba(231, 178, 77, 0.12), transparent 46%),
    rgba(244, 234, 215, 0.06);
  color: var(--text);
  font: inherit;
  outline: none;
}

.emergency-auth-field input:focus {
  border-color: rgba(231, 178, 77, 0.44);
  box-shadow: 0 0 0 3px rgba(231, 178, 77, 0.1);
}

.emergency-auth-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.area-action-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.area-action-card article {
  min-height: 68px;
  padding: 10px;
}

.area-action-card article:nth-child(2) {
  border-color: rgba(139, 203, 150, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 203, 150, 0.12), transparent 58%),
    rgba(244, 234, 215, 0.045);
}

.area-action-card article:nth-child(2) strong {
  color: var(--green);
}

.area-action-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.area-action-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 16px;
}

.area-comments-card {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 0%, rgba(231, 178, 77, 0.11), transparent 44%),
    radial-gradient(circle at 96% 22%, rgba(139, 203, 150, 0.09), transparent 38%),
    rgba(244, 234, 215, 0.045);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.05);
}

.area-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.area-comments-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.area-comment-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.area-comments-card:not(.expanded) .area-comment-list article:nth-child(n+3) {
  display: none;
}

.area-comment-list article {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(244, 234, 215, 0.08);
  border-radius: 16px;
  background: rgba(18, 17, 15, 0.22);
}

.area-comment-list article > span {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(139, 203, 150, 0.48);
}

.area-comment-body > strong,
.area-comment-body small {
  display: block;
}

.area-comment-body > strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.area-comment-body small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.comment-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.comment-like-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 46px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.055);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.comment-like-button span,
.comment-like-button strong {
  display: inline;
  color: inherit;
  font-size: 12px;
  line-height: 1;
}

.comment-like-button.liked,
.comment-like-button:hover {
  border-color: rgba(231, 178, 77, 0.3);
  background: rgba(231, 178, 77, 0.14);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(231, 178, 77, 0.12);
}

.comments-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid rgba(231, 178, 77, 0.18);
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.1);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(18, 12, 6, 0.18);
}

.comments-toggle[hidden] {
  display: none;
}

.list-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(231, 178, 77, 0.16), transparent 42%),
    rgba(244, 234, 215, 0.06);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.16);
}

.list-toggle-button[hidden] {
  display: none;
}

.area-comments-card.expanded .area-comment-list {
  animation: pageIn 180ms ease both;
}

.mini-rate {
  justify-content: space-between;
  margin-top: 13px;
  padding: 8px 9px;
  border: 1px solid rgba(231, 178, 77, 0.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(231, 178, 77, 0.08), transparent 58%),
    rgba(244, 234, 215, 0.035);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.05);
}

.mini-rate button.active,
.mini-rate button:hover {
  border-color: rgba(231, 178, 77, 0.34);
  background:
    radial-gradient(circle at 50% 38%, rgba(244, 234, 215, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(231, 178, 77, 0.24), rgba(231, 178, 77, 0.1));
  color: var(--gold);
  box-shadow: 0 0 0 5px rgba(231, 178, 77, 0.07), 0 10px 22px rgba(18, 12, 6, 0.22), 0 0 16px rgba(231, 178, 77, 0.16);
}

.report-mini-map {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 18%, rgba(139, 203, 150, 0.12), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(231, 178, 77, 0.12), transparent 38%),
    rgba(244, 234, 215, 0.045);
  box-shadow: 0 18px 38px rgba(18, 12, 6, 0.22);
}

.report-mini-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.report-mini-map-head strong,
.report-mini-map-head small {
  display: block;
}

.report-mini-map-head strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 14px;
}

.report-mini-map-head small {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.report-mini-canvas {
  position: relative;
  min-height: 130px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(28deg, transparent 0 42%, rgba(231, 178, 77, 0.14) 42% 46%, transparent 46%),
    linear-gradient(118deg, transparent 0 48%, rgba(139, 203, 150, 0.13) 48% 52%, transparent 52%),
    radial-gradient(circle at 34% 74%, rgba(231, 178, 77, 0.16), transparent 22%),
    #171511;
}

.mini-road {
  position: absolute;
  height: 7px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.16);
  box-shadow: 0 0 18px rgba(231, 178, 77, 0.08);
}

.mini-road.main {
  left: 8%;
  right: 7%;
  top: 58%;
  transform: rotate(-14deg);
}

.mini-road.cross {
  left: 20%;
  right: 22%;
  top: 38%;
  transform: rotate(31deg);
}

.mini-road.side {
  left: 45%;
  right: 8%;
  top: 72%;
  transform: rotate(-48deg);
  background: rgba(139, 203, 150, 0.14);
}

.report-mini-focus,
.report-mini-pin {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  transform: translate(-50%, -50%);
}

.report-mini-focus {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 178, 77, 0.28), transparent 68%);
}

.report-mini-pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(244, 234, 215, 0.2);
  border-radius: 50%;
  background: rgba(27, 25, 22, 0.84);
  box-shadow: 0 8px 18px rgba(18, 12, 6, 0.3);
}

.report-mini-pin span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(231, 178, 77, 0.64);
}

.report-mini-pin.green span {
  background: var(--green);
  box-shadow: 0 0 14px rgba(139, 203, 150, 0.7);
}

.report-mini-pin.orange span {
  background: #e8a24c;
}

.report-mini-pin.red span {
  background: #e27466;
  box-shadow: 0 0 14px rgba(226, 116, 102, 0.56);
}

.report-mini-pin.grey span {
  background: rgba(203, 191, 168, 0.7);
}

.report-mini-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.sheet-actions {
  grid-template-columns: repeat(3, 1fr);
}

.sheet-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.sheet-inline-actions .secondary-button {
  min-height: 46px;
  margin-top: 12px;
  padding: 0 10px;
  font-size: 12px;
}

.sheet-inline-actions.photo-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-choice {
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.photo-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.area-photos-section {
  margin-top: 14px;
  padding: 1px 0 0;
}

.area-photos-section.report-photo-top {
  margin-top: 12px;
}

.area-photos-section .sheet-section-title {
  margin-top: 10px;
}

.sheet-more {
  margin-top: 14px;
  animation: pageIn 220ms ease both;
}

.report-photo-top .photo-more {
  max-height: 292px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(231, 178, 77, 0.11), transparent 42%),
    radial-gradient(circle at 92% 16%, rgba(139, 203, 150, 0.1), transparent 42%),
    rgba(244, 234, 215, 0.045);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 178, 77, 0.42) transparent;
}

.sheet-more[hidden] {
  display: none;
}

.night-preview-card {
  position: relative;
  min-height: 132px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(139, 203, 150, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.03), rgba(18, 12, 6, 0.66)),
    radial-gradient(circle at 72% 24%, rgba(231, 178, 77, 0.68), transparent 16%),
    linear-gradient(135deg, rgba(139, 203, 150, 0.22), rgba(31, 29, 25, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(244, 234, 215, 0.04),
    0 18px 40px rgba(18, 12, 6, 0.28),
    0 0 26px rgba(139, 203, 150, 0.08);
}

.location-preview-photo {
  position: relative;
  width: 100%;
  min-height: 148px;
  margin: 4px 0 14px;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 218, 69, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(49, 45, 37, 0.96), rgba(23, 21, 18, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(8, 6, 3, 0.3);
}

.location-preview-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 9, 7, 0.02), rgba(10, 9, 7, 0.26)),
    radial-gradient(circle at 78% 20%, rgba(255, 224, 102, 0.13), transparent 26%);
}

.location-preview-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: var(--gallery-position, center);
  transition: opacity 180ms ease;
}

.location-photo-slide.photo-ready img {
  opacity: 1;
}

.location-preview-photo.photo-missing img {
  display: none;
}

.location-photo-gallery {
  min-height: 184px;
}

.location-photo-track {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
}

.location-photo-slide {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: rgba(34, 32, 28, 0.92);
}

.location-photo-slide:first-child {
  grid-row: 1 / 3;
  border-radius: 16px 10px 10px 16px;
}

.location-photo-slide.photo-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(243, 201, 106, 0.1), transparent 42%),
    linear-gradient(145deg, rgba(39, 36, 31, 0.98), rgba(25, 23, 20, 0.98));
}

.location-photo-empty-copy {
  max-width: 132px;
  padding: 12px;
  color: rgba(203, 191, 168, 0.76);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.location-photo-add.photo-empty .location-photo-empty-copy {
  display: none;
}

.location-photo-add {
  display: grid;
  place-items: center;
  color: #fff8df;
  cursor: pointer;
  isolation: isolate;
}

.location-photo-add::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(12, 10, 7, 0.48);
  transition: background 180ms ease;
}

.location-photo-add:active::after {
  background: rgba(12, 10, 7, 0.34);
}

.location-photo-add-mark,
.location-photo-add small {
  position: relative;
  z-index: 2;
}

.location-photo-add-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 238, 176, 0.72);
  border-radius: 50%;
  background: rgba(22, 18, 11, 0.68);
  box-shadow: 0 0 18px rgba(243, 201, 106, 0.28);
  color: #ffd95f;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.location-photo-add small {
  margin-top: -18px;
  color: #fff5d7;
  font-size: 9px;
  font-weight: 800;
}

.location-photo-slide.photo-missing {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 218, 69, 0.24), transparent 24%),
    linear-gradient(135deg, rgba(49, 45, 37, 0.96), rgba(23, 21, 18, 0.98));
}

.location-gallery-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -7px 2px 0;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
}

.location-photo-upload {
  min-height: 44px;
  margin-top: 10px;
  border-radius: 16px;
}

.location-photo-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.area-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.area-preview-actions .photo-upload,
.area-preview-actions .secondary-button {
  min-height: 48px;
  margin: 0;
  border-radius: 16px;
  font-size: 12px;
}

.area-photo-gallery .location-photo-slide figcaption {
  display: none;
}

.area-photo-gallery .location-photo-slide {
  min-height: 0;
}

.night-preview-card::before,
.night-preview-card::after,
.safe-thumb::before,
.safe-thumb::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.night-preview-card::before {
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 24%, rgba(244, 234, 215, 0.11) 25% 27%, transparent 28% 100%),
    linear-gradient(28deg, transparent 0 39%, rgba(139, 203, 150, 0.16) 40% 42%, transparent 43% 100%),
    linear-gradient(0deg, transparent 0 68%, rgba(244, 234, 215, 0.08) 69% 70%, transparent 71% 100%);
}

.night-preview-card::after {
  right: 24px;
  bottom: 18px;
  width: 12px;
  height: 68px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, var(--gold), rgba(231, 178, 77, 0.12));
  box-shadow:
    0 -28px 42px rgba(231, 178, 77, 0.55),
    -74px 16px 34px rgba(139, 203, 150, 0.18);
}

.night-preview-card span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 0 8px rgba(139, 203, 150, 0.12),
    0 0 34px rgba(139, 203, 150, 0.48);
}

.night-preview-card strong,
.night-preview-card small {
  position: absolute;
  left: 74px;
  right: 16px;
  z-index: 1;
  display: block;
}

.night-preview-card strong {
  bottom: 34px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.night-preview-card small {
  bottom: 17px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.night-preview-card[data-area-theme="patrick"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.66)),
    radial-gradient(circle at 24% 34%, rgba(139, 203, 150, 0.44), transparent 18%),
    radial-gradient(circle at 76% 24%, rgba(231, 178, 77, 0.76), transparent 15%),
    linear-gradient(135deg, rgba(36, 48, 34, 0.88), rgba(31, 29, 25, 0.96));
}

.night-preview-card[data-area-theme="oliver"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.68)),
    radial-gradient(circle at 78% 22%, rgba(217, 130, 75, 0.68), transparent 15%),
    radial-gradient(circle at 22% 44%, rgba(139, 203, 150, 0.22), transparent 16%),
    linear-gradient(135deg, rgba(60, 36, 24, 0.88), rgba(27, 25, 22, 0.96));
}

.night-preview-card[data-area-theme="ucc"],
.night-preview-card[data-safe-theme="campus"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 72% 23%, rgba(139, 203, 150, 0.58), transparent 16%),
    radial-gradient(circle at 30% 40%, rgba(231, 178, 77, 0.3), transparent 18%),
    linear-gradient(135deg, rgba(27, 47, 35, 0.9), rgba(24, 31, 25, 0.96));
}

.night-preview-card[data-area-theme="ballincollig"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.66)),
    radial-gradient(circle at 68% 24%, rgba(217, 130, 75, 0.56), transparent 14%),
    radial-gradient(circle at 22% 52%, rgba(139, 203, 150, 0.18), transparent 18%),
    linear-gradient(135deg, rgba(45, 34, 27, 0.92), rgba(31, 29, 25, 0.96));
}

.night-preview-card[data-area-theme="grand"],
.night-preview-card[data-area-theme="transit"],
.night-preview-card[data-safe-theme="garda"],
.night-preview-card[data-safe-theme="public"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.64)),
    radial-gradient(circle at 72% 22%, rgba(139, 203, 150, 0.5), transparent 15%),
    radial-gradient(circle at 28% 42%, rgba(231, 178, 77, 0.38), transparent 18%),
    linear-gradient(135deg, rgba(42, 46, 34, 0.9), rgba(27, 25, 22, 0.96));
}

.night-preview-card[data-safe-theme="shop"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.02), rgba(18, 12, 6, 0.62)),
    linear-gradient(90deg, rgba(139, 203, 150, 0.2) 0 18%, transparent 19% 100%),
    radial-gradient(circle at 76% 24%, rgba(231, 178, 77, 0.74), transparent 15%),
    linear-gradient(135deg, rgba(62, 43, 25, 0.88), rgba(27, 25, 22, 0.96));
}

.night-preview-card[data-safe-theme="hospital"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.02), rgba(18, 12, 6, 0.6)),
    radial-gradient(circle at 76% 24%, rgba(139, 203, 150, 0.58), transparent 16%),
    linear-gradient(135deg, rgba(33, 50, 42, 0.9), rgba(31, 29, 25, 0.96));
}

.night-preview-card[data-safe-theme="taxi"],
.night-preview-card[data-safe-theme="transit"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.03), rgba(18, 12, 6, 0.64)),
    radial-gradient(circle at 78% 24%, rgba(231, 178, 77, 0.68), transparent 14%),
    radial-gradient(circle at 24% 52%, rgba(139, 203, 150, 0.22), transparent 16%),
    linear-gradient(135deg, rgba(48, 43, 32, 0.92), rgba(26, 27, 24, 0.96));
}

.safe-night-card.has-photo {
  background:
    linear-gradient(180deg, rgba(18, 17, 15, 0.04), rgba(18, 17, 15, 0.72)),
    radial-gradient(circle at 78% 22%, rgba(231, 178, 77, 0.28), transparent 22%),
    var(--safe-preview-photo) center / cover no-repeat,
    linear-gradient(135deg, rgba(42, 46, 34, 0.9), rgba(27, 25, 22, 0.96));
}

.safe-night-card.has-photo::before {
  background:
    linear-gradient(105deg, transparent 0 24%, rgba(244, 234, 215, 0.08) 25% 27%, transparent 28% 100%),
    radial-gradient(circle at 76% 22%, rgba(231, 178, 77, 0.18), transparent 20%);
}

.secondary-button,
.primary-button {
  width: 100%;
  min-height: 58px;
  margin-top: 12px;
}

.primary-button:disabled {
  cursor: default;
  background: rgba(244, 234, 215, 0.08);
  color: var(--muted);
  box-shadow: none;
}

.secondary-button {
  background: rgba(231, 178, 77, 0.13);
  color: var(--gold);
  border: 1px solid rgba(231, 178, 77, 0.22);
}

.secondary-button:disabled {
  cursor: default;
  background: rgba(244, 234, 215, 0.06);
  color: var(--muted);
  border-color: rgba(244, 234, 215, 0.08);
}

[data-authority-note] {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.official-report-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(231, 178, 77, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 10%, rgba(231, 178, 77, 0.12), transparent 42%),
    rgba(244, 234, 215, 0.045);
}

.official-report-card h3,
.official-report-card p {
  margin: 0;
}

.official-report-card h3 {
  margin-top: 3px;
  color: var(--text);
  font-size: 15px;
}

.official-report-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.official-report-card button {
  min-height: 40px;
  white-space: nowrap;
}

.quick-official-report-card {
  margin-top: 12px;
}

.quick-official-report-card[hidden] {
  display: none;
}

.report-draft-location {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 190, 76, 0.24);
  border-radius: 15px;
  background: rgba(244, 234, 215, 0.055);
}

.report-draft-location[data-location-state="required"] {
  border-color: rgba(244, 190, 76, 0.38);
}

.report-draft-location-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(244, 190, 76, 0.13);
  color: var(--gold);
  font-size: 18px;
  font-weight: 800;
}

.report-draft-location > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.report-draft-location strong,
.report-draft-location small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-draft-location strong {
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.report-draft-location small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.report-draft-location button {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(244, 190, 76, 0.3);
  border-radius: 11px;
  background: rgba(244, 190, 76, 0.1);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .report-draft-location {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .report-draft-location button {
    grid-column: 2;
    justify-self: start;
  }
}

.issue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.quick-rate-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(231, 178, 77, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 50%, rgba(231, 178, 77, 0.2), transparent 34%),
    rgba(231, 178, 77, 0.09);
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.07);
}

.quick-rate-panel span {
  display: block;
  color: var(--gold);
  font-size: 14px;
  font-weight: 850;
}

.quick-rate-panel small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.quick-report-stars {
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
}

.stars.quick-report-stars button {
  --star-size: 29px;
}

.issue-grid button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.07);
  color: var(--text);
  text-align: left;
}

.issue-grid button strong,
.issue-grid button small {
  display: block;
}

.issue-grid button img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.issue-grid button strong {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
}

.issue-grid button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.issue-grid button.selected {
  background: rgba(231, 178, 77, 0.18);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.35);
}

.issue-grid button.selected small {
  color: var(--text-soft);
}

.broken-light-subtypes {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(231, 178, 77, 0.25);
  border-radius: 18px;
  background: rgba(244, 234, 215, 0.045);
}

.broken-light-subtypes[hidden] {
  display: none;
}

.broken-light-subtypes legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.broken-light-subtypes > p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.broken-light-subtypes > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.broken-light-subtypes button {
  min-height: 50px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(244, 234, 215, 0.065);
  color: var(--text);
  text-align: left;
}

.broken-light-subtypes button strong,
.broken-light-subtypes button span {
  display: block;
}

.broken-light-subtypes button strong {
  font-size: 12px;
}

.broken-light-subtypes button span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.broken-light-subtypes button.selected {
  background: rgba(231, 178, 77, 0.18);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.36);
}

@media (max-width: 370px) {
  .issue-grid,
  .broken-light-subtypes > div {
    grid-template-columns: 1fr;
  }
}

.sheet-field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sheet-field textarea {
  min-height: 68px;
  padding: 12px;
  resize: vertical;
  border-radius: 18px;
}

.photo-upload {
  display: grid;
  place-items: center;
  min-height: 48px;
  margin-top: 12px;
  border: 1px dashed rgba(231, 178, 77, 0.36);
  border-radius: 18px;
  color: var(--gold);
  font-weight: 800;
}

.photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.photo-preview {
  width: 100%;
  max-height: 160px;
  margin-top: 12px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.sheet-copy {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.route-input {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.route-input input,
.bottom-sheet select {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
}

.route-input input {
  font-family: var(--search-font);
  font-weight: 600;
  font-kerning: normal;
  font-optical-sizing: auto;
  letter-spacing: 0.004em;
  line-height: 1.3;
  text-rendering: optimizeLegibility;
  caret-color: var(--gold-strong);
}

.destination-search-field {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 38px;
  align-items: center;
  min-height: 50px;
  border: 1px solid rgba(244, 234, 215, 0.14);
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.065);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.destination-search-field:focus-within {
  border-color: rgba(231, 178, 77, 0.58);
  background: rgba(244, 234, 215, 0.09);
  box-shadow: 0 0 0 3px rgba(231, 178, 77, 0.1);
}

.destination-search-field > svg {
  width: 18px;
  height: 18px;
  margin-left: 13px;
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 2;
}

.route-input .destination-search-field input {
  width: 100%;
  min-width: 0;
  padding: 0 8px 0 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}

.route-input .destination-search-field input::-webkit-search-decoration,
.route-input .destination-search-field input::-webkit-search-cancel-button {
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

.destination-search-clear {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(244, 234, 215, 0.08);
  font-size: 20px;
  line-height: 1;
}

.destination-search-clear:hover,
.destination-search-clear:focus-visible {
  color: var(--text);
  background: rgba(244, 234, 215, 0.14);
}

.destination-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  font-family: var(--search-font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.destination-search-results {
  grid-template-columns: 1fr;
  max-height: min(38vh, 310px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.destination-search-empty,
.destination-search-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid rgba(244, 234, 215, 0.08);
  border-radius: 14px;
  background: rgba(244, 234, 215, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.destination-search-result {
  position: relative;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px !important;
  min-height: 60px !important;
  padding: 9px 11px !important;
}

.destination-search-result-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold-soft);
  font-size: 16px;
}

.destination-search-result-copy {
  min-width: 0;
}

.destination-search-result-copy strong,
.destination-search-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-search-result-copy small + small {
  margin-top: 3px;
  opacity: 0.82;
}

.destination-selection-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(231, 178, 77, 0.28);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(231, 178, 77, 0.12), rgba(244, 234, 215, 0.055));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.destination-selection-card[hidden] {
  display: none;
}

.destination-selection-card > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.destination-selection-card strong,
.destination-selection-card span,
.destination-selection-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-selection-card strong {
  color: var(--text);
  font: 750 14px/1.2 var(--search-font);
}

.destination-selection-card span,
.destination-selection-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.destination-selection-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: visible !important;
  border: 2px solid var(--gold);
  border-radius: 50% 50% 50% 10px;
  background: #2b2722;
  transform: rotate(-45deg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.destination-selection-icon i {
  width: 10px;
  height: 10px;
  border: 2px solid #2b2722;
  border-radius: 50%;
  background: var(--gold-soft);
  transform: rotate(45deg);
}

.destination-selection-card > button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(244, 234, 215, 0.08);
  color: var(--muted);
  font-size: 20px;
}

.luma-destination-marker {
  position: relative;
  width: 40px;
  height: 56px;
  pointer-events: none;
  overflow: visible;
}

.luma-destination-marker__lamp {
  position: absolute;
  inset: 0;
  display: block;
  width: 40px;
  height: 56px;
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(12, 11, 9, 0.92))
    drop-shadow(0 5px 6px rgba(10, 8, 5, 0.4));
}

.destination-map-picker {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.destination-map-picker[hidden] {
  display: none;
}

.custom-run-map-builder {
  position: absolute;
  right: 12px;
  bottom: calc(94px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 13;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(231, 178, 77, 0.3);
  border-radius: 18px;
  background: rgba(32, 29, 25, 0.95);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.custom-run-map-builder[hidden] {
  display: none;
}

.custom-run-map-builder > div:first-child {
  display: grid;
  gap: 2px;
}

.custom-run-map-builder strong {
  color: var(--text);
  font-size: 12px;
}

.custom-run-map-builder span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.custom-run-map-points {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 1px 1px 3px;
  scrollbar-width: none;
}

.custom-run-map-points::-webkit-scrollbar {
  display: none;
}

.custom-run-map-points button {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 2px solid rgba(231, 178, 77, 0.72);
  border-radius: 50%;
  background: #25221e;
  color: #fff3d0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  font-weight: 900;
}

.custom-run-map-points button:first-child {
  flex-basis: auto;
  min-width: 58px;
  border-color: #fff3d0;
  border-radius: 16px;
  background: #e7b24d;
  color: #211c16;
}

.custom-run-map-points button.selected {
  outline: 2px solid rgba(255, 243, 208, 0.92);
  outline-offset: 2px;
}

.custom-run-map-builder-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.custom-run-map-builder-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(244, 234, 215, 0.09);
  color: var(--text);
  font-size: 10px;
  font-weight: 850;
}

.custom-run-map-builder-actions .primary-button {
  grid-column: span 2;
  background: var(--gold);
  color: #211c16;
}

.custom-run-map-builder-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.luma-map-point-selector {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 56px;
  transform: translate3d(-50%, -100%, 0);
  pointer-events: none;
  isolation: isolate;
}

.luma-map-point-selector::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -1px;
  width: 14px;
  height: 4px;
  border-radius: 50%;
  background: rgba(28, 21, 13, 0.38);
  filter: blur(3px);
  transform: translateX(-50%) scaleX(1);
  transition: transform 210ms ease, opacity 210ms ease, filter 210ms ease;
}

.luma-map-point-selector::after {
  content: none;
}

.luma-map-point-selector__lamp {
  position: absolute;
  inset: 0 0 auto 0;
  display: block;
  width: 40px;
  height: 56px;
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(54, 38, 20, 0.96))
    drop-shadow(0 5px 6px rgba(10, 8, 5, 0.42));
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 100%;
  transition: transform 210ms cubic-bezier(0.2, 0.75, 0.3, 1), filter 210ms ease;
}

.destination-map-picker[data-map-point-state="moving"] .luma-map-point-selector__lamp {
  filter:
    drop-shadow(0 1px 0 rgba(54, 38, 20, 0.96))
    drop-shadow(0 8px 9px rgba(10, 8, 5, 0.34));
  transform: translate3d(0, -4px, 0);
}

.destination-map-picker[data-map-point-state="moving"] .luma-map-point-selector::before {
  opacity: 0.72;
  filter: blur(4px);
  transform: translateX(-50%) scaleX(1.22);
}

.destination-map-picker[data-map-point-state="confirmed"] .luma-map-point-selector__lamp {
  animation: lumaMapPointConfirmed 190ms ease-out both;
}

.destination-map-picker[data-map-point-state="confirmed"] .luma-map-point-selector {
  filter: drop-shadow(0 0 5px rgba(231, 178, 77, 0.28));
}

@keyframes lumaMapPointConfirmed {
  50% {
    transform: scale(1.045);
  }
}

.destination-map-picker-actions {
  position: absolute;
  right: 12px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  pointer-events: auto;
  border: 1px solid rgba(231, 178, 77, 0.28);
  border-radius: 18px;
  background: rgba(32, 29, 25, 0.94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.destination-map-picker-actions > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.destination-map-picker-actions strong {
  color: var(--text);
  font-size: 12px;
}

.destination-map-picker-actions span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.destination-map-picker-actions button {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(244, 234, 215, 0.09);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.destination-map-picker-actions .primary-button {
  background: var(--gold);
  color: #211c16;
}

@media (prefers-reduced-motion: reduce) {
  .destination-search-field,
  .luma-destination-marker,
  .luma-map-point-selector::before,
  .luma-map-point-selector__lamp {
    transition: none;
    animation: none !important;
  }

  .destination-map-picker[data-map-point-state="moving"] .luma-map-point-selector__lamp {
    transform: none;
  }

  .destination-map-picker[data-map-point-state="moving"] .luma-map-point-selector::before {
    opacity: 1;
    filter: blur(3px);
    transform: translateX(-50%) scaleX(1);
  }
}

.destination-suggestion-label {
  grid-column: 1 / -1;
  margin: 2px 0 -2px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.destination-suggestion-label.secondary {
  margin-top: 8px;
  color: var(--muted);
}

.destination-suggestions[hidden],
.route-results[hidden],
[data-show-routes][hidden] {
  display: none !important;
}

.destination-suggestions button {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.065);
  color: var(--text);
  font-size: 12px;
  font-family: var(--search-font);
  font-weight: 600;
  letter-spacing: 0.004em;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.destination-suggestions button:hover,
.destination-suggestions button.selected {
  background: rgba(231, 178, 77, 0.15);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.28);
}

.destination-suggestions button.most-used {
  background:
    linear-gradient(135deg, rgba(231, 178, 77, 0.17), rgba(111, 174, 120, 0.08)),
    rgba(244, 234, 215, 0.07);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.22);
}

.destination-suggestions button strong,
.destination-suggestions button small {
  display: block;
  line-height: 1.15;
}

.destination-suggestions button strong {
  font-weight: 700;
}

.destination-suggestions mark {
  padding: 0 2px;
  border-radius: 5px;
  background: rgba(243, 201, 106, 0.22);
  color: var(--gold-soft);
  box-shadow: 0 0 12px rgba(231, 178, 77, 0.16);
}

.destination-suggestions button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.006em;
  line-height: 1.25;
}

.destination-suggestions button.selected small,
.destination-suggestions button:hover small {
  color: var(--gold-soft);
}

.route-helper,
.route-destination-label {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.route-destination-label {
  font-family: var(--search-font);
  font-kerning: normal;
  letter-spacing: 0.003em;
  text-rendering: optimizeLegibility;
}

.route-destination-label strong {
  color: var(--text);
  font-weight: 700;
}

.route-helper.ready {
  color: var(--gold);
}

.route-patch-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.route-patch-note span {
  flex: 0 0 auto;
  width: 30px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139, 203, 150, 0.9), rgba(243, 201, 106, 0.95), rgba(222, 150, 91, 0.95), rgba(205, 95, 90, 0.92));
  box-shadow: 0 0 14px rgba(231, 178, 77, 0.18);
}

.better-lit-route-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 9px 0 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.2;
}

.better-lit-route-legend[hidden] {
  display: none !important;
}

.better-lit-route-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.better-lit-route-legend i {
  display: inline-block;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #8e8b84;
}

.better-lit-route-legend i.well-lit {
  background: #63b879;
}

.better-lit-route-legend i.moderate {
  background: #e3a83c;
}

.better-lit-route-legend i.lower-light {
  background: #e6724f;
}

.better-lit-route-legend i.unknown {
  background: #f2b84b;
}

.better-lit-route-legend i.warning {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(223, 118, 89, 0.7);
  border-radius: 50%;
  background: rgba(43, 33, 24, 0.88);
  color: #ffd4a3;
  font-style: normal;
  font-weight: 800;
}

.route-results {
  margin-top: 14px;
  animation: pageIn 220ms ease both;
}

.route-options-wrap {
  position: relative;
  margin-top: 14px;
  --route-arrow-space: 42px;
  --route-option-gap: 6px;
}

.route-options {
  display: flex;
  width: calc(100% - var(--route-arrow-space));
  gap: var(--route-option-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 0 4px 1px;
  scroll-padding-inline: 1px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.route-options.walk-comparison {
  width: 100%;
  overflow: visible;
}

.route-options.walk-comparison article {
  flex: 1 1 calc((100% - (2 * var(--route-option-gap))) / 3);
  min-height: 104px;
}

.route-options-wrap.walk-comparison {
  --route-arrow-space: 0px;
  overflow-x: hidden;
}

.route-options-wrap.walk-comparison .route-more-button {
  display: none;
}

.bottom-sheet.route-compare-sheet.better-lit-comparison {
  max-height: min(48vh, 390px);
}

.route-compare-sheet.better-lit-comparison .route-options article {
  flex: 1 1 calc((100% - (2 * var(--route-option-gap))) / 3);
  min-height: 104px;
}

.route-compare-sheet.better-lit-comparison .better-lit-route-legend {
  margin-top: 7px;
}

.route-options::-webkit-scrollbar {
  display: none;
}

.route-options article {
  position: relative;
  flex: 0 0 calc((100% - (2 * var(--route-option-gap))) / 3);
  min-width: 0;
  min-height: 90px;
  padding: 10px 7px;
  border-radius: 17px;
  scroll-snap-align: start;
}

.route-compare-sheet .route-results {
  margin-top: 0;
}

.route-results-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.route-results-head .route-destination-label {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.route-compare-sheet .route-destination-label {
  margin: 0;
  padding-right: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-results-back {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.07);
  color: var(--muted);
}

.route-results-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-results-back:active {
  transform: scale(0.96);
}

.route-compare-sheet .route-results-head {
  padding-right: 44px;
}

.route-compare-sheet .route-destination-label {
  min-width: 0;
  padding-right: 0;
}

.route-compare-sheet .route-results-back {
  width: 30px;
  height: 30px;
}

.route-compare-sheet .route-options-wrap {
  margin-top: 9px;
}

.route-compare-sheet .route-options {
  gap: var(--route-option-gap);
  padding-right: 0;
  scroll-padding-inline: 1px 0;
}

.route-compare-sheet .route-options article {
  flex: 0 0 calc((100% - (2 * var(--route-option-gap))) / 3);
  min-width: 0;
  min-height: 90px;
  padding: 10px 7px;
  border-radius: 17px;
}

.route-more-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 1px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 48px;
  border: 1px solid rgba(231, 178, 77, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 20%, rgba(243, 201, 106, 0.24), transparent 52%),
    rgba(31, 28, 24, 0.86);
  color: var(--gold-soft);
  box-shadow: 0 12px 24px rgba(18, 12, 6, 0.2), 0 0 16px rgba(231, 178, 77, 0.12);
  transform: translateY(-50%);
}

.route-more-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-more-button:active {
  transform: translateY(-50%) scale(0.94);
}

.route-options article.active {
  border-color: rgba(231, 178, 77, 0.62);
  background: rgba(231, 178, 77, 0.14);
  box-shadow: 0 0 0 1px rgba(243, 201, 106, 0.2), 0 0 28px rgba(231, 178, 77, 0.16);
}

.route-options article[data-route-selection-state="selected"]::after {
  content: "\2713";
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 224, 153, 0.62);
  border-radius: 50%;
  background: rgba(34, 27, 19, 0.82);
  color: #ffe099;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.route-options p {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-local {
  display: none;
  margin: -3px 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.route-facts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 6px;
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.route-options.walk-comparison .route-local,
.route-options.walk-comparison [data-route-distance],
.route-options.walk-comparison .route-facts-divider,
.route-options.walk-comparison [data-route-run-primary],
.route-options.walk-comparison [data-route-lighting-label] {
  display: none !important;
}

.route-options.walk-comparison .route-facts {
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 1;
}

.route-options.walk-comparison [data-route-lighting] {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-wrap: balance;
}

.route-facts i {
  color: var(--subtle);
  font-style: normal;
}

.route-facts.loading {
  color: var(--muted);
}

.route-score-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.phone-shell.run-mode .route-score-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.route-score-row span {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
}

.route-score-row em {
  display: block;
  color: inherit;
  font-style: normal;
}

.run-route-extra[hidden],
.run-route-strip[hidden] {
  display: none !important;
}

.phone-shell.run-mode .route-options article {
  border-color: rgba(139, 203, 150, 0.14);
  background:
    radial-gradient(circle at 14% 0%, rgba(231, 178, 77, 0.075), transparent 44%),
    linear-gradient(180deg, rgba(244, 234, 215, 0.058), rgba(244, 234, 215, 0.035));
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.045);
}

.phone-shell.run-mode .route-options article.active {
  border-color: rgba(231, 178, 77, 0.48);
  background:
    radial-gradient(circle at 18% 0%, rgba(231, 178, 77, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(231, 178, 77, 0.12), rgba(244, 234, 215, 0.045));
  box-shadow: 0 0 24px rgba(231, 178, 77, 0.13), inset 0 1px 0 rgba(244, 234, 215, 0.07);
}

.phone-shell.run-mode .route-options p {
  margin-bottom: 6px;
  color: var(--gold-soft);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.phone-shell.run-mode .route-local {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.phone-shell.run-mode .route-facts {
  color: var(--subtle);
}

.phone-shell.run-mode .route-score-row span {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.phone-shell.run-mode .route-score-row span:nth-child(2) strong {
  color: #bff0c6;
}

.phone-shell.run-mode .route-score-row span:nth-child(3) strong {
  color: var(--gold-soft);
}

.route-options strong,
.route-score-row strong {
  display: block;
  margin: 0 0 2px;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.phone-shell.run-mode .route-score-row strong {
  font-size: 16px;
}

.run-route-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}

.route-options .run-route-strip {
  display: none;
}

.run-route-strip span:first-child {
  display: none;
}

.run-route-strip span,
.run-route-strip strong {
  min-width: 0;
  margin: 0;
  padding: 7px 8px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.055);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.run-route-strip strong {
  background: rgba(139, 203, 150, 0.13);
  color: #bff0c6;
}

.route-options article.active .run-route-strip strong {
  background: rgba(231, 178, 77, 0.18);
  color: var(--gold-soft);
}

.journey-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.route-compare-sheet .journey-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 10px 0 max(2px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(20, 18, 15, 0), rgba(20, 18, 15, 0.96) 28%);
}

.route-compare-sheet .route-options p {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}

.route-compare-sheet .route-local {
  display: block;
  min-height: 2.5em;
  margin: -2px 0 6px;
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
}

.route-compare-sheet .route-facts {
  justify-content: center;
  gap: 4px;
  margin: 0 0 6px;
  font-size: 9px;
  white-space: nowrap;
}

.route-compare-sheet .route-score-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.phone-shell.run-mode .route-compare-sheet .route-score-row {
  grid-template-columns: 1fr;
}

.route-compare-sheet .route-score-row span {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}

.route-compare-sheet .route-score-row strong {
  display: block;
  margin: 0 0 2px;
  font-size: 16px;
}

.route-compare-sheet .run-route-strip {
  display: none;
}

.journey-actions .primary-button,
.journey-actions .secondary-button {
  width: 100%;
  min-height: 46px;
}

.walk-start-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 15px;
}

.walk-start-options.sharing-open {
  grid-template-columns: 1fr;
}

.walk-start-options .primary-button,
.walk-start-options .secondary-button {
  min-height: 48px;
}

.share-choice-panel {
  margin-top: 14px;
  animation: pageIn 220ms ease both;
}

.share-choice-panel[hidden] {
  display: none !important;
}

.share-link-panel {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(231, 178, 77, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(231, 178, 77, 0.14), transparent 45%),
    rgba(244, 234, 215, 0.045);
}

.share-link-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.share-link-heading strong,
.share-link-heading span {
  display: block;
}

.share-link-heading strong {
  color: var(--text);
  font-size: 13px;
}

.share-link-heading > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.share-link-private {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(139, 203, 150, 0.18);
  border-radius: 999px;
  color: var(--green);
  background: rgba(139, 203, 150, 0.08);
  font-size: 9px;
  font-weight: 900;
}

.share-link-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.share-link-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
}

.share-link-actions button span {
  font-size: 15px;
  line-height: 1;
}

.share-link-status {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}

.share-link-status[data-state="success"] {
  color: var(--green);
}

.share-link-status[data-state="error"] {
  color: #f0aa8f;
}

.share-intent-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.share-intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.share-automatic-title {
  color: var(--text);
  font-size: 12px;
}

.share-intent-grid > article {
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(231, 178, 77, 0.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(231, 178, 77, 0.11), rgba(244, 234, 215, 0.045));
  color: var(--text);
  text-align: left;
}

.share-intent-grid strong,
.share-intent-grid span {
  display: block;
}

.share-intent-grid strong {
  color: var(--gold);
  font-size: 12px;
}

.share-intent-grid span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.share-delivery-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}

.trusted-share-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 203, 150, 0.1), transparent 42%),
    rgba(244, 234, 215, 0.045);
}

.trusted-share-panel strong,
.trusted-share-panel span {
  display: block;
}

.trusted-share-panel strong {
  color: var(--text);
  font-size: 13px;
}

.trusted-share-panel span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.trusted-share-row {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.trusted-share-row::-webkit-scrollbar {
  display: none;
}

.trusted-share-row button {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.07);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.trusted-share-row .share-contact-select.selected,
.trusted-share-row .share-contact-select[aria-pressed="true"] {
  background: rgba(231, 178, 77, 0.16);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.3), 0 0 16px rgba(231, 178, 77, 0.12);
}

.share-forward-popup {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(231, 178, 77, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 0%, rgba(231, 178, 77, 0.14), transparent 44%),
    radial-gradient(circle at 100% 18%, rgba(139, 203, 150, 0.08), transparent 40%),
    rgba(34, 32, 28, 0.86);
  box-shadow: 0 18px 42px rgba(18, 12, 6, 0.24), inset 0 1px 0 rgba(244, 234, 215, 0.05);
  animation: pageIn 200ms ease both;
}

.share-forward-popup[hidden] {
  display: none !important;
}

.share-forward-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.share-forward-head strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 15px;
}

.share-forward-head button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(244, 234, 215, 0.08);
  color: var(--muted);
  font-weight: 900;
}

.share-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.share-method-grid button {
  min-height: 44px;
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.07);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.share-method-grid button.selected {
  background: rgba(231, 178, 77, 0.17);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.28), 0 0 16px rgba(231, 178, 77, 0.12);
}

.share-method-grid button:hover {
  background: rgba(244, 234, 215, 0.09);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(244, 234, 215, 0.12);
}

.share-method-grid button.selected:hover {
  background: rgba(231, 178, 77, 0.17);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.28), 0 0 16px rgba(231, 178, 77, 0.12);
}

.share-forward-popup small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.previous-share-panel {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.previous-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.previous-share-head strong {
  color: var(--text);
  font-size: 13px;
}

.previous-share-head button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.07);
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.previous-share-head button[hidden] {
  display: none;
}

.previous-share-list {
  display: grid;
  gap: 8px;
}

.previous-share-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.previous-share-list button {
  display: grid;
  gap: 3px;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 203, 150, 0.1), transparent 44%),
    rgba(244, 234, 215, 0.045);
  color: var(--text);
  text-align: left;
}

.previous-share-item .share-favorite-button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 0;
  color: var(--muted);
  text-align: center;
}

.previous-share-item .share-favorite-button.active {
  color: var(--gold);
}

.previous-share-list button:hover {
  border-color: rgba(139, 203, 150, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 203, 150, 0.14), transparent 44%),
    rgba(244, 234, 215, 0.06);
}

.previous-share-list strong,
.previous-share-list span {
  display: block;
}

.previous-share-list strong {
  font-size: 12px;
}

.previous-share-list span,
.previous-share-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.share-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 15px;
}

.share-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  gap: 8px;
}

.share-contact-card.no-favorite {
  grid-template-columns: minmax(0, 1fr);
}

.trusted-share-row .share-contact-card {
  flex: 0 0 204px;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 999px;
  background:
    radial-gradient(circle at 0% 0%, rgba(231, 178, 77, 0.1), transparent 42%),
    rgba(244, 234, 215, 0.06);
}

.trusted-share-row .share-contact-select,
.trusted-share-row .share-favorite-button {
  flex: initial;
  min-width: 0;
}

.trusted-share-row .share-contact-select {
  width: 100%;
  min-height: 42px;
  padding: 8px 8px 8px 13px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: transparent;
  box-shadow: none;
}

.trusted-share-row .share-favorite-button {
  position: static;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 42px;
  border: 0;
  border-left: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 0 999px 999px 0;
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 12%, rgba(244, 234, 215, 0.14), transparent 42%),
    rgba(231, 178, 77, 0.08);
  box-shadow: none;
  transform: none;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(231, 178, 77, 0.24);
}

.trusted-share-row .share-favorite-button::after {
  content: "Remove";
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}

.trusted-share-row .share-favorite-button.active,
.trusted-share-row .share-favorite-button[aria-pressed="true"] {
  color: var(--gold);
  border-color: rgba(231, 178, 77, 0.18);
  background:
    radial-gradient(circle at 50% 12%, rgba(244, 234, 215, 0.2), transparent 42%),
    rgba(231, 178, 77, 0.12);
  box-shadow: none;
  text-shadow: 0 0 14px rgba(231, 178, 77, 0.46);
}

.trusted-share-row .share-favorite-button.active::after,
.trusted-share-row .share-favorite-button[aria-pressed="true"]::after {
  color: var(--gold-soft);
}

.trusted-share-row .share-favorite-button:hover {
  background:
    radial-gradient(circle at 50% 12%, rgba(244, 234, 215, 0.14), transparent 42%),
    rgba(231, 178, 77, 0.08);
}

.trusted-share-row .share-contact-card.selected {
  border-color: rgba(231, 178, 77, 0.26);
  background:
    radial-gradient(circle at 0% 0%, rgba(231, 178, 77, 0.15), transparent 42%),
    rgba(231, 178, 77, 0.09);
}

.trusted-share-row .share-contact-card.selected .share-contact-select,
.trusted-share-row .share-contact-select[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
  color: var(--gold);
}

.trusted-share-row .share-contact-card:hover {
  border-color: rgba(244, 234, 215, 0.1);
  background:
    radial-gradient(circle at 0% 0%, rgba(231, 178, 77, 0.1), transparent 42%),
    rgba(244, 234, 215, 0.06);
}

.trusted-share-row .share-contact-card:hover .share-contact-select,
.trusted-share-row .share-contact-select:hover {
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.trusted-share-row .share-contact-card.selected,
.trusted-share-row .share-contact-card.selected:hover {
  border-color: rgba(231, 178, 77, 0.26);
  background:
    radial-gradient(circle at 0% 0%, rgba(231, 178, 77, 0.15), transparent 42%),
    rgba(231, 178, 77, 0.09);
}

.trusted-share-row .share-contact-card.selected .share-contact-select,
.trusted-share-row .share-contact-card.selected:hover .share-contact-select,
.trusted-share-row .share-contact-select[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
  color: var(--gold);
}

.share-contact-select,
.share-favorite-button {
  min-height: 46px;
  border-radius: 17px;
  background: rgba(244, 234, 215, 0.065);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.share-contact-select {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 12px;
  text-align: left;
}

.share-contact-select strong,
.share-contact-select span {
  display: block;
}

.share-contact-select span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.share-favorite-button {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  font-size: 17px;
}

.share-contact-card:hover .share-contact-select,
.share-contact-select:hover {
  background: rgba(244, 234, 215, 0.09);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(244, 234, 215, 0.12);
}

.share-contact-card.selected .share-contact-select,
.share-contact-select[aria-pressed="true"] {
  background:
    radial-gradient(circle at 20% 20%, rgba(244, 234, 215, 0.16), transparent 45%),
    rgba(231, 178, 77, 0.2);
  color: var(--gold);
  box-shadow:
    inset 0 0 0 1px rgba(231, 178, 77, 0.34),
    0 0 16px rgba(231, 178, 77, 0.12);
}

.share-contact-card.favorite .share-contact-select span,
.share-favorite-button.active {
  color: var(--gold);
}

.share-favorite-button.active {
  border-color: rgba(231, 178, 77, 0.28);
  background:
    radial-gradient(circle at 50% 30%, rgba(244, 234, 215, 0.2), transparent 48%),
    rgba(231, 178, 77, 0.12);
  box-shadow: 0 0 14px rgba(231, 178, 77, 0.14);
}

.share-selection-summary {
  margin: 10px 0 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.share-actions .secondary-button.link-ready {
  border-color: rgba(139, 203, 150, 0.28);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(139, 203, 150, 0.16);
}

.share-privacy-card {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(139, 203, 150, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 203, 150, 0.11), transparent 48%),
    rgba(244, 234, 215, 0.045);
}

.share-privacy-card strong {
  color: var(--green);
  font-size: 12px;
}

.share-privacy-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.share-actions {
  margin-top: 14px;
}

.arrival-card {
  max-height: calc(100% - 26px);
  overflow-y: auto;
  padding: 28px 18px 18px;
  background:
    radial-gradient(circle at 50% 4%, rgba(243, 201, 106, 0.16), transparent 34%),
    radial-gradient(circle at 18% 85%, rgba(139, 203, 150, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(42, 38, 32, 0.94), rgba(27, 25, 22, 0.9)),
    var(--panel);
  scrollbar-width: none;
}

.arrival-card::-webkit-scrollbar {
  display: none;
}

.arrival-card h2 {
  font-size: 24px;
  letter-spacing: 0;
}

.arrival-detail {
  max-width: 300px;
  margin-inline: auto;
}

.run-complete-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px auto 0;
  max-width: 330px;
}

.run-complete-summary[hidden] {
  display: none !important;
}

.run-complete-summary article {
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 201, 106, 0.13), transparent 62%),
    rgba(244, 234, 215, 0.055);
  box-shadow: inset 0 1px 0 rgba(244, 234, 215, 0.05);
}

.run-complete-summary strong,
.run-complete-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-complete-summary strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.run-complete-summary span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.run-complete-summary article:first-child strong,
.run-complete-summary article:nth-child(3) strong {
  color: var(--gold-soft);
}

.run-complete-summary article:first-child {
  grid-column: 1 / -1;
}

.run-complete-summary article:first-child strong {
  font-size: clamp(1.75rem, 8vw, 2.25rem);
}

.run-complete-details {
  max-width: 330px;
  margin: 10px auto 0;
  text-align: left;
}

.run-complete-details[hidden] {
  display: none !important;
}

.run-complete-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(244, 234, 215, 0.055);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.run-complete-details > summary::after {
  content: "+";
  color: var(--gold-soft);
  font-size: 18px;
}

.run-complete-details[open] > summary::after {
  content: "−";
}

.run-complete-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.run-complete-detail-grid article {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(244, 234, 215, 0.035);
}

.run-complete-detail-grid :is(strong, span) {
  display: block;
}

.run-complete-detail-grid strong {
  color: var(--text);
  font-size: 13px;
}

.run-complete-detail-grid span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.run-complete-meta {
  display: grid;
  gap: 6px;
  max-width: 330px;
  margin: 10px auto 0;
  padding: 10px 12px;
  border: 1px solid rgba(244, 234, 215, 0.08);
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.035);
  text-align: left;
}

.run-complete-meta[hidden],
.run-summary-done[hidden] {
  display: none !important;
}

.run-complete-meta div {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 10px;
}

.run-complete-meta dt,
.run-complete-meta dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
}

.run-complete-meta dt { color: var(--muted); }
.run-complete-meta dd { color: var(--text); font-weight: 800; text-align: right; }

.run-summary-done { margin-top: 10px; }

.run-complete-profile {
  display: grid;
  gap: 10px;
  max-width: 330px;
  margin: 12px auto 0;
  padding: 12px;
  border: 1px solid rgba(243, 201, 106, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(243, 201, 106, 0.11), transparent 48%),
    rgba(244, 234, 215, 0.045);
  text-align: left;
}

.run-complete-profile[hidden] {
  display: none !important;
}

.run-complete-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.run-complete-profile-head .eyebrow {
  margin: 0;
  font-size: 8px;
}

.run-complete-profile-head h3 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 14px;
}

.run-complete-profile-head > span {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(139, 203, 150, 0.09);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.run-complete-profile-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 8px;
}

.run-complete-profile-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.run-complete-profile-fields label > span:first-child {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.run-complete-weight-input {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid rgba(244, 234, 215, 0.13);
  border-radius: 11px;
  background: rgba(18, 17, 15, 0.32);
}

.run-complete-weight-input input,
.run-complete-profile-fields select {
  min-width: 0;
  width: 100%;
  min-height: 38px;
  border: 0;
  outline: 0;
  color: var(--cream);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
}

.run-complete-weight-input input {
  padding: 8px 0;
}

.run-complete-weight-input strong {
  color: var(--muted);
  font-size: 9px;
}

.run-complete-profile-fields select {
  padding: 8px 26px 8px 9px;
  border: 1px solid rgba(244, 234, 215, 0.13);
  border-radius: 11px;
  background-color: rgba(18, 17, 15, 0.32);
}

.run-complete-profile-fields select option {
  background: #171410;
  color: var(--cream);
}

.run-complete-profile > p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.4 !important;
  text-align: left;
}

.run-accuracy-note {
  max-width: 330px;
  margin: 12px auto 0 !important;
  padding: 10px 12px;
  border: 1px solid rgba(139, 203, 150, 0.14);
  border-radius: 16px;
  background: rgba(139, 203, 150, 0.055);
  color: var(--muted) !important;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.4 !important;
  text-align: left;
}

.arrival-share-note {
  display: grid;
  gap: 4px;
  max-width: 320px;
  margin: 14px auto 0;
  padding: 12px 13px;
  border: 1px solid rgba(139, 203, 150, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 14% 0%, rgba(139, 203, 150, 0.18), transparent 48%),
    rgba(139, 203, 150, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(244, 234, 215, 0.05),
    0 12px 28px rgba(18, 12, 6, 0.14);
}

.arrival-share-note[hidden] {
  display: none;
}

.arrival-share-note strong,
.arrival-share-note span {
  display: block;
}

.arrival-share-note strong {
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.arrival-share-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.arrival-question {
  margin-top: 16px !important;
  font-weight: 900;
}

.arrival-rating-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.arrival-rating-options button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 58px;
  padding: 9px 7px;
  border-radius: 18px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  background: rgba(244, 234, 215, 0.075);
  color: var(--text);
  font-weight: 900;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.arrival-rating-options button:hover {
  transform: translateY(-2px);
  background: rgba(231, 178, 77, 0.14);
  border-color: rgba(231, 178, 77, 0.3);
}

.arrival-rating-options button strong,
.arrival-rating-options button small {
  display: block;
  line-height: 1.1;
}

.arrival-rating-options button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.campus-primary-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.campus-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.campus-action-row .primary-button {
  grid-column: 1 / -1;
}

.campus-action-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding-inline: 10px;
}

.campus-action-row svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campus-picker-wrap {
  position: relative;
  z-index: 6;
}

.campus-picker-card {
  display: block;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid rgba(231, 178, 77, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 203, 150, 0.08), transparent 42%),
    rgba(244, 234, 215, 0.05);
}

.campus-picker-button {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 13px;
  background: rgba(18, 17, 15, 0.42);
}

.campus-picker-button {
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  text-align: left;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.campus-picker-label {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.campus-picker-logo,
.campus-choice-mark,
.campus-map-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.24);
  background: #fff;
  box-shadow: 0 5px 14px rgba(10, 9, 7, 0.22);
}

.campus-picker-logo {
  width: 36px;
  height: 32px;
  padding: 2px;
  border-radius: 8px;
}

.campus-picker-logo img,
.campus-choice-mark img,
.campus-map-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.campus-picker-logo[data-campus-brand="mtu"],
.campus-choice-mark[data-campus-brand="mtu"],
.campus-map-logo[data-campus-brand="mtu"] {
  padding: 4px 3px;
}

.campus-picker-logo[data-campus-brand="griffith"],
.campus-choice-mark[data-campus-brand="griffith"],
.campus-map-logo[data-campus-brand="griffith"] {
  padding: 5px 3px;
}

.campus-picker-button strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campus-picker-button svg {
  width: 18px;
  height: 18px;
  color: var(--gold-soft);
  transition: transform 180ms ease;
}

.campus-picker-button[aria-expanded="true"] {
  background: rgba(231, 178, 77, 0.1);
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.2);
}

.campus-picker-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.campus-picker-card small {
  color: var(--subtle);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.campus-choice-popover {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(231, 178, 77, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 203, 150, 0.1), transparent 38%),
    rgba(28, 26, 22, 0.98);
  box-shadow: 0 20px 46px rgba(8, 7, 5, 0.52), 0 0 24px rgba(231, 178, 77, 0.08);
  backdrop-filter: blur(18px);
  animation: campusPopoverIn 180ms ease both;
}

.campus-choice-popover[hidden] {
  display: none;
}

.campus-choice-popover button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease;
}

.campus-choice-popover button:focus-visible,
.campus-choice-popover button:hover {
  outline: 0;
  background: rgba(244, 234, 215, 0.055);
}

.campus-choice-popover button[aria-selected="true"] {
  border-color: rgba(231, 178, 77, 0.28);
  background: linear-gradient(90deg, rgba(231, 178, 77, 0.14), rgba(139, 203, 150, 0.055));
}

.campus-choice-mark {
  width: 40px;
  height: 34px;
  padding: 2px;
  border-radius: 8px;
}

.campus-choice-popover button[aria-selected="true"] .campus-choice-mark {
  border-color: rgba(139, 203, 150, 0.68);
  box-shadow: 0 0 0 2px rgba(139, 203, 150, 0.12), 0 0 15px rgba(139, 203, 150, 0.16);
}

.campus-map-logo {
  width: 38px;
  height: 34px;
  padding: 2px;
  border-radius: 9px;
  border-color: rgba(139, 203, 150, 0.7);
  box-shadow:
    0 0 0 4px rgba(139, 203, 150, 0.1),
    0 0 18px rgba(139, 203, 150, 0.26),
    0 7px 16px rgba(10, 9, 7, 0.3);
}

.campus-choice-popover button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.campus-choice-popover strong,
.campus-choice-popover small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campus-choice-popover strong {
  font-size: 12px;
}

.campus-choice-popover small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.campus-choice-popover i {
  color: var(--green);
  font-size: 13px;
  font-style: normal;
  opacity: 0;
}

.campus-choice-popover button[aria-selected="true"] i {
  opacity: 1;
}

@keyframes campusPopoverIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.campus-section {
  margin-top: 16px;
}

.campus-section-copy {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.campus-safety-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid rgba(231, 178, 77, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(231, 178, 77, 0.12), transparent 48%),
    linear-gradient(145deg, rgba(77, 58, 32, 0.2), rgba(244, 234, 215, 0.05));
}

.campus-safety-card > div {
  min-width: 0;
}

.campus-safety-card > div > b {
  overflow-wrap: anywhere;
}

.campus-safety-card > div > strong,
.campus-safety-card > div > b,
.campus-safety-card > div > small {
  display: block;
}

.campus-safety-card > div > strong {
  font-size: 14px;
}

.campus-safety-card > div > b {
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
}

.campus-safety-card > div > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.campus-support-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.campus-support-actions a,
.campus-support-actions button {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(231, 178, 77, 0.2);
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

.campus-route-grid {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.campus-route-grid button {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(231, 178, 77, 0.08), transparent 44%),
    rgba(244, 234, 215, 0.05);
  color: var(--text);
  text-align: left;
}

.campus-route-grid button:hover {
  border-color: rgba(231, 178, 77, 0.28);
  background: rgba(231, 178, 77, 0.1);
}

.campus-route-grid strong {
  font-size: 14px;
}

.campus-route-grid span,
.campus-route-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.campus-route-grid small {
  color: var(--gold-soft);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.campus-explore-grid {
  display: flex;
  gap: 7px;
  margin-top: 9px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.campus-explore-grid::-webkit-scrollbar {
  display: none;
}

.campus-explore-grid button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 999px;
  background: rgba(244, 234, 215, 0.045);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
}

.campus-explore-grid button:hover,
.campus-explore-grid button:focus-visible,
.campus-explore-grid button.selected,
.campus-explore-grid button[aria-pressed="true"] {
  border-color: rgba(231, 178, 77, 0.3);
  background: rgba(231, 178, 77, 0.1);
  color: var(--gold-soft);
}

.campus-explore-grid button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}

.campus-safe-list .safe-list-card button {
  min-width: 70px;
}

.compact-list article.campus-spot-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 84px;
  padding: 10px;
  border: 1px solid rgba(231, 178, 77, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 50%, rgba(231, 178, 77, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(139, 203, 150, 0.08), transparent 36%),
    rgba(244, 234, 215, 0.045);
}

.compact-list article.campus-spot-card > div {
  min-width: 0;
}

.compact-list article.campus-spot-card > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campus-spot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.06);
}

.campus-spot-photo {
  --campus-art: #e7b24d;
  position: relative;
  z-index: 1;
  display: block;
  width: 56px;
  height: 52px;
  overflow: hidden;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 44%, rgba(231, 178, 77, 0.24), transparent 58%),
    linear-gradient(145deg, rgba(34, 32, 28, 0.96), rgba(18, 17, 15, 0.92));
  border: 1px solid rgba(244, 234, 215, 0.1);
  box-shadow:
    0 10px 26px rgba(18, 12, 6, 0.28),
    0 0 20px rgba(231, 178, 77, 0.12);
}

.campus-spot-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 17, 15, 0.02), rgba(18, 17, 15, 0.28)),
    radial-gradient(circle at 82% 14%, rgba(244, 234, 215, 0.16), transparent 26%);
}

.campus-spot-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campus-spot-symbol {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--gold-soft);
}

.campus-spot-symbol svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campus-spot-photo.photo-missing .campus-spot-symbol {
  display: flex;
}

.campus-spot-photo.photo-missing::after {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--campus-art) 18%, transparent), transparent 62%);
}

.campus-spot-photo.photo-missing {
  border-color: color-mix(in srgb, var(--campus-art) 25%, rgba(244, 234, 215, 0.1));
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--campus-art) 23%, transparent), transparent 60%),
    linear-gradient(145deg, rgba(44, 39, 32, 0.96), rgba(19, 18, 16, 0.94));
}

.campus-spot-photo[data-campus-kind="cafe"],
.map-place-photo-placeholder[data-campus-kind="cafe"] { --campus-art: #e8b86d; }
.campus-spot-photo[data-campus-kind="food"],
.map-place-photo-placeholder[data-campus-kind="food"] { --campus-art: #d99c65; }
.campus-spot-photo[data-campus-kind="bar"],
.map-place-photo-placeholder[data-campus-kind="bar"] { --campus-art: #c59cce; }
.campus-spot-photo[data-campus-kind="shop"],
.map-place-photo-placeholder[data-campus-kind="shop"] { --campus-art: #b9c983; }
.campus-spot-photo[data-campus-kind="bus"],
.campus-spot-photo[data-campus-kind="transport"],
.map-place-photo-placeholder[data-campus-kind="bus"] { --campus-art: #94b7cc; }
.campus-spot-photo[data-campus-kind="pharmacy"],
.map-place-photo-placeholder[data-campus-kind="pharmacy"] { --campus-art: #83bca0; }
.campus-spot-photo[data-campus-kind="garda"],
.map-place-photo-placeholder[data-campus-kind="garda"] { --campus-art: #8ea6cf; }
.campus-spot-photo[data-campus-kind="aed"],
.map-place-photo-placeholder[data-campus-kind="aed"] { --campus-art: #d98a83; }
.campus-spot-photo[data-campus-kind="campus"],
.campus-spot-photo[data-campus-kind="study"],
.campus-spot-photo[data-campus-kind="accommodation"],
.campus-spot-photo[data-campus-kind="support"],
.campus-spot-photo[data-campus-kind="building"],
.map-place-photo-placeholder[data-campus-kind="campus"],
.map-place-photo-placeholder[data-campus-kind="study"],
.map-place-photo-placeholder[data-campus-kind="accommodation"],
.map-place-photo-placeholder[data-campus-kind="support"],
.map-place-photo-placeholder[data-campus-kind="building"] { --campus-art: #a7c79b; }

.campus-spot-photo.photo-missing .campus-spot-symbol {
  color: var(--campus-art);
}

.campus-spot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(244, 234, 215, 0.1) 0 31%, transparent 32%),
    radial-gradient(circle, rgba(231, 178, 77, 0.18), rgba(231, 178, 77, 0.04) 58%, transparent 70%);
  border: 0;
  color: var(--gold-soft);
  box-shadow: 0 0 18px rgba(231, 178, 77, 0.13);
}

.campus-spot-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.campus-spot-card[data-campus-kind="campus"] .campus-spot-icon,
.campus-spot-card[data-campus-kind="study"] .campus-spot-icon,
.campus-spot-card[data-campus-kind="accommodation"] .campus-spot-icon {
  background:
    radial-gradient(circle, rgba(244, 234, 215, 0.1) 0 31%, transparent 32%),
    radial-gradient(circle, rgba(139, 203, 150, 0.18), rgba(139, 203, 150, 0.04) 58%, transparent 70%);
  color: var(--green);
  box-shadow: 0 0 18px rgba(139, 203, 150, 0.13);
}

.campus-spot-card[data-campus-kind="transport"] .campus-spot-icon {
  color: #d8cfbb;
  background:
    radial-gradient(circle, rgba(244, 234, 215, 0.1) 0 31%, transparent 32%),
    radial-gradient(circle, rgba(216, 207, 187, 0.15), rgba(216, 207, 187, 0.035) 58%, transparent 70%);
  box-shadow: 0 0 16px rgba(216, 207, 187, 0.11);
}

.campus-spot-card strong,
.campus-spot-card span,
.campus-spot-card small {
  display: block;
}

.campus-spot-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.campus-spot-card small {
  margin-top: 4px;
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
}

.campus-spot-card.open small {
  color: var(--green);
}

.campus-spot-card.closed small,
.campus-spot-card.unknown small,
.campus-spot-card.restricted small {
  color: var(--muted);
}

.compact-list article.campus-spot-card button,
.compact-list article.campus-spot-card .campus-spot-actions a {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 20px;
  background: rgba(231, 178, 77, 0.14);
  color: var(--gold);
  font-weight: 900;
  text-decoration: none;
}

.campus-spot-card .campus-spot-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0;
}

.campus-report-action {
  min-width: 94px;
  margin: 0;
}

.campus-report-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.04);
}

.campus-report-compact div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.campus-report-compact strong {
  font-size: 12px;
}

.campus-report-compact span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.campus-more-info {
  margin-top: 14px;
  padding: 0 12px 12px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.035);
}

.campus-more-info summary {
  min-height: 44px;
  padding: 13px 0;
  color: var(--gold-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.campus-more-info .campus-section {
  margin-top: 8px;
}

.campus-more-info .insight-grid {
  grid-template-columns: 1fr;
}

.campus-more-info .insight-grid article {
  min-height: 0;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(244, 234, 215, 0.07);
  border-radius: 0;
  background: transparent;
}

.campus-more-info .insight-grid strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.campus-disclaimer {
  margin: 17px 2px 2px;
  color: var(--subtle);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

.compact-list article.campus-spot-card .campus-spot-actions button,
.compact-list article.campus-spot-card .campus-spot-actions a {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 10px;
}

.reports-hub-card > button {
  min-height: 44px;
}

.compact-list article.campus-spot-card .campus-spot-actions .campus-info-button {
  border: 1px solid rgba(244, 234, 215, 0.09);
  background: rgba(244, 234, 215, 0.055);
  color: var(--muted);
}

.campus-empty-state {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(244, 234, 215, 0.12);
  border-radius: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.campus-place-cache-note {
  margin: 0 2px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.campus-place-cache-note button {
  min-height: 32px;
  margin-left: 6px;
  padding: 0 11px;
  border: 1px solid rgba(231, 178, 77, 0.22);
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.09);
  color: var(--gold-soft);
  font: inherit;
}

.campus-place-state {
  min-height: 78px;
}

.campus-place-state div {
  width: 100%;
}

.campus-place-state button {
  width: fit-content;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid rgba(231, 178, 77, 0.24);
  border-radius: 999px;
  background: rgba(231, 178, 77, 0.1);
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 850;
}

.campus-place-skeleton-list {
  display: grid;
  gap: 10px;
}

.campus-place-skeleton {
  pointer-events: none;
}

.campus-skeleton-thumb,
.campus-skeleton-copy i,
.campus-skeleton-actions i {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244, 234, 215, 0.055), rgba(231, 178, 77, 0.13), rgba(244, 234, 215, 0.055));
  background-size: 220% 100%;
  animation: campusSkeletonPulse 1.2s ease-in-out infinite;
}

.campus-skeleton-thumb {
  width: 56px;
  height: 52px;
  border-radius: 17px;
}

.campus-skeleton-copy {
  display: grid;
  gap: 7px;
}

.campus-skeleton-copy i:nth-child(1) { width: 78%; height: 11px; }
.campus-skeleton-copy i:nth-child(2) { width: 58%; height: 8px; }
.campus-skeleton-copy i:nth-child(3) { width: 68%; height: 8px; }

.campus-skeleton-actions {
  display: grid;
  gap: 7px;
}

.campus-skeleton-actions i {
  width: 54px;
  height: 36px;
  border-radius: 18px;
}

@keyframes campusSkeletonPulse {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .campus-skeleton-thumb,
  .campus-skeleton-copy i,
  .campus-skeleton-actions i {
    animation: none;
  }
}

.safe-place-call-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.safe-place-call-actions[hidden] {
  display: none;
}

.safe-place-call-actions a {
  display: grid;
  min-height: 48px;
  place-content: center;
  gap: 3px;
  padding: 7px 10px;
  border: 1px solid rgba(231, 178, 77, 0.24);
  border-radius: 15px;
  background: rgba(231, 178, 77, 0.11);
  color: var(--gold-soft);
  text-align: center;
  text-decoration: none;
}

.safe-place-call-actions a span {
  font-size: 11px;
  font-weight: 900;
}

.safe-place-call-actions a small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.safe-live-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 2px;
  padding: 7px 11px;
  border: 1px solid rgba(139, 203, 150, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 50%, rgba(139, 203, 150, 0.18), transparent 44%),
    rgba(139, 203, 150, 0.065);
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.insight-grid article {
  min-width: 0;
  min-height: 60px;
  padding: 10px;
  border: 1px solid rgba(244, 234, 215, 0.08);
  border-radius: 15px;
  background: rgba(244, 234, 215, 0.045);
}

.insight-grid strong,
.insight-grid span {
  display: block;
}

.insight-grid strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.15;
}

.insight-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
}

.compact-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.reports-hub-sheet .sheet-copy {
  margin-top: 7px;
  max-width: 34rem;
}

.reports-hub-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 15px;
}

.reports-hub-actions button {
  min-width: 0;
  min-height: 45px;
  padding-inline: 12px;
  font-size: 12px;
}

.reports-hub-actions .secondary-button {
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.reports-hub-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.reports-hub-metrics article {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(231, 178, 77, 0.1), transparent 58%),
    rgba(244, 234, 215, 0.045);
  text-align: left;
}

.reports-hub-metrics article[hidden] {
  display: none;
}

.reports-hub-metrics span,
.reports-hub-metrics strong {
  display: block;
}

.reports-hub-metrics span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.reports-hub-metrics strong {
  margin: 0;
  color: var(--gold-soft);
  font-size: 14px;
  line-height: 1;
}

.reports-hub-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.reports-hub-heading p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.report-refresh-button {
  background: rgba(232, 188, 107, 0.08);
  border: 1px solid rgba(232, 188, 107, 0.22);
  border-radius: 999px;
  color: rgba(246, 224, 182, 0.9);
  font-size: 0.66rem;
  font-weight: 750;
  min-height: 44px;
  padding: 0.35rem 0.7rem;
}

.report-refresh-button:disabled {
  opacity: 0.56;
}

.reports-hub-actions button:active,
.campus-action-row button:active,
.campus-support-actions a:active,
.campus-support-actions button:active,
.campus-report-action:active,
.campus-explore-grid button:active,
.campus-spot-actions a:active,
.campus-spot-actions button:active,
.report-filter-bar button:active,
.reports-hub-card > button:active,
.report-refresh-button:active,
.list-toggle-button:active {
  transform: scale(0.98);
}

.reports-hub-list {
  margin-top: 10px;
}

.compact-list article.reports-hub-card {
  min-width: 0;
  min-height: 82px;
  border-color: color-mix(in srgb, var(--report-colour, #e7b24d) 18%, rgba(244, 234, 215, 0.08));
  background:
    radial-gradient(circle at 5% 50%, color-mix(in srgb, var(--report-colour, #e7b24d) 12%, transparent), transparent 32%),
    rgba(244, 234, 215, 0.045);
}

.compact-list article.reports-hub-card > button {
  min-height: 44px;
}

.reports-hub-card div {
  min-width: 0;
}

.reports-hub-card div > strong,
.reports-hub-card div > span,
.reports-hub-card div > small {
  display: block;
}

.report-category-visual {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--report-colour) 44%, rgba(244, 234, 215, 0.12));
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--report-colour) 20%, transparent), transparent 64%),
    rgba(18, 17, 15, 0.72);
  box-shadow: 0 8px 22px rgba(8, 7, 5, 0.28);
}

.report-category-visual img {
  display: block;
  width: 45px;
  height: 45px;
  object-fit: contain;
  transform: scale(1.16);
}

.report-category-visual.has-approved-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.report-card-copy {
  min-width: 0;
}

.report-card-location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-card-summary {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
}

.report-card-summary b {
  color: var(--gold-soft);
  font-size: inherit;
  font-weight: 850;
}

.report-card-summary time {
  color: var(--muted);
}

/* Map-native report lifecycle UI. Report icons themselves are rendered by Mapbox layers. */
.report-detail-heading {
  align-items: center;
  display: flex;
  gap: 0.72rem;
  margin-bottom: 0.5rem;
}

.report-detail-heading > div {
  min-width: 0;
}

.report-detail-heading .eyebrow,
.report-detail-heading h2 {
  margin-bottom: 0;
}

.report-detail-heading .eyebrow {
  color: rgba(231, 193, 123, 0.7);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
}

.report-detail-heading h2 {
  color: #fff2d7;
  font-size: 1.22rem;
  line-height: 1.12;
}

.report-detail-location-subtitle {
  color: rgba(246, 238, 220, 0.62);
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 0.2rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-detail-icon {
  display: grid;
  flex: 0 0 3.65rem;
  height: 3.65rem;
  place-items: center;
  width: 3.65rem;
}

.report-detail-icon svg {
  display: block;
  height: 3.9rem;
  width: 3.9rem;
}

.report-detail-state-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin: 0 0 0.75rem;
}

.report-lifecycle-pill {
  align-items: center;
  align-self: flex-start;
  background: rgba(232, 188, 107, 0.12);
  border: 1px solid rgba(232, 188, 107, 0.34);
  border-radius: 999px;
  color: #f1cf91;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0.4rem 0.65rem;
}

.report-sync-state-pill {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(246, 238, 220, 0.72);
  font-size: 0.68rem;
  font-weight: 680;
  margin: 0;
  padding: 0.38rem 0.62rem;
}

.report-sync-state-pill[data-state="pending"],
.report-sync-state-pill[data-state="failed"] {
  border-style: dashed;
}

.report-sync-state-pill[data-state="failed"] {
  border-color: rgba(217, 154, 139, 0.38);
  color: #e8b6aa;
}

.report-sync-state-pill[data-state="shared"] {
  border-color: rgba(145, 196, 155, 0.25);
  color: #bad4be;
}

.report-detail-description {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.75rem;
  color: rgba(246, 238, 220, 0.78);
  font-size: 0.72rem;
  line-height: 1.48;
  margin: -0.2rem 0 0.75rem;
  padding: 0.68rem 0.75rem;
}

.report-origin-label {
  color: rgba(232, 196, 129, 0.72) !important;
}

.reports-hub-card[data-report-origin="local_pending"] {
  border-style: dashed;
}

.reports-hub-card[data-report-origin="local_failed"],
.reports-hub-card[data-report-origin="server_cache"] {
  opacity: 0.82;
}

.report-lifecycle-pill[data-lifecycle="community_confirmed"] {
  background: rgba(116, 166, 126, 0.14);
  border-color: rgba(145, 196, 155, 0.38);
  color: #b9dcbd;
}

.report-lifecycle-pill[data-lifecycle="resolution_pending"] {
  background: rgba(202, 172, 120, 0.1);
  border-style: dashed;
  color: #ddcba8;
}

.report-lifecycle-pill[data-lifecycle="resolved"],
.report-lifecycle-pill[data-lifecycle="expired"] {
  filter: saturate(0.62);
  opacity: 0.78;
}

.report-detail-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-detail-metrics article {
  min-width: 0;
}

.report-detail-metrics strong {
  font-size: 0.76rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.report-last-updated {
  color: rgba(246, 238, 220, 0.58);
  display: block;
  font-size: 0.66rem;
  margin-top: 0.45rem;
}

.report-council-status,
.report-sharing-note,
.report-disclaimer {
  border-radius: 0.75rem;
  color: rgba(246, 238, 220, 0.7);
  display: block;
  font-size: 0.68rem;
  line-height: 1.45;
  margin: 0.65rem 0 0;
}

.report-council-status {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(246, 238, 220, 0.82);
  padding: 0.65rem 0.75rem;
}

.report-sharing-note {
  background: rgba(232, 188, 107, 0.07);
  border: 1px solid rgba(232, 188, 107, 0.16);
  padding: 0.65rem 0.75rem;
}

.report-sharing-note[hidden] {
  display: none;
}

.report-response-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-response-actions:has(.report-response-unsure:not([hidden])) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-contribution-note {
  margin: 0.35rem 0 0.7rem;
  color: rgba(242, 226, 192, 0.78);
  font-size: 0.74rem;
  line-height: 1.45;
}

.report-response-actions button {
  min-height: 2.75rem;
  white-space: normal;
}

.report-response-actions button.is-selected,
[data-report-inaccurate].is-selected {
  border-color: rgba(232, 188, 107, 0.58);
  box-shadow: inset 0 0 0 1px rgba(232, 188, 107, 0.16);
  color: #f3d59d;
}

.report-response-actions button.is-pending,
[data-report-inaccurate].is-pending {
  border-style: dashed;
  opacity: 0.82;
}

.report-sync-retry {
  border-color: rgba(232, 188, 107, 0.34);
  color: #f0c97e;
}

.report-location-actions {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.6rem;
}

.report-location-actions button {
  margin: 0;
  min-width: 0;
}

.report-location-group {
  background: rgba(19, 17, 14, 0.48);
  border: 1px solid rgba(232, 188, 107, 0.15);
  border-radius: 0.85rem;
  margin: 0.7rem 0;
  padding: 0.75rem;
}

.report-location-group > strong {
  color: rgba(248, 239, 220, 0.9);
  display: block;
  font-size: 0.72rem;
  margin-bottom: 0.5rem;
}

.report-location-group > div {
  display: grid;
  gap: 0.38rem;
}

.report-location-group button {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: inherit;
  display: flex;
  justify-content: space-between;
  padding: 0.56rem 0.65rem;
  text-align: left;
}

.report-location-group button.active {
  background: rgba(232, 188, 107, 0.09);
  border-color: rgba(232, 188, 107, 0.28);
}

.report-location-group button span {
  font-size: 0.72rem;
  font-weight: 740;
}

.report-location-group button small {
  color: rgba(246, 238, 220, 0.58);
  font-size: 0.62rem;
}

.report-filter-bar {
  display: flex;
  gap: 0.4rem;
  margin: 0.8rem 0 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}

.report-filter-bar::-webkit-scrollbar {
  display: none;
}

.report-filter-bar button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(247, 239, 222, 0.72);
  flex: 0 0 auto;
  font-size: 0.67rem;
  font-weight: 700;
  min-width: 44px;
  min-height: 44px;
  padding: 0.46rem 0.66rem;
}

.report-filter-bar button.active {
  background: rgba(232, 188, 107, 0.14);
  border-color: rgba(232, 188, 107, 0.42);
  color: #f2cf8f;
}

.report-archive-toggle {
  align-items: center;
  color: rgba(246, 238, 220, 0.64);
  display: flex;
  font-size: 0.67rem;
  gap: 0.5rem;
  min-height: 44px;
  margin: 0.2rem 0 0.55rem;
}

.report-archive-toggle input {
  accent-color: #dcae5b;
}

.report-type-swatch {
  background: color-mix(in srgb, var(--report-colour) 20%, #29241e);
  border: 2px solid var(--report-colour);
  border-radius: 0.7rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  flex: 0 0 1.85rem;
  height: 1.85rem;
  position: relative;
  width: 1.85rem;
}

.report-type-swatch::after {
  background: var(--report-colour);
  border-radius: 999px;
  content: "";
  height: 0.42rem;
  inset: 50% auto auto 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0.42rem;
}

.reports-hub-card[data-lifecycle="resolution_pending"] {
  border-style: dashed;
  opacity: 0.86;
}

.reports-hub-card[data-lifecycle="resolved"],
.reports-hub-card[data-lifecycle="expired"] {
  filter: saturate(0.55);
  opacity: 0.68;
}

.duplicate-report-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(232, 188, 107, 0.18);
  border-radius: 0.9rem;
  display: flex;
  gap: 0.75rem;
  margin: 0.8rem 0;
  padding: 0.8rem;
}

.duplicate-report-card div {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.duplicate-report-card strong,
.duplicate-report-card span,
.duplicate-report-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duplicate-report-card span,
.duplicate-report-card small {
  color: rgba(246, 238, 220, 0.64);
  font-size: 0.67rem;
}

.duplicate-report-actions {
  display: grid;
  gap: 0.5rem;
}

.duplicate-report-actions .text-button {
  background: transparent;
  border: 0;
  color: rgba(246, 238, 220, 0.58);
  min-height: 2.25rem;
}

.map-report-accessibility-list {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.reports-hub-card div > span,
.reports-hub-card div > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}

.compact-list article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.compact-list article.area-report-card {
  background:
    radial-gradient(circle at 0% 50%, rgba(231, 178, 77, 0.08), transparent 34%),
    rgba(244, 234, 215, 0.045);
}

.compact-list article.safe-list-card {
  position: relative;
  overflow: hidden;
  grid-template-columns: 58px 1fr auto;
  min-height: 78px;
  background:
    radial-gradient(circle at 12% 50%, rgba(139, 203, 150, 0.12), transparent 34%),
    rgba(244, 234, 215, 0.045);
}

.safe-list-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(139, 203, 150, 0.08);
}

.safe-list-card small {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}

.compact-list article.safe-list-card.busy-night {
  background:
    radial-gradient(circle at 10% 52%, rgba(231, 178, 77, 0.12), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(139, 203, 150, 0.08), transparent 34%),
    rgba(244, 234, 215, 0.045);
}

.safe-list-card.busy-night small {
  color: var(--gold-soft);
}

.safe-list-card.open.busy-night small {
  color: var(--green);
}

.compact-list article.safe-list-card.closed,
.compact-list article.safe-list-card.unknown,
.compact-list article.safe-list-card.restricted {
  background:
    radial-gradient(circle at 12% 50%, rgba(244, 234, 215, 0.055), transparent 34%),
    rgba(244, 234, 215, 0.035);
}

.safe-list-card.closed::after,
.safe-list-card.unknown::after,
.safe-list-card.restricted::after {
  box-shadow: inset 0 0 0 1px rgba(244, 234, 215, 0.07);
}

.safe-list-card.closed small {
  color: #f08d7c;
}

.safe-list-card.unknown small,
.safe-list-card.restricted small {
  color: var(--muted);
}

.safe-list-card.closed .safe-thumb,
.safe-list-card.unknown .safe-thumb,
.safe-list-card.restricted .safe-thumb {
  border-color: rgba(244, 234, 215, 0.12);
  filter: saturate(0.7);
  opacity: 0.72;
  box-shadow: 0 0 0 4px rgba(244, 234, 215, 0.025);
}

.safe-hours-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.safe-hours-status {
  color: var(--muted);
}

.safe-locations-refresh {
  width: 100%;
  margin: 0 0 10px;
}

.safe-list-card[data-safe-group="official"]::after {
  box-shadow: inset 0 0 0 1px rgba(231, 178, 77, 0.2);
}

.safe-list-card[data-safe-group="staffed"]::after {
  box-shadow: inset 0 0 0 1px rgba(139, 203, 150, 0.12);
}

.safe-list-card[data-safe-group="public"]::after {
  box-shadow: inset 0 0 0 1px rgba(174, 197, 212, 0.13);
}

.safe-place-details {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.safe-place-details article {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(244, 234, 215, 0.08);
  border-radius: 12px;
  background: rgba(244, 234, 215, 0.035);
}

.safe-place-details article[hidden] {
  display: none;
}

.safe-place-details span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.safe-place-details strong {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.safe-hours-status.open,
.safe-status-line.open {
  color: var(--green);
}

.safe-hours-status.closed,
.safe-status-line.closed {
  color: #f08d7c;
}

.safe-hours-status.unknown,
.safe-hours-status.restricted,
.safe-status-line.unknown,
.safe-status-line.restricted {
  color: var(--muted);
}

.safe-hours-source {
  display: inline-flex;
  margin-top: 8px;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.safe-hours-source[hidden] {
  display: none;
}

.compact-list.static article {
  grid-template-columns: 1fr;
}

.compact-list button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(231, 178, 77, 0.13);
  color: var(--gold);
  font-weight: 800;
}

.safe-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(139, 203, 150, 0.22);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.02), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 72% 24%, rgba(139, 203, 150, 0.48), transparent 18%),
    linear-gradient(135deg, rgba(37, 48, 35, 0.9), rgba(27, 25, 22, 0.98));
  box-shadow:
    0 0 0 4px rgba(139, 203, 150, 0.06),
    0 0 20px rgba(139, 203, 150, 0.16);
}

.safe-thumb img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.78);
  transform: scale(1.03);
}

.safe-thumb::before {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 30%, rgba(244, 234, 215, 0.12) 31% 33%, transparent 34% 100%),
    linear-gradient(0deg, transparent 0 64%, rgba(244, 234, 215, 0.08) 65% 66%, transparent 67% 100%);
}

.safe-thumb.has-photo::before {
  background:
    linear-gradient(180deg, rgba(18, 17, 15, 0.02), rgba(18, 17, 15, 0.48)),
    radial-gradient(circle at 72% 20%, rgba(231, 178, 77, 0.24), transparent 34%);
}

.safe-thumb::after {
  z-index: 2;
  right: 10px;
  bottom: 7px;
  width: 5px;
  height: 25px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 -12px 22px rgba(231, 178, 77, 0.6);
}

.safe-thumb.has-photo::after {
  right: 8px;
  bottom: 7px;
  height: 18px;
  opacity: 0.9;
  box-shadow: 0 -10px 18px rgba(231, 178, 77, 0.55);
}

.safe-thumb[data-safe-theme="shop"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.02), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 74% 24%, rgba(231, 178, 77, 0.62), transparent 18%),
    linear-gradient(90deg, rgba(139, 203, 150, 0.22) 0 36%, transparent 37% 100%),
    linear-gradient(135deg, rgba(57, 42, 24, 0.92), rgba(27, 25, 22, 0.98));
}

.safe-thumb[data-safe-theme="hospital"],
.safe-thumb[data-safe-theme="garda"],
.safe-thumb[data-safe-theme="campus"],
.safe-thumb[data-safe-theme="public"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.02), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 72% 24%, rgba(139, 203, 150, 0.58), transparent 18%),
    linear-gradient(135deg, rgba(30, 49, 38, 0.92), rgba(27, 25, 22, 0.98));
}

.safe-thumb[data-safe-theme="taxi"],
.safe-thumb[data-safe-theme="transit"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.02), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 72% 24%, rgba(231, 178, 77, 0.58), transparent 18%),
    radial-gradient(circle at 25% 56%, rgba(139, 203, 150, 0.22), transparent 20%),
    linear-gradient(135deg, rgba(48, 43, 32, 0.92), rgba(27, 25, 22, 0.98));
}

.compact-list button:disabled {
  cursor: default;
  background: rgba(244, 234, 215, 0.06);
  color: var(--muted);
}

.activity-feed {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.activity-feed article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 18px;
  background: rgba(244, 234, 215, 0.045);
}

.activity-feed article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(231, 178, 77, 0.14);
  color: var(--gold);
  font-weight: 900;
}

.activity-feed strong,
.activity-feed small {
  display: block;
}

.activity-feed strong {
  font-size: 13px;
}

.activity-feed small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.area-photo-card {
  position: relative;
  min-height: 142px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.08), rgba(18, 12, 6, 0.58)),
    linear-gradient(135deg, rgba(231, 178, 77, 0.26), rgba(34, 32, 28, 0.92));
}

.photo-collage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(96px, 0.8fr);
  grid-template-rows: 92px 92px;
  gap: 9px;
  margin-top: 12px;
}

.report-photo-top .photo-collage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(96px, 0.8fr);
  grid-template-rows: 92px 92px;
  gap: 9px;
}

.report-photo-top .collage-main {
  min-height: 193px;
}

.report-photo-top .collage-main small {
  display: block;
}

.report-photo-top .collage-small,
.report-photo-top .photo-plus {
  display: block;
}

.collage-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.06), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 72% 24%, rgba(231, 178, 77, 0.58), transparent 16%),
    linear-gradient(135deg, rgba(231, 178, 77, 0.22), rgba(34, 32, 28, 0.92));
  box-shadow: 0 14px 34px rgba(18, 12, 6, 0.24);
}

.photo-like {
  position: absolute;
  z-index: 4;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(244, 234, 215, 0.16);
  border-radius: 999px;
  background: rgba(18, 12, 6, 0.54);
  color: rgba(244, 234, 215, 0.88);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 22px rgba(18, 12, 6, 0.26);
}

.photo-like.liked,
.photo-like:hover {
  border-color: rgba(231, 178, 77, 0.32);
  background: rgba(231, 178, 77, 0.18);
  color: var(--gold);
}

.photo-like-display {
  pointer-events: none;
}

.collage-main {
  grid-row: 1 / span 2;
  min-height: 193px;
}

.collage-small {
  min-height: 92px;
}

.collage-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(244, 234, 215, 0.12) 29% 31%, transparent 32% 100%),
    radial-gradient(circle at 76% 24%, rgba(231, 178, 77, 0.64), transparent 15%),
    linear-gradient(22deg, transparent 0 42%, rgba(139, 203, 150, 0.14) 43% 45%, transparent 46% 100%);
}

.collage-photo[data-area-theme="oliver"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.64)),
    linear-gradient(135deg, rgba(217, 130, 75, 0.34), rgba(34, 24, 18, 0.94));
}

.collage-photo[data-area-theme="ucc"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    linear-gradient(135deg, rgba(139, 203, 150, 0.24), rgba(24, 31, 25, 0.94));
}

.collage-photo[data-area-theme="ballincollig"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    linear-gradient(135deg, rgba(217, 130, 75, 0.28), rgba(34, 32, 28, 0.94));
}

.collage-photo[data-area-theme="grand"],
.collage-photo[data-area-theme="transit"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 78% 24%, rgba(231, 178, 77, 0.38), transparent 18%),
    linear-gradient(135deg, rgba(139, 203, 150, 0.18), rgba(31, 29, 25, 0.94));
}

.collage-photo > span:not(.photo-like-display) {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 30px rgba(231, 178, 77, 0.64);
}

.collage-photo strong,
.collage-photo small {
  position: absolute;
  left: 12px;
  right: 10px;
  z-index: 1;
  display: block;
  line-height: 1.2;
}

.collage-main strong {
  left: 54px;
  bottom: 32px;
  font-size: 15px;
}

.collage-main small {
  left: 54px;
  bottom: 14px;
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}

.collage-small strong {
  bottom: 25px;
  font-size: 11px;
}

.collage-small small {
  bottom: 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.report-photo-top .collage-photo strong,
.report-photo-top .collage-photo small,
.more-photo-grid .user-photo strong,
.more-photo-grid .user-photo small {
  display: none;
}

.photo-plus {
  display: grid;
  place-items: center;
  color: var(--text);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.16), rgba(18, 12, 6, 0.72)),
    radial-gradient(circle at 70% 24%, rgba(231, 178, 77, 0.42), transparent 18%),
    linear-gradient(135deg, rgba(139, 203, 150, 0.13), rgba(34, 32, 28, 0.95));
}

.photo-plus::before {
  filter: blur(4px);
  opacity: 0.72;
  transform: scale(1.08);
}

.photo-plus::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(231, 178, 77, 0.18), transparent 42%),
    rgba(18, 17, 15, 0.24);
  pointer-events: none;
}

.collage-photo.photo-plus > span {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold);
  color: #21180b;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 6px rgba(231, 178, 77, 0.1),
    0 0 22px rgba(231, 178, 77, 0.46);
}

.report-photo-top .photo-plus {
  display: grid;
}

.area-photo-card::before,
.user-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(244, 234, 215, 0.12) 29% 31%, transparent 32% 100%),
    radial-gradient(circle at 76% 24%, rgba(231, 178, 77, 0.72), transparent 15%),
    linear-gradient(22deg, transparent 0 42%, rgba(244, 234, 215, 0.1) 43% 45%, transparent 46% 100%);
}

.area-photo-card[data-area-theme="oliver"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    linear-gradient(135deg, rgba(217, 130, 75, 0.32), rgba(34, 24, 18, 0.94));
}

.area-photo-card[data-area-theme="ucc"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    linear-gradient(135deg, rgba(139, 203, 150, 0.22), rgba(24, 31, 25, 0.94));
}

.area-photo-card[data-area-theme="ballincollig"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    linear-gradient(135deg, rgba(217, 130, 75, 0.25), rgba(34, 32, 28, 0.94));
}

.area-photo-card[data-area-theme="grand"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    linear-gradient(135deg, rgba(203, 191, 168, 0.22), rgba(28, 28, 30, 0.94));
}

.area-photo-card[data-area-theme="transit"] {
  background:
    linear-gradient(180deg, rgba(18, 12, 6, 0.04), rgba(18, 12, 6, 0.62)),
    radial-gradient(circle at 78% 24%, rgba(231, 178, 77, 0.42), transparent 18%),
    linear-gradient(135deg, rgba(139, 203, 150, 0.16), rgba(31, 29, 25, 0.94));
}

.area-photo-card span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 34px rgba(231, 178, 77, 0.68);
}

.area-photo-card strong {
  position: absolute;
  right: 16px;
  bottom: 17px;
  left: 68px;
  font-size: 16px;
  line-height: 1.25;
}

.user-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.report-photo-top .more-photo-grid {
  display: flex;
  gap: 10px;
  margin-top: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.report-photo-top .more-photo-grid::-webkit-scrollbar {
  display: none;
}

.report-photo-top .more-photo-grid .user-photo {
  flex: 0 0 min(76%, 250px);
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 19px;
  scroll-snap-align: start;
}

.report-photo-top .more-photo-grid .user-photo > span {
  top: auto;
  right: 14px;
  bottom: 14px;
  width: 22px;
  height: 22px;
}

.report-photo-top .more-photo-grid .photo-like {
  top: 10px;
  left: 10px;
}

.user-photo {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  background: linear-gradient(145deg, rgba(231, 178, 77, 0.22), rgba(244, 234, 215, 0.04));
}

.user-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-photo:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 5, 0.04), rgba(10, 8, 5, 0.72));
  pointer-events: none;
}

.user-photo:has(img) strong,
.user-photo:has(img) small {
  z-index: 2;
  color: #fff9e9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.76);
}

.user-photo::before {
  opacity: calc(0.6 + (var(--photo-index) * 0.08));
}

.user-photo span {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(231, 178, 77, 0.66);
}

.user-photo .photo-like {
  top: 8px;
  left: 8px;
  min-width: 38px;
  height: 24px;
  font-size: 11px;
}

.user-photo strong,
.user-photo small {
  position: absolute;
  left: 10px;
  right: 8px;
  z-index: 1;
  line-height: 1.2;
}

.user-photo strong {
  bottom: 24px;
  font-size: 11px;
}

.user-photo small {
  bottom: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.sheet-section-title {
  margin: 16px 0 0;
  font-size: 14px;
}

.empty-state {
  grid-template-columns: 1fr !important;
}

.list-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 14px currentColor;
}

.list-dot.red {
  color: var(--red);
  background: var(--red);
}

.list-dot.orange {
  color: var(--orange);
  background: var(--orange);
}

.list-dot.green {
  color: var(--green);
  background: var(--green);
}

.profile-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}

.profile-summary > div {
  min-width: 0;
}

.profile-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--gold), #f8df96);
  color: #21180b;
  font-weight: 900;
  box-shadow: 0 0 32px rgba(231, 178, 77, 0.42);
}

.profile-summary h2 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-summary h2 .profile-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  color: var(--text);
  line-height: 1.15;
}

.verified-badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  overflow: visible;
  border: 1px solid rgba(205, 238, 255, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 24%, rgba(255, 255, 255, 0.9), transparent 14%),
    linear-gradient(145deg, #64cdfc 0%, #2696f2 48%, #1168da 100%);
  color: transparent !important;
  font-size: 0;
  line-height: 1;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.38),
    inset 0 -1.5px 2px rgba(5, 36, 98, 0.3),
    0 0 0 2.5px rgba(62, 168, 255, 0.1),
    0 3px 8px rgba(10, 35, 74, 0.22),
    0 0 13px rgba(51, 153, 255, 0.24);
}

.verified-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(96, 197, 255, 0.18), transparent 70%);
  filter: blur(1.2px);
}

.verified-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  background: #ffffff;
  filter: drop-shadow(0 1px 1px rgba(4, 37, 92, 0.24));
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9.35 7.75 12.05 13.15 6.45' fill='none' stroke='%23fff' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9.35 7.75 12.05 13.15 6.45' fill='none' stroke='%23fff' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.verified-badge[hidden] {
  display: none;
}

.profile-summary span {
  color: var(--muted);
  font-weight: 800;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.profile-stats article {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}

.profile-stats strong {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
}

.profile-stats span {
  max-width: 100%;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.settings-panel {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.settings-panel h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.settings-panel button {
  min-height: 46px;
  border-radius: 16px;
  background: rgba(244, 234, 215, 0.06);
  color: var(--text);
  font-weight: 800;
  text-align: left;
  padding: 0 14px;
}

.settings-panel button.active {
  border-color: rgba(231, 178, 77, 0.32);
  background:
    radial-gradient(circle at 12% 50%, rgba(231, 178, 77, 0.22), transparent 34%),
    rgba(231, 178, 77, 0.1);
  color: var(--gold);
}

.profile-detail-card {
  margin: -2px 0 4px;
  padding: 15px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0%, rgba(231, 178, 77, 0.12), transparent 44%),
    rgba(244, 234, 215, 0.045);
  animation: sheetRise 180ms ease both;
}

.profile-detail-card h3 {
  margin: 4px 0 8px;
  font-size: 17px;
}

.profile-detail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.profile-detail-card .eyebrow {
  color: var(--gold);
  font-size: 12px;
}

.run-settings-detail-card .run-settings-fields {
  margin-top: 12px;
}

.run-settings-detail-card .run-weight-setting {
  border-color: rgba(231, 178, 77, 0.14);
  background: rgba(18, 17, 15, 0.3);
}

.language-detail-card select {
  min-height: 44px;
  margin-top: 10px;
  border-color: rgba(231, 178, 77, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(231, 178, 77, 0.14), transparent 46%),
    rgba(244, 234, 215, 0.06);
}

.language-detail-card .sheet-copy {
  margin-top: 10px;
  color: var(--muted);
}

.location-setting-options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.settings-panel .location-setting-options button {
  min-height: 42px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  background: rgba(244, 234, 215, 0.055);
  text-align: center;
}

.settings-panel .location-setting-options button.selected {
  border-color: rgba(139, 203, 150, 0.34);
  background: rgba(139, 203, 150, 0.12);
  color: var(--green);
}

.settings-panel .location-setting-options button:disabled {
  opacity: 0.5;
}

.map-appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.settings-panel .map-appearance-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  border: 1px solid rgba(244, 234, 215, 0.1);
  background: rgba(244, 234, 215, 0.055);
  text-align: center;
}

.settings-panel .map-appearance-options button small {
  color: inherit;
  font: inherit;
  font-size: 0.82em;
  opacity: 0.76;
}

.settings-panel .map-appearance-options button.selected {
  border-color: rgba(231, 178, 77, 0.38);
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold);
}

.map-appearance-status {
  margin-top: 10px !important;
  min-height: 19px;
}

.privacy-delete-button {
  margin-top: 12px;
  width: 100%;
  border-color: rgba(244, 234, 215, 0.16);
  background:
    radial-gradient(circle at 16% 0%, rgba(231, 178, 77, 0.16), transparent 44%),
    rgba(244, 234, 215, 0.055);
  color: var(--text);
}

.account-delete-button {
  margin-top: 8px;
  width: 100%;
  border-color: rgba(255, 126, 102, 0.28);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 126, 102, 0.16), transparent 45%),
    rgba(255, 126, 102, 0.075);
  color: #ffd6cd;
}

.delete-account-sheet .sheet-copy {
  color: var(--text);
}

.delete-account-list article {
  border-color: rgba(255, 126, 102, 0.12);
}

.delete-confirm-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.delete-confirm-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.delete-account-status {
  margin: 12px 0 0;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  line-height: 1.45;
}

.delete-account-status.error {
  color: var(--luma-text-error);
}

.delete-account-status.success {
  color: var(--luma-success);
}

.delete-account-primary {
  margin-top: 12px;
  border-color: color-mix(in srgb, var(--luma-error) 40%, transparent);
  background: var(--luma-error);
  color: var(--luma-text-inverse);
  box-shadow: none;
}

.delete-account-primary:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.verification-detail-card {
  gap: 12px;
}

.verification-email-field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-label-size);
  font-weight: 800;
}

.verification-email-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-row);
  padding: 0 13px;
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
  font: inherit;
  outline: none;
}

.verification-email-field input:focus {
  border-color: var(--luma-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--luma-focus-ring) 16%, transparent);
}

.verification-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.settings-panel .verification-actions button {
  min-height: var(--tap-target);
  border-color: transparent;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
  text-align: center;
}

.settings-panel .verification-actions button:first-child {
  border-color: color-mix(in srgb, var(--luma-accent) 26%, transparent);
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
}

.settings-panel .verification-actions button:disabled {
  opacity: 0.72;
}

.settings-panel .verification-actions button:active:not(:disabled) {
  transform: scale(0.975);
}

.settings-panel .verification-actions button.is-pending {
  cursor: progress;
  opacity: 0.88;
}

.settings-panel .verification-actions button.is-pending::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: lumaAccountActionSpin 0.75s linear infinite;
}

@keyframes lumaAccountActionSpin {
  to { transform: rotate(360deg); }
}

.verification-status {
  margin-top: 10px !important;
  color: var(--luma-text-secondary) !important;
  font-size: var(--luma-type-secondary-size) !important;
}

.verification-status[data-state="success"] {
  color: var(--luma-success) !important;
}

.verification-status[data-state="error"] {
  color: var(--luma-text-error) !important;
}

.profile-account-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin: 3px 0 4px;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 var(--luma-info);
}

.profile-account-panel[hidden] {
  display: none;
}

.profile-account-panel p,
.profile-account-panel strong,
.profile-account-panel span {
  display: block;
  margin: 0;
}

.profile-account-panel .eyebrow {
  color: var(--luma-info);
  font-size: 10px;
}

.profile-account-panel strong {
  margin-top: 3px;
  color: var(--luma-text-primary);
  font-size: var(--luma-type-card-size);
}

.profile-account-panel span {
  margin-top: 3px;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  line-height: 1.35;
}

.settings-panel .profile-account-panel .profile-sign-out-button {
  min-height: var(--tap-target);
  padding: 0 13px;
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  text-align: center;
  white-space: nowrap;
}

.settings-panel .profile-account-panel .profile-sign-out-button:disabled {
  opacity: 0.58;
}

@media (max-width: 360px) {
  .profile-account-panel {
    grid-template-columns: 1fr;
  }

  .settings-panel .profile-account-panel .profile-sign-out-button {
    width: 100%;
  }
}

.profile-detail-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.profile-detail-list article {
  padding: 10px 0 0;
  border-top: 1px solid rgba(244, 234, 215, 0.08);
  background: transparent;
}

.profile-detail-list article + article {
  margin-top: 10px;
}

.profile-detail-list strong,
.profile-detail-list span {
  display: block;
}

.profile-detail-list strong {
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
}

.profile-detail-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.temporary-build-label {
  margin: 12px 4px 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.2;
  opacity: 0.5;
  text-align: left;
}

.pilot-contributor-panel {
  margin: 12px 0;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  color: var(--luma-text-primary);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.pilot-contributor-heading,
.pilot-contributor-actions,
.pilot-sync-grid {
  display: flex;
  gap: 10px;
}

.pilot-contributor-heading {
  align-items: flex-start;
  justify-content: space-between;
}

.pilot-contributor-heading h3,
.pilot-contributor-heading p,
.pilot-contributor-panel > p {
  margin: 0;
}

.pilot-contributor-panel > p {
  margin-top: 8px;
  color: var(--luma-text-secondary);
  line-height: 1.45;
}

.pilot-role-badge {
  padding: 5px 9px;
  border: 0;
  border-radius: var(--luma-radius-chip);
  background: color-mix(in srgb, var(--luma-success) 14%, transparent);
  color: var(--luma-success);
  font-size: var(--luma-type-status-size);
  font-weight: 750;
  text-transform: capitalize;
}

.pilot-sync-grid {
  margin-top: 12px;
}

.pilot-sync-grid article {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
}

.pilot-sync-grid span,
.pilot-sync-grid strong {
  display: block;
}

.pilot-sync-grid span {
  color: var(--luma-text-muted);
  font-size: 0.7rem;
}

.pilot-sync-grid strong {
  margin-top: 2px;
  font-size: 0.86rem;
}

.pilot-contributor-actions {
  flex-wrap: wrap;
  margin-top: 12px;
}

.pilot-contributor-actions button,
.pilot-contributor-actions a {
  min-height: var(--tap-target);
  padding: 9px 12px;
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.pilot-contributor-actions .text-button {
  border-color: transparent;
  background: transparent;
  color: var(--luma-text-secondary);
}

.pilot-orientation-diagnostics {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--luma-divider);
}

.pilot-orientation-diagnostics summary {
  cursor: pointer;
  color: var(--luma-text-link);
  font-size: 0.82rem;
  font-weight: 750;
}

.pilot-orientation-diagnostics > p {
  margin: 8px 0 0;
  color: var(--luma-text-secondary);
  font-size: 0.72rem;
  line-height: 1.45;
}

.pilot-orientation-diagnostics .pilot-sync-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pilot-orientation-diagnostics .pilot-sync-grid strong {
  overflow-wrap: anywhere;
}

.pilot-orientation-diagnostics > button {
  width: 100%;
  min-height: var(--tap-target);
  margin-top: 10px;
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-link);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 430px) {
  .pilot-contributor-actions > * {
    flex: 1 1 calc(50% - 5px);
    text-align: center;
  }

  .pilot-orientation-diagnostics .pilot-sync-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.success-modal {
  display: grid;
  place-items: center;
  padding: 24px;
}

.success-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 26px 20px 20px;
  border-radius: 30px;
  text-align: center;
  transform: translateY(18px) scale(0.96);
  transition: transform 240ms ease;
  border-color: rgba(231, 178, 77, 0.22);
  background:
    radial-gradient(circle at 50% 10%, rgba(243, 201, 106, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(42, 38, 32, 0.9), rgba(27, 25, 22, 0.86)),
    var(--panel);
  box-shadow:
    0 0 0 1px rgba(231, 178, 77, 0.12),
    0 0 0 8px rgba(231, 178, 77, 0.055),
    0 26px 74px rgba(18, 12, 6, 0.48),
    0 0 46px rgba(231, 178, 77, 0.2);
}

.success-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  border-radius: 24px;
  border: 1px solid rgba(243, 201, 106, 0.3);
  box-shadow:
    inset 0 0 28px rgba(231, 178, 77, 0.08),
    0 0 24px rgba(231, 178, 77, 0.12);
  pointer-events: none;
}

.success-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  z-index: 0;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(243, 201, 106, 0.36);
  box-shadow:
    0 0 0 10px rgba(231, 178, 77, 0.045),
    0 0 34px rgba(231, 178, 77, 0.3);
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.success-card > * {
  position: relative;
  z-index: 1;
}

.success-modal.show .success-card::after {
  animation: successGoldRing 1050ms ease-out both;
}

.arrival-modal.show .success-card::after {
  animation: none;
  opacity: 0;
}

.success-modal.show .success-card {
  transform: translateY(0) scale(1);
}

.journey-change-modal {
  z-index: var(--layer-dialog);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 9, 7, 0.5);
  backdrop-filter: blur(4px);
}

.confirmation-card {
  width: min(100%, 340px);
}

.confirmation-card .success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.confirmation-card .destructive-action {
  border-color: rgba(216, 106, 93, 0.5);
  background: linear-gradient(180deg, #cf665b, #a9433b);
  color: #fff8f5;
}

.pwa-prompt-card {
  position: absolute;
  z-index: var(--layer-prompt);
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 82px));
  padding: var(--space-4);
  border: 1px solid rgba(243, 201, 106, 0.24);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(42, 38, 32, 0.98), rgba(27, 25, 22, 0.98));
  box-shadow: 0 18px 50px rgba(10, 8, 5, 0.45);
}

.pwa-prompt-card[hidden] {
  display: none !important;
}

.pwa-prompt-card strong,
.pwa-prompt-card span {
  display: block;
}

.pwa-prompt-card strong {
  color: var(--text);
  font-size: 0.92rem;
}

.pwa-prompt-card span {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.pwa-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pwa-prompt-actions button {
  min-height: var(--tap-target);
}

.journey-change-card {
  width: min(100%, 330px);
  padding: 22px;
  border: 1px solid rgba(243, 201, 106, 0.2);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(42, 38, 32, 0.97), rgba(27, 25, 22, 0.97));
  box-shadow: 0 22px 58px rgba(8, 6, 4, 0.46), 0 0 24px rgba(231, 178, 77, 0.1);
  transform: translateY(12px) scale(0.98);
  transition: transform 220ms ease;
}

.journey-change-modal.show .journey-change-card {
  transform: translateY(0) scale(1);
}

.journey-change-card h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 21px;
}

.journey-change-card > p:not(.eyebrow) {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.journey-change-card > p strong {
  color: var(--text);
}

.journey-change-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.journey-change-actions button {
  min-height: 46px;
}

.success-lamp {
  position: relative;
  z-index: 1;
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c9 0 18%, var(--gold) 19% 48%, transparent 50%);
  box-shadow: 0 0 42px rgba(231, 178, 77, 0.78);
  animation: lampGlow 1.8s ease-in-out infinite;
}

.success-card h2 {
  margin: 0;
  font-size: 22px;
}

.success-card p:not(.eyebrow) {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.success-actions {
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

.success-actions button {
  min-height: 46px;
}

.success-actions button:last-child {
  background: rgba(244, 234, 215, 0.08);
  color: var(--text);
}

.toast {
  position: absolute;
  z-index: 30;
  left: 20px;
  right: 20px;
  bottom: 98px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 12px 16px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(18px);
  backface-visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  overflow: visible;
  isolation: isolate;
}

.toast::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(243, 201, 106, 0);
  box-shadow: 0 0 0 rgba(231, 178, 77, 0);
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.toast::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.toast.guide {
  left: 28px;
  right: 28px;
  bottom: calc(116px + env(safe-area-inset-bottom));
  min-height: 62px;
  padding: 13px 18px 13px 48px;
  border-color: rgba(243, 201, 106, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20px 50%, rgba(243, 201, 106, 0.28), transparent 38%),
    linear-gradient(180deg, rgba(42, 38, 32, 0.96), rgba(27, 25, 22, 0.94)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(244, 234, 215, 0.08),
    0 18px 44px rgba(18, 12, 6, 0.36),
    0 0 22px rgba(231, 178, 77, 0.14);
  color: var(--cream);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  place-items: center start;
}

.toast.guide::after {
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 0 5px rgba(231, 178, 77, 0.1),
    0 0 18px rgba(231, 178, 77, 0.56);
  opacity: 1;
  transform: translateY(-50%);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.12;
  }
}

@keyframes lampGlow {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.07);
    filter: brightness(1.18);
  }
}

@keyframes destinationLampPulse {
  0% {
    transform: scale(0.82);
    opacity: 0.72;
  }
  75%,
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

@keyframes successGoldRing {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
  }
  34% {
    opacity: 1;
  }
  100% {
    opacity: 0.72;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes emergencyHoldFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes starRewardPop {
  0% {
    transform: translateY(0) scale(0.92);
  }
  42% {
    transform: translateY(-4px) scale(1.18);
    box-shadow: 0 0 0 7px rgba(231, 178, 77, 0.12), 0 0 22px rgba(243, 201, 106, 0.42);
  }
  100% {
    transform: translateY(-2px) scale(1.03);
  }
}

@keyframes ratingGlowBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.24);
  }
}

@keyframes ratingSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.12);
  }
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes statusBannerIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splashLogoIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes splashExit {
  0%,
  70% {
    opacity: 1;
    pointer-events: auto;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 430px) {
  body {
    display: block;
  }

  .phone-shell {
    width: 100vw;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    border: 0;
    box-shadow: none;
  }

  .map-controls {
    gap: 0;
    padding: 5px;
  }

  .floating-card h2,
  .bottom-sheet h2 {
    font-size: 17px;
  }

  .phone-shell .bottom-sheet {
    max-height: min(68vh, 590px);
    padding: 20px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 25px 25px 0 0;
  }

  .phone-shell .bottom-sheet.compact {
    max-height: min(52vh, 460px);
  }

  .phone-shell .bottom-sheet[data-sheet="reports"],
  .phone-shell .bottom-sheet[data-sheet="safe-zones"],
  .phone-shell .bottom-sheet[data-sheet="campus"] {
    max-height: min(62%, calc(100% - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  .phone-shell .bottom-sheet.route-compare-sheet {
    max-height: min(31vh, 248px);
  }

  .phone-shell .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) {
    max-height: min(78vh, 660px);
  }

  .destination-search-results {
    max-height: min(31vh, 260px);
  }

  .destination-map-picker-actions {
    grid-template-columns: 1fr 1fr;
  }

  .destination-map-picker-actions > div {
    grid-column: 1 / -1;
  }

  .destination-map-picker-actions button {
    width: 100%;
  }

  .sheet-metrics {
    grid-template-columns: 1fr;
  }

  .sheet-metrics article {
    min-height: 58px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .map-controls {
    gap: 0;
    padding: 5px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .map-controls {
    top: max(74px, calc(env(safe-area-inset-top) + 62px));
    grid-auto-flow: column;
  }
}

@media (display-mode: standalone) {
  body {
    display: block;
    background: var(--bg);
  }

  .phone-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    box-shadow: none;
  }

  .map-controls {
    gap: 0;
    padding: 5px;
  }
}

@media (max-width: 380px) {
  .brand-pill {
    min-height: 46px;
    padding-right: 10px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .brand-pill strong {
    font-size: 15px;
  }

  .destination-pill {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    padding: 8px 10px;
  }

  .journey-status-card {
    gap: 6px;
    padding: 7px;
  }

  .journey-status-card strong {
    font-size: 14px;
  }

  .floating-nav {
    border-radius: 20px 20px 0 0;
  }
}

.privacy-scanner-modal {
  position: absolute;
  z-index: 950;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(8, 7, 5, 0.86);
  backdrop-filter: blur(14px);
}

.privacy-scanner-modal[hidden] {
  display: none !important;
}

.privacy-scanner-card {
  width: min(100%, 410px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(243, 201, 106, 0.24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 0%, rgba(243, 201, 106, 0.12), transparent 32%),
    linear-gradient(160deg, rgba(34, 31, 26, 0.99), rgba(19, 18, 15, 0.99));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
}

.privacy-scanner-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.privacy-scanner-head h2 {
  margin: 2px 0 0;
  color: #fff8df;
  font-size: 21px;
}

.privacy-scanner-head .eyebrow {
  margin: 0;
}

.privacy-scanner-shield {
  display: grid;
  place-items: center;
  width: 42px;
  height: 46px;
  flex: 0 0 42px;
  border: 1px solid rgba(243, 201, 106, 0.36);
  border-radius: 14px 14px 18px 18px;
  color: #f3c96a;
  background: rgba(243, 201, 106, 0.1);
  font-weight: 900;
  clip-path: polygon(50% 0, 96% 16%, 90% 72%, 50% 100%, 10% 72%, 4% 16%);
}

.privacy-scanner-status {
  min-height: 20px;
  margin: 14px 0 10px;
  color: rgba(255, 248, 223, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.privacy-scanner-modal[data-scan-state="working"] .privacy-scanner-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #f3c96a;
  box-shadow: 0 0 0 5px rgba(243, 201, 106, 0.1);
  animation: scanner-pulse 1.1s ease-in-out infinite;
}

.privacy-scanner-modal[data-scan-state="ready"] .privacy-scanner-status {
  color: #9fe0b8;
}

.privacy-scanner-modal[data-scan-state="unavailable"] .privacy-scanner-status {
  color: #f3c96a;
}

.privacy-scanner-modal[data-scan-state="error"] .privacy-scanner-status {
  color: #ffb0a3;
}

.privacy-scanner-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #11100e;
}

.privacy-scanner-preview canvas {
  display: block;
  width: 100%;
  max-height: 42dvh;
  object-fit: contain;
  cursor: default;
}

.privacy-scanner-local-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 248, 223, 0.84);
  background: rgba(12, 11, 9, 0.8);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.privacy-scanner-note,
.privacy-scanner-learning {
  display: block;
  color: rgba(211, 203, 183, 0.78);
  font-size: 10px;
  line-height: 1.5;
}

.privacy-scanner-note {
  min-height: 45px;
  margin: 10px 0;
}

.privacy-scanner-learning {
  margin-top: 10px;
}

.privacy-scanner-actions {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 8px;
  margin-top: 13px;
}

.privacy-scanner-actions button {
  min-height: 46px;
}

/* Compact, issue-first report card based on the Luma illustrated marker family. */
.bottom-sheet.report-detail-sheet {
  max-height: min(52vh, 470px);
  padding: 18px 16px calc(15px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 26px;
  background:
    radial-gradient(circle at 14% 0%, rgba(231, 178, 77, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(24, 25, 25, 0.985), rgba(17, 19, 20, 0.99));
  box-shadow: 0 -14px 40px rgba(8, 10, 11, 0.34);
}

.bottom-sheet.report-detail-sheet.sheet-expanded,
.bottom-sheet.report-detail-sheet:has(.report-more-details[open]) {
  max-height: min(79vh, 680px);
}

.report-detail-sheet .sheet-handle {
  height: 27px;
  margin-top: -14px;
}

.report-detail-sheet .sheet-close {
  top: 7px;
  right: 7px;
}

.report-detail-sheet .report-detail-heading {
  align-items: center;
  gap: 0.58rem;
  margin: -0.05rem 2.3rem 0.35rem 0;
}

.report-detail-sheet .report-detail-heading > div {
  flex: 1 1 auto;
}

.report-detail-sheet .report-detail-icon {
  flex-basis: 4.1rem;
  height: 4.1rem;
  width: 4.1rem;
}

.report-detail-sheet .report-detail-icon svg {
  height: 4.35rem;
  width: 4.35rem;
}

.report-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.report-detail-sheet .report-title-row h2 {
  color: #fff3dd;
  flex: 0 1 auto;
  font-size: 1.12rem;
  line-height: 1.08;
  margin: 0;
}

.report-detail-sheet .report-lifecycle-pill {
  flex: 0 0 auto;
  font-size: 0.61rem;
  line-height: 1;
  padding: 0.3rem 0.48rem;
}

.report-detail-sheet .report-detail-location-subtitle {
  color: rgba(245, 239, 226, 0.65);
  font-size: 0.71rem;
  margin-top: 0.26rem;
}

.report-evidence-thumbnail {
  align-items: center;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 0.65rem;
  margin: 0.5rem 0 0.62rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.025);
}

.report-evidence-thumbnail[hidden] {
  display: none;
}

.report-evidence-thumbnail img {
  display: block;
  height: 62px;
  width: 76px;
  border-radius: 0.62rem;
  object-fit: cover;
}

.report-evidence-status {
  display: block;
  margin: 0.4rem 0 0.65rem;
  color: var(--text-secondary, #5f5a50);
  line-height: 1.35;
}

.report-evidence-thumbnail figcaption {
  color: rgba(245, 239, 226, 0.64);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.35;
}

.report-detail-sheet .report-detail-description {
  margin: 0.25rem 0 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(248, 241, 227, 0.86);
  font-size: 0.77rem;
  line-height: 1.42;
}

.report-community-summary {
  display: grid;
  gap: 0.18rem;
  margin: 0 0 0.58rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.report-community-summary strong {
  color: #a9dc9d;
  font-size: 0.71rem;
  line-height: 1.35;
}

.report-community-summary small {
  color: rgba(245, 239, 226, 0.56);
  font-size: 0.62rem;
}

.report-community-summary .report-freshness-note {
  color: rgba(245, 205, 128, 0.82);
  font-weight: 680;
}

.report-detail-sheet .report-response-actions {
  gap: 0.45rem;
  margin-top: 0;
}

.report-detail-sheet .report-response-actions button {
  min-height: 2.45rem;
  border-radius: 0.72rem;
  color: #f7f3e9;
  font-size: 0.7rem;
  font-weight: 780;
}

.report-detail-sheet .report-response-still {
  border-color: rgba(111, 190, 105, 0.38);
  background: linear-gradient(180deg, rgba(76, 166, 78, 0.76), rgba(44, 125, 53, 0.8));
}

.report-detail-sheet .report-response-gone {
  border-color: rgba(222, 93, 82, 0.4);
  background: linear-gradient(180deg, rgba(194, 61, 55, 0.8), rgba(137, 40, 39, 0.82));
}

.report-inaccurate-action {
  width: auto;
  min-height: 2rem;
  margin: 0.18rem 0 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: rgba(245, 239, 226, 0.65);
  font-size: 0.66rem;
  font-weight: 680;
  text-align: left;
}

.report-inaccurate-action::after {
  content: "›";
  float: right;
  color: rgba(245, 239, 226, 0.48);
  font-size: 1rem;
}

.report-more-details {
  margin-top: 0.32rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.025);
}

.report-more-details > summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.55rem 0.7rem;
  color: rgba(250, 244, 232, 0.88);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 740;
  list-style: none;
}

.report-more-details > summary::-webkit-details-marker {
  display: none;
}

.report-more-details > summary::after {
  content: "⌄";
  color: rgba(245, 239, 226, 0.56);
  font-size: 0.92rem;
  transition: transform 160ms ease;
}

.report-more-details[open] > summary::after {
  transform: rotate(180deg);
}

.report-more-details-content {
  padding: 0 0.7rem 0.75rem;
}

.report-detail-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.report-detail-list p {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0;
  padding: 0.48rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 0.65rem;
  line-height: 1.35;
}

.report-detail-list p > span {
  color: rgba(245, 239, 226, 0.53);
}

.report-detail-list p > strong {
  color: rgba(250, 244, 232, 0.82);
  font-weight: 700;
}

.report-recategorise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin-top: 0.62rem;
  padding: 0.62rem;
  border: 1px solid rgba(169, 168, 165, 0.2);
  border-radius: 0.74rem;
  background: rgba(169, 168, 165, 0.055);
}

.report-recategorise[hidden] {
  display: none;
}

.report-recategorise label {
  display: grid;
  gap: 0.32rem;
  color: rgba(245, 239, 226, 0.68);
  font-size: 0.62rem;
  font-weight: 700;
}

.report-recategorise select,
.report-recategorise button {
  min-height: 2.35rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0.64rem;
  background: #262321;
  color: #f7eedc;
  font: inherit;
}

.report-recategorise select {
  width: 100%;
  padding: 0 0.55rem;
}

.report-recategorise button {
  padding: 0 0.72rem;
  border-color: rgba(232, 183, 80, 0.35);
  color: #efc36e;
  font-weight: 800;
}

.report-secondary-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0.65rem;
}

.report-secondary-actions button {
  min-height: 3rem;
  padding: 0.4rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(248, 241, 227, 0.76);
  font-size: 0.59rem;
  font-weight: 700;
  line-height: 1.2;
}

.report-area-reference {
  margin-top: 0.68rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.report-area-reference[hidden] {
  display: none;
}

.report-area-reference-heading {
  display: grid;
  gap: 0.12rem;
  margin-bottom: 0.45rem;
}

.report-area-reference-heading strong {
  color: rgba(250, 244, 232, 0.84);
  font-size: 0.69rem;
}

.report-area-reference-heading small {
  color: rgba(245, 239, 226, 0.52);
  font-size: 0.61rem;
}

.report-area-reference .location-photo-gallery {
  min-height: 108px;
}

.report-area-reference .location-photo-track {
  min-height: 108px;
}

.report-detail-sheet .report-council-status,
.report-detail-sheet .report-sharing-note {
  font-size: 0.62rem;
}

.report-official-action {
  min-height: 2.2rem;
  margin-top: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e7bb68;
  font-size: 0.65rem;
  font-weight: 750;
  text-align: left;
}

/* Route choices occupy only their visible tray; the transparent backdrop never intercepts map gestures. */
.phone-shell.routes-ready .sheet-backdrop.visible {
  pointer-events: none !important;
}

.bottom-sheet.route-compare-sheet.better-lit-comparison {
  max-height: min(31vh, 258px);
}

.bottom-sheet.route-compare-sheet:not(.sheet-expanded) .better-lit-route-legend {
  display: none !important;
}

.bottom-sheet.route-compare-sheet.sheet-expanded {
  max-height: min(58vh, 500px);
}

.bottom-sheet.route-compare-sheet.sheet-expanded .better-lit-route-legend {
  display: flex !important;
}

.bottom-sheet.route-compare-sheet.sheet-expanded .route-patch-note {
  display: block !important;
}

.lighting-observation-sheet {
  gap: 10px;
  max-height: min(86vh, 720px);
}

.lighting-observation-sheet > h2 {
  margin-bottom: 2px;
}

.lighting-quick-stars {
  display: grid;
  grid-template-columns: repeat(5, 46px);
  justify-content: center;
  gap: 8px;
}

.stars.lighting-quick-stars button {
  --star-size: 46px;
}

.stars.lighting-quick-stars button .rating-star-icon {
  width: 28px;
  height: 28px;
}

.lighting-observation-sheet .quick-rating-location,
.lighting-observation-sheet .quick-rating-status {
  margin: 0;
}

.lighting-supporting-issues {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.lighting-supporting-issues h3 {
  margin: 0;
  color: rgba(255, 247, 231, 0.94);
  font-size: 0.9rem;
}

.lighting-issue-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.lighting-issue-grid button {
  align-items: center;
  grid-template-columns: 34px minmax(0, 1fr);
  justify-items: start;
  min-height: 68px;
  padding: 8px 10px;
  text-align: left;
}

.lighting-issue-grid button img {
  width: 34px;
  height: 38px;
  margin: 0;
}

.lighting-issue-grid .issue-option-copy {
  display: grid;
  gap: 0;
}

.lighting-issue-grid .issue-option-copy strong {
  font-size: 0.76rem;
  line-height: 1.2;
}

.lighting-optional-details {
  display: grid;
  gap: 8px;
}

.lighting-optional-details[hidden] {
  display: none !important;
}

.lighting-extra-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(244, 190, 81, 0.24);
  border-radius: 14px;
  color: rgba(255, 247, 231, 0.9);
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: left;
}

.lighting-extra-toggle:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

.lighting-extra-chevron {
  color: var(--gold-soft);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.lighting-extra-toggle[aria-expanded="true"] .lighting-extra-chevron {
  transform: rotate(45deg);
}

.lighting-extra-fields {
  display: grid;
  gap: 8px;
}

.lighting-extra-fields[hidden] {
  display: none !important;
}

.lighting-contribution-privacy {
  margin: 0;
  color: rgba(246, 238, 222, 0.62);
  font-size: 0.68rem;
  line-height: 1.4;
}

.lighting-observation-sheet > .primary-button {
  min-height: 50px;
  margin-top: 2px;
}

.lighting-observation-sheet > .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 340px) {
  .lighting-quick-stars {
    grid-template-columns: repeat(5, 44px);
    gap: 7px;
  }

  .stars.lighting-quick-stars button {
    --star-size: 44px;
  }

  .stars.lighting-quick-stars button .rating-star-icon {
    width: 26px;
    height: 26px;
  }

  .lighting-issue-grid button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 64px;
    padding-inline: 7px;
  }

  .lighting-issue-grid button img {
    width: 30px;
    height: 34px;
  }
}

@keyframes scanner-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (max-height: 760px) {
  .bottom-sheet {
    max-height: 84vh;
  }
}
.captcha-status-card {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  left: 50%;
  z-index: 48;
  width: min(330px, calc(100% - 32px));
  padding: 13px 14px;
  border: 1px solid rgba(241, 181, 66, 0.24);
  border-radius: 18px;
  background: rgba(28, 25, 21, 0.94);
  box-shadow: 0 14px 34px rgba(15, 12, 8, 0.24);
  color: #f8f1e5;
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.captcha-status-card[hidden] {
  display: none;
}

.captcha-status-copy {
  display: grid;
  gap: 3px;
  text-align: left;
}

.captcha-status-copy strong {
  color: #f4bd54;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.captcha-status-copy span {
  color: rgba(248, 241, 229, 0.78);
  font-size: 0.76rem;
  line-height: 1.35;
}

.captcha-widget-host {
  width: 100%;
  min-height: 0;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 12px;
}

.captcha-widget-host:empty {
  display: none;
}

.captcha-widget-host:not(:empty) {
  min-height: 65px;
}

.captcha-retry-button {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
}

.captcha-status-card[data-state="error"] {
  border-color: rgba(225, 145, 91, 0.38);
}
/* Pilot Admin contribution-review overlay. It never contains contributor identity or routing controls. */
.admin-review-summary {
  position: absolute;
  z-index: 58;
  top: max(5.85rem, calc(env(safe-area-inset-top) + 5rem));
  left: 1rem;
  right: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: start;
  padding: .9rem;
  border: 1px solid rgba(239, 182, 67, .38);
  border-radius: 16px;
  background: rgba(29, 26, 21, .94);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
  color: #f5ecd8;
  backdrop-filter: blur(14px);
}
.admin-review-summary[hidden] { display: none; }
.admin-review-summary div { display: grid; gap: .22rem; min-width: 0; }
.admin-review-summary .eyebrow { margin: 0; }
.admin-review-summary strong,
.admin-review-summary span,
.admin-review-summary small { overflow-wrap: anywhere; }
.admin-review-summary span { color: #e6dbc5; }
.admin-review-summary small { color: #bdb4a3; }
.admin-review-summary[data-state="denied"] { border-color: rgba(214, 128, 108, .48); }
.admin-review-summary .icon-button { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; }

/* Core-flow coordination: route feedback stays immediate without hiding the map. */
.route-card-loading {
  position: relative;
  overflow: hidden;
}

.route-card-loading .route-facts,
.route-card-loading .route-score-row,
.route-card-loading .route-local {
  opacity: 0.16;
}

.route-card-loading::after {
  content: "";
  position: absolute;
  inset: 36px 12px 14px;
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.04) 20%, rgba(240, 181, 67, 0.18) 42%, rgba(255, 255, 255, 0.04) 64%);
  background-size: 220% 100%;
  animation: route-card-skeleton 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes route-card-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.destination-suggestions {
  max-height: min(42dvh, calc(var(--luma-visual-height, 100dvh) * 0.42));
  overscroll-behavior: contain;
}

.route-results[aria-busy="true"] .journey-actions {
  opacity: 0.68;
}

.journey-actions .primary-button {
  min-height: 48px;
  font-weight: 800;
}

html[data-luma-interaction-state="journey_active"] .bottom-sheet[data-sheet="journey"]:not(.open),
html[data-luma-interaction-state="run_active"] .bottom-sheet[data-sheet="journey"]:not(.open) {
  pointer-events: none;
}

@media (max-width: 430px) {
  .bottom-sheet {
    max-height: min(82dvh, calc(var(--luma-visual-height, 100dvh) - 82px));
  }

  .bottom-sheet.route-compare-sheet {
    max-height: min(68dvh, calc(var(--luma-visual-height, 100dvh) - 132px));
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  .bottom-sheet,
  .bottom-sheet.route-compare-sheet {
    max-height: calc(var(--luma-visual-height, 100dvh) - 54px);
    bottom: max(4px, env(safe-area-inset-bottom));
  }

  .destination-suggestions {
    max-height: calc(var(--luma-visual-height, 100dvh) - 210px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .luma-map,
  .map-loading-surface {
    transition: none;
  }

  .route-card-loading::after {
    animation: none;
  }
}
/* Created only by the explicitly authorised local/preview diagnostic build. */
.luma-location-diagnostics {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top)) 8px auto auto;
  z-index: 10000;
  box-sizing: border-box;
  width: min(370px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px - env(safe-area-inset-top));
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(231, 178, 77, 0.46);
  border-radius: 10px;
  background: rgba(19, 17, 14, 0.94);
  color: #f6ead5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
  font: 500 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  pointer-events: auto;
}

.luma-location-diagnostics:focus-visible {
  outline: 2px solid #f0bb51;
  outline-offset: 2px;
}

/* Lightweight first-run guidance. It sits over the one existing map instance. */
.luma-onboarding {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 22%, rgba(231, 178, 77, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(18, 17, 15, 0.68), rgba(12, 11, 9, 0.96));
  backdrop-filter: blur(10px);
  opacity: 1;
  transition: opacity var(--motion-normal) ease;
  overscroll-behavior: contain;
}

.luma-onboarding[hidden] {
  display: none !important;
}

.luma-onboarding-card {
  width: min(100%, 402px);
  max-height: calc(var(--luma-visual-height, 100dvh) - 36px);
  margin: auto;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(243, 201, 106, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 0%, rgba(231, 178, 77, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(38, 35, 30, 0.98), rgba(24, 22, 19, 0.99));
  box-shadow: 0 30px 86px rgba(0, 0, 0, 0.58);
  -webkit-overflow-scrolling: touch;
}

.luma-onboarding-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.luma-onboarding-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(243, 201, 106, 0.38);
  border-radius: 14px;
  background: linear-gradient(145deg, #f3c96a, #ca8428);
  color: #1b1409;
  font-weight: 900;
  box-shadow: 0 8px 26px rgba(231, 178, 77, 0.22);
}

.luma-onboarding-header .eyebrow,
.luma-onboarding-progress {
  margin: 0;
}

.luma-onboarding-progress {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
}

.luma-onboarding-header .text-button {
  min-width: 54px;
  min-height: var(--tap-target);
  padding: 0 8px;
  background: transparent;
  color: var(--gold-soft);
  font-weight: 800;
}

.luma-onboarding-stages {
  touch-action: pan-y;
}

.luma-onboarding-stage {
  min-height: 366px;
  padding: 16px 2px 4px;
}

.luma-onboarding-stage[hidden] {
  display: none !important;
}

.luma-onboarding-stage .eyebrow {
  margin: 18px 0 5px;
  color: var(--gold-soft);
}

.luma-onboarding-stage h1 {
  margin: 0;
  max-width: 330px;
  color: var(--text);
  font-size: clamp(1.65rem, 7vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.luma-onboarding-stage > p:not(.eyebrow) {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.luma-onboarding-stage > small {
  display: block;
  margin-top: 12px;
  padding: 11px 12px;
  border-left: 3px solid rgba(231, 178, 77, 0.52);
  border-radius: 0 12px 12px 0;
  background: rgba(231, 178, 77, 0.07);
  color: #d9ccb5;
  font-size: 0.78rem;
  line-height: 1.45;
}

.luma-onboarding-visual {
  position: relative;
  height: 170px;
  overflow: hidden;
  border: 1px solid rgba(244, 234, 215, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(34deg, transparent 47%, rgba(244, 234, 215, 0.06) 48% 50%, transparent 51%),
    linear-gradient(146deg, transparent 34%, rgba(244, 234, 215, 0.05) 35% 37%, transparent 38%),
    radial-gradient(circle at 75% 30%, rgba(111, 174, 120, 0.12), transparent 24%),
    #211f1b;
}

.route-visual .onboarding-search-line {
  position: absolute;
  inset: 15px 18px auto;
  height: 38px;
  border: 1px solid rgba(244, 234, 215, 0.12);
  border-radius: 19px;
  background: rgba(15, 14, 12, 0.82);
}

.route-visual .onboarding-route-line {
  position: absolute;
  left: 42px;
  right: 35px;
  top: 103px;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, #d98a30, #f3c96a 52%, #dc9334);
  box-shadow: 0 0 0 3px rgba(35, 25, 15, 0.88), 0 0 18px rgba(231, 178, 77, 0.32);
  transform: rotate(-8deg);
}

.route-visual i {
  position: absolute;
  top: 98px;
  width: 16px;
  height: 16px;
  border: 3px solid #251b10;
  border-radius: 50%;
  background: #f3c96a;
}

.route-visual i:nth-of-type(1) { left: 39px; }
.route-visual i:nth-of-type(2) { left: 50%; top: 86px; }
.route-visual i:nth-of-type(3) { right: 29px; top: 76px; }

.lighting-visual {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
}

.lighting-visual span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.lighting-visual i {
  width: 52px;
  height: 8px;
  border-radius: 99px;
  box-shadow: 0 0 12px currentColor;
}

.lighting-visual .supported { color: #8bcb96; background: #8bcb96; }
.lighting-visual .limited { color: #e7b24d; background: #e7b24d; border: 1px dashed #fff0bf; }
.lighting-visual .unknown { color: #817b74; background: #817b74; box-shadow: none; }

.contribution-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.contribution-visual span {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(243, 201, 106, 0.3);
  border-radius: 26px 26px 26px 8px;
  background: linear-gradient(145deg, rgba(243, 201, 106, 0.24), rgba(202, 132, 40, 0.13));
  color: var(--gold-soft);
  font-size: 2rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
}

.contribution-visual .contribution-light {
  border-color: rgba(216, 106, 93, 0.35);
  background: rgba(216, 106, 93, 0.12);
  color: #efaa9f;
}

.luma-onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 15px;
}

.luma-onboarding-dots span {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(244, 234, 215, 0.3);
  border-radius: 50%;
}

.luma-onboarding-dots span.active {
  width: 22px;
  border-radius: 99px;
  border-color: var(--gold);
  background: var(--gold);
}

.luma-onboarding-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 9px;
}

.luma-onboarding-actions button {
  min-height: 48px;
}

.luma-onboarding-actions .primary-button:only-child,
.luma-onboarding-actions .primary-button[data-onboarding-next]:not([hidden]):first-child {
  grid-column: 1 / -1;
}

.luma-onboarding-actions [data-onboarding-back][hidden] + [data-onboarding-next]:not([hidden]) {
  grid-column: 1 / -1;
}

.luma-permission-education {
  z-index: 75;
  background: rgba(10, 9, 7, 0.56);
  backdrop-filter: blur(5px);
}

.permission-education-card {
  width: min(100%, 350px);
  padding: 24px 20px 20px;
}

.permission-education-card::after {
  display: none;
}

.permission-education-card h2 {
  margin: 5px 0 10px;
}

.permission-education-card p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.permission-education-card .success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.contextual-guidance-card,
.journey-voice-prompt {
  position: absolute;
  z-index: 36;
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  border: 1px solid rgba(243, 201, 106, 0.24);
  background: linear-gradient(180deg, rgba(38, 35, 30, 0.97), rgba(25, 23, 20, 0.98));
  color: var(--text);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.contextual-guidance-card[hidden],
.journey-voice-prompt[hidden] {
  display: none !important;
}

.contextual-guidance-card {
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 88px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border-radius: 17px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.contextual-guidance-card button {
  min-width: 54px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(231, 178, 77, 0.14);
  color: var(--gold-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.phone-shell.journey-active .contextual-guidance-card {
  top: max(94px, calc(env(safe-area-inset-top) + 92px));
  bottom: auto;
}

.journey-voice-prompt {
  top: max(94px, calc(env(safe-area-inset-top) + 92px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
}

.journey-voice-prompt div,
.journey-voice-prompt strong,
.journey-voice-prompt span {
  display: block;
  min-width: 0;
}

.journey-voice-prompt strong { font-size: 0.88rem; }
.journey-voice-prompt span { margin-top: 2px; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.journey-voice-prompt button { min-height: 40px; padding-inline: 10px; font-size: 0.72rem; white-space: nowrap; }

.luma-help-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.luma-help-list details {
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 14px;
  background: rgba(18, 17, 15, 0.28);
}

.luma-help-list summary {
  padding: 11px 12px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.luma-help-list details p {
  padding: 0 12px 12px;
  font-size: 0.78rem;
}

.settings-panel .luma-help-list button {
  width: calc(100% - 24px);
  min-height: 40px;
  margin: 0 12px 12px;
  text-align: center;
}

.help-guidance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.settings-panel .help-guidance-actions button {
  min-height: 44px;
  padding: 8px 10px;
  text-align: center;
  font-size: 0.78rem;
}

@media (max-width: 370px) {
  .luma-onboarding-card { padding: 14px; border-radius: 24px; }
  .luma-onboarding-stage { min-height: 340px; }
  .luma-onboarding-visual { height: 146px; }
  .journey-voice-prompt { grid-template-columns: 1fr 1fr; }
  .journey-voice-prompt div { grid-column: 1 / -1; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .luma-onboarding { align-items: start; }
  .luma-onboarding-stage { min-height: auto; }
  .luma-onboarding-visual { height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .luma-onboarding,
  .luma-onboarding-card,
  .contextual-guidance-card,
  .journey-voice-prompt,
  .permission-education-card {
    transition: none;
    animation: none;
  }
}

/* Focused mobile contribution and destination-search refinement. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > h2,
.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > .route-input,
.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > .destination-selection-card,
.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > .route-helper,
.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > [data-show-routes] {
  flex: 0 0 auto;
}

.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > .route-input {
  margin-top: 10px;
}

.phone-shell:not(.run-mode) .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) > .destination-search-results {
  margin-top: 8px;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 8px max(10px, env(safe-area-inset-bottom));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 178, 77, 0.34) transparent;
}

/* Focused Run Mode intent, planning and sticky-action refinement. */
.phone-shell.run-mode .bottom-sheet[data-sheet="journey"] {
  scroll-padding-block: 18px calc(92px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 178, 77, 0.28) transparent;
}

.phone-shell.run-mode .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) {
  max-height: min(78vh, 660px);
  padding-inline: clamp(16px, 4.5vw, 20px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.phone-shell.run-mode .bottom-sheet[data-sheet="journey"] > h2 {
  margin: 0 0 6px;
  color: var(--cream);
  font-size: clamp(23px, 6vw, 29px);
  letter-spacing: -0.02em;
}

.run-mode-panel {
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.run-panel-head {
  display: none;
}

.run-flow-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.run-flow-choice button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 10px 11px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 17px;
  background: rgba(244, 234, 215, 0.045);
  color: var(--muted);
  text-align: left;
  transition: transform 140ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.run-flow-choice button svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.run-flow-choice button strong,
.run-flow-choice button small {
  display: block;
}

.run-flow-choice button strong {
  color: var(--cream);
  font-size: 12px;
  font-weight: 900;
}

.run-flow-choice button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
}

.run-flow-choice button.active,
.run-flow-choice button[aria-pressed="true"] {
  border-color: rgba(231, 178, 77, 0.42);
  background: linear-gradient(145deg, rgba(231, 178, 77, 0.16), rgba(231, 178, 77, 0.07));
  color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.08), 0 8px 24px rgba(12, 9, 5, 0.14);
}

.run-free-flow,
.run-plan-flow {
  display: grid;
  gap: 14px;
}

.run-free-flow[hidden],
.run-plan-flow[hidden],
.run-start-picker-tools[hidden],
.run-primary-dock[hidden] {
  display: none !important;
}

.run-free-flow p {
  margin: 0;
  color: #d7cec0;
  font-family: var(--body-font);
  font-size: 13px;
  line-height: 1.5;
}

.run-setting-group {
  gap: 8px;
}

.run-setting-group > span {
  color: #d8cdbc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.run-plan-flow .chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.run-plan-flow .chip-row button {
  min-height: 44px;
  padding: 0 7px;
  border-radius: 14px;
  font-family: var(--body-font);
  font-size: 11px;
}

.run-shape-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.run-shape-row button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 100%;
  min-height: 66px;
  padding: 7px 5px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 15px;
  background: rgba(244, 234, 215, 0.045);
  color: var(--muted);
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 800;
  transition: transform 140ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.run-shape-row button svg {
  width: 36px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.run-shape-row button.active,
.run-shape-row button[aria-pressed="true"] {
  border-color: rgba(231, 178, 77, 0.4);
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold-soft);
}

.run-build-custom-route {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 8px 11px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 15px;
  background: rgba(244, 234, 215, 0.04);
  color: var(--muted);
  text-align: left;
}

.run-build-custom-route svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.run-build-custom-route strong,
.run-build-custom-route small {
  display: block;
}

.run-build-custom-route strong {
  color: var(--cream);
  font-size: 12px;
}

.run-build-custom-route small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
}

.run-build-custom-route > i {
  color: var(--gold-soft);
  font-size: 22px;
  font-style: normal;
}

.run-build-custom-route.active,
.run-build-custom-route[aria-pressed="true"] {
  border-color: rgba(231, 178, 77, 0.4);
  background: rgba(231, 178, 77, 0.12);
  color: var(--gold-soft);
}

.run-flow-choice button:active,
.run-plan-flow .chip-row button:active,
.run-shape-row button:active,
.run-build-custom-route:active,
.run-start-row button:active,
.run-primary-dock button:active {
  transform: scale(0.975);
}

.run-start-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgba(244, 234, 215, 0.09);
  border-radius: 15px;
  background: rgba(244, 234, 215, 0.04);
}

.run-start-pin {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(231, 178, 77, 0.12);
}

.run-start-pin i {
  width: 8px;
  height: 8px;
  border: 2px solid var(--gold-soft);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.run-start-row small,
.run-start-row strong {
  display: block;
  min-width: 0;
}

.run-start-row small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.run-start-row strong {
  margin-top: 2px;
  overflow: hidden;
  color: var(--cream);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-start-row button,
.run-location-status button,
.run-start-picker-tools button {
  min-height: 44px;
  padding: 0 11px;
  border-radius: 12px;
  background: rgba(231, 178, 77, 0.1);
  color: var(--gold-soft);
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 850;
}

.run-suggestion-empty {
  margin: -3px 2px 0;
  color: #b9ae9f;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.run-location-status {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: #cfc5b6;
  font-size: 11px;
  font-weight: 700;
}

.run-location-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a857d;
  box-shadow: 0 0 0 3px rgba(138, 133, 125, 0.1);
}

.run-location-status[data-location-state="ready"] .run-location-dot,
.run-location-status[data-location-state="selected"] .run-location-dot {
  background: #82bb83;
  box-shadow: 0 0 0 3px rgba(130, 187, 131, 0.12);
}

.run-location-status[data-location-state="requesting"] .run-location-dot {
  background: var(--gold);
}

.run-location-status[data-location-state="denied"] .run-location-dot,
.run-location-status[data-location-state="missing"] .run-location-dot {
  background: #d98a67;
}

.run-start-picker-tools {
  display: grid;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(231, 178, 77, 0.17);
  border-radius: 16px;
  background: rgba(231, 178, 77, 0.055);
}

.run-start-picker-tools strong,
.run-start-picker-tools span {
  display: block;
}

.run-start-picker-tools strong {
  color: var(--cream);
  font-size: 12px;
}

.run-start-picker-tools span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.run-start-picker-tools > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.phone-shell.run-mode .bottom-sheet[data-sheet="journey"] > [data-run-search-control][hidden] {
  display: none !important;
}

.phone-shell.run-mode .bottom-sheet[data-sheet="journey"] > .destination-search-results {
  max-height: none;
  overflow: visible;
}

.phone-shell.run-mode .bottom-sheet[data-sheet="journey"] > .route-helper {
  margin-top: 9px;
  font-size: 11px;
}

.run-primary-dock {
  position: sticky;
  z-index: 5;
  bottom: calc(-10px - env(safe-area-inset-bottom));
  margin: 14px -4px 0;
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(27, 25, 22, 0), rgba(27, 25, 22, 0.96) 24%, rgba(27, 25, 22, 0.99));
}

.run-primary-dock p {
  min-height: 0;
  margin: 0 4px 5px;
  color: #c7bcad;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}

.run-primary-dock p:empty {
  display: none;
}

.run-primary-dock .primary-button {
  width: 100%;
  min-height: 52px;
  margin: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f1bc50, #dea13d);
  color: #211a10;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 26px rgba(165, 105, 26, 0.24), inset 0 1px 0 rgba(255, 244, 205, 0.48);
}

/* Mission 1 Batch D: one route-origin model and compact Run planning controls. */
.route-endpoint-planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px 8px;
  margin: 4px 0 10px;
  padding: 7px;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-interactive);
}

.route-endpoint-planner[hidden],
.route-endpoint-picker[hidden],
.run-style-carousel button[hidden] {
  display: none !important;
}

.route-endpoint-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--luma-radius-row);
  background: transparent;
  color: var(--luma-text-primary);
  text-align: left;
}

.route-endpoint-row > .route-endpoint-marker {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  font-size: 11px;
  font-weight: 900;
}

.route-endpoint-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.route-endpoint-row small {
  color: var(--luma-text-muted);
  font-size: 10px;
  font-weight: 800;
}

.route-endpoint-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-endpoint-address {
  overflow: hidden;
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-endpoint-row i {
  color: var(--luma-accent-strong);
  font-size: 20px;
  font-style: normal;
}

.route-endpoint-swap {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  font-size: 20px;
}

.route-endpoint-swap:disabled {
  opacity: 0.42;
}

.route-endpoint-picker {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-raised);
}

.route-endpoint-picker strong,
.route-endpoint-picker span {
  display: block;
}

.route-endpoint-picker strong {
  color: var(--luma-text-primary);
  font-size: 13px;
}

.route-endpoint-picker span,
.run-style-availability {
  margin-top: 3px;
  color: var(--luma-text-secondary);
  font-size: 10px;
  line-height: 1.4;
}

.route-endpoint-picker-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.route-endpoint-picker-actions button,
.run-style-carousel button {
  min-height: 44px;
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  font-family: var(--luma-font-body);
  font-size: 11px;
  font-weight: 800;
}

.run-style-carousel {
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding: 2px 14px 6px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: inline proximity;
}

.run-style-carousel::-webkit-scrollbar {
  display: none;
}

.run-style-carousel button {
  flex: 0 0 auto;
  min-width: 96px;
  padding-inline: 14px;
  scroll-snap-align: start;
}

.run-style-carousel button:is(.active, [aria-checked="true"]) {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.run-shape-disclosure {
  border: 0;
  color: var(--luma-text-secondary);
  font-size: 11px;
}

.run-shape-disclosure summary {
  min-height: 44px;
  padding: 13px 2px;
  cursor: pointer;
  font-weight: 800;
}

.run-start-row {
  grid-template-columns: 28px minmax(0, 1fr);
}

.run-start-row > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  width: 100%;
  padding-inline: 8px 2px;
  background: transparent;
  text-align: left;
}

.run-start-row > button small,
.run-start-row > button strong {
  grid-column: 1;
}

.run-start-row > button i {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 20px;
  font-style: normal;
}

.run-start-picker-tools > div:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-start-decision-actions {
  display: grid;
  gap: 8px;
}

.route-start-decision-actions > button {
  width: 100%;
  min-height: 46px;
}

@media (max-width: 370px) {
  .route-endpoint-row {
    grid-template-columns: 26px 32px minmax(0, 1fr) 16px;
    gap: 5px;
  }

  .route-endpoint-picker-actions,
  .run-start-picker-tools > div:last-child {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-style-carousel {
    scroll-behavior: auto;
  }
}

.run-primary-dock .primary-button[aria-busy="true"] {
  cursor: progress;
  filter: saturate(0.78);
}

.phone-shell.run-mode .bottom-sheet.route-compare-sheet {
  max-height: min(47vh, 390px);
  padding-bottom: 0;
}

.phone-shell.run-mode .bottom-sheet.route-compare-sheet .run-mode-panel,
.phone-shell.run-mode .bottom-sheet.route-compare-sheet [data-run-start-picker-tools],
.phone-shell.run-mode .bottom-sheet.route-compare-sheet [data-run-search-control],
.phone-shell.run-mode .bottom-sheet.route-compare-sheet [data-route-result-actions] {
  display: none !important;
}

.phone-shell.run-mode .bottom-sheet.route-compare-sheet .run-primary-dock {
  margin-top: 8px;
}

@media (max-width: 370px) {
  .run-flow-choice button {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    min-height: 58px;
    padding-inline: 8px;
  }

  .run-flow-choice button svg {
    width: 23px;
    height: 23px;
  }

  .run-plan-flow .chip-row button,
  .run-shape-row button {
    font-size: 9px;
  }

  .run-start-picker-tools > div:last-child {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-flow-choice button,
  .run-shape-row button,
  .run-build-custom-route,
  .run-primary-dock button {
    transition: none;
  }
}

.destination-suggestions .destination-search-result {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 60px !important;
  padding: 7px 8px !important;
  border: 1px solid transparent;
  border-bottom-color: rgba(244, 234, 215, 0.09);
  border-radius: 10px;
  background: transparent;
}

.destination-search-state-wrap {
  display: grid;
  grid-column: 1 / -1;
  align-content: start;
  gap: 4px;
  min-height: 64px;
}

.destination-search-state-wrap .destination-search-state {
  padding: 10px 2px 5px;
  border: 0;
  background: transparent;
}

.destination-suggestions .destination-search-result:hover,
.destination-suggestions .destination-search-result:focus-visible,
.destination-suggestions .destination-search-result.selected {
  border-color: rgba(231, 178, 77, 0.26);
  background: rgba(231, 178, 77, 0.1);
  box-shadow: none;
}

.destination-search-result-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(231, 178, 77, 0.1);
}

.destination-search-result-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.destination-search-result-copy {
  display: grid;
  align-content: center;
  gap: 1px;
}

.destination-search-result-copy strong {
  font-size: 0.79rem;
  line-height: 1.22;
}

.destination-search-result-copy small {
  font-size: 0.66rem;
  line-height: 1.22;
}

.destination-search-result-copy small:last-child {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.route-helper[hidden] {
  display: none !important;
}

.destination-map-fallback {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin-top: 1px;
}

.destination-map-fallback[hidden] {
  display: none !important;
}

.destination-map-fallback button {
  min-height: 36px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--gold-soft);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(231, 178, 77, 0.35);
  text-underline-offset: 3px;
}

.destination-map-fallback button:hover,
.destination-map-fallback button:focus-visible {
  color: var(--gold);
  text-decoration-color: currentColor;
}

.destination-suggestions .destination-search-retry {
  width: max-content;
  min-height: 34px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(244, 234, 215, 0.28);
  text-underline-offset: 3px;
}

.destination-suggestions .destination-search-retry:hover,
.destination-suggestions .destination-search-retry:focus-visible {
  color: var(--gold-soft);
  text-decoration-color: currentColor;
}

/* Luma Soft UI foundation: warm dusk, calm guidance, community confidence. */
.luma-sheet,
.bottom-sheet {
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-sheet);
  background: color-mix(in srgb, var(--luma-surface-sheet) 97%, transparent);
  box-shadow: var(--luma-elevation-sheet);
}

.bottom-sheet h2,
.navigation-instruction-copy > strong,
[data-map-place-name],
[data-destination-selection-name] {
  font-family: var(--luma-font-display);
  font-kerning: normal;
  letter-spacing: -0.012em;
}

.bottom-sheet h2 {
  color: var(--luma-text-primary);
  font-size: var(--luma-type-sheet-size);
  line-height: 1.14;
}

.luma-display-heading {
  font-family: var(--luma-font-display);
  font-size: var(--luma-type-display-size);
  line-height: 1.08;
}

.luma-sheet-heading,
.bottom-sheet h2 {
  font-family: var(--luma-font-display);
  font-size: var(--luma-type-sheet-size);
}

.luma-section-heading,
.bottom-sheet h3 {
  font-family: var(--luma-font-body);
  font-size: var(--luma-type-section-size);
  line-height: 1.3;
}

.luma-card-title,
.destination-search-result-copy strong {
  font-size: var(--luma-type-card-size);
  line-height: 1.25;
}

.luma-body { font-size: var(--luma-type-body-size); }
.luma-secondary-body { font-size: var(--luma-type-secondary-size); }
.luma-label { font-size: var(--luma-type-label-size); }
.luma-metadata { font-size: var(--luma-type-metadata-size); }
.luma-button-label { font-size: var(--luma-type-button-size); }
.luma-status-badge { font-size: var(--luma-type-status-size); }

.bottom-sheet :is(p, small, dd, dt, input, textarea, button),
.destination-search-result-copy,
.navigation-instruction-meta,
.journey-status-card {
  font-family: var(--luma-font-body);
}

.primary-button,
.secondary-button,
.text-button,
.icon-button,
.luma-sticky-action {
  min-height: var(--tap-target);
  border-radius: var(--luma-radius-button);
  transition:
    transform var(--motion-fast) var(--luma-ease),
    background-color var(--motion-fast) var(--luma-ease),
    color var(--motion-fast) var(--luma-ease),
    opacity var(--motion-fast) var(--luma-ease);
}

.primary-button {
  border: 1px solid rgba(255, 232, 176, 0.2);
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
  box-shadow: 0 8px 20px rgba(92, 58, 10, 0.2);
}

.secondary-button {
  border: 1px solid transparent;
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
  box-shadow: none;
}

.text-button {
  background: transparent;
  color: var(--luma-text-secondary);
  box-shadow: none;
}

:is(.primary-button, .secondary-button, .text-button, .icon-button):active {
  transform: scale(0.975);
}

:is(.secondary-button, .text-button, .icon-button):active {
  background: var(--luma-surface-pressed);
}

.text-button:is(:hover, :focus-visible) {
  color: var(--luma-text-link);
}

:is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--luma-focus-ring);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--luma-focus-ring) 19%, transparent);
}

.luma-thumbnail,
.destination-search-result-icon,
.map-place-category-art,
.campus-detail-art {
  border-radius: var(--luma-radius-art);
}

.luma-state {
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  box-shadow: none;
}

.luma-state--info {
  box-shadow: inset 3px 0 0 var(--luma-info);
}

.luma-state--error,
.luma-state--offline {
  color: var(--luma-text-error);
  box-shadow: inset 3px 0 0 var(--luma-error);
}

.luma-state--limited {
  color: var(--luma-limited);
  box-shadow: inset 3px 0 0 var(--luma-limited);
}

.luma-state--unavailable {
  color: var(--luma-unavailable);
  box-shadow: inset 3px 0 0 var(--luma-unavailable);
}

.luma-state--empty,
.luma-state--idle,
.luma-state--typing {
  box-shadow: inset 3px 0 0 var(--luma-text-muted);
}

.luma-state--loading,
.luma-state--retrieving {
  box-shadow: inset 3px 0 0 var(--luma-info);
}

/* Main map shell */
.destination-pill,
.top-hud .icon-button,
.map-controls,
.floating-nav,
.report-fab,
.emergency-map-button {
  border-color: var(--luma-divider);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(16px);
}

.destination-pill {
  min-height: 48px;
  padding: 2px 14px;
  border-radius: 18px;
  color: var(--luma-text-secondary);
}

.destination-pill input {
  min-height: var(--tap-target);
}

.destination-pill > svg {
  color: var(--luma-accent-strong);
}

.top-hud .icon-button,
.map-controls button {
  width: 44px;
  height: 44px;
  color: var(--luma-text-secondary);
}

.top-hud .icon-button:hover,
.map-controls button:hover,
.map-controls button[aria-pressed="true"] {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
}

.floating-nav {
  border-radius: 20px;
  background: rgba(28, 25, 22, 0.93);
}

.floating-nav button {
  color: var(--luma-text-muted);
}

.floating-nav button[aria-selected="true"] {
  color: var(--luma-accent-strong);
}

.report-fab {
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
}

.emergency-map-button {
  min-height: var(--tap-target);
  color: var(--luma-text-primary);
}

.mapboxgl-ctrl-logo {
  width: 88px;
  height: 23px;
  min-height: 23px;
  background-position: 0 0;
  background-size: 88px 23px;
}

/* Destination search and common result rows */
.bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) {
  padding-inline: var(--space-4);
}

.luma-search-field,
.destination-search-field {
  min-height: 52px;
  border-color: transparent;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-elevated);
  box-shadow: inset 0 0 0 1px var(--luma-divider);
}

.destination-search-field:focus-within {
  border-color: transparent;
  background: color-mix(in srgb, var(--luma-surface-elevated) 88%, var(--luma-surface-selected) 12%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--luma-focus-ring) 62%, transparent),
    0 0 0 3px color-mix(in srgb, var(--luma-focus-ring) 12%, transparent);
}

.destination-search-results {
  max-height: none;
  overflow: visible;
}

.destination-suggestions .luma-result-row,
.destination-suggestions .destination-search-result {
  min-height: 62px !important;
  padding: 9px 8px !important;
  border: 0;
  border-bottom: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) var(--luma-ease);
}

.destination-suggestions .destination-search-result:last-child {
  border-bottom-color: transparent;
}

.destination-suggestions .destination-search-result:hover,
.destination-suggestions .destination-search-result:focus-visible,
.destination-suggestions .destination-search-result.selected {
  border-color: transparent;
  border-bottom-color: var(--luma-divider);
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-selected);
  color: var(--luma-text-primary);
}

.destination-search-result-copy strong {
  color: var(--luma-text-primary);
  font-size: 0.84rem;
  font-weight: 750;
}

.destination-search-result-copy small {
  color: var(--luma-text-secondary);
}

.destination-search-result-copy small:last-child {
  color: var(--luma-text-muted);
}

.destination-search-state-wrap {
  min-height: 70px;
  padding: var(--space-3);
}

.destination-search-state-wrap .destination-search-state {
  color: inherit;
}

/* Category artwork */
[data-destination-result-type],
[data-place-kind] {
  --luma-art: var(--luma-accent);
}

[data-destination-result-type="cafe"],
[data-place-kind="cafe"] { --luma-art: #d5a66d; }
[data-destination-result-type="food"],
[data-place-kind="food"] { --luma-art: #d8946f; }
[data-destination-result-type="bar"],
[data-place-kind="bar"] { --luma-art: #b89ac8; }
[data-destination-result-type="shop"],
[data-place-kind="shop"] { --luma-art: #b7c985; }
[data-destination-result-type="transport"],
[data-destination-result-type="station"],
[data-place-kind="transport"],
[data-place-kind="station"] { --luma-art: var(--luma-info); }
[data-destination-result-type="pharmacy"],
[data-place-kind="pharmacy"] { --luma-art: #83bda0; }
[data-destination-result-type="garda"],
[data-place-kind="garda"] { --luma-art: #91a9d1; }
[data-destination-result-type="aed"],
[data-place-kind="aed"] { --luma-art: #d88982; }
[data-destination-result-type="medical"],
[data-place-kind="medical"] { --luma-art: #cc8b8a; }
[data-destination-result-type="campus-support"],
[data-destination-result-type="public-building"],
[data-place-kind="campus-support"],
[data-place-kind="public-building"] { --luma-art: #a5c69b; }
[data-destination-result-type="accommodation"],
[data-place-kind="accommodation"] { --luma-art: #b8a5cf; }
[data-destination-result-type="address"],
[data-place-kind="address"] { --luma-art: #c6b994; }

.destination-search-result-icon,
.destination-selection-icon,
.map-place-category-art {
  border: 1px solid color-mix(in srgb, var(--luma-art) 28%, transparent);
  background: color-mix(in srgb, var(--luma-art) 14%, var(--luma-surface-sheet));
  color: var(--luma-art);
}

.destination-search-result-icon svg,
.destination-selection-icon svg,
.map-place-category-art svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Selected destination and place details */
.luma-place-card,
.destination-selection-card {
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.destination-selection-card {
  grid-template-columns: 40px minmax(0, 1fr) var(--tap-target);
}

.destination-selection-card > button,
.destination-search-clear {
  width: var(--tap-target);
  height: var(--tap-target);
  min-height: var(--tap-target);
}

.destination-selection-icon {
  width: 40px;
  height: 40px;
  border-width: 1px;
  border-radius: var(--luma-radius-art);
  transform: none;
  box-shadow: none;
}

.destination-selection-icon i {
  display: none;
}

.bottom-sheet.compact.map-place-sheet {
  border-color: var(--luma-divider);
  background: var(--luma-surface-sheet);
  box-shadow: var(--luma-elevation-sheet);
}

.map-place-photo {
  min-height: 112px;
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
}

.map-place-photo img {
  height: 128px;
}

.map-place-photo-placeholder.map-place-category-placeholder {
  min-height: 112px;
  background: color-mix(in srgb, var(--luma-art, var(--luma-accent)) 8%, var(--luma-surface-elevated));
}

.map-place-category-art {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-2);
  place-items: center;
}

.map-place-meta {
  gap: var(--space-2);
}

.map-place-meta span {
  padding: 6px 9px;
  border: 0;
  border-radius: var(--luma-radius-chip);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
}

.map-place-meta span:first-child {
  border: 0;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
}

.map-place-details {
  gap: 0;
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
}

.map-place-details > div {
  border-bottom: 1px solid var(--luma-divider);
  background: transparent;
}

.map-place-details > div:last-child {
  border-bottom: 0;
}

.map-place-actions {
  gap: var(--space-2);
}

/* Route choices */
.phone-shell:not(.run-mode) .luma-route-card,
.phone-shell:not(.run-mode) .route-options article {
  min-height: 106px;
  border: 1px solid transparent;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-interactive);
  box-shadow: none;
  transition:
    transform var(--motion-fast) var(--luma-ease),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

.phone-shell:not(.run-mode) .route-options article:active {
  transform: scale(0.985);
}

.phone-shell:not(.run-mode) .route-options article.active {
  border-color: color-mix(in srgb, var(--luma-accent) 46%, transparent);
  background: var(--luma-surface-selected);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.phone-shell:not(.run-mode) .route-options article[data-route-selection-state="selected"]::after {
  width: 18px;
  height: 18px;
  border: 0;
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
}

.phone-shell:not(.run-mode) .route-options p {
  color: var(--luma-text-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.phone-shell:not(.run-mode) .route-options article.active p {
  color: var(--luma-accent-strong);
}

.route-options.walk-comparison .route-facts {
  color: var(--luma-text-primary);
  font-family: var(--luma-font-display);
  font-size: 1.08rem;
}

.route-options.walk-comparison [data-route-lighting] {
  color: var(--luma-text-secondary);
  min-height: 2.3em;
}

.route-results-back {
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
}

.route-compare-sheet .journey-actions {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--luma-surface-sheet) 98%, transparent) 28%);
}

/* Active navigation hierarchy */
.luma-temporary-overlay,
.navigation-instruction-banner {
  min-height: 76px;
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-card);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-overlay);
  backdrop-filter: blur(16px);
}

.navigation-maneuver-icon {
  border: 0;
  border-radius: var(--luma-radius-art);
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
}

.navigation-instruction-copy > strong {
  color: var(--luma-text-primary);
  font-size: clamp(1rem, 4vw, 1.15rem);
}

.navigation-instruction-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px var(--space-2);
  color: var(--luma-accent-strong);
}

.navigation-instruction-meta span + span::before {
  display: none;
}

.navigation-instruction-meta span:last-child {
  color: var(--luma-text-secondary);
}

.luma-information-row,
.journey-status-card {
  border-color: var(--luma-divider);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised);
  backdrop-filter: blur(16px);
}

.journey-status-card article {
  border-radius: var(--luma-radius-row);
  background: transparent;
}

.journey-status-card article + article {
  border-left: 1px solid var(--luma-divider);
}

.journey-status-card article:first-child {
  background: var(--luma-surface-selected);
}

.navigation-guidance-controls button,
.navigation-status-actions button {
  min-height: var(--tap-target);
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
}

.navigation-guidance-controls button[aria-pressed="true"],
.navigation-status-actions button[data-navigation-recenter],
.navigation-status-actions button[data-navigation-retry] {
  border: 0;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
}

.journey-stop-button {
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-button);
  background: var(--luma-color-map-overlay);
  color: var(--luma-error);
  box-shadow: var(--luma-elevation-raised);
}

/* Lighting contribution */
.lighting-observation-sheet {
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

.lighting-quick-stars {
  grid-template-columns: repeat(5, var(--tap-target));
  gap: var(--space-2);
}

.stars.lighting-quick-stars button {
  --star-size: var(--tap-target);
  border-radius: var(--luma-radius-row);
  transition:
    transform var(--motion-fast) var(--luma-ease),
    background-color var(--motion-fast) ease;
}

.stars.lighting-quick-stars button[aria-checked="true"] {
  background: var(--luma-surface-selected);
}

.lighting-supporting-issues {
  padding-top: var(--space-2);
  border-top: 1px solid var(--luma-divider);
}

.lighting-supporting-issues h3 {
  color: var(--luma-text-secondary);
  font-size: 0.82rem;
}

.lighting-issue-grid button {
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  box-shadow: none;
}

.lighting-issue-grid button img {
  border-radius: var(--luma-radius-art);
}

.lighting-issue-grid button.selected {
  border-color: color-mix(in srgb, var(--luma-accent) 40%, transparent);
  background: var(--luma-surface-selected);
  box-shadow: inset 3px 0 0 var(--luma-accent);
  color: var(--luma-text-primary);
}

.lighting-extra-toggle {
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
}

.luma-sticky-action,
.lighting-observation-sheet > .primary-button {
  position: sticky;
  z-index: 4;
  bottom: 0;
  width: 100%;
  margin-top: var(--space-2);
}

/* Shared loading, empty, error and success feedback. */
.route-card-loading,
.destination-search-state-wrap.luma-state--loading,
.destination-search-state-wrap.luma-state--retrieving {
  position: relative;
  overflow: hidden;
}

.route-card-loading::after,
.destination-search-state-wrap.luma-state--loading::after,
.destination-search-state-wrap.luma-state--retrieving::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 248, 235, 0.08) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: lumaSoftSkeleton 1400ms ease-in-out infinite;
  pointer-events: none;
}

.app-status-banner {
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-raised), inset 3px 0 0 var(--luma-info);
}

.app-status-banner strong {
  color: var(--luma-text-primary);
}

.toast {
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-row);
  background: var(--luma-color-map-overlay);
  box-shadow: var(--luma-elevation-overlay);
}

@keyframes lumaSoftSkeleton {
  to { transform: translateX(100%); }
}

@media (max-width: 370px) {
  .bottom-sheet[data-sheet="journey"]:not(.route-compare-sheet) {
    padding-inline: var(--space-3);
  }

  .lighting-quick-stars {
    grid-template-columns: repeat(5, 44px);
    gap: 6px;
  }

  .lighting-issue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .luma-result-row,
  .luma-route-card,
  .primary-button,
  .secondary-button,
  .icon-button,
  .lighting-quick-stars button {
    transition: none !important;
  }

  .route-card-loading::after,
  .destination-search-state-wrap::after {
    animation: none !important;
  }
}

/* Luma Soft UI continuation: remaining user-facing surfaces. */
.bottom-sheet:is(
  [data-sheet="campus"],
  [data-sheet="reports-hub"],
  [data-sheet="reports"],
  [data-sheet="safe-zones"],
  [data-sheet="profile"],
  [data-sheet="more"],
  [data-sheet="emergency-confirm"],
  [data-sheet="emergency-active"]
) {
  padding-inline: var(--space-4);
}

.bottom-sheet:is(
  [data-sheet="campus"],
  [data-sheet="reports-hub"],
  [data-sheet="safe-zones"],
  [data-sheet="profile"],
  [data-sheet="more"]
) > .eyebrow {
  color: var(--luma-accent-strong);
  letter-spacing: 0.055em;
}

.bottom-sheet:is(
  [data-sheet="campus"],
  [data-sheet="reports-hub"],
  [data-sheet="safe-zones"],
  [data-sheet="profile"],
  [data-sheet="more"]
) > h2 {
  margin-top: var(--space-1);
}

.report-draft-location button,
.settings-panel .map-appearance-options button,
.official-report-card button {
  min-height: var(--tap-target);
}

/* Campus selector, actions, place results, and progressive information. */
.campus-picker-card {
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  border-radius: var(--luma-radius-card);
  background: transparent;
}

.campus-picker-button {
  min-height: 58px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-elevated);
  box-shadow: inset 0 0 0 1px var(--luma-divider);
}

.campus-picker-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--luma-surface-elevated) 88%, var(--luma-surface-selected) 12%);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.campus-choice-popover {
  gap: 0;
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: var(--luma-elevation-overlay);
}

.campus-choice-popover button {
  border: 0;
  border-bottom: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
}

.campus-choice-popover button:last-child {
  border-bottom: 0;
}

.campus-choice-popover button[aria-selected="true"] {
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-selected);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.campus-action-row {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.campus-action-row .primary-button {
  grid-column: auto;
}

.campus-action-row button {
  min-height: 50px;
  border-radius: var(--luma-radius-button);
}

.campus-safety-card {
  margin-top: var(--space-1);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 var(--luma-warning);
}

.campus-support-actions :is(a, button),
.campus-spot-actions :is(a, button) {
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
}

.campus-support-actions :is(a, button):first-child,
.campus-spot-actions :is(a, button):first-child {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
}

.campus-explore-grid {
  gap: var(--space-2);
  margin-top: var(--space-2);
  scroll-snap-type: x proximity;
}

.campus-explore-grid button,
.report-filter-bar button {
  min-height: var(--tap-target);
  border-color: transparent;
  border-radius: var(--luma-radius-chip);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  scroll-snap-align: start;
}

.campus-explore-grid button:is(.selected, [aria-pressed="true"]),
.report-filter-bar button.active {
  border-color: transparent;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--luma-accent) 32%, transparent);
}

.compact-list article.campus-spot-card,
.compact-list article.safe-list-card,
.compact-list article.reports-hub-card {
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-interactive);
  box-shadow: none;
}

.compact-list article.campus-spot-card {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 80px;
  padding: var(--space-2);
}

.campus-spot-card::after {
  display: none;
}

.campus-spot-photo,
.safe-thumb,
.report-category-visual {
  border-radius: var(--luma-radius-art);
  box-shadow: none;
}

.campus-report-compact {
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
}

.campus-more-info {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
}

.campus-more-info summary {
  min-height: var(--tap-target);
  color: var(--luma-text-secondary);
}

.campus-more-info[open] summary {
  color: var(--luma-accent-strong);
}

.campus-route-grid button,
.campus-more-info .insight-grid article {
  border-color: transparent;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  box-shadow: none;
}

/* Reports: compact summary, filters, rows, and shared loading states. */
.reports-hub-actions {
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  gap: var(--space-2);
}

.reports-hub-actions .secondary-button {
  border: 0;
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
}

.reports-hub-metrics article {
  border: 0;
  border-radius: var(--luma-radius-chip);
  background: var(--luma-surface-interactive);
}

.reports-hub-list {
  gap: var(--space-2);
}

.compact-list article.reports-hub-card {
  min-height: 76px;
  padding: var(--space-2);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--report-colour, var(--luma-accent)) 72%, transparent);
}

.compact-list article.reports-hub-card > button,
.compact-list article.safe-list-card > button,
.report-refresh-button,
.list-toggle-button {
  min-height: var(--tap-target);
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: none;
}

.report-archive-toggle {
  color: var(--luma-text-secondary);
}

.reports-hub-list .empty-state,
.compact-list .empty-state,
.campus-empty-state,
.campus-place-state {
  min-height: 72px;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  box-shadow: inset 3px 0 0 var(--luma-text-muted);
}

.reports-hub-list .empty-state[role="status"],
.campus-place-skeleton,
.campus-place-state[data-state="loading"] {
  box-shadow: inset 3px 0 0 var(--luma-info);
}

.report-detail-sheet,
.bottom-sheet[data-sheet="reports"] {
  --report-detail-surface: var(--luma-surface-elevated);
}

.bottom-sheet[data-sheet="reports"] :is(.area-action-card, .area-comments-card),
.report-detail-sheet :is(.report-detail-main, .report-photo-block, .report-detail-more) {
  border-color: transparent;
  border-radius: var(--luma-radius-card);
  background: var(--report-detail-surface);
  box-shadow: none;
}

/* Nearby Help shares the place-result hierarchy and keeps status factual. */
.safe-live-status {
  border: 0;
  border-radius: var(--luma-radius-chip);
  background: color-mix(in srgb, var(--luma-success) 13%, transparent);
  color: var(--luma-success);
}

.safe-distance-context {
  color: var(--luma-text-secondary);
}

.safe-locations-refresh {
  margin-top: var(--space-2);
}

.compact-list article.safe-list-card {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  min-height: 78px;
  padding: var(--space-2);
}

.safe-list-card::after {
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--luma-radius-card) 0 0 var(--luma-radius-card);
  background: var(--luma-text-muted);
  box-shadow: none !important;
}

.safe-list-card[data-safe-group="official"]::after {
  background: var(--luma-info);
}

.safe-list-card[data-safe-group="staffed"]::after,
.safe-list-card[data-safe-group="open"]::after {
  background: var(--luma-success);
}

.safe-list-card[data-safe-group="transport"]::after {
  background: var(--luma-warning);
}

.safe-list-card[data-safe-group="public"]::after {
  background: var(--luma-text-muted);
}

.safe-list-card > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.safe-list-card > div > :is(strong, span, small) {
  margin: 0;
}

/* Run Mode keeps intent progressive and adopts the shared roles. */
.phone-shell.run-mode .bottom-sheet[data-sheet="journey"] > h2 {
  color: var(--luma-text-primary);
  font-family: var(--luma-font-display);
}

.run-flow-choice button,
.run-shape-row button,
.run-build-custom-route,
.run-plan-flow .chip-row button,
.run-start-row,
.run-start-picker-tools,
.run-route-strip,
.run-route-extra {
  border-color: transparent;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
  box-shadow: none;
}

.run-flow-choice button strong,
.run-start-row strong,
.run-start-picker-tools strong,
.run-route-strip strong {
  color: var(--luma-text-primary);
}

.run-flow-choice button:is(.active, [aria-pressed="true"]),
.run-shape-row button:is(.active, [aria-pressed="true"]),
.run-build-custom-route:is(.active, [aria-pressed="true"]),
.run-plan-flow .chip-row button:is(.active, [aria-pressed="true"]) {
  border-color: transparent;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.run-start-pin,
.run-start-row button,
.run-location-status button,
.run-start-picker-tools button {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
}

.run-free-flow p,
.run-setting-group > span,
.run-suggestion-empty,
.run-location-status,
.run-primary-dock p {
  color: var(--luma-text-secondary);
}

.run-primary-dock {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--luma-surface-sheet) 98%, transparent) 28%);
}

.run-primary-dock .primary-button {
  border-radius: var(--luma-radius-button);
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
  box-shadow: 0 8px 20px rgba(92, 58, 10, 0.2);
}

/* Profile and Help use section rows with one disclosed surface. */
.mission2-updates-preview,
.mission2-updates-bundle,
.mission2-updates-digest,
.mission2-updates-education,
.mission2-updates-preferences {
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: none;
}

.mission2-updates-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  box-shadow: inset 3px 0 0 var(--luma-info);
}

.mission2-updates-preview[hidden] {
  display: none;
}

.mission2-updates-preview > div,
.mission2-updates-preferences label > span {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.mission2-updates-preview p,
.mission2-updates-preview small,
.mission2-updates-heading p,
.mission2-updates-preferences p,
.mission2-updates-private-status {
  margin: 0;
  color: var(--luma-text-secondary);
}

.mission2-updates-preview .secondary-button {
  flex: 0 0 auto;
  min-height: var(--tap-target);
}

.mission2-updates-sheet {
  gap: var(--space-3);
}

.mission2-updates-heading,
.mission2-updates-education,
.mission2-updates-preferences,
.mission2-updates-bundle,
.mission2-updates-digest {
  display: grid;
  gap: var(--space-2);
}

.mission2-updates-education[hidden],
.mission2-updates-bundle[hidden],
.mission2-updates-digest[hidden] {
  display: none;
}

.mission2-updates-education,
.mission2-updates-preferences,
.mission2-updates-bundle,
.mission2-updates-digest {
  padding: var(--space-3);
}

.mission2-updates-status {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.mission2-updates-education > div,
.mission2-updates-bundle > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mission2-updates-preferences label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--luma-divider);
}

.mission2-updates-preferences label:last-of-type {
  border-bottom: 0;
}

.mission2-updates-preferences input {
  width: 24px;
  height: 24px;
  accent-color: var(--luma-accent);
}

.mission2-updates-bundle[data-privacy="private"] {
  box-shadow: inset 3px 0 0 var(--luma-info);
}

.mission2-updates-bundle ul,
.mission2-updates-digest ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.1rem;
  color: var(--luma-text-secondary);
}

@media (max-width: 390px) {
  .mission2-updates-preview {
    align-items: flex-start;
  }
}

.profile-mark {
  border-radius: var(--luma-radius-art);
  background: var(--luma-accent);
  box-shadow: none;
}

.profile-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  border-block: 1px solid var(--luma-divider);
}

.profile-stats article {
  min-height: 54px;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-right: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
}

.profile-stats article:last-child {
  border-right: 0;
}

.profile-stats strong {
  margin-bottom: var(--space-1);
  color: var(--luma-text-primary);
  font-size: 1rem;
}

.profile-stats span {
  color: var(--luma-text-muted);
  font-size: 0.62rem;
}

.compact-profile-status {
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 var(--luma-info);
}

.settings-panel {
  gap: 0;
}

.settings-panel > h3 {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--luma-text-secondary);
}

.settings-panel > button[data-profile-detail] {
  position: relative;
  min-height: 52px;
  padding: 0 38px 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
  color: var(--luma-text-primary);
}

.settings-panel > button[data-profile-detail]::after {
  content: "›";
  position: absolute;
  right: var(--space-3);
  color: var(--luma-text-muted);
  font-size: 1.15rem;
  transition: transform var(--motion-fast) var(--luma-ease);
}

.settings-panel > button[data-profile-detail].active {
  border-color: var(--luma-divider);
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.settings-panel > button[data-profile-detail].active::after {
  transform: rotate(90deg);
  color: var(--luma-accent-strong);
}

.profile-detail-card {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: none;
}

.luma-help-list {
  gap: 0;
}

.luma-help-list details {
  border: 0;
  border-bottom: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
}

.luma-help-list summary {
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-1);
}

.luma-help-list details p {
  padding: 0 var(--space-1) var(--space-3);
  color: var(--luma-text-secondary);
}

.help-guidance-actions {
  gap: var(--space-2);
}

.settings-panel .help-guidance-actions button {
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
}

/* Onboarding reuses the same sheet, artwork, shape, motion, and action roles. */
.luma-onboarding {
  background: var(--luma-scrim);
  backdrop-filter: blur(14px);
  transition: opacity var(--motion-normal) var(--luma-ease);
}

.luma-onboarding-card {
  padding: var(--space-4);
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-sheet);
  background: var(--luma-surface-sheet);
  box-shadow: var(--luma-elevation-overlay);
}

.luma-onboarding-mark {
  border: 0;
  border-radius: var(--luma-radius-art);
  background: var(--luma-accent);
  box-shadow: none;
}

.luma-onboarding-visual {
  height: 162px;
  border: 0;
  border-radius: var(--luma-radius-card);
  background-color: var(--luma-surface-elevated);
  box-shadow: inset 0 0 0 1px var(--luma-divider);
}

.route-visual .onboarding-route-line {
  box-shadow: 0 0 0 3px var(--luma-color-app), 0 0 12px color-mix(in srgb, var(--luma-accent) 22%, transparent);
}

.contribution-visual span {
  border: 0;
  border-radius: var(--luma-radius-art);
  background: var(--luma-surface-selected);
  box-shadow: none;
}

.contribution-visual .contribution-light {
  background: color-mix(in srgb, var(--luma-error) 13%, transparent);
  color: color-mix(in srgb, var(--luma-error) 74%, white);
}

.luma-onboarding-stage h1:focus {
  outline: 0;
  box-shadow: none;
}

.luma-onboarding-dots span.active {
  border-color: var(--luma-accent);
  background: var(--luma-accent);
}

/* Emergency remains calm, explicit, and visually distinct from ordinary sheets. */
.emergency-sheet,
.emergency-active-sheet {
  border-color: var(--luma-divider);
  background: var(--luma-surface-sheet);
  box-shadow: var(--luma-elevation-sheet), inset 0 3px 0 color-mix(in srgb, var(--luma-error) 72%, transparent);
}

.emergency-sheet > .eyebrow,
.emergency-active-sheet > .eyebrow {
  color: color-mix(in srgb, var(--luma-error) 70%, var(--luma-text-primary));
}

.emergency-contact-preview,
.emergency-number-card,
.emergency-service-picker,
.emergency-location-card,
.emergency-route-card,
.emergency-contact-list article {
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-interactive);
  box-shadow: none;
}

.emergency-service-picker button {
  border: 0;
  border-radius: var(--luma-radius-row);
  background: color-mix(in srgb, var(--luma-color-app) 55%, transparent);
  box-shadow: none;
}

.emergency-service-picker button.selected {
  border: 0;
  background: color-mix(in srgb, var(--luma-error) 13%, var(--luma-surface-interactive));
  color: var(--luma-text-primary);
  box-shadow: inset 3px 0 0 var(--luma-error);
  transform: none;
}

.emergency-hold-button {
  border-color: color-mix(in srgb, var(--luma-error) 36%, transparent);
  border-radius: var(--luma-radius-button);
  background: color-mix(in srgb, var(--luma-error) 12%, var(--luma-surface-interactive));
  box-shadow: none;
}

.emergency-note {
  padding-left: var(--space-3);
  border-left: 3px solid var(--luma-error);
  color: var(--luma-text-secondary);
}

/* More is a compact list, not a second dashboard. */
.more-action-list {
  gap: 0;
  margin-top: var(--space-3);
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-interactive);
  overflow: hidden;
}

.more-action-list > button {
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
}

.more-action-list > button:last-child {
  border-bottom: 0;
}

.more-action-list > button:hover,
.more-action-list > button:focus-visible {
  border-color: var(--luma-divider);
  background: var(--luma-surface-selected);
}

.more-action-list svg {
  color: var(--luma-accent-strong);
  stroke: currentColor;
}

@media (max-width: 370px) {
  .bottom-sheet:is(
    [data-sheet="campus"],
    [data-sheet="reports-hub"],
    [data-sheet="reports"],
    [data-sheet="safe-zones"],
    [data-sheet="profile"],
    [data-sheet="more"],
    [data-sheet="emergency-confirm"],
    [data-sheet="emergency-active"]
  ) {
    padding-inline: var(--space-3);
  }

  .campus-action-row {
    grid-template-columns: 1fr;
  }

  .profile-stats span {
    font-size: 0.56rem;
  }

  .compact-list article.campus-spot-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .campus-spot-card .campus-spot-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .campus-picker-button,
  .campus-choice-popover,
  .campus-explore-grid button,
  .report-filter-bar button,
  .settings-panel > button[data-profile-detail]::after,
  .run-custom-mode-row button,
  .run-builder-head button,
  .run-custom-edit-actions button,
  .verification-actions button,
  .pilot-contributor-actions button,
  .pilot-orientation-diagnostics > button,
  .luma-onboarding,
  .luma-onboarding-card,
  .more-action-list > button {
    transition: none !important;
    animation: none !important;
  }

  .verification-actions button.is-pending::after {
    animation: none !important;
  }
}

/* Mission 1, iPhone Batch C: premium first-run artwork and truthful route evidence. */
.luma-onboarding-card {
  overflow-x: hidden;
}

.luma-onboarding-stage {
  min-height: 354px;
  padding-top: var(--space-4);
}

.luma-onboarding-visual {
  height: 176px;
  background: var(--luma-surface-elevated);
}

.route-visual .onboarding-map-road,
.route-visual .onboarding-route-casing,
.route-visual .onboarding-route-line,
.lighting-visual .onboarding-lighting-casing,
.lighting-visual .onboarding-lighting-route,
.contribution-visual .onboarding-community-route {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.route-visual .onboarding-map-road {
  height: 4px;
  background: color-mix(in srgb, var(--luma-text-secondary) 12%, transparent);
}

.route-visual .road-one {
  top: 45px;
  right: -18px;
  left: 32px;
  transform: rotate(-12deg);
}

.route-visual .road-two {
  top: 102px;
  right: 16px;
  left: -20px;
  transform: rotate(18deg);
}

.route-visual .road-three {
  top: 84px;
  right: 62px;
  left: 58px;
  transform: rotate(78deg);
}

.route-visual .onboarding-route-casing,
.route-visual .onboarding-route-line {
  top: 91px;
  right: 42px;
  left: 39px;
  transform: rotate(-8deg);
}

.route-visual .onboarding-route-casing {
  height: 12px;
  background: #26221d;
}

.route-visual .onboarding-route-line {
  top: 94px;
  height: 6px;
  background: var(--luma-accent-strong);
  box-shadow: none;
}

.route-visual .onboarding-route-start,
.route-visual .onboarding-route-finish {
  position: absolute;
  top: 85px;
  display: block;
  width: 18px;
  height: 18px;
  border: 4px solid #26221d;
  border-radius: 50%;
  background: var(--luma-accent-strong);
}

.route-visual .onboarding-route-start {
  left: 34px;
}

.route-visual .onboarding-route-finish {
  top: 71px;
  right: 34px;
  background: var(--luma-text-primary);
}

.route-visual .onboarding-route-label {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  border-radius: var(--luma-radius-chip);
  background: color-mix(in srgb, var(--luma-color-app) 78%, transparent);
  color: var(--luma-text-primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.lighting-visual {
  display: block;
  padding: 0;
}

.lighting-visual .onboarding-lighting-casing,
.lighting-visual .onboarding-lighting-route {
  top: 62px;
}

.lighting-visual .onboarding-lighting-casing {
  right: 25px;
  left: 25px;
  height: 14px;
  background: #26221d;
}

.lighting-visual .onboarding-lighting-route {
  top: 66px;
  height: 6px;
}

.lighting-visual .brighter {
  left: 29px;
  width: calc((100% - 58px) * 0.27);
  background: #f4c45c;
}

.lighting-visual .mixed {
  left: calc(29px + (100% - 58px) * 0.27);
  width: calc((100% - 58px) * 0.25);
  border-radius: 0;
  background: #d99a42;
}

.lighting-visual .darker {
  left: calc(29px + (100% - 58px) * 0.52);
  width: calc((100% - 58px) * 0.22);
  border-radius: 0;
  background: #bd6858;
}

.lighting-visual .unmapped {
  right: 29px;
  width: calc((100% - 58px) * 0.26);
  border-radius: 0 999px 999px 0;
  background: #77736e;
}

.lighting-visual .onboarding-lighting-label {
  position: absolute;
  top: 94px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--luma-text-secondary);
  font-size: 0.63rem;
  font-weight: 750;
  white-space: nowrap;
}

.lighting-visual .onboarding-lighting-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.lighting-visual .label-brighter { left: 24px; }
.lighting-visual .label-mixed { left: 30%; }
.lighting-visual .label-darker { left: 51%; }
.lighting-visual .label-unmapped { right: 20px; }
.lighting-visual .label-brighter i { background: #f4c45c; }
.lighting-visual .label-mixed i { background: #d99a42; }
.lighting-visual .label-darker i { background: #bd6858; }
.lighting-visual .label-unmapped i { background: #77736e; }

.contribution-visual {
  display: block;
}

.contribution-visual .onboarding-community-route {
  top: 85px;
  right: 40px;
  left: 40px;
  width: auto;
  height: 5px;
  background: color-mix(in srgb, var(--luma-accent-strong) 48%, var(--luma-surface-interactive));
  transform: rotate(-6deg);
}

.contribution-visual .onboarding-community-node {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid #26221d;
  border-radius: 50%;
  background: var(--luma-accent-strong);
  color: #211b13;
  box-shadow: none;
}

.contribution-visual .onboarding-community-node i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #2a2722;
  color: var(--luma-accent);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
}

.contribution-visual .node-rate {
  top: 59px;
  left: 28px;
}

.contribution-visual .node-report {
  top: 41px;
  left: calc(50% - 23px);
  background: #bd6858;
}

.contribution-visual .node-report i {
  color: #f0b2a9;
}

.contribution-visual .node-confirm {
  top: 69px;
  right: 28px;
}

.contribution-visual .onboarding-community-pulse {
  position: absolute;
  z-index: 1;
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid color-mix(in srgb, var(--luma-accent-strong) 24%, transparent);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.contribution-visual .pulse-one {
  top: 46px;
  left: 15px;
}

.contribution-visual .pulse-two {
  top: 56px;
  right: 15px;
}

/* Keep the native search field inside one uninterrupted Soft UI outline on iOS. */
.destination-search-field {
  overflow: hidden;
  background-clip: padding-box;
}

.destination-search-field::before,
.destination-search-field::after {
  content: none;
}

.route-input .destination-search-field input,
.route-input .destination-search-field input:focus,
.route-input .destination-search-field input:not(:placeholder-shown) {
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.destination-search-clear {
  border: 0;
  box-shadow: none;
}

/* One flat, bottom-anchored lamp across destination and contribution selection. */
.luma-map-point-selector__lamp {
  filter: drop-shadow(0 3px 3px rgba(10, 9, 7, 0.34));
}

.destination-map-picker[data-map-point-state="moving"] .luma-map-point-selector__lamp {
  filter: drop-shadow(0 5px 4px rgba(10, 9, 7, 0.3));
}

.destination-map-picker[data-map-point-state="confirmed"] .luma-map-point-selector {
  filter: none;
}

/* Lighting colours describe eligible evidence, never personal safety. */
.better-lit-route-legend {
  align-items: center;
  gap: 7px 11px;
  margin: 8px 0 3px;
  font-size: 0.64rem;
}

.better-lit-route-legend > strong {
  flex: 1 0 100%;
  color: var(--luma-text-primary);
  font-size: 0.68rem;
  font-weight: 800;
}

.better-lit-route-legend i {
  width: 16px;
  height: 5px;
  box-shadow: 0 0 0 2px #26221d;
}

.better-lit-route-legend i.well-lit { background: #f4c45c; }
.better-lit-route-legend i.moderate { background: #d99a42; }
.better-lit-route-legend i.lower-light { background: #bd6858; }
.better-lit-route-legend i.unknown {
  background: #77736e;
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(38, 34, 29, 0.72) 3px 5px);
}

.bottom-sheet.route-compare-sheet.sheet-expanded .better-lit-route-legend:not([hidden]) {
  display: flex !important;
}

.bottom-sheet.route-compare-sheet.sheet-expanded .better-lit-route-legend[hidden] {
  display: none !important;
}

.bottom-sheet.route-compare-sheet.sheet-expanded .route-patch-note:not([hidden]) {
  display: block !important;
}

.bottom-sheet.route-compare-sheet.sheet-expanded .route-patch-note[hidden] {
  display: none !important;
}

@media (max-width: 370px) {
  .luma-onboarding {
    padding-inline: 10px;
  }

  .luma-onboarding-card {
    padding: var(--space-3);
    border-radius: 24px;
  }

  .luma-onboarding-stage {
    min-height: 326px;
    padding-top: var(--space-3);
  }

  .luma-onboarding-visual {
    height: 148px;
  }

  .lighting-visual .onboarding-lighting-label {
    font-size: 0.57rem;
  }

  .luma-onboarding-stage .eyebrow {
    margin-top: 13px;
  }

  .luma-onboarding-stage > p:not(.eyebrow) {
    margin-top: 8px;
    line-height: 1.4;
  }

  .luma-onboarding-stage > small {
    margin-top: 8px;
    padding-block: 8px;
  }
}

.mission2-progression-profile-entry strong {
  color: var(--gold);
}

.bottom-sheet.mission2-progression-sheet {
  max-height: min(88dvh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}

.mission2-progression-heading {
  margin: 4px 0 14px;
}

.mission2-progression-heading :is(h2, p),
.mission2-progression-impact-card :is(p, strong),
.mission2-progression-level-card :is(p, strong, small),
.mission2-progression-section-heading :is(h3, span),
.mission2-progression-post-walk :is(p, strong) {
  margin: 0;
}

.mission2-progression-heading > p:last-child {
  margin-top: 5px;
  color: var(--muted);
}

.mission2-progression-impact-card,
.mission2-progression-level-card,
.mission2-progression-milestone-card,
.mission2-progression-post-walk,
.mission2-progression-how {
  border: 1px solid var(--line);
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-elevated);
  box-shadow: var(--luma-elevation-raised);
}

.mission2-progression-impact-card {
  padding: 17px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 13%, var(--luma-surface-elevated)), var(--luma-surface-elevated));
}

.mission2-progression-impact-card > span,
.mission2-progression-level-card span,
.mission2-progression-section-heading span {
  color: var(--muted);
  font-size: 0.78rem;
}

.mission2-progression-impact-card strong {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: clamp(1.8rem, 8vw, 2.65rem);
  line-height: 1;
}

.mission2-progression-impact-card p {
  margin-top: 6px;
  color: var(--muted);
}

.mission2-progression-level-card,
.mission2-progression-milestone-card {
  margin-top: 10px;
  padding: 15px;
}

.mission2-progression-level-card > div:first-child,
.mission2-progression-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mission2-progression-level-card > p {
  margin-top: 5px;
  font-weight: 760;
}

.mission2-progression-bar {
  height: 7px;
  margin: 12px 0 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--luma-surface-interactive);
}

.mission2-progression-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 260ms var(--luma-ease);
}

.mission2-progression-level-card small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.mission2-progression-level-card small + small {
  margin-top: 2px;
  color: var(--gold);
}

.mission2-progression-section-heading h3 {
  font-size: 1rem;
}

.mission2-progression-milestone-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mission2-progression-milestone-card li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0 7px;
  min-width: 0;
  padding: 9px;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
}

.mission2-progression-milestone-card li > span:first-child {
  grid-row: 1 / span 2;
  color: var(--muted);
}

.mission2-progression-milestone-card li[data-achieved="true"] > span:first-child {
  color: var(--green);
}

.mission2-progression-milestone-card li > span:nth-child(2) {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 720;
}

.mission2-progression-milestone-card li small {
  color: var(--muted);
  font-size: 0.69rem;
}

.mission2-progression-how-toggle {
  min-height: 44px;
  margin-top: 8px;
}

.mission2-progression-how {
  padding: 13px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.mission2-progression-how p {
  margin: 0;
}

.mission2-progression-how p + p {
  margin-top: 7px;
}

.mission2-progression-diagnostic {
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.mission2-progression-post-walk {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 13px;
}

.mission2-progression-post-walk[data-state="pending"] {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}

.mission2-progression-post-walk[hidden] {
  display: none;
}

@media (max-width: 374px) {
  .mission2-progression-milestone-card ul {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission2-progression-bar span {
    transition: none !important;
  }

  .luma-onboarding-visual *,
  .luma-map-point-selector__lamp,
  .luma-map-point-selector::before {
    transition: none !important;
    animation: none !important;
  }
}

/* Mission 3A.1: shared surface hierarchy and clutter reduction. */
.luma-standard-sheet,
.luma-task-sheet {
  --sheet-inline-gutter: var(--space-4);
  padding-inline: var(--sheet-inline-gutter);
  border: 1px solid var(--luma-divider);
  border-radius: var(--luma-radius-sheet) var(--luma-radius-sheet) 0 0;
  box-shadow: var(--luma-elevation-sheet);
}

.luma-standard-sheet:not(.route-compare-sheet) {
  bottom: calc(54px + env(safe-area-inset-bottom));
  max-height: min(74dvh, 690px);
  background: rgba(36, 33, 29, 0.985);
}

.luma-task-sheet {
  bottom: max(6px, env(safe-area-inset-bottom));
  max-height: min(91dvh, 790px);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--luma-surface-primary);
  box-shadow: var(--luma-elevation-overlay);
}

.luma-standard-sheet > :is(h1, h2),
.luma-task-sheet > :is(h1, h2) {
  max-width: calc(100% - 50px);
  margin-block: var(--space-1) var(--space-2);
  color: var(--luma-text-primary);
  font: 760 var(--luma-type-sheet-size)/1.16 var(--luma-font-display);
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.luma-standard-sheet > :is(h1, h2):focus,
.luma-task-sheet > :is(h1, h2):focus {
  outline: 0;
  box-shadow: none;
}

.luma-standard-sheet .sheet-handle,
.luma-task-sheet .sheet-handle {
  margin-top: -18px;
}

.luma-standard-sheet .sheet-close,
.luma-task-sheet .sheet-close {
  top: 8px;
  right: 8px;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
}

.phone-shell.task-sheet-open .sheet-backdrop.visible {
  background: rgba(12, 10, 8, 0.8);
  opacity: 1;
}

.phone-shell.task-sheet-open .map-experience > :not(.map-viewport) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.phone-shell.task-sheet-open .floating-nav {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(100%);
}

/* One restrained three-tier action hierarchy. */
.primary-button {
  border: 1px solid transparent;
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
  font-weight: 760;
  box-shadow: none;
}

.primary-button:not(:disabled):is(:hover, :focus-visible) {
  background: var(--luma-accent-hover);
}

.primary-button:not(:disabled):active {
  background: var(--luma-accent-pressed);
}

.secondary-button {
  border: 1px solid var(--luma-divider);
  background: var(--luma-surface-elevated);
  color: var(--luma-text-primary);
  font-weight: 700;
  box-shadow: none;
}

.tertiary-button,
.campus-place-tertiary,
.campus-support-details {
  border: 1px solid transparent;
  background: transparent;
  color: var(--luma-text-secondary);
  font-weight: 680;
  box-shadow: none;
}

/* Edge-safe horizontal chips. Padding keeps complete labels out of the fade. */
:is(.luma-chip-scroller, [data-luma-chip-scroller]) {
  display: flex;
  max-width: 100%;
  gap: var(--space-2);
  margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3) calc(var(--space-5) + var(--space-2));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--space-3) calc(var(--space-5) + var(--space-2));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
}

:is(.luma-chip-scroller, [data-luma-chip-scroller])::-webkit-scrollbar {
  display: none;
}

:is(.luma-chip-scroller, [data-luma-chip-scroller]) > button {
  flex: 0 0 auto;
  max-width: min(78vw, 260px);
  min-height: var(--tap-target);
  padding-inline: var(--space-3);
  border-radius: var(--luma-radius-chip);
  font-size: var(--luma-type-label-size);
  font-weight: 680;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  scroll-snap-align: start;
}

:is(.luma-chip-scroller, [data-luma-chip-scroller]) > button:is(.active, .selected, [aria-pressed="true"]) {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--luma-accent) 30%, transparent);
}

/* Reports: actions, count, filters and content now share one first-fold hierarchy. */
.reports-hub-sheet {
  scroll-padding-top: 48px;
}

.reports-hub-sheet > .sheet-copy {
  margin-block: 0 var(--space-2);
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-body-size);
  line-height: 1.45;
}

.reports-hub-actions {
  grid-template-columns: minmax(0, 1.4fr) minmax(88px, 0.6fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.reports-hub-actions button {
  min-height: 48px;
  margin: 0;
  border-radius: var(--luma-radius-button);
  font-size: var(--luma-type-button-size);
}

.reports-hub-actions .secondary-button {
  border: 1px solid var(--luma-divider);
  background: var(--luma-surface-elevated);
  color: var(--luma-text-secondary);
}

.reports-hub-heading {
  align-items: center;
  margin-top: var(--space-3);
}

.reports-hub-heading > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-2);
}

.reports-hub-heading p {
  font-size: var(--luma-type-section-size);
  font-weight: 740;
}

.reports-hub-metrics {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}

.reports-hub-metrics article {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.reports-hub-metrics strong,
.reports-hub-metrics span {
  color: var(--luma-text-muted);
  font-size: var(--luma-type-status-size);
  font-weight: 680;
}

.reports-hub-metrics strong {
  color: var(--luma-accent-strong);
}

.report-refresh-button {
  min-width: 72px;
  min-height: var(--tap-target);
  padding-inline: var(--space-2);
  border-radius: var(--luma-radius-button);
  font-size: var(--luma-type-label-size);
}

.report-filter-bar {
  margin-block: var(--space-2) var(--space-1);
  padding-bottom: var(--space-1);
}

.report-filter-bar button {
  min-height: var(--tap-target);
  border: 1px solid transparent;
  background: var(--luma-surface-interactive);
  color: var(--luma-text-secondary);
}

.report-archive-toggle {
  width: fit-content;
  margin-block: 0 var(--space-2);
  color: var(--luma-text-muted);
  font-size: var(--luma-type-label-size);
  font-weight: 620;
}

.reports-hub-list {
  margin-top: var(--space-2);
}

.reports-hub-list .empty-state {
  min-height: 68px;
  padding: var(--space-3);
}

.reports-hub-list .empty-state :is(strong, span) {
  display: block;
}

.reports-hub-list .empty-state span {
  margin-top: var(--space-1);
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  line-height: 1.4;
}

/* Focused contribution surfaces: solid, compact and free of nested scrollers. */
.luma-task-sheet[data-sheet="quick-report"] {
  max-height: min(92dvh, 800px);
}

.luma-task-sheet .report-draft-location {
  margin-block: var(--space-2) var(--space-1);
  padding: 10px;
  border: 0;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.luma-task-sheet .report-draft-location button {
  min-height: var(--tap-target);
  border: 0;
  border-radius: var(--luma-radius-button);
  background: var(--luma-surface-interactive);
  color: var(--luma-accent-strong);
}

.luma-task-sheet .issue-grid {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.luma-task-sheet .issue-grid button {
  min-height: 60px;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-interactive);
  box-shadow: none;
}

.luma-task-sheet .issue-grid button img {
  width: 34px;
  height: 34px;
}

.luma-task-sheet .issue-grid button strong {
  font-size: var(--luma-type-card-size);
  font-weight: 720;
}

.luma-task-sheet .issue-grid button small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
  font-weight: 560;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.luma-task-sheet .issue-grid button.selected {
  border-color: color-mix(in srgb, var(--luma-accent) 36%, transparent);
  background: var(--luma-surface-selected);
  box-shadow: inset 3px 0 0 var(--luma-accent);
}

.luma-task-sheet .issue-grid button.selected small {
  color: var(--luma-text-secondary);
  -webkit-line-clamp: 2;
}

.luma-task-sheet > .primary-button:last-child,
.luma-task-sheet > .luma-sticky-action {
  min-height: 50px;
  border-radius: var(--luma-radius-button);
}

.luma-task-sheet .photo-upload {
  min-height: var(--tap-target);
  border-color: var(--luma-divider);
  border-radius: var(--luma-radius-row);
  background: var(--luma-surface-grouped);
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
  font-weight: 620;
  line-height: 1.35;
}

/* Campus: one selector, one action pair, one support object, then discovery. */
.luma-standard-sheet[data-sheet="campus"] {
  max-height: min(78dvh, 720px);
}

.luma-standard-sheet[data-sheet="campus"] > .eyebrow {
  margin-bottom: 1px;
}

.luma-standard-sheet[data-sheet="campus"] > .sheet-copy {
  margin-block: var(--space-2);
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-secondary-size);
}

.campus-picker-card {
  margin-top: var(--space-2);
}

.campus-action-row {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.campus-action-row button {
  min-height: 48px;
  margin: 0;
  padding-inline: var(--space-2);
  font-size: clamp(0.7rem, 3.15vw, var(--luma-type-button-size));
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.campus-action-row .secondary-button {
  color: var(--luma-text-secondary);
}

.campus-safety-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: 10px 12px;
  border: 0;
  background: var(--luma-surface-elevated);
  box-shadow: inset 3px 0 0 var(--luma-warning);
}

.campus-safety-card > div > strong {
  font-size: var(--luma-type-card-size);
  font-weight: 720;
}

.campus-safety-card > div > b,
.campus-safety-card > div > small {
  display: inline;
  margin: 0 var(--space-2) 0 0;
  font-size: var(--luma-type-metadata-size);
  font-weight: 620;
}

.campus-support-actions {
  gap: var(--space-1);
}

.campus-support-actions :is(a, button) {
  min-width: 58px;
  min-height: var(--tap-target);
  padding-inline: var(--space-2);
  border-radius: var(--luma-radius-button);
  font-size: var(--luma-type-label-size);
  font-weight: 680;
}

.campus-support-actions .campus-support-call {
  border: 1px solid var(--luma-divider);
  background: var(--luma-surface-interactive);
  color: var(--luma-text-primary);
}

.campus-explore-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--luma-divider);
}

.campus-explore-section .sheet-section-title {
  font-size: var(--luma-type-section-size);
  font-weight: 740;
}

.campus-section-copy {
  margin-block: var(--space-1) var(--space-2);
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
  line-height: 1.35;
}

.campus-explore-grid {
  margin-top: 0;
  padding-bottom: var(--space-1);
}

/* Campus place cards keep every fact while replacing three stacked equal CTAs. */
.compact-list article.campus-spot-card {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  min-height: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--luma-radius-card);
  background: var(--luma-surface-grouped);
  box-shadow: none;
}

.campus-spot-photo {
  width: 52px;
  height: 52px;
  border-radius: var(--luma-radius-art);
  box-shadow: none;
}

.campus-spot-card > div > strong {
  display: block;
  font-size: var(--luma-type-card-size);
  font-weight: 720;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.campus-spot-card > div > span,
.campus-spot-card > div > small {
  font-size: var(--luma-type-metadata-size);
  font-weight: 600;
  line-height: 1.35;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.campus-spot-card .campus-spot-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(92px, 1.35fr) repeat(2, minmax(60px, 0.65fr));
  gap: var(--space-1);
  margin: 0;
}

.campus-spot-card .campus-spot-actions:has(> :nth-child(2):last-child) {
  grid-template-columns: minmax(110px, 1.35fr) minmax(76px, 0.65fr);
}

.compact-list article.campus-spot-card .campus-spot-actions :is(button, a) {
  min-width: 0;
  min-height: var(--tap-target);
  margin: 0;
  padding-inline: var(--space-2);
  border-radius: var(--luma-radius-button);
  font-size: var(--luma-type-label-size);
  font-weight: 680;
}

.compact-list article.campus-spot-card .campus-spot-actions .campus-place-route {
  border: 1px solid transparent;
  background: var(--luma-accent);
  color: var(--luma-text-inverse);
  font-weight: 760;
}

.compact-list article.campus-spot-card .campus-spot-actions .campus-place-tertiary {
  border: 1px solid transparent;
  background: transparent;
  color: var(--luma-text-secondary);
}

.campus-report-compact {
  border: 0;
  border-top: 1px solid var(--luma-divider);
  border-radius: 0;
  background: transparent;
}

/* A quieter, still-readable ordinary map navigation bar. */
.floating-nav {
  min-height: calc(52px + env(safe-area-inset-bottom));
  padding: 2px 8px max(3px, env(safe-area-inset-bottom));
  border: 1px solid var(--luma-divider);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #1e1b18;
  box-shadow: 0 -8px 24px rgba(11, 8, 6, 0.2);
  backdrop-filter: none;
}

.floating-nav button {
  min-height: var(--tap-target);
  gap: 2px;
  padding: 2px;
  border-radius: var(--luma-radius-row);
  color: var(--luma-text-muted);
  font-size: var(--luma-type-metadata-size);
  font-weight: 620;
}

.floating-nav svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.floating-nav button[aria-selected="true"] {
  background: var(--luma-surface-selected);
  color: var(--luma-accent-strong);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--luma-accent) 62%, transparent);
}

@media (max-width: 374px) {
  .luma-standard-sheet,
  .luma-task-sheet {
    --sheet-inline-gutter: var(--space-3);
  }

  .reports-hub-actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(78px, 0.75fr);
  }

  .campus-action-row {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  }

  .campus-action-row svg {
    display: none;
  }

  .campus-safety-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .campus-support-actions {
    justify-content: start;
  }

  .luma-task-sheet .issue-grid button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.luma-chip-scroller, [data-luma-chip-scroller]),
  :is(.luma-chip-scroller, [data-luma-chip-scroller]) > button,
  .floating-nav,
  .campus-spot-actions :is(button, a) {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Mission 3A.3 final cascade: these state rules intentionally follow the shared release shell. */
.phone-shell.routes-ready :is(
  .top-hud,
  .destination-pill,
  .floating-nav,
  .report-fab,
  .emergency-map-button,
  .map-controls,
  .share-status-card,
  .floating-card,
  .contextual-guidance-card,
  .app-status-banner
) {
  display: none !important;
}

.phone-shell:not(.run-mode) .bottom-sheet.route-compare-sheet > :is(
  .route-endpoint-planner,
  .route-endpoint-picker,
  .run-mode-panel,
  .destination-selection-card
) {
  display: none !important;
}

.phone-shell.turn-by-turn-active .report-fab {
  right: max(14px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(154px, calc(env(safe-area-inset-bottom) + 152px));
  display: grid !important;
  width: var(--tap-target);
  height: var(--tap-target);
  box-shadow: var(--luma-elevation-raised);
}

.phone-shell.turn-by-turn-active .emergency-map-button {
  left: max(14px, calc(env(safe-area-inset-left) + 14px));
  bottom: max(154px, calc(env(safe-area-inset-bottom) + 152px));
  display: inline-flex !important;
  min-height: var(--tap-target);
  padding-inline: 12px;
}

.phone-shell.journey-active .journey-status-card.active-navigation-walk {
  left: max(10px, calc(env(safe-area-inset-left) + 10px));
  right: max(10px, calc(env(safe-area-inset-right) + 10px));
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.journey-status-card.active-navigation-walk .navigation-drawer-summary {
  display: grid;
}

.journey-status-card.active-navigation-walk button.navigation-drawer-summary > .navigation-maneuver-icon {
  display: grid;
  margin: 0;
  color: var(--gold-soft);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.journey-status-card.active-navigation-walk button.navigation-drawer-summary > .navigation-instruction-copy {
  margin: 0;
  overflow: visible;
  color: var(--luma-text-primary);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: normal;
  white-space: normal;
}

.journey-status-card.active-navigation-walk button.navigation-drawer-summary > .navigation-drawer-facts {
  display: grid;
  margin: 0;
  overflow: visible;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: normal;
  white-space: normal;
}

.journey-status-card.active-navigation-walk button.navigation-drawer-summary > .navigation-drawer-chevron {
  margin: 1px 0 0;
  color: var(--luma-text-muted);
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}

.journey-status-card.active-navigation-walk :is(.journey-metrics, .navigation-hud-actions) {
  display: none !important;
}

.phone-shell.journey-detail-open .journey-status-card.active-navigation-walk {
  display: none !important;
}

.phone-shell.journey-detail-open :is(.report-fab, .emergency-map-button) {
  bottom: calc(min(55vh, 470px) + 18px);
}

.luma-map .mapboxgl-ctrl-attrib {
  padding: 2px 5px;
  border-color: rgba(244, 225, 190, 0.08);
  border-radius: 7px;
  background: rgba(35, 31, 27, 0.78);
  color: #d8cfc1;
  font-size: 9px;
  line-height: 1.25;
  box-shadow: none;
  backdrop-filter: none;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact {
  width: 24px;
  min-width: 24px;
  height: 24px;
  max-width: 24px;
  padding: 0;
  overflow: hidden;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button {
  display: block !important;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
  display: none;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show {
  width: auto;
  height: auto;
  max-width: min(330px, calc(100vw - 26px));
  padding: 2px 5px;
  overflow: visible;
}

.luma-map .mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
  display: block;
}

.phone-shell.turn-by-turn-active .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(210px, calc(env(safe-area-inset-bottom) + 208px));
}

.phone-shell.journey-detail-open:has(.bottom-sheet[data-sheet="journey-options"].open) .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: calc(min(55vh, 470px) + 72px);
}

@media (max-width: 430px) {
  .phone-shell.journey-detail-open :is(.report-fab, .emergency-map-button) {
    bottom: calc(min(52vh, 460px) + 18px);
  }

  .phone-shell.journey-detail-open:has(.bottom-sheet[data-sheet="journey-options"].open) .luma-map .mapboxgl-ctrl-bottom-left {
    bottom: calc(min(52vh, 460px) + 72px);
  }
}

/* Mission 3A.4 final active-walk offsets intentionally follow the 3A.3 release cascade. */
.phone-shell.turn-by-turn-active :is(.report-fab, .emergency-map-button) {
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 110px));
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}

.phone-shell.turn-by-turn-active .report-fab {
  width: var(--tap-target);
  height: var(--tap-target);
  box-shadow: 0 8px 20px rgba(18, 12, 6, 0.24);
}

.phone-shell.turn-by-turn-active .emergency-map-button {
  gap: 4px;
  padding-inline: 9px;
  box-shadow: 0 8px 20px rgba(18, 12, 6, 0.24);
}

.phone-shell.turn-by-turn-active .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(166px, calc(env(safe-area-inset-bottom) + 164px));
}

/* Mission 3A.6 final walking-control rail intentionally follows every earlier active-walk cascade. */
.phone-shell.turn-by-turn-active .luma-map .mapboxgl-ctrl-bottom-left {
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 90px));
  justify-content: flex-end;
}

.phone-shell.turn-by-turn-active .report-fab {
  right: max(12px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(124px, calc(env(safe-area-inset-bottom) + 122px));
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  line-height: 0;
}

.phone-shell.turn-by-turn-active .emergency-map-button {
  right: max(12px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(176px, calc(env(safe-area-inset-bottom) + 174px));
  left: auto;
  width: auto;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}

.phone-shell.turn-by-turn-active.walking-rating-visible .emergency-map-button {
  bottom: max(230px, calc(env(safe-area-inset-bottom) + 228px));
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"].show {
  top: auto;
  right: max(12px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(176px, calc(env(safe-area-inset-bottom) + 174px));
  left: auto;
  z-index: 34;
  display: grid !important;
  width: auto;
  max-width: calc(100% - 24px);
  min-height: var(--tap-target);
  padding: 4px 6px;
  border: 1px solid var(--luma-divider);
  border-radius: 999px;
  background: rgba(28, 25, 22, 0.94);
  box-shadow: 0 8px 20px rgba(18, 12, 6, 0.24);
  backdrop-filter: blur(14px);
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] > :is(
  .card-close,
  h2,
  .quick-rating-location
) {
  display: none !important;
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] .stars {
  gap: 2px;
  margin: 0;
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] .stars button {
  --star-size: 38px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] .stars button:is(:hover, .active) {
  border-color: rgba(231, 178, 77, 0.26);
  background: rgba(231, 178, 77, 0.12);
  box-shadow: none;
  transform: none;
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] .quick-rating-status {
  display: none;
  margin: 0;
  color: var(--luma-text-secondary);
  font-size: var(--luma-type-metadata-size);
  font-weight: 760;
  text-align: center;
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] .quick-rating-status:not(:empty) {
  display: block;
  padding: 2px 8px 3px;
}

.phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"].rating-complete {
  transform: none;
  opacity: 1;
}

.phone-shell.journey-detail-open .walking-rating-prompt[data-contextual-walk-rating="true"] {
  display: none !important;
}

.phone-shell.journey-detail-open .emergency-map-button {
  bottom: calc(min(55vh, 470px) + 70px);
}

.phone-shell.journey-detail-open .report-fab {
  bottom: calc(min(55vh, 470px) + 18px);
}

@media (max-width: 430px) {
  .phone-shell.journey-detail-open .emergency-map-button {
    bottom: calc(min(52vh, 460px) + 70px);
  }

  .phone-shell.journey-detail-open .report-fab {
    bottom: calc(min(52vh, 460px) + 18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"],
  .phone-shell.turn-by-turn-active .walking-rating-prompt[data-contextual-walk-rating="true"] .stars button {
    transition: none !important;
    animation: none !important;
  }
}