/*
 * PilgrimTrails - Core CSS & Theme Stylesheet
 * Custom CSS with design tokens (dark-first), glassmorphic dashboard design,
 * animations, and Mapbox GL chrome.
 */

/* ==========================================================================
   CSS Custom Variables & Themes
   ========================================================================== */
:root {
  /* ===== WAYFARER design system (dark-first, pine canvas) ===== */
  --font-title: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-xs: 8px;           /* chips, tooltips, small inline elements */
  --border-radius-sm: 11px;   /* controls, icon buttons */
  --border-radius-md: 16px;   /* cards */
  --border-radius-lg: 20px;   /* sheets */
  --radius-pill: 999px;       /* pills, tracks, scrubber thumbs */

  /* Brand = Ember. Two tones: --accent-color is the INTERACTIVE ember (CTAs,
     links, active states — bright enough to actually glow on navy);
     --accent-deep is the large-fill ember (gradients, walked line, big washes). */
  --accent-color: #e0763c;
  --accent-color-rgb: 224, 118, 60;
  --accent-deep: #a8623a;
  --accent-deep-rgb: 168, 98, 58;
  --pg-brand-deep: #8a4a2c;
  --accent-pilgrim: #a8623a;
  --accent-pilgrim-rgb: 168, 98, 58;
  --accent-hiking: #84cdb1;
  --accent-hiking-rgb: 132, 205, 177;
  --accent-custom: #5b8def;
  --accent-custom-rgb: 91, 141, 239;

  /* Map markers = Signal Coral (map ONLY) */
  --pg-marker: #ee5a3c;
  --pg-marker-hi: #ff7a5c;
  --pg-marker-lo: #cc4528;
  --pg-marker-2: #ff8366;

  /* Interface icons = Verdigris duotone (the cool tool layer) */
  --pg-ui-stroke: #84cdb1;
  --pg-ui-fill: rgba(95, 174, 147, 0.18);
  --pg-ui-solid: #5fae93;

  /* Status — kept inside the muted Wayfarer families, never raw Tailwind */
  --pg-warn: #e08a6a;      /* Hard */
  --pg-info: #9aa05a;      /* Coming soon */
  --pg-measure: #5b8def;
  --pg-success: #5fae93;   /* verdigris — confirmations, loaded states */
  --pg-danger: #e0726a;    /* destructive actions */
  --pg-caution: #e8b35c;   /* contested / caution */
  /* rgb companions for alpha washes (rgba(var(--x-rgb), a)) */
  --pg-marker-rgb: 238, 90, 60;
  --pg-warn-rgb: 224, 138, 106;
  --pg-info-rgb: 154, 160, 90;
  --pg-success-rgb: 95, 174, 147;
  --pg-danger-rgb: 224, 114, 106;
  --pg-caution-rgb: 232, 179, 92;
  --bg-secondary-rgb: 16, 23, 42;
  --bg-elevated-rgb: 22, 32, 58;

  --pg-coin-bevel: inset 0 1.5px 2px rgba(255,255,255,0.40), inset 0 -2px 4px rgba(110,30,12,0.55);
}

.dark-theme {
  --bg-primary: #0a0f1a;     /* Midnight navy */
  --bg-secondary: #10172a;   /* panel — sheets, header */
  --bg-tertiary: #0c1322;    /* recessed ONLY — inputs, wells (darker = deeper) */
  --bg-elevated: #16203a;    /* raised — cards, chips, stamps (lighter = closer) */
  --pg-chip: rgba(236, 241, 248, 0.05);
  --text-primary: #edf1f8;
  --text-secondary: #a6b2cc;
  --text-muted: #98a4bf;   /* nudged up from #8a96b2 for more comfortable contrast */
  --border-color: rgba(150, 170, 210, 0.16);
  --border-color-strong: rgba(150, 170, 210, 0.30);

  --glass-bg: rgba(10, 15, 26, 0.78);  /* glass panels over map — map ghosts through */
  --glass-bg-strong: rgba(10, 15, 26, 0.92);  /* reading panels over satellite — bright imagery must not wash the text */
  --glass-border: rgba(150, 170, 210, 0.16);
  --glass-blur: 16px;
  /* Elevation ladder: one top-edge light + three shadow steps. */
  --edge-light: inset 0 1px 0 rgba(237, 241, 248, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);
  --shadow: var(--shadow-lg);
  --scrim: rgba(4, 8, 18, 0.64);       /* the one overlay dim, everywhere */

  --map-invert: 0;
}


/* ==========================================================================
   General Reset & Base Styles
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
}

/* Basemap-switch veil — a brief dip to the app background so a style change
   never hard-cuts (the map flashes unstyled tiles while Mapbox rebuilds). */
#basemap-veil {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
#basemap-veil.on { opacity: 1; transition: opacity 140ms ease-in; }

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.55); background-clip: padding-box; }
/* Firefox: on .dark-theme (body), not html — the tokens are scoped there and
   custom properties only inherit downward. */
.dark-theme { scrollbar-width: thin; scrollbar-color: var(--border-color-strong) transparent; }

/* ==========================================================================
   Header Styles
   ========================================================================== */
.app-header {
  position: relative;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-sm);
  background: linear-gradient(150deg, var(--bg-elevated), var(--bg-secondary));
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 16px -6px rgba(var(--accent-deep-rgb), 0.45);
}
.logo-icon svg { width: 22px; height: 22px; }

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-text h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  /* warm into the ember family instead of dying into grey */
  background: linear-gradient(90deg, var(--text-primary) 35%, #f0a06a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
  margin: 0;
}

/* The slogan — before it was called Christianity, it was called the Way
   (ἡ ὁδός, Acts 9:2). Quiet capitals under the wordmark. */
.logo-tagline {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 2px;
}

/* Boot veil — the slogan's big placement: it holds the dark screen alone while
   the globe readies its first frame, then lifts. app.js adds .lifted. */
.boot-veil {
  position: fixed;
  inset: 0;
  z-index: 1200;                   /* above everything — header (1000) included */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity 0.9s ease;
}
.boot-veil.lifted { opacity: 0; pointer-events: none; }
.boot-veil-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: boot-veil-rise 1.1s ease both;
}
.boot-veil-mark { width: 44px; height: 44px; margin-bottom: 14px; }
.boot-veil-wordmark {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  line-height: 1;
}
.boot-veil-rule {
  width: 44px;
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.65), transparent);
}
.boot-veil-slogan {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;             /* re-centres tracked-out capitals */
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1;
}
.boot-veil-greek {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-style: italic;
}
@keyframes boot-veil-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-veil { transition-duration: 0.2s; }
  .boot-veil-inner { animation: none; }
}



.header-stats {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 6px 14px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
}

.header-stats span {
  color: var(--text-secondary);
  font-weight: 600;
}

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

/* ==========================================================================
   Button System
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition-fast);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--border-color);
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--border-radius-sm);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-icon:hover {
  color: var(--text-primary);
  background-color: var(--border-color);
}

.btn-icon.active {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background-color: rgba(var(--accent-color-rgb), 0.1);
}

.btn-sm {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
}


/* ==========================================================================
   Layout Containers
   ========================================================================== */
/* Wayfarer mobile shell: full-screen map, sidebar becomes a bottom sheet */
.app-container {
  display: block;
  width: 100%;
  height: calc(100% - 64px);
  position: relative;
}

/* 1. Routes sheet (was the left sidebar) — slides up over the map on the Routes tab.
   position: fixed so it anchors to the viewport (immune to any body scroll / tall
   detail content) and never drags the page taller. */
.app-sidebar {
  position: fixed;
  left: 50%;
  bottom: 84px;
  width: calc(100% - 16px);
  max-width: 460px;
  /* dvh (dynamic viewport) is essential on iOS Safari: plain vh is measured
     against the address-bar-retracted viewport, so a tall sheet's TOP rode up
     behind the header and hid the close button. The max-height reserves the
     header height + a gap so the grip row is always tappable below it. */
  height: 70vh;
  height: 70dvh;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 154px);
  background: rgba(var(--bg-secondary-rgb), 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow: hidden;
  transform: translate(-50%, 130%);
  transition: transform 0.24s ease-out;
}
.app-sidebar.sheet-open { transform: translate(-50%, 0); }

/* Sheet grip row — the sheet always shows its own door. */
.sheet-grip-row {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 4px 10px 0;
}
.sheet-grip {
  width: 44px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-color-strong);
}
.sheet-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--pg-chip);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sheet-close:hover { background: var(--border-color); color: var(--text-primary); }
/* Close/dismiss buttons are circular across the app (sheet, glance card, modal) —
   the profile/credencial modal's × was the lone rounded-square. */
#btn-close-profile { border-radius: 50%; }

/* Peek chip — the selection stays in hand while the map speaks. Sits above
   the tab bar, below the sheet (reopening the sheet covers it). */
.route-peek {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 0);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(92vw, 400px);
  padding: 14px 16px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* Never grow off a short screen — the brief scrolls, header + actions stay. */
  max-height: calc(100dvh - 150px);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.route-peek.is-dismissed { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }

/* When there's no brief at all, collapse back toward a compact pill. */
.route-peek:not(.has-desc) { border-radius: var(--radius-pill); padding: 10px 12px; gap: 10px; }
.route-peek:not(.has-desc) .route-peek-brief { display: none; }

.route-peek-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.route-peek-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.route-peek-text strong { font-family: var(--font-title); font-size: 16px; font-weight: 700; line-height: 1.2; }
.route-peek-text span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); text-transform: uppercase; }

.route-peek-brief { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.route-peek-signature { font-size: 13.5px; line-height: 1.5; color: var(--text-primary); margin: 0; }
.route-peek-highlights {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.route-peek-highlights svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--accent-color); }
.route-peek-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.route-peek-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--pg-chip);
  border: 1px solid var(--border-color);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.route-peek-fact svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--pg-ui-stroke); }

.route-peek-actions { display: flex; gap: 8px; }
.route-peek-btn {
  flex: 1 1 auto;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--pg-chip);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  transition: filter 140ms ease, background 140ms ease;
}
.route-peek-btn:hover { filter: brightness(1.08); }
.route-peek-primary { background: var(--accent-color); color: #0b1120; border-color: var(--accent-color); }
.route-peek-tour { background: #2DD4BF; color: #06201c; border-color: #2DD4BF; }
/* Details = the quiet secondary, so the turquoise Tour is the single clear
   primary (two filled buttons were fighting for the eye). */
.route-peek-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-color-strong); }
.route-peek-ghost:hover { background: var(--pg-chip); }
.route-peek-x {
  flex: 0 0 auto;
  background: var(--pg-chip);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-peek-x:hover { background: var(--border-color); color: var(--text-primary); filter: none; }

/* Views inside the sheet — scroll their own content (so tall detail never overflows) */
.sidebar-view {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar-view.active {
  display: flex;
}

/* 2. Floating Sidebar Toggle — retired in the Wayfarer tab-bar layout */
.sidebar-toggle { display: none !important; }


.sidebar-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.app-sidebar.closed + .sidebar-toggle {
  left: 0;
}

.app-sidebar.closed + .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* 3. Right Map Workspace */
.map-workspace {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#map {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  background-color: var(--bg-tertiary);
}

/* ==========================================================================
   Filter Panel CSS
   ========================================================================== */
.filter-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--bg-secondary);
}

.search-box {
  position: relative;
  width: 100%;
}

.search-box input {
  width: 100%;
  height: 40px;
  padding: 0 40px;
  border-radius: var(--border-radius-sm);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  transition: var(--transition-fast);
}

/* iOS zooms the page when a focused input's font is under 16px — and Chrome
   on iOS KEEPS that zoom across reloads, orphaning every fixed control
   (tab bar below the fold, clipped map buttons). On small screens all text
   inputs meet the 16px floor so the zoom never fires. */
@media (max-width: 768px) {
  .search-box input,
  .profile-field input[type="text"],
  input[type="text"] {
    font-size: 16px;
  }
}

.search-box input:focus {
  outline: none;
  border-color: var(--text-muted);
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.15);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 11px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

#search-clear {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--text-muted);
}

#search-clear:hover {
  color: var(--text-primary);
}


.pill {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.pill:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.pill.active {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  font-weight: 600;
}


/* ==========================================================================
   Trails List CSS
   ========================================================================== */
.trails-list-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 0;
}

.section-title {
  padding: 0 20px 10px 20px;
}

.section-title h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.section-title .subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.trails-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 4px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Trail Card Styling */
.trail-card {
  position: relative;
  flex: 0 0 auto; /* don't shrink inside the flex list — keep full height, let the list scroll */
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--edge-light), var(--shadow-sm);
  padding: 16px;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
}

.trail-card:hover {
  transform: translateY(-2px);
  border-color: var(--text-muted);
  box-shadow: var(--shadow);
}

.trail-card.selected {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  background-color: rgba(var(--accent-color-rgb), 0.03);
}

/* Small Indicator Line on Selected Card */
.trail-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--accent-color);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.trail-card.selected::before {
  opacity: 1;
}

.trail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.trail-card-header > div { flex: 1; min-width: 0; }
.trail-card-header .difficulty-badge,
.trail-card-header .soon-badge { flex: 0 0 auto; white-space: nowrap; }

.trail-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.trail-card-saint {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.difficulty-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quiet metadata, not traffic-light alerts (Wayfarer) */
.difficulty-badge.easy {
  background-color: rgba(var(--pg-info-rgb), 0.12);
  color: var(--pg-info);
}
.difficulty-badge.moderate {
  background-color: rgba(143, 162, 149, 0.14);
  color: #8fa295;
}
.difficulty-badge.hard {
  background-color: rgba(var(--pg-warn-rgb), 0.12);
  color: var(--pg-warn);
}

.trail-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trail-card-stats {
  display: flex;
  gap: 16px;
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-muted);
}

.trail-card-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.trail-card-stat strong {
  color: var(--text-secondary);
}

/* ==========================================================================
   M3 — Browse / front door (featured hero + coming-soon skeletons)
   ========================================================================== */
.trail-card-featured {
  padding: 20px;
  border: 1.5px solid var(--accent-color); /* subtle ember, no neon glow */
  background: linear-gradient(160deg, rgba(var(--accent-color-rgb), 0.13), rgba(var(--accent-color-rgb), 0.03));
}
.trail-card-featured::before { opacity: 1; }
.trail-card-featured:hover { transform: translateY(-3px); border-color: var(--accent-color); }

.featured-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent-color); margin-bottom: 10px;
}
.featured-title {
  font-family: var(--font-title);
  font-size: 22px; font-weight: 800; line-height: 1.1;
  color: var(--text-primary); margin-bottom: 7px;
}
.featured-identity {
  font-size: 13px; line-height: 1.45; color: var(--text-secondary);
  margin-bottom: 14px;
}
.route-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.route-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color);
  font-family: var(--font-title); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.featured-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; border-radius: var(--border-radius-sm);
  background: var(--accent-color); color: #0b1120;
  font-family: var(--font-title); font-size: 14px; font-weight: 700;
  transition: filter var(--transition-fast);
}
.trail-card-featured:hover .featured-cta { filter: brightness(1.08); }

/* Coming-soon skeleton cards. Gentle dim (kept AA-safe — 0.66 dragged the
   description text below WCAG AA in light theme; 0.85 keeps it legible). */
.trail-card-soon { opacity: 0.85; }
.trail-card-soon:hover { opacity: 1; }
/* Solid accent fill + near-black text: high contrast in BOTH themes and
   independent of the page background, so it survives the card dimming. */
.soon-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
  background: rgba(var(--pg-info-rgb), 0.12); color: var(--pg-info);
}

/* Coming-soon banner inside the route overview */
.coming-soon-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-color);
  border-radius: var(--border-radius-sm);
  background: rgba(var(--accent-color-rgb), 0.06);
}
.coming-soon-banner svg { width: 18px; height: 18px; color: var(--accent-color); flex: 0 0 auto; margin-top: 1px; }
.coming-soon-text { display: flex; flex-direction: column; gap: 2px; }
.coming-soon-text strong { font-family: var(--font-title); font-size: 13px; color: var(--text-primary); }
.coming-soon-text span { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* Notable walkers + stories in the route overview */
.overview-walkers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.walker-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  color: var(--text-secondary); font-size: 12px; font-weight: 500;
}
.walker-chip svg { color: var(--accent-color); }


/* ── The Network — corridor cards for the validated routes beyond the
   fully-guided five. Compact, quieter than trail cards; active = turquoise. ── */
.network-section { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.network-heading {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-color);
}
.network-heading span { font-weight: 500; font-size: 11px; color: var(--text-muted); }
.network-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--edge-light), var(--shadow-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.network-card:hover { transform: translateY(-1px); border-color: var(--border-color-strong); }
.network-card.active { border-color: #2DD4BF; box-shadow: var(--edge-light), 0 0 0 1px rgba(45, 212, 191, 0.35), var(--shadow-sm); }
.network-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.network-card-top h4 { font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.3; }
.network-km { font-size: 11px; font-weight: 700; color: #2DD4BF; flex: 0 0 auto; }
.network-card-route { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.network-card-blurb { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 0; }
.network-card-countries { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-top: 7px; }

/* Destination group headings inside The Network */
.network-group-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 10px;
  padding: 6px 2px 2px;
}
.ngh-label { font-family: var(--font-title); font-size: 12.5px; font-weight: 700; color: #2DD4BF; letter-spacing: 0.02em; }
.ngh-note { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Research continuity — the shelf where the reader left the book open */
.continue-block {
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.10), rgba(45, 212, 191, 0.02));
  border: 1px solid rgba(45, 212, 191, 0.30);
  border-radius: var(--border-radius-md);
  box-shadow: var(--edge-light), var(--shadow-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.continue-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2DD4BF; margin-bottom: 3px; }
.continue-name { font-family: var(--font-title); font-size: 15px; font-weight: 600; color: var(--text-primary); }
.continue-sub { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
.continue-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.continue-chip {
  border: 1px solid var(--border-color-strong);
  background: var(--pg-chip);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-size: 11.5px;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.continue-chip:hover { border-color: #2DD4BF; background: rgba(45, 212, 191, 0.10); }
.continue-recent { background: var(--bg-elevated); border-color: var(--border-color); }
.continue-recent .continue-kicker { color: var(--text-muted); }

/* Story satchel — stories gather quietly; the pill counts, never interrupts */
.walk-stories-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.45);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color);
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.walk-stories-btn:hover { background: rgba(var(--accent-color-rgb), 0.2); }
.satchel-pulse { animation: satchelPulse 900ms ease-out 1; }
@keyframes satchelPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(var(--accent-color-rgb), 0); }
}
.walk-stories-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 210px;
  z-index: 35;
  width: min(92vw, 400px);
  max-height: 40vh;
  overflow-y: auto;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  padding: 12px;
}
.wsp-head { font-family: var(--font-title); font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.wsp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin-top: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.wsp-item:hover { border-color: var(--accent-color); }
.wsp-title { flex: 1; min-width: 0; }
.wsp-read { flex: 0 0 auto; font-weight: 700; font-size: 11px; color: var(--accent-color); }

/* the heading over the five equals shares the group-heading style */
.guided-heading { margin-top: 0; }

/* Empty list placeholder */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  gap: 12px;
}

.no-results svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
  color: rgba(var(--accent-color-rgb), 0.5);
}

/* ==========================================================================
   Detail View Sidebar CSS
   ========================================================================== */
.btn-back {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex: 0 0 auto; /* don't shrink inside the flex sidebar column */
  min-height: 52px;
  padding: 0 16px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-fast);
}
.btn-back-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-sm);
  background: rgba(var(--accent-color-rgb), 0.14);
  color: var(--accent-color);
}
.btn-back-tile svg { width: 20px; height: 20px; }
.btn-back-label { font-size: 17px; font-weight: 600; }

.btn-back:hover {
  background-color: var(--border-color);
}

.detail-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.detail-header {
  margin-bottom: 18px;
}

.detail-category {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 4px;
}

.detail-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.detail-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

.detail-grid-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.detail-stat-box {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--edge-light), var(--shadow-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.detail-stat-val {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.detail-actions {
  display: flex;
  gap: 10px;
  margin: 4px 0 24px;
}

.detail-actions button {
  flex: 1;
}
.detail-actions .btn-icon { flex: 0 0 auto; } /* download stays a compact icon button, not full-width */

.detail-description-section {
  margin-bottom: 24px;
}

/* Corridor detail sheet — connection chips + the "network road" note */
.corridor-conns { display: flex; flex-wrap: wrap; gap: 8px; }
.corridor-conn-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 13px;
  border-radius: var(--border-radius-md);
  background: var(--pg-chip);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.corridor-conn-chip .conn-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.corridor-conn-chip .conn-where { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.corridor-conn-chip:hover {
  background: rgba(var(--accent-color-rgb), 0.12);
  border-color: rgba(var(--accent-color-rgb), 0.45);
}
.corridor-conn-chip:hover .conn-name { color: var(--text-primary); }
.corridor-conn-chip:hover .conn-where { color: var(--text-secondary); }
.detail-note { font-style: italic; color: var(--text-muted); font-size: 13px; }

.detail-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
}

.detail-description-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.poi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poi-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  background-color: var(--bg-elevated);
  box-shadow: var(--edge-light), var(--shadow-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.poi-item:hover {
  border-color: var(--text-muted);
  background-color: var(--border-color);
}

.poi-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(var(--accent-color-rgb), 0.1);
  color: var(--accent-color);
  flex-shrink: 0;
}

.poi-item-content {
  display: flex;
  flex-direction: column;
}

.poi-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.poi-item-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* ==========================================================================
   Elevation Drawer System
   ========================================================================== */
.elevation-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  z-index: 998;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal);
  overflow: hidden;
}

.elevation-drawer.closed {
  transform: translateY(100%);
}

.drawer-header {
  height: 44px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
}

.drawer-title-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
}

.drawer-title-info svg {
  width: 16px;
  height: 16px;
}

.drawer-title-info h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.drawer-stats {
  display: flex;
  gap: 20px;
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--text-secondary);
}

.drawer-stats span strong {
  color: var(--text-primary);
}

.drawer-content {
  flex-grow: 1;
  padding: 10px 20px;
  position: relative;
  display: flex;
  align-items: center;
}

.chart-wrapper {
  width: 100%;
  height: 120px;
  position: relative;
}

#elevation-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Gridlines styling */
.chart-gridline {
  stroke: var(--border-color);
  stroke-opacity: 0.5;
  stroke-width: 0.75;
}

.chart-label {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
}

/* Tooltip on SVG Chart */
.chart-tooltip {
  position: absolute;
  top: -24px;
  pointer-events: none;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-family: var(--font-body);
  box-shadow: var(--shadow);
  display: flex;
  gap: 12px;
  z-index: 1001;
  transform: translateX(-50%);
  white-space: nowrap;
}

.chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--border-color) transparent transparent transparent;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   GPX Import Modal CSS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dvh: clears Chrome iOS's bottom toolbar (100vh renders behind it) */
  z-index: 2000;
  background-color: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-card {
  width: 480px;
  max-width: 100%;
  /* Cap to the viewport and let the body scroll inside, so a tall profile
     (ledger + credencial + a full Companions card) never runs off-screen —
     the header with its × stays pinned. dvh so the cap tracks Chrome's toolbar. */
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
  animation: modalScaleUp var(--transition-normal);
}
.modal-card .modal-header { flex: 0 0 auto; }
.modal-card .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* clear the phone's home-indicator / Chrome toolbar at the last item */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes modalScaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}




/* Custom Marker Styling */
.custom-map-marker {
  background: none;
  border: none;
}

.marker-pin-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background-color: var(--accent-color);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast);
}

.marker-pin-wrapper:hover {
  transform: scale(1.15) rotate(-45deg);
}

.marker-pin-wrapper svg {
  transform: rotate(45deg);
  width: 14px;
  height: 14px;
  color: #fff;
}

/* Specific pin colors */
.marker-religious .marker-pin-wrapper {
  background-color: var(--accent-pilgrim);
}
.marker-lodging .marker-pin-wrapper {
  background-color: #6366f1; /* Indigo */
}
.marker-viewpoint .marker-pin-wrapper {
  background-color: #ec4899; /* Pink */
}
.marker-monument .marker-pin-wrapper {
  background-color: #8b5cf6; /* Violet */
}


.popup-title {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.popup-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}


/* ==========================================================================
   Responsive Adaptations (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 768px) {
  /* Wayfarer mobile: the shell (full-screen map + bottom-sheet + tab bar) is the
     base layout now — do NOT re-anchor the sidebar here (that broke it on phones). */
  .app-header { padding: 0 16px; }
  .logo-text h1 { font-size: 18px; }
  .header-actions { gap: 8px; }
  .modal-card { width: calc(100% - 32px); padding: 20px; }

  /* Walking HUD fits the narrow screen + clears the floating tab bar */
  .walk-hud { left: 10px; right: 10px; padding: 12px 12px 10px; }
  .walk-hud-controls { flex-wrap: wrap; }
  .walk-scrub { min-width: 60px; }

  /* Modals + credencial use the full width */
  .profile-card, .story-card { width: calc(100% - 24px); }
  .credencial-grid { grid-template-columns: 1fr 1fr; }
}

/* Monastery story-card popup (rich card on a monastery pin tap) */
.pg-mon-popup .mapboxgl-popup-content {
  padding: 0 !important;
  overflow: hidden auto !important;
  max-height: 72vh;
  border-radius: var(--border-radius-md) !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}
.pg-mon-popup .mapboxgl-popup-tip { display: none !important; }
.pg-mon-photo { display: block; width: 100%; height: 152px; object-fit: cover; }
.pg-mon-inner { padding: 13px 15px 15px; }
.pg-mon-kicker { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-color); font-weight: 700; margin-bottom: 3px; }
.pg-mon-title { font-family: var(--font-title); font-weight: 600; font-size: 15px; color: var(--text-primary); line-height: 1.25; margin-bottom: 6px; }
.pg-mon-body p { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 8px; }
.pg-mon-learn { display: inline-block; color: var(--accent-color); font-weight: 600; font-size: 12.5px; text-decoration: none; }

.pg-pop .mapboxgl-popup-tip { display: none; }

/* ── Shared popup family — camp + POI popups speak the monastery card's
   typographic language (kicker / title / meta / link), one species. ── */
.pg-pop-kicker { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-color); font-weight: 700; margin-bottom: 3px; font-family: var(--font-body); }
.pg-pop-title { font-family: var(--font-title); font-weight: 600; font-size: 15px; color: var(--text-primary); line-height: 1.25; }
.pg-pop-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-family: var(--font-body); }
.pg-pop-desc { font-family: var(--font-body); font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }
.pg-pop-link { display: inline-block; color: var(--accent-color); font-weight: 600; font-size: 12px; text-decoration: none; margin-top: 6px; }
.pg-pop-link::after { content: " \2192"; }

/* In-world confirm dialog (native confirm() shatters the glass) */
.pg-confirm-card { max-width: 380px; }
.pg-confirm-msg { font-size: 14px; color: var(--text-primary); line-height: 1.55; margin: 0 0 18px; }
.pg-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.pg-confirm-ok { background: var(--accent-color); border-color: var(--accent-color); color: #0b1120; font-weight: 600; }
.pg-confirm-danger { background: var(--pg-danger); border-color: var(--pg-danger); }
.pg-confirm-danger:hover { filter: brightness(1.08); }
.pg-mon-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(246, 248, 246, 0.95); color: #10231a;
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 6px rgba(0, 0, 0, 0.18);
}
/* Pin it as an always-on-screen card above the tab-bar (was anchored to the pin,
   so a tall card overflowed under the bottom nav with Learn-more unreachable). */
.pg-mon-popup.mapboxgl-popup {
  position: fixed !important;
  top: auto !important;
  left: 50% !important;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: 360px !important;
  z-index: 95 !important;
}
.pg-mon-popup .mapboxgl-popup-content {
  max-height: calc(100vh - 168px) !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .pg-mon-popup.mapboxgl-popup {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .pg-mon-popup .mapboxgl-popup-content {
    max-height: calc(100vh - 152px) !important;
  }
}

/* Custom Mapbox Popup Styling */
.mapboxgl-popup-content {
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow) !important;
  padding: 14px 18px !important;
  color: var(--text-primary) !important;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  border-bottom-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  border-top-color: var(--bg-secondary) !important;
}
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: var(--bg-secondary) !important;
}

/* ============================================================
   WALK MODE — the live walk (Primitivo MVP / M1)
   ============================================================ */

/* Begin / Preview entry in the route detail panel */
.walk-start { display: flex; gap: 10px; margin: 18px 0 4px; }
.walk-begin-btn {
  flex: 1; justify-content: center;
  background: var(--accent-color); border-color: var(--accent-color);
  color: #0b1120; font-weight: 600;
}
.walk-begin-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.walk-start .btn-secondary { flex: 0 0 auto; }

/* Walking HUD pinned to the bottom of the map */
.walk-hud {
  position: absolute; left: 16px; right: 16px; bottom: 84px; z-index: 30;
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color); border-radius: var(--border-radius-lg);
  padding: 14px 16px 12px; box-shadow: var(--shadow);
  color: var(--text-primary); font-family: var(--font-body); display: none;
}
.walk-hud.visible { display: block; }
.walk-hud-track { position: relative; height: 8px; background: var(--border-color); border-radius: var(--radius-pill); margin: 4px 0 14px; }
.walk-hud-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--accent-color), var(--accent-deep)); border-radius: var(--radius-pill); transition: width 0.15s linear; }
.walk-hud-pos { position: absolute; top: 50%; left: 0%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border: 3px solid var(--accent-color); border-radius: 50%; box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb),0.28); transition: left 0.15s linear; }
.walk-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; padding: 0; background: rgba(150, 170, 210, 0.55); border: 2px solid var(--bg-primary); border-radius: 50%; cursor: default; }
.walk-tick.unlocked { background: var(--pg-marker); cursor: pointer; box-shadow: 0 0 0 3px rgba(var(--pg-marker-rgb), 0.32); }
.walk-hud-info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.walk-hud-progress { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.walk-hud-next { font-size: 13px; color: var(--text-secondary); font-family: var(--font-title); }
.walk-hud-next strong { color: var(--pg-marker); }
.walk-hud-controls { display: flex; align-items: center; gap: 8px; }
.walk-ctrl { background: var(--pg-chip); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 12px; font-family: var(--font-body); padding: 6px 12px; border-radius: var(--border-radius-sm); cursor: pointer; white-space: nowrap; }
.walk-ctrl:hover { background: var(--border-color); }
.walk-exit { margin-left: auto; color: var(--pg-warn); border-color: rgba(var(--pg-warn-rgb), 0.4); }
.walk-scrub { flex: 1; min-width: 70px; accent-color: var(--accent-color); }
.walk-live { font-size: 12px; color: var(--pg-ui-solid); font-weight: 600; }

/* "You are here" dot on the map */
.walk-dot { width: 16px; height: 16px; background: var(--pg-marker); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--pg-marker-rgb), 0.6); animation: walkPulse 1.8s ease-out infinite; }
.walk-dot-sim { background: var(--accent-color); animation: walkPulseSim 1.8s ease-out infinite; }
@keyframes walkPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--pg-marker-rgb), 0.55); } 70% { box-shadow: 0 0 0 16px rgba(var(--pg-marker-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pg-marker-rgb), 0); } }
@keyframes walkPulseSim { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-deep-rgb), 0.55); } 70% { box-shadow: 0 0 0 16px rgba(var(--accent-deep-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-deep-rgb), 0); } }

/* Story card (read on arrival) */
.story-card-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.story-card { position: relative; width: min(520px, 100%); max-height: 84vh; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 28px 28px 24px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8); animation: modalScaleUp 0.22s ease; }
.story-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.story-close:hover { color: var(--text-primary); }
.story-kicker { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.story-badge { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.3px; }
.story-badge.firm { background: rgba(var(--pg-success-rgb), 0.15); color: var(--pg-success); }
.story-badge.contested { background: rgba(var(--pg-caution-rgb), 0.15); color: var(--pg-caution); }
.story-title { font-family: var(--font-title); font-size: 22px; color: var(--text-primary); margin-bottom: 6px; line-height: 1.2; }
.story-people { font-size: 12px; color: var(--pg-marker-2); margin-bottom: 14px; }
.story-body p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px; max-width: 46ch; }
.story-sources { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 14px; }
.story-sources h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.story-sources ul { list-style: none; margin: 0; padding: 0; }
.story-sources li { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.story-sources a { color: var(--accent-color); text-decoration: underline; }
.story-stamp { margin-top: 16px; font-size: 12px; color: var(--pg-ui-solid); }

/* Gentle arrival prompt (toast) */
.walk-toast { position: fixed; left: 50%; bottom: 160px; transform: translate(-50%, 20px); z-index: 900; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--pg-marker); border-radius: var(--radius-pill); padding: 10px 10px 10px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); color: var(--text-primary); font-size: 13px; font-family: var(--font-title); opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; max-width: 90vw; }
.walk-toast.show { opacity: 1; transform: translate(-50%, 0); }
.walk-toast-read { background: var(--accent-color); color: #0b1120; border: none; border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }

/* ============================================================
   PROFILE + CREDENCIAL (Primitivo MVP / M2)
   ============================================================ */
.btn-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: 13px; transition: all var(--transition-fast); padding: 0; }
.btn-avatar:hover { border-color: var(--accent-color); color: var(--accent-color); }
.btn-avatar i { width: 18px; height: 18px; }
#profile-avatar-initials.has-initials { color: var(--accent-color); }

.profile-card { width: min(560px, 100%); }
.profile-lede { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; max-width: 46ch; }
.profile-field { display: block; margin-bottom: 16px; }
.profile-field > span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.profile-field > span em { font-style: normal; opacity: 0.65; }
.profile-field input[type="text"] { width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 10px 12px; color: var(--text-primary); font-size: 14px; font-family: var(--font-body); }
.profile-field input[type="text"]:focus { outline: none; border-color: var(--accent-color); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-chip { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-family: var(--font-body); cursor: pointer; transition: all var(--transition-fast); }
.profile-chip:hover { border-color: var(--accent-color); }
.profile-chip.selected { background: var(--accent-color); border-color: var(--accent-color); color: #0b1120; font-weight: 600; }
.profile-save { width: 100%; justify-content: center; margin-top: 8px; }
/* Disabled CTA: reading opacity down over the ember fill turned it a muddy,
   ambiguous brown. A flat neutral fill + muted text reads clearly as "not yet". */
.walk-begin-btn:disabled, .profile-save:disabled {
  background: rgba(236, 241, 248, 0.06);
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 1;
  cursor: not-allowed;
}
.walk-begin-btn:disabled:hover, .profile-save:disabled:hover { filter: none; transform: none; }

.profile-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.profile-avatar-lg { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, var(--accent-color), var(--pg-caution)); color: #0b1120; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: 20px; }
.profile-id-text { flex: 1; min-width: 0; }
.profile-id-text h3 { font-family: var(--font-title); font-size: 19px; color: var(--text-primary); margin: 0 0 2px; }
.profile-id-text p { font-size: 13px; color: var(--text-secondary); margin: 0; }

.credencial { border-top: 1px solid var(--border-color); padding-top: 18px; }
.credencial-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 10px; }
.credencial-head h4 { font-family: var(--font-title); font-size: 15px; color: var(--text-primary); margin: 0; }
.credencial-summary { font-size: 11px; color: var(--text-muted); text-align: right; }
.credencial-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 28px 12px; background: var(--bg-tertiary); border-radius: var(--border-radius-md); border: 1px dashed var(--border-color); }
/* Ghost stamps — the promise made visible: it fills, stamp by stamp. */
.credencial-ghosts { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.credencial-ghost { width: 56px; height: 56px; border: 1.5px dashed var(--border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-muted); opacity: 0.6; }
.credencial-ghost:nth-child(2) { opacity: 0.35; }
.credencial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; }
.stamp { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--edge-light), var(--shadow-sm); padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.stamp-mark { font-size: 16px; line-height: 1; }
.stamp-story { border-color: rgba(var(--pg-marker-rgb), 0.4); }
.stamp-story .stamp-mark { color: var(--pg-marker); }
.stamp-stage { border-color: rgba(var(--accent-deep-rgb), 0.4); }
.stamp-stage .stamp-mark { color: var(--accent-color); }
.stamp-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.stamp-meta { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }


/* ==========================================================================
   Measure tool — planning ruler (straight-line / along-route)
   ========================================================================== */
#btn-measure.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #0b1120; /* dark-on-ember, like every other accent-filled control */
}

.measure-panel {
  position: absolute;
  top: 14px;
  left: 16px; /* top-left so it never overlaps the top-right map controls */
  z-index: 30;
  width: min(330px, calc(100% - 32px));
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
}

.measure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.measure-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
}
.measure-title svg { width: 15px; height: 15px; color: var(--accent-color); }

.measure-mode {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.measure-mode.on { background: var(--accent-color); border-color: var(--accent-color); color: #0b1120; }
.measure-mode-hint { font-size: 11px; color: var(--text-secondary); }
.measure-warn {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(var(--pg-caution-rgb), 0.14);
  border-left: 2px solid var(--pg-caution);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
}

.measure-total {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
}
.measure-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.measure-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.measure-actions { display: flex; gap: 8px; margin-top: 12px; }
.measure-btn {
  flex: 1;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.measure-btn:disabled { opacity: 0.4; cursor: default; }
.measure-btn.measure-done { background: var(--accent-color); border-color: var(--accent-color); color: #0b1120; }
.measure-btn.measure-done:hover { filter: brightness(1.08); }

.measure-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #0b1120;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
}

.popup-measure-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--accent-color);
  background: var(--accent-color);
  color: #0b1120;
  cursor: pointer;
}
.popup-measure-btn:hover { filter: brightness(1.08); }

@media (max-width: 768px) {
  /* keep it top-left and narrow so the right-side map controls (layers + zoom) stay reachable */
  .measure-panel { left: 10px; width: calc(100% - 120px); top: 14px; }
}

/* Transient over-map message (e.g. geolocation feedback) */
.map-toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  z-index: 40;
  max-width: min(400px, calc(100% - 32px));
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--border-radius-md);
  padding: 11px 18px;
  font-family: var(--font-title);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.map-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dismissible "location is off" notice (geolocation blocked/failed) */
.gps-notice {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(10px);
  z-index: 45;
  width: min(360px, calc(100% - 28px));
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--border-radius-md);
  padding: 15px 16px 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gps-notice.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.gps-notice-close {
  position: absolute; top: 7px; right: 11px;
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px;
}
.gps-notice-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-title); font-weight: 700; font-size: 14px;
  margin-bottom: 6px; padding-right: 20px;
}
.gps-notice-title svg { width: 16px; height: 16px; color: var(--pg-ui-stroke); flex: 0 0 auto; }
.gps-notice-body { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 12px; }
.gps-notice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px 14px; border-radius: var(--radius-xs);
  background: var(--accent-color); color: #0b1120;
  font-family: var(--font-title); font-weight: 700; font-size: 13px;
  text-decoration: none;
}
.gps-notice-btn:hover { filter: brightness(1.08); }
.gps-notice-steps { margin-top: 11px; font-size: 12px; color: var(--text-secondary); }
.gps-notice-steps summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; }
.gps-notice-steps ol { margin: 8px 0 0 18px; line-height: 1.65; }
.gps-notice-steps strong { color: var(--text-primary); }
.gps-notice-steps-p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* ==========================================================================
   Wayfarer — bottom tab bar (primary nav) + shell
   ========================================================================== */
.tab-bar {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  gap: 2px;
  width: calc(100% - 24px);
  max-width: 440px;
  padding: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px 6px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--border-radius-md);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tab-item svg { width: 22px; height: 22px; flex: 0 0 auto; }
.tab-item.active {
  color: var(--accent-color);
  background: rgba(var(--accent-deep-rgb), 0.14);
}

/* Force-hide compat elements kept only for app.js (profile btn, header stats) */
[hidden] { display: none !important; }
/* Elevation drawer: retired as an always-on bottom drawer in the Wayfarer shell
   (it overlapped the tab bar). Elevation moves into the route-detail screen later. */
.elevation-drawer { display: none !important; }
.measure-panel, .gps-notice, .map-toast { z-index: 60; }

/* The header is the only top chrome now */
.app-header { height: 58px; }
.app-container { height: calc(100% - 58px); }

/* 3D tilt toggle — glass at rest, accent-filled when 3D terrain is active.
   Fully owned here (no inline styles) since the Tier 2 de-inlining. */
#map-3d-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: var(--edge-light), var(--shadow-sm); /* match the locate control exactly */
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#map-3d-toggle:hover { background: rgba(var(--bg-elevated-rgb), 0.9); }
#map-3d-toggle.is-active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #0b1120; /* dark-on-ember like every other accent-filled control */
}

/* Armed measure button: the header icon's mint stroke is a presentation
   attribute, so override it here — mint on ember was near-invisible (1.66:1). */
#btn-measure.active svg { stroke: #0b1120; fill: rgba(11, 17, 32, 0.12); }

/* ── Layers panel — glass flyout with basemap thumbnails + swatched overlays.
   Hidden until the header Layers button taps it; fully owned here (no inline
   styles) since the Tier 2 de-inlining. ── */
/* ── Map controls — the locate (GPS) button, dressed to match the app's glass
   icon buttons instead of Mapbox's default white chrome. (The +/- zoom control
   was removed; this is the only control top-right.) */
/* Mirror the top-right locate button to the top-left 3D button to the pixel:
   same 10px inset and 10px top. Mapbox adds a default 10px margin on the control
   group, which pushed it to an 18px inset and broke the symmetry — zero it. */
.mapboxgl-ctrl-top-right { top: 10px; right: 10px; }
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group { margin: 0; }
/* Lift the Mapbox attribution / logo clear of the floating tab-bar pill so the
   credit is never buried under it (it collided on desktop especially). */
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--edge-light), var(--shadow-sm);
  overflow: hidden;
}
.mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {
  width: 38px;
  height: 38px;
  background-color: transparent;
}
.mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:not(:disabled):hover {
  background-color: rgba(150, 170, 210, 0.12);
}
.mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate:disabled { opacity: 0.55; }
/* Recolour the icon (all states) to the app's turquoise — the dark default icon
   is invisible on dark glass. Painted as a mask so the colour is exact; the
   'locating' spin still rotates it for feedback. */
.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
  background-image: none !important;
  background-color: var(--pg-ui-stroke);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black' stroke='none'/%3E%3C/svg%3E") center / 19px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black' stroke='none'/%3E%3C/svg%3E") center / 19px no-repeat;
}
/* When actively following the pilgrim, the crosshair burns ember. */
.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
  background-color: var(--accent-color);
}

/* Attribution: a compact ⓘ that opens only on tap, so the licence credit never
   covers the map. Collapsed it is a glass square that matches the map controls;
   expanded it is a glass panel with readable light text (Mapbox's default
   grey-on-translucent-white was too faint to read). The ⓘ glyph is masked to a
   light tone so it reads on the dark glass. */
.mapboxgl-ctrl-attrib.mapboxgl-compact {
  min-height: 28px;
  margin: 0 10px 0 0; /* float clear of the right edge, like the other controls */
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--edge-light), var(--shadow-sm);
}
.mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-inner { color: var(--text-secondary); font-size: 11px; line-height: 1.55; }
.mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-inner a { color: var(--text-primary); text-decoration: underline; }
.mapboxgl-ctrl-attrib-button {
  background-image: none !important;
  background-color: var(--text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.custom-map-layer-selector.panel-hidden { display: none !important; }
.custom-map-layer-selector {
  position: absolute;
  top: 10px;
  right: 50px;
  z-index: 10;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  font-family: var(--font-title);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
  /* never spill off the right controls / past the viewport edge */
  max-width: calc(100vw - 62px);
}
/* On phones the panel becomes a near-full-width sheet under the header, so the
   base-map thumbs and overlay rows always fit (it used to hide this by opening
   collapsed — that was the two-tap bug we removed). */
@media (max-width: 560px) {
  .custom-map-layer-selector {
    left: 10px;
    right: 10px;
    top: 56px;   /* drop below the 3D / locate controls so nothing overlaps */
    min-width: 0;
    max-width: none;
  }
}
.map-flyout-heading {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.map-flyout-divider { height: 1px; background: var(--border-color); margin: 2px 0; }

/* Base maps — minimalist tiles: a calm wash of each style's tone with one clean
   hairline route across (coloured to the tile), framed in ember when chosen.
   No busy texture — the tone previews the map, the line says "a way runs here". */
.basemap-thumbs { display: flex; gap: 10px; }
.basemap-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  position: relative;
  flex: 1;
}
.basemap-thumb input { position: absolute; opacity: 0; pointer-events: none; }
.thumb-swatch {
  width: 100%;
  height: 50px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  display: block;
  color: #2DD4BF;   /* the route colour; set per tile below */
}
/* one clean hairline route, shared across all three tiles via currentColor */
.thumb-swatch::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%; top: 56%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.9;
  transform: rotate(-11deg);
}
.basemap-thumb:hover .thumb-swatch { transform: translateY(-1px); border-color: var(--border-color-strong); }
.basemap-thumb input:checked + .thumb-swatch {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1.5px rgba(var(--accent-color-rgb), 0.5);
}
/* selected — a small, quiet ember dot */
.basemap-thumb input:checked + .thumb-swatch::after {
  content: "";
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(var(--bg-secondary-rgb), 0.55);
}
.basemap-thumb input:focus-visible + .thumb-swatch { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.thumb-label { font-size: 11px; letter-spacing: 0.2px; color: var(--text-muted); transition: color var(--transition-fast); }
.basemap-thumb input:checked ~ .thumb-label { color: var(--accent-color); font-weight: 600; }

/* the three tones — calm two-stop washes; each sets the route's currentColor */
.thumb-dark { background: linear-gradient(158deg, #1b2742 0%, #0c1322 100%); color: #2DD4BF; }
.thumb-topo { background: linear-gradient(158deg, #e8dfc9 0%, #d4c6a4 100%); color: #bd6a39; }
.thumb-sat  { background: linear-gradient(150deg, #44573b 0%, #4f5b48 50%, #3b5570 100%); color: rgba(255, 255, 255, 0.9); }

/* Overlay rows: meaning-colour swatch + name + checkbox. */
.overlay-row {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.overlay-row .overlay-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.overlay-row input { accent-color: var(--accent-color); margin: 0; }
.overlay-swatch { width: 14px; height: 14px; border-radius: 5px; flex: 0 0 auto; position: relative; }
.swatch-network {
  background: #0a0f1a;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4);
}
.swatch-network::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 6px;
  height: 2px;
  border-radius: 2px;
  background: #2DD4BF;
  box-shadow: 0 0 4px rgba(45, 212, 191, 0.9);
}
.swatch-monastery { background: rgba(238, 90, 60, 0.16); box-shadow: inset 0 0 0 1px rgba(238, 90, 60, 0.5); }
.swatch-monastery::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: var(--pg-marker);
}
/* Story Sites — a cluster of theme dots, echoing the map legend */
.swatch-stories {
  background:
    radial-gradient(circle 3px at 30% 35%, #ee7a3c 0 3px, transparent 3px),
    radial-gradient(circle 3px at 68% 30%, #e8b35c 0 3px, transparent 3px),
    radial-gradient(circle 3px at 38% 70%, #84cdb1 0 3px, transparent 3px),
    radial-gradient(circle 3px at 72% 66%, #c98bb0 0 3px, transparent 3px);
  box-shadow: inset 0 0 0 1px var(--border-color);
}
.swatch-camping { background: rgba(var(--pg-success-rgb), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--pg-success-rgb), 0.55); }
.swatch-camping::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 7px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--pg-success); /* verdigris — matches the map's camp badges */
}

/* ══════════════════════════════════════════════════════════════════════════
   Companions — Phase 0 prototype. A full-screen sheet over the map (the app
   header hides; the floating tab bar stays). Themed to the shipped palette —
   ember CTAs, midnight-navy ground, turquoise eyebrows — not the light mock.
   ══════════════════════════════════════════════════════════════════════════ */
.companions-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* over the map, under the tab bar (100) */
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--accent-color-rgb), 0.10), transparent 55%),
    var(--bg-primary);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.companions-sheet.hidden { display: none; }
body.companions-open .app-header { display: none; }
.pc-flecha { display: inline-block; vertical-align: middle; }

.pc-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pc-scroll > .pc-header,
.pc-scroll > .pc-list { max-width: 560px; margin-inline: auto; }

/* header */
.pc-header {
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 16px;
  border-bottom: 1px solid var(--border-color);
}
.pc-header__eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-hiking);
}
.pc-header__title {
  font-family: var(--font-title); font-weight: 700; font-size: 38px; line-height: 1;
  margin: 8px 0 8px; letter-spacing: -0.02em; color: var(--text-primary);
}
.pc-header__lede { font-size: 14px; line-height: 1.5; color: var(--text-secondary); max-width: 40ch; margin: 0 0 16px; }

.pc-seg { display: flex; gap: 6px; background: var(--bg-tertiary); padding: 4px; border-radius: var(--border-radius-sm); margin-bottom: 12px; border: 1px solid var(--border-color); }
.pc-seg__btn {
  flex: 1; border: 0; background: transparent; font-family: inherit; font-weight: 600; font-size: 13.5px;
  color: var(--text-muted); padding: 9px 6px; border-radius: var(--radius-xs); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: var(--transition-fast);
}
.pc-seg__btn.is-on { background: var(--accent-color); color: #1a1206; box-shadow: 0 2px 10px -3px rgba(var(--accent-color-rgb), 0.6); }
.pc-seg__n { font-size: 10.5px; font-weight: 700; opacity: 0.8; background: rgba(255, 255, 255, 0.12); padding: 1px 6px; border-radius: var(--radius-pill); }
.pc-seg__btn.is-on .pc-seg__n { background: rgba(0, 0, 0, 0.16); }

.pc-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.pc-chip {
  border: 1px solid var(--border-color); background: var(--pg-chip); color: var(--text-secondary);
  font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: var(--radius-pill);
  cursor: pointer; transition: var(--transition-fast);
}
.pc-chip:hover { border-color: var(--border-color-strong); color: var(--text-primary); }
.pc-chip.is-on { background: var(--accent-hiking); color: #08130e; border-color: var(--accent-hiking); }

/* list */
.pc-list { padding: 16px 16px calc(110px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }

/* card */
.pc-card {
  text-align: left; width: 100%; border: 1px solid var(--border-color); background: var(--bg-elevated);
  border-radius: var(--border-radius-md); padding: 15px 15px 14px; cursor: pointer; font-family: inherit; color: inherit;
  box-shadow: var(--shadow-sm); animation: pcRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.pc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-color-strong); }
.pc-card:active { transform: translateY(0); }
@keyframes pcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.pc-card__top { display: flex; gap: 13px; align-items: flex-start; }
.pc-card__head { flex: 1; min-width: 0; }
.pc-card__route { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-hiking); }
.pc-card__name { font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1.12; margin: 3px 0 4px; letter-spacing: -0.01em; color: var(--text-primary); }
.pc-card__meta { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pc-yours { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-color); border: 1px solid rgba(var(--accent-color-rgb), 0.5); border-radius: 6px; padding: 3px 6px; align-self: flex-start; }

/* signature waymarker chip */
.pc-marker {
  width: 56px; flex: 0 0 56px; aspect-ratio: 1; border-radius: 13px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fdf3ea; position: relative;
  background: linear-gradient(160deg, var(--accent-color), var(--pg-brand-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
}
.pc-marker--walking { background: linear-gradient(160deg, var(--pg-success), #2f5344); color: #eafaf3; }
.pc-marker__shell { position: absolute; top: 5px; opacity: 0.9; color: #fff; }
.pc-marker__date { font-family: var(--font-title); font-weight: 700; font-size: 13px; margin-top: 9px; letter-spacing: 0.02em; }
.pc-marker__cap { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.78; margin-top: 1px; }

/* chips row */
.pc-card__chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.pc-chips--roomy { margin: 4px 0 0; }
.pc-datachip { font-size: 11px; font-weight: 600; color: var(--accent-hiking); background: rgba(var(--accent-hiking-rgb), 0.12); padding: 4px 8px; border-radius: var(--radius-xs); }
.pc-tag { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); background: var(--pg-chip); padding: 4px 9px; border-radius: var(--radius-xs); }

.pc-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.pc-avatars { display: flex; }
.pc-avatar { width: 29px; height: 29px; border-radius: 50%; margin-left: -8px; border: 2px solid var(--bg-elevated); color: #f3f6fb; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: var(--tone, #2a4a6a); }
.pc-avatar:first-child { margin-left: 0; }
.pc-avatar--more { background: var(--bg-tertiary); color: var(--text-secondary); }
.pc-openlbl { font-size: 13px; font-weight: 600; color: var(--accent-color); display: inline-flex; align-items: center; gap: 5px; }

.pc-card__fill { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.pc-detail-fill { margin: 14px 0 4px; }
.pc-fill__track { height: 5px; background: var(--bg-tertiary); border-radius: var(--radius-pill); overflow: hidden; }
.pc-fill__val { height: 100%; border-radius: var(--radius-pill); transition: width 0.4s ease; }
.pc-fill__label { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

.pc-live { width: 7px; height: 7px; border-radius: 50%; background: var(--pg-success); box-shadow: 0 0 0 3px rgba(95, 174, 147, 0.25); display: inline-block; animation: pcPulse 1.8s infinite; }
@keyframes pcPulse { 50% { box-shadow: 0 0 0 6px rgba(95, 174, 147, 0); } }

/* start-a-company row */
.pc-start { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font-family: inherit; color: var(--text-muted); border: 1.5px dashed var(--border-color); background: transparent; border-radius: var(--border-radius-md); padding: 15px; cursor: pointer; transition: var(--transition-fast); }
.pc-start:hover { border-color: rgba(var(--accent-color-rgb), 0.6); color: var(--text-primary); }
.pc-start strong { display: block; color: var(--text-primary); font-size: 14.5px; }
.pc-start span { font-size: 12.5px; line-height: 1.4; }
.pc-start__plus { font-size: 22px; color: var(--accent-color); width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--border-radius-sm); background: rgba(var(--accent-color-rgb), 0.14); display: flex; align-items: center; justify-content: center; }

/* empty state */
.pc-empty { text-align: center; padding: 48px 20px; }
.pc-empty__mark { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: var(--border-radius-md); background: rgba(var(--accent-color-rgb), 0.16); color: var(--accent-color); display: flex; align-items: center; justify-content: center; }
.pc-empty h3 { font-family: var(--font-title); font-weight: 700; font-size: 21px; margin: 0 0 6px; color: var(--text-primary); }
.pc-empty p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; max-width: 32ch; margin: 0 auto 18px; }
.pc-empty__cta { display: inline-flex; width: auto; }

/* ── detail sheet + gate overlays (above the tab bar) ── */
.pc-sheet-wrap { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; z-index: 1150; opacity: 0; transition: opacity 0.2s ease; }
.pc-sheet-wrap.is-in { opacity: 1; }
.pc-sheet, .pc-gate { width: 100%; max-width: 480px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-bottom: 0; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pc-sheet-wrap.is-in .pc-sheet, .pc-sheet-wrap.is-in .pc-gate { transform: translateY(0); }
.pc-sheet { max-height: 92%; overflow-y: auto; padding: 10px 20px 24px; position: relative; }
.pc-sheet__grip { width: 38px; height: 4px; border-radius: var(--radius-pill); background: var(--border-color-strong); margin: 4px auto 14px; }
.pc-sheet__x { position: absolute; top: 14px; right: 16px; border: 0; background: var(--bg-elevated); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.pc-sheet__hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.pc-sheet__name { font-family: var(--font-title); font-weight: 700; font-size: 26px; line-height: 1.08; margin: 3px 0 5px; letter-spacing: -0.01em; color: var(--text-primary); }

.pc-block { margin-top: 20px; }
.pc-block__h { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-hiking); margin: 0 0 11px; }
.pc-people { display: flex; flex-direction: column; gap: 9px; }
.pc-person { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text-secondary); }
.pc-person .pc-avatar { margin: 0; width: 32px; height: 32px; border-color: var(--bg-secondary); }
.pc-person--you span { font-weight: 700; color: var(--accent-color); }

.pc-muster { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 13px; margin: 0; }
.pc-muster .pc-flecha { color: var(--accent-color); flex: 0 0 auto; margin-top: 2px; }

/* trail spine — stages as waypoints, with the map-native note */
.pc-spine { position: relative; padding-left: 6px; }
.pc-node { position: relative; padding: 0 0 20px 26px; }
.pc-node:last-child { padding-bottom: 0; }
.pc-node::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -4px; width: 2px; background: var(--border-color); }
.pc-node:last-child::before { display: none; }
.pc-node.is-done::before { background: var(--pg-success); }
.pc-node__dot { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-tertiary); border: 2px solid var(--bg-secondary); box-shadow: 0 0 0 1px var(--border-color); }
.pc-node.is-done .pc-node__dot { background: var(--pg-success); box-shadow: 0 0 0 1px var(--pg-success); }
.pc-node__dot.is-start { background: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color), 0 0 0 5px rgba(var(--accent-color-rgb), 0.22); }
.pc-node__name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pc-node__badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-color); margin-left: 9px; }
.pc-node.is-here .pc-node__badge { color: var(--pg-success); }

.pc-note { display: flex; gap: 9px; margin-top: 8px; background: rgba(var(--accent-color-rgb), 0.10); border: 1px solid rgba(var(--accent-color-rgb), 0.32); border-radius: var(--border-radius-sm); padding: 10px 11px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.pc-note strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-color); margin-bottom: 2px; }
.pc-note__pin { color: var(--accent-color); flex: 0 0 auto; margin-top: 1px; }

.pc-channel { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 15px; }
.pc-channel__note { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0 0 12px; }

.pc-sheet__cta { position: sticky; bottom: 0; margin: 22px -20px -24px; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(16, 23, 42, 0), var(--bg-secondary) 32%); }

/* buttons */
.pc-btn { font-family: inherit; font-weight: 700; font-size: 15px; border: 0; border-radius: var(--border-radius-sm); padding: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition-fast); width: 100%; }
.pc-btn--go { background: var(--accent-color); color: #1a1206; box-shadow: 0 8px 20px -8px rgba(var(--accent-color-rgb), 0.7); }
.pc-btn--go:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pc-btn--go:disabled { background: var(--bg-elevated); color: var(--text-muted); box-shadow: none; cursor: not-allowed; transform: none; }
.pc-btn--wait { background: var(--accent-hiking); color: #08130e; }
.pc-btn--leave { background: transparent; color: var(--pg-danger); border: 1.5px solid var(--pg-danger); }
.pc-btn--ghost { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color); }

/* safety gate */
.pc-gate { padding: 24px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
.pc-gate__h { font-family: var(--font-title); font-weight: 700; font-size: 23px; margin: 0 0 6px; color: var(--text-primary); }
.pc-gate__sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 18px; }
.pc-gate__list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 13px; }
.pc-gate__list li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.pc-gate__list .pc-flecha { color: var(--accent-color); flex: 0 0 auto; margin-top: 2px; }
.pc-gate__agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 13px; cursor: pointer; }
.pc-gate__agree input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent-color); flex: 0 0 auto; }
.pc-gate__row { display: flex; gap: 10px; margin-top: 16px; }
.pc-gate__row .pc-btn { flex: 1; }

@media (prefers-reduced-motion: reduce) { .companions-sheet *, .pc-sheet-wrap, .pc-sheet, .pc-gate { animation: none !important; transition: none !important; } }

/* Companions toast — floats above the sheet + its overlays */
.pc-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); z-index: 1300; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color-strong); border-radius: var(--radius-pill); padding: 11px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); max-width: 88vw; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; }
.pc-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ── Sign-in strip atop the credencial (Firebase Auth). Dark tokens. ── */
.auth-strip { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 14px; margin-bottom: 16px; }
.auth-strip-lead { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 12px; }
.auth-strip-lead strong { display: block; color: var(--text-primary); font-family: var(--font-title); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-actions .btn { flex: 1; min-width: 130px; }
.auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #f7f8fb; color: #1f2430; font-weight: 700; border: 1px solid var(--border-color); }
.auth-google:hover { background: #fff; }
.auth-g { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; font-weight: 800; font-size: 11px; }
.auth-email-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.auth-email-form input { width: 100%; padding: 11px 12px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; }
.auth-email-form input:focus { outline: none; border-color: var(--accent-color); }
.auth-email-btns { display: flex; gap: 8px; }
/* Sign in / Create account carry .btn-sm (28px, icon-sized). In this row they are
   full text buttons, so match the 38px height + radius of every other auth button. */
.auth-email-btns .btn { flex: 1; width: auto; height: 38px; border-radius: var(--border-radius-sm); }
.auth-err { font-size: 12.5px; color: var(--pg-danger); line-height: 1.4; }
.auth-strip--in { display: flex; align-items: center; gap: 11px; }
.auth-strip--in .auth-strip-text { flex: 1; min-width: 0; }
.auth-strip--in .auth-strip-text strong { display: block; font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.auth-strip--in .auth-strip-text span { display: block; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--pg-success); box-shadow: 0 0 0 3px rgba(95, 174, 147, 0.22); }

/* ── Companions (simplified): interest + WhatsApp handoff per road ── */
.co-card { cursor: default; }
.co-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border-color); }
.co-card.is-mine { border-color: rgba(var(--accent-color-rgb), 0.45); }
.co-card__head { margin-bottom: 4px; }
.co-you { color: var(--accent-color); font-weight: 700; }

.co-interest-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.co-interest-row .pc-avatars { flex: 0 0 auto; }
.co-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.co-noavatar { width: 29px; height: 29px; border-radius: 50%; border: 1.5px dashed var(--border-color-strong); display: inline-block; }

.co-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.pc-btn--wa { background: #25D366; color: #06210f; }
.pc-btn--wa:hover { filter: brightness(1.05); transform: translateY(-1px); }
.co-wa { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%2306210f'%3E%3Cpath d='M16 3C9.4 3 4 8.4 4 15c0 2.1.5 4.1 1.6 5.9L4 29l8.3-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3z'/%3E%3C/svg%3E"); }
.pc-btn--withdraw { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); font-weight: 600; font-size: 13px; padding: 11px; }
.pc-btn--withdraw:hover { color: var(--text-secondary); border-color: var(--border-color-strong); }
.co-soon { font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px 13px; }

.co-loading, .co-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

/* ── Profile: simplified (name only) + Companions tie-in ── */
.profile-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: -6px 0 16px; }
/* A little more presence on the identity hero */
.profile-avatar-lg { width: 60px; height: 60px; font-size: 21px; box-shadow: 0 6px 16px -8px rgba(var(--accent-color-rgb), 0.7), inset 0 1px 0 rgba(255,255,255,0.18); }
.profile-id-text h3 { font-size: 21px; letter-spacing: -0.01em; }

.profile-section { border-top: 1px solid var(--border-color); padding-top: 18px; margin-bottom: 20px; }
.profile-section-h { font-family: var(--font-title); font-size: 15px; color: var(--text-primary); margin: 0 0 12px; }
.pf-companions { display: flex; flex-direction: column; gap: 10px; }
.pf-muted { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }

.pf-roads { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-road { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 8px 14px 8px 12px; color: var(--text-primary); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.pf-road:hover { border-color: var(--accent-hiking); transform: translateY(-1px); }
.pf-road-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18); flex: 0 0 auto; }

.pf-companions-cta { align-self: flex-start; background: transparent; border: 1px solid var(--border-color); color: var(--accent-color); font-family: var(--font-body); font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: var(--radius-pill); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.pf-companions-cta:hover { border-color: var(--accent-color); background: rgba(var(--accent-color-rgb), 0.10); }

/* Keep the synced-state "Sign out" on one line even beside a long email */
.auth-strip--in .btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Profile road cards: the roads you've chosen + the company forming ── */
.pf-road-card { display: block; width: 100%; text-align: left; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 15px 16px; cursor: pointer; font-family: var(--font-body); color: inherit; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.pf-road-card:hover { transform: translateY(-2px); border-color: var(--accent-hiking); box-shadow: var(--shadow-md); }
.pf-road-card .pc-card__route { color: var(--accent-hiking); }
.pf-road-card__name { font-family: var(--font-title); font-size: 18px; color: var(--text-primary); margin: 3px 0 0; letter-spacing: -0.01em; }
.pf-road-card__company { display: flex; align-items: center; gap: 11px; margin: 13px 0 12px; }
.pf-road-card__company .pc-avatar { width: 26px; height: 26px; font-size: 9.5px; border-color: var(--bg-elevated); }
.pf-road-card__label { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.pf-road-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent-color); }

/* ── Profile: identity synced tag, journey ledger, and the sello coins ── */
.pf-synced { color: var(--accent-hiking); }

/* Journey ledger — the pilgrim's record: distance, Ways, sellos + the walk underway. */
.pf-ledger { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 15px 16px; margin-bottom: 20px; }
.pf-stats { display: flex; align-items: stretch; }
.pf-stat { flex: 1; text-align: center; min-width: 0; }
.pf-stat__num { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.pf-stat__num small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.pf-stat--sellos .pf-stat__num { color: var(--accent-color); }
.pf-stat__label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.pf-stat__rule { width: 1px; background: var(--border-color); flex: 0 0 auto; }
.pf-active { border-top: 1px solid var(--border-color); margin-top: 13px; padding-top: 12px; }
.pf-active__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pf-active__road { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: var(--font-body); }
.pf-active__road span { color: var(--text-muted); font-weight: 400; }
.pf-active__view { font-size: 12px; color: var(--accent-hiking); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); padding: 0; white-space: nowrap; }
.pf-active__view i { width: 14px; height: 14px; }
.pf-progress { height: 7px; background: var(--bg-tertiary); border-radius: var(--radius-pill); overflow: hidden; }
.pf-progress__fill { height: 100%; background: var(--accent-color); border-radius: var(--radius-pill); }
.pf-active__meta { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* Sello coins — the credencial as a record, not a wall. */
.pf-coins { display: flex; gap: 9px; margin-bottom: 11px; flex-wrap: wrap; }
.pf-coin { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid rgba(var(--accent-color-rgb), 0.42); box-shadow: var(--edge-light), var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--accent-color); flex: 0 0 auto; }
.pf-coin i { width: 20px; height: 20px; }
.pf-coin--more { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); font-family: var(--font-title); font-weight: 700; font-size: 13px; }
.pf-coin--ghost { background: transparent; border: 1.5px dashed var(--border-color); color: var(--text-muted); }
.pf-places { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.pf-places span { color: var(--text-muted); }

/* ── Profile photo: the identity avatar as a tappable, image-capable control ── */
.profile-avatar-lg { position: relative; border: none; padding: 0; cursor: pointer; overflow: visible; }
.profile-avatar-lg .pf-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.profile-avatar-lg.is-uploading { opacity: 0.55; pointer-events: none; }
.pf-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-color-strong); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.pf-avatar-cam i { width: 12px; height: 12px; }
.pf-edit-avatar { display: flex; justify-content: center; margin-bottom: 18px; }
/* header avatar (hidden today, but wired) shows the photo too */
#profile-avatar-initials.has-photo { width: 100%; height: 100%; }
.btn-avatar .pf-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ── Signed-out welcome: minimalist, leads with register/login ── */
.pf-welcome { text-align: center; padding: 8px 4px 4px; }
.pf-welcome__mark { display: flex; justify-content: center; margin-bottom: 12px; }
.pf-welcome__title { font-family: var(--font-title); font-size: 21px; color: var(--text-primary); margin: 0 0 6px; }
.pf-welcome__lede { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0 auto 20px; max-width: 34ch; }
.pf-welcome__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pf-textlink { background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
.pf-textlink:hover { color: var(--text-secondary); }
.pf-name-fallback { margin-top: 8px; text-align: left; border-top: 1px solid var(--border-color); padding-top: 18px; }
.pf-signedout { padding: 18px 4px 8px; }
.pf-signedout__icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; background: rgba(var(--accent-hiking-rgb), 0.14); color: var(--accent-hiking); display: flex; align-items: center; justify-content: center; }
.pf-signedout__icon i { width: 24px; height: 24px; }
.pf-signedout .walk-begin-btn { margin-top: 4px; }

/* ── Signed-in account line (quiet footer; no "synced" banner) + local nudge ── */
.pf-account { border-top: 1px solid var(--border-color); margin-top: 20px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-account__who { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-account__signout { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 12.5px; font-family: var(--font-body); cursor: pointer; white-space: nowrap; }
.pf-account__signout:hover { border-color: var(--accent-color); color: var(--accent-color); }
.pf-account--out { display: block; }
.pf-account--out .pf-account__lead { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; }

/* ── Profile toast (over the modal) ── */
.pf-toast { position: fixed; left: 50%; bottom: 120px; transform: translate(-50%, 12px); z-index: 2600; background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-color-strong); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 13px; color: var(--text-primary); font-family: var(--font-body); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 88vw; text-align: center; }
.pf-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Companions v2: rich card, departure states, and the plan-a-departure form ── */
.co-card__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.co-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; font-style: italic; }
.co-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.co-fact { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); background: var(--pg-chip); padding: 4px 9px; border-radius: var(--radius-xs); }

.co-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; flex: 0 0 auto; }
.co-badge--planning { color: #08130e; background: var(--pg-success); }
.co-badge--forming { color: var(--accent-hiking); background: rgba(var(--accent-hiking-rgb), 0.14); }

.co-card--planning { border-color: rgba(95, 174, 147, 0.45); }
.co-card--forming { border-color: rgba(var(--accent-hiking-rgb), 0.30); }

.co-departure { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 11px 12px; }
.co-cal { color: var(--accent-color); flex: 0 0 auto; margin-top: 1px; display: inline-flex; }
.co-departure__text { min-width: 0; }
.co-departure__text strong { display: block; font-size: 13.5px; color: var(--text-primary); font-family: var(--font-title); font-weight: 700; }
.co-departure__by { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* plan-a-departure form (reuses .pc-sheet-wrap / .pc-sheet) */
.co-form { padding: 10px 20px 24px; }
.co-form .pc-card__route { margin-bottom: 16px; }
.co-field { display: block; margin-bottom: 15px; }
.co-field > span { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 7px; }
.co-field > span em { font-style: normal; opacity: 0.7; }
.co-field input { width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 12px; color: var(--text-primary); font-family: var(--font-body); font-size: 15px; }
.co-field input:focus { outline: none; border-color: var(--accent-color); }
.co-field input[type="date"] { min-height: 46px; }
.co-form-err { font-size: 12.5px; color: var(--pg-danger); margin-bottom: 12px; }
.co-form .pc-btn { margin-top: 4px; }

/* Profile road card: the departure date + planning status */
.pf-road-card__date { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 2px; }
.pf-planning { color: var(--pg-success); font-weight: 700; }

/* ── Beta signals: a persistent badge by the wordmark + a one-time notice ── */
.logo-name { display: flex; align-items: center; gap: 7px; }
.beta-badge { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--accent-color); background: rgba(var(--accent-color-rgb), 0.14); border: 1px solid rgba(var(--accent-color-rgb), 0.42); padding: 3px 6px; border-radius: var(--radius-pill); }

.beta-notice { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 90; width: calc(100% - 24px); max-width: 440px; display: flex; align-items: center; gap: 12px; background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid rgba(var(--accent-color-rgb), 0.35); border-radius: var(--border-radius-md); padding: 13px 14px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.beta-notice.is-in { opacity: 1; transform: translate(-50%, 0); }
.beta-notice-text { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.beta-notice-text strong { display: block; font-family: var(--font-title); font-size: 13.5px; color: var(--text-primary); margin-bottom: 2px; }
.beta-notice-dismiss { flex: 0 0 auto; background: var(--accent-color); color: #1a1206; border: 0; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 700; font-size: 12.5px; padding: 8px 15px; cursor: pointer; white-space: nowrap; }
.beta-notice-dismiss:hover { filter: brightness(1.05); }