/* ==========================================================================
   Time & Place - UI Shell Stylesheet (v2)
   Minimal, maintainable layout with CSS Grid + CSS Variables
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HittheRoad';
  src: url('../fonts/HittheRoad.eot');
  src: url('../fonts/HittheRoad.eot?#iefix') format('embedded-opentype'),
       url('../fonts/HittheRoad.woff2') format('woff2'),
       url('../fonts/HittheRoad.woff') format('woff'),
       url('../fonts/HittheRoad.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   CSS Variables / Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Layout dimensions */
  --global-top-h: 44px;
  --global-bottom-h: 40px;
  --left-w: max(240px, 25vw);
  --left-min-w: 240px;
  --left-max-w: 66vw;
  --right-w: 320px;
  --right-min-w: 240px;
  --right-max-w: 33vw;
  --rail-w: 48px;
  --map-banner-top-h: 32px;
  --map-banner-bottom-h: 36px;

  /* Safe area insets */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Animation */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow: 350ms ease-out;

  /* Z-index layers */
  --z-map: 1;
  --z-banner: 10;
  --z-panel: 20;
  --z-rail: 25;
  --z-sheet: 30;
  --z-global: 100;
  --z-modal: 200;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Backdrop blur (feature-detected) */
  --blur-amount: 12px;

  /* UGC content type colors - shared between map markers and indicators */
  --color-story: #7cb8d8;
  --color-heritage: #b8a8c8;
  --color-event: #e07850;
  --color-media: #78c8a8;
  --color-memory: #d8b888;
  --color-document: #78b8a8;
  --color-poi: #c8a878;
  --color-collection: #a8c8b8;
  --color-geocache: #e8c840;
  --color-timecapsule: #c878d8;
  --color-achievement: #d8a840;
  --color-message: #88b8d8;
  --color-oral_history: #d89878;
  --color-streetview: #68c8c8;
  --color-guided_tour: #98d878;
  --color-listed_building: #8f7197;
  --color-listed-g1: #b8860b;
  --color-listed-g2s: #4a6fa5;
  --color-listed-g2: #8f7197;
  --color-place: #68b888;
}

/* --------------------------------------------------------------------------
   Theme: Dark (default) - Black/Grey palette
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Background hierarchy (dark to light) */
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1e1e1e;
  --bg-quaternary: #282828;
  --bg-map: #1a1a1a;

  /* Surface variants (for overlays with transparency) */
  --bg-surface: rgba(20, 20, 20, 0.85);
  --bg-surface-solid: #141414;
  --bg-overlay: rgba(10, 10, 10, 0.9);

  /* Foreground/text hierarchy (light to dark) */
  --fg-primary: #f5f5f5;
  --fg-secondary: #a0a0a0;
  --fg-tertiary: #6a6a6a;
  --fg-muted: #4a4a4a;
  --fg-inverse: #0a0a0a;

  /* Legacy text aliases */
  --text-primary: var(--fg-primary);
  --text-secondary: var(--fg-secondary);
  --text-muted: var(--fg-tertiary);
  --text-inverse: var(--fg-inverse);

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-strong: rgba(255, 255, 255, 0.15);

  /* Accent colors */
  --accent-primary: #14b8a6;
  --accent-secondary: #3a3a3a;
  --accent-success: #4ade80;
  --accent-warning: #fbbf24;
  --accent-error: #ef4444;
  --accent-info: #60a5fa;

  /* Scrollbar */
  --scrollbar-track: rgba(255, 255, 255, 0.03);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Theme: Light - White/Grey palette
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  /* Background hierarchy (light to dark) */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e8e8e8;
  --bg-quaternary: #d8d8d8;
  --bg-map: #e0e0e0;

  /* Surface variants (for overlays with transparency) */
  --bg-surface: rgba(255, 255, 255, 0.7);
  --bg-surface-solid: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.95);

  /* Foreground/text hierarchy (dark to light) */
  --fg-primary: #1a1a1a;
  --fg-secondary: #4a4a4a;
  --fg-tertiary: #7a7a7a;
  --fg-muted: #a0a0a0;
  --fg-inverse: #ffffff;

  /* Legacy text aliases */
  --text-primary: var(--fg-primary);
  --text-secondary: var(--fg-secondary);
  --text-muted: var(--fg-tertiary);
  --text-inverse: var(--fg-inverse);

  /* Borders */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-strong: rgba(0, 0, 0, 0.15);

  /* Accent colors */
  --accent-primary: #14b8a6;
  --accent-secondary: #e0e0e0;
  --accent-success: #22c55e;
  --accent-warning: #f59e0b;
  --accent-error: #dc2626;
  --accent-info: #3b82f6;

  /* Scrollbar */
  --scrollbar-track: rgba(0, 0, 0, 0.03);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar (Chrome/Safari only - Firefox uses scrollbar-color) */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
}

/* --------------------------------------------------------------------------
   App Container - CSS Grid Layout
   Rows: global_top | map_row | global_bottom
   -------------------------------------------------------------------------- */
.app-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "global-top"
    "map-row"
    "global-bottom";
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Global Top Bar
   -------------------------------------------------------------------------- */
.global-top {
  grid-area: global-top;
  background: var(--bg-surface-solid);
  border-bottom: 1px solid var(--border-color);
  z-index: var(--z-global);
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height var(--transition-normal), opacity var(--transition-normal);
}

.global-top-open .global-top {
  height: calc(var(--global-top-h) + var(--safe-top));
  opacity: 1;
}

.global-top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top) 16px 0 16px;
  height: calc(var(--global-top-h) + var(--safe-top));
  min-height: var(--global-top-h);
}

.global-top-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.global-top-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.global-top-close:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Global Bottom Bar
   -------------------------------------------------------------------------- */
.global-bottom {
  grid-area: global-bottom;
  background: var(--bg-surface-solid);
  border-top: 1px solid var(--border-color);
  z-index: var(--z-global);
}

.global-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px var(--safe-bottom) 16px;
  height: calc(var(--global-bottom-h) + var(--safe-bottom));
  min-height: var(--global-bottom-h);
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

.bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Timeline Scrubber */
.timeline-scrubber {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px;
  min-width: 0;
}

.timeline-year {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timeline-year-max {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 48px;
  text-align: right;
}

.timeline-track {
  flex: 1;
  height: 20px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.timeline-eras {
  position: absolute;
  inset: 0;
  display: flex;
}

.timeline-era {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.timeline-era.era-hover {
  opacity: 0.7;
}

.timeline-era[data-era="medieval"] { background: #8B4513; }
.timeline-era[data-era="late-medieval"] { background: #6B4226; }
.timeline-era[data-era="tudor"] { background: #B8860B; }
.timeline-era[data-era="elizabethan"] { background: #DAA520; }
.timeline-era[data-era="stuart"] { background: #CD853F; }
.timeline-era[data-era="georgian"] { background: #D2691E; }
.timeline-era[data-era="victorian"] { background: #A0522D; }
.timeline-era[data-era="modern"] { background: #6B8E23; }

/* Rail is inset by half thumb width so 0-100% positioning keeps thumb inside track */
.timeline-rail {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  bottom: 0;
}

.timeline-thumb {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: var(--accent-primary);
  border: 3px solid var(--bg-surface-solid);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2;
  pointer-events: none;
}

.timeline-track:hover .timeline-thumb {
  transform: translate(-50%, -50%) scale(1.1);
}

.timeline-track.dragging {
  cursor: grabbing;
}

.timeline-track.dragging .timeline-thumb {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 100%);
  pointer-events: none;
}

/* Timeline histogram — density bars behind eras */
.timeline-histogram {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.timeline-hist-bar {
  position: absolute;
  bottom: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

[data-theme="light"] .timeline-hist-bar {
  background: rgba(0,0,0,0.15);
}

/* Timeline tick marks — individual event positions */
.timeline-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.timeline-tick {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
}

.timeline-tick-timeline {
  background: var(--accent-primary);
  opacity: 0.8;
}

.timeline-tick-item {
  background: var(--fg-secondary);
  opacity: 0.35;
}

/* Active item highlight — shows current item's year/timespan on track */
.timeline-highlight {
  position: absolute;
  top: 5px;
  bottom: 5px;
  background: var(--text-secondary);
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
  border-radius: 4px;
  transition: left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

.timeline-highlight--point {
  width: 3px;
  opacity: 0.85;
  border-radius: 2px;
}

.timeline-highlight--ongoing {
  mask-image: linear-gradient(to right, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
  opacity: 0.75;
}

/* Timeline tooltip — floating above thumb */
.timeline-tooltip {
  position: fixed;
  z-index: 101;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 160px;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  font-size: 13px;
  line-height: 1.4;
}

.timeline-tooltip.visible {
  opacity: 1;
}

.timeline-tooltip-era {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-tooltip-year {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin: 2px 0;
}

.timeline-tooltip-events {
  border-top: 1px solid var(--border-color);
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timeline-tooltip-event {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--fg-secondary);
}

.timeline-tooltip-event-year {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 32px;
}

.timeline-tooltip-event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status indicator */
.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-success);
}

.status-ok .status-dot { background: var(--accent-success); }
.status-info .status-dot { background: var(--accent-info); }
.status-warn .status-dot { background: var(--accent-warning); }
.status-error .status-dot { background: var(--accent-error); }

/* Theme toggle */
.theme-toggle-btn,
.debug-toggle-btn,
.cache-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.theme-toggle-btn:hover,
.debug-toggle-btn:hover,
.cache-clear-btn:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.cache-clear-btn.active,
.debug-toggle-btn.active {
  color: var(--accent-color);
}

.theme-icon-light { display: none; }
.theme-icon-dark { display: block; }

[data-theme="light"] .theme-icon-light { display: block; }
[data-theme="light"] .theme-icon-dark { display: none; }

/* --------------------------------------------------------------------------
   Map Row - Contains map + overlays + banners
   -------------------------------------------------------------------------- */
.map-row {
  grid-area: map-row;
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
}

/* Map container placeholder */
.map-container {
  position: absolute;
  inset: 0;
  z-index: var(--z-map);
  background: var(--bg-map);
  -webkit-user-select: none;
  user-select: none;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 8px;
}

.map-placeholder span {
  font-size: 18px;
  font-weight: 500;
}

.map-placeholder small {
  font-size: 12px;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Map Banners (top/bottom, constrained to center band)
   -------------------------------------------------------------------------- */
.map-banner {
  position: absolute;
  left: var(--banner-left, var(--left-w));
  right: var(--banner-right, 0);
  z-index: var(--z-banner);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.blur-supported .map-banner {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.map-banner[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.map-banner-top {
  top: 0;
  height: var(--map-banner-top-h);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transform: translateY(-100%);
}

.map-banner-top[aria-hidden="false"] {
  transform: translateY(0);
}

.map-banner-bottom {
  bottom: 0;
  height: var(--map-banner-bottom-h);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transform: translateY(100%);
}

.map-banner-bottom[aria-hidden="false"] {
  transform: translateY(0);
}

.map-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 16px;
}

.map-banner-text {
  font-size: 12px;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Map Attribution Pill
   -------------------------------------------------------------------------- */
.map-attribution {
  position: absolute;
  bottom: 8px;
  left: calc(var(--left-w) + (100% - var(--left-w) - var(--right-w)) / 2);
  transform: translateX(-50%);
  z-index: var(--z-banner);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 20px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  pointer-events: none;
  transition: max-width 400ms cubic-bezier(.4,0,.2,1), padding-left 400ms cubic-bezier(.4,0,.2,1);
  max-width: 20px;
  padding-left: 0;
}
.map-attribution.expanded {
  max-width: 500px;
  padding-left: 8px;
}
.map-attribution-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}
.map-attribution-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--fg-primary);
  color: var(--fg-primary);
  font-size: 9px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  opacity: 0.7;
}
.map-attribution-text {
  white-space: nowrap;
  font-size: 11px;
  color: var(--fg-primary);
  opacity: 0;
  transition: opacity 300ms ease 100ms;
}
.map-attribution.expanded .map-attribution-text {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Panels (Left/Right) - Desktop/Tablet
   -------------------------------------------------------------------------- */
.panel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Backdrop blur support */
.blur-supported .panel {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.panel-left {
  left: 0;
  width: var(--left-w);
  border-left: none;
  overflow: visible;  /* Allow resize handle to extend; content scrolls via .panel-content */
  /* Edge highlight gradient baked into background */
  background:
    linear-gradient(to right, transparent calc(100% - 50px), rgba(255, 255, 255, 0.6) 100%),
    var(--bg-surface);
}

[data-theme="dark"] .panel-left {
  background:
    linear-gradient(to right, transparent calc(100% - 50px), rgba(0, 0, 0, 0.3) 100%),
    var(--bg-surface);
}

.panel-right {
  right: 0;
  width: var(--right-w);
  border-right: none;
}

.panel[aria-hidden="true"] {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.panel-right[aria-hidden="true"] {
  transform: translateX(100%);
}

/* Show rail as preview when dragging panel to collapse */
.panel-rail.collapse-preview {
  opacity: 1 !important;
  pointer-events: none;
}

/* Hide panel when showing collapse preview */
.panel.collapse-pending {
  opacity: 0 !important;
  pointer-events: none;
}

/* Show panel as preview when dragging rail to expand */
.panel.expand-preview {
  opacity: 1 !important;
  pointer-events: none;
  transform: none !important;
}

/* Panel header */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.panel-right .panel-header {
  flex-direction: row-reverse;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Left panel header with location info */
.panel-left .panel-header {
  align-items: flex-start;
  padding: 12px 12px 12px 16px;
}

.panel-left .panel-header .location-header {
  flex: 1;
  min-width: 0;
  padding: 0;
}

.panel-left .panel-header .location-name {
  font-size: clamp(1.625rem, 5.5vw, 2rem);
  font-weight: normal;
}

.panel-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

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

/* Close mode - when viewing UGC/POI content */
.panel-collapse-btn .icon-close {
  display: none;
}

.panel-collapse-btn.close-mode .icon-collapse {
  display: none;
}

.panel-collapse-btn.close-mode .icon-close {
  display: block;
}

/* Back icon - hidden by default */
.panel-collapse-btn .icon-back {
  display: none;
}

/* Back mode - show back arrow when navigating back to parent */
.panel-collapse-btn.back-mode .icon-collapse,
.panel-collapse-btn.back-mode .icon-close {
  display: none;
}

.panel-collapse-btn.back-mode .icon-back {
  display: block;
}

/* Prominent styling for close and back modes */
.panel-collapse-btn.close-mode,
.panel-collapse-btn.back-mode {
  background: #bd7d7d;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.panel-collapse-btn.close-mode:hover,
.panel-collapse-btn.back-mode:hover {
  background: #a86b6b;
  color: #fff;
}

.panel-collapse-btn.close-mode .icon-close,
.panel-collapse-btn.back-mode .icon-back {
  stroke-width: 2.5;
  stroke: #fff;
}

.place-debug-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
}

.place-debug-btn:hover {
  opacity: 0.8;
}

.place-debug-btn.active {
  opacity: 1;
  color: var(--text-secondary);
}

/* Search component */
/* Map search bar — overlays button group when active */
.map-search-bar {
  display: none;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.blur-supported .map-search-bar {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}
.map-search-bar.active {
  display: flex;
}
/* Keep button group as invisible spacer to maintain width */
.map-menu-group.search-open {
  visibility: hidden;
  pointer-events: none;
}
.map-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg-primary);
  font-size: 13px;
  padding: 6px 8px;
  outline: none;
  min-width: 0;
  -webkit-user-select: text;
  user-select: text;
}
.map-search-input::placeholder {
  color: var(--fg-secondary);
}
.map-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.map-search-close:hover {
  background: var(--border-color);
  color: var(--fg-primary);
}
.map-search-close svg {
  width: 18px;
  height: 18px;
}
.map-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}
.blur-supported .map-search-results {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.selected {
  background: var(--bg-secondary);
}

.search-result-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-tertiary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.search-result-icon.in-view {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-type {
  font-size: 11px;
  color: var(--fg-tertiary);
  text-transform: capitalize;
}

.search-result-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
}

.search-no-results {
  padding: 16px;
  text-align: center;
  color: var(--fg-secondary);
  font-size: 13px;
}

/* Panel content */
.panel-content {
  display: flex;
  flex-direction: column;
  min-width: 0;  /* Allow shrinking below content width in flex parent */
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;  /* Prevent scroll chaining to parent/body */
  container-type: inline-size;
}

/* Panel loading state (shown before JS populates content) */
.panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.panel-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: panel-spin 0.8s linear infinite;
}

@keyframes panel-spin {
  to { transform: rotate(360deg); }
}

.panel-nav {
  display: flex;
  gap: 4px;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.panel-nav-item {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.panel-nav-item:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.panel-nav-item.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

[data-theme="light"] .panel-nav-item.active {
  color: #fff;
}

.panel-body {
  padding: 16px;
}

.panel-section {
  margin-bottom: 20px;
}

.panel-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.panel-section p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Panel resize handle - intent detection allows scroll to work too */
.panel-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -12px;
  width: 16px;
  cursor: ew-resize;
  z-index: 1;
}

.panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 48px;
  background: var(--border-color-strong);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  opacity: 1;
}

.panel-resize-handle-left {
  right: auto;
  left: -8px;
}

/* --------------------------------------------------------------------------
   Panel Rails (collapsed state)
   -------------------------------------------------------------------------- */
.panel-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: var(--z-rail);
  width: var(--rail-w);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.blur-supported .panel-rail {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.panel-rail[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  cursor: ew-resize;
}

.panel-rail-left {
  left: 0;
  border-left: none;
}

.panel-rail-right {
  right: 0;
  border-right: none;
}

/* Visual feedback when dragging rail */
.panel-rail.dragging {
  cursor: grabbing;
}

.rail-expand-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

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

.rail-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

/* --------------------------------------------------------------------------
   Panel Grab Handle (mobile only)
   -------------------------------------------------------------------------- */
.panel-grab-handle {
  display: none;  /* Hidden on desktop */
  justify-content: center;
  padding: 12px 0 8px;
  cursor: grab;
  touch-action: none;
}

.panel-grab-handle:active {
  cursor: grabbing;
}

.panel-handle-bar {
  width: 36px;
  height: 4px;
  background: var(--border-color-strong);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  width: 100%;
  margin-bottom: 8px;
}

.btn:active {
  transform: scale(0.98);
}

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

.btn-primary:hover {
  background: #d63850;
}

.btn-danger {
  background: #c0392b;
  color: #fff;
}

.btn-danger:hover {
  background: #a93226;
}

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

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

/* --------------------------------------------------------------------------
   Action Buttons (unified button system with icons)
   -------------------------------------------------------------------------- */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  min-height: 36px;
}

.action-btn:active {
  transform: scale(0.97);
}

.action-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

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

.action-btn-primary:hover {
  background: #0d9488;
  border-color: #0d9488;
}

.action-btn-secondary {
  background: var(--bg-surface);
  color: var(--fg-secondary);
  border-color: var(--border-color);
}

.action-btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color-strong);
  color: var(--fg-primary);
}

.action-btn-danger {
  background: transparent;
  color: var(--ui-danger, #c0392b);
  border-color: var(--ui-danger, #c0392b);
}

.action-btn-danger:hover {
  background: var(--ui-danger, #c0392b);
  color: #fff;
}

.action-btn-outline {
  background: transparent;
  color: var(--fg-secondary);
  border-color: var(--border-color);
}

.action-btn-outline:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color-strong);
  color: var(--fg-primary);
}

/* Place page action bar */
.place-action-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-color);
}

.place-action-bar .action-btn {
  justify-content: center;
}

.place-action-bar .action-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.place-contribute-cta {
  padding: 16px 12px;
  border-top: 1px solid var(--border-color);
}
.place-contribute-btn {
  width: 100%;
  justify-content: center;
  font-size: 14px;
  padding: 12px 16px;
}

.place-see-all-link {
  display: block;
  padding: 8px 0 4px;
  font-size: 13px;
  color: var(--accent-primary);
  text-decoration: none;
  cursor: pointer;
}
.place-see-all-link[hidden] {
  display: none;
}
.place-see-all-link:hover {
  text-decoration: underline;
}

/* Sub-page back button — overlaid on hero */
.place-subpage-back {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
}
.place-subpage-back svg {
  flex-shrink: 0;
}
.place-subpage-back:hover {
  background: rgba(0,0,0,0.75);
}
[data-theme="light"] .place-subpage-back {
  color: var(--fg-primary);
  background: rgba(255,255,255,0.7);
}
[data-theme="light"] .place-subpage-back:hover {
  background: rgba(255,255,255,0.9);
}
/* No hero: back button as inline element */
.place-hero-container:not(:has(.media-hero, .place-hero)) .place-subpage-back {
  position: relative;
  top: auto;
  left: auto;
  margin: 8px 8px 0;
  color: var(--fg-secondary);
  background: var(--bg-secondary);
}
.place-hero-container:not(:has(.media-hero, .place-hero)) .place-subpage-back:hover {
  background: var(--bg-tertiary);
}

/* Sub-page: pull content up over hero fade */
.place-hero-container:has(.media-hero, .place-hero) + .location-content--subpage {
  margin-top: -15px;
  position: relative;
  z-index: 1;
}

/* Sub-page intro — section-title style */
.place-subpage-intro {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-secondary);
  line-height: 1.5;
  padding: 0;
  margin: 0 0 4px;
}
.place-subpage-intro a {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 600;
}
.place-subpage-intro a:hover {
  text-decoration: underline;
}

/* Sub-page contribute thumbnail */
.place-contribute-thumb {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 2px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--fg-tertiary);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.place-contribute-thumb svg {
  width: 24px;
  height: 24px;
  opacity: 0.6;
}
.place-contribute-thumb span {
  font-size: 11px;
  font-weight: 500;
}
.place-contribute-thumb:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 20,184,166), 0.08);
}
.place-contribute-thumb:hover svg {
  opacity: 1;
}

/* Sub-pages: remove scroll constraints and card wrappers */
.place-subpage .place-items,
.place-subpage .place-nearby {
  background: none;
  padding: 0;
  border-radius: 0;
  margin-top: 0;
}
.place-subpage .place-photos {
  border-top: none;
  padding-top: 0;
}
.place-subpage .place-items-list,
.place-subpage .place-nearby-list,
.place-subpage .place-collections-list {
  max-height: none;
  overflow-y: visible;
}

/* --------------------------------------------------------------------------
   Shared Form Styles (used by TapEdit, TapUGC, TapPlaceEdit)
   -------------------------------------------------------------------------- */

/* Collapsible sections */
.tap-form-section {
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
}

.tap-form-section:first-child {
  border-top: none;
  margin-top: 0;
}

.tap-form-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
  color: var(--fg-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tap-form-section-header:hover {
  color: var(--fg-primary);
}

.tap-form-section-header::before {
  content: '\25B6';
  font-size: 8px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tap-form-section.open > .tap-form-section-header::before {
  transform: rotate(90deg);
}

.tap-form-section-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.tap-form-section.open > .tap-form-section-body {
  max-height: 2000px;
  opacity: 1;
}

.tap-form-section-always > .tap-form-section-body {
  max-height: none;
  opacity: 1;
  overflow: visible;
}

/* Form fields */
.tap-form-field {
  margin-bottom: 12px;
}

.tap-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-secondary);
  margin-bottom: 4px;
}

.tap-form-field input[type="text"],
.tap-form-field input[type="url"],
.tap-form-field input[type="email"],
.tap-form-field input[type="number"],
.tap-form-field textarea,
.tap-form-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.tap-form-field input[type="text"]:focus,
.tap-form-field input[type="url"]:focus,
.tap-form-field input[type="email"]:focus,
.tap-form-field input[type="number"]:focus,
.tap-form-field textarea:focus,
.tap-form-field select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.tap-form-field select {
  cursor: pointer;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Two-column row */
.tap-form-row {
  display: flex;
  gap: 12px;
}

.tap-form-row > .tap-form-field {
  flex: 1;
}

@media (max-width: 400px) {
  .tap-form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* Location display box */
.tap-form-location {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.tap-form-location span {
  flex: 1;
  font-size: 13px;
  color: var(--fg-secondary);
  font-family: monospace;
}

/* Form action button row */
.tap-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Type selector icon buttons */
.tap-form-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tap-form-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  min-width: 56px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tap-form-type-btn .icon {
  font-size: 18px;
  line-height: 1;
}

.tap-form-type-btn .label {
  font-size: 10px;
  color: var(--fg-secondary);
  font-weight: 500;
}

.tap-form-type-btn:hover {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}

.tap-form-type-btn.active {
  border-color: var(--accent-primary);
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.tap-form-type-btn.active .label {
  color: var(--accent-primary);
}

/* Markdown help link */
.tap-md-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-tertiary);
  cursor: pointer;
  margin-top: 4px;
  transition: color var(--transition-fast);
}

.tap-md-help:hover {
  color: var(--accent-primary);
}

/* Character counter */
.field-counter {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--fg-tertiary);
  margin-top: 2px;
}

.field-counter.over-limit {
  color: var(--ui-danger, #c0392b);
  font-weight: 600;
}

/* Required field indicator */
.required {
  color: var(--ui-danger, #c0392b);
  font-weight: 700;
}

/* Form hint text */
.tap-form-hint {
  font-size: 11px;
  color: var(--fg-tertiary);
  margin-top: 4px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Responsive: Mobile Portrait (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) and (orientation: portrait) {
  :root {
    --left-w: 0;
    --right-w: 0;
  }

  /* Left panel as bottom sheet */
  .panel-left {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100% !important;
    max-width: none;
    z-index: var(--z-sheet);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    height: 12%;  /* Initial collapsed height - JS controls this */
    transition: height var(--transition-normal);
    overflow: hidden;  /* Panel clips, content scrolls */
    /* Edge highlight gradient: top of sheet, fully opaque */
    background:
      linear-gradient(to bottom, white 0%, transparent 50px),
      var(--bg-surface);
  }

  [data-theme="dark"] .panel-left {
    background:
      linear-gradient(to bottom, black 0%, transparent 50px),
      var(--bg-surface);
  }

  .blur-supported .panel-left {
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
  }

  /* Show grab handle on mobile */
  .panel-left .panel-grab-handle {
    display: flex;
  }

  /* Hide desktop-only elements */
  .panel-left .panel-collapse-btn,
  .panel-left .panel-resize-handle {
    display: none;
  }

  /* Show close/back button when viewing POI/UGC content */
  .panel-left .panel-collapse-btn.close-mode,
  .panel-left .panel-collapse-btn.back-mode {
    display: flex;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
  }

  /* Make room for close/back button in header */
  .panel-left:has(.panel-collapse-btn.close-mode) .location-header,
  .panel-left:has(.panel-collapse-btn.back-mode) .location-header {
    padding-right: 44px;
  }

  /* Adjust header for mobile - also draggable */
  .panel-left .panel-header {
    padding: 0 16px 12px;
    cursor: grab;
    touch-action: none;
  }

  .panel-left .panel-header:active {
    cursor: grabbing;
  }

  .panel-left .location-name {
    font-size: 18px;
    font-weight: 600;
  }

  /* Content fills remaining space and scrolls */
  .panel-left .panel-content {
    flex: 1;
    min-height: 0;  /* Allow flex to constrain */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Optimize during drag */
  .panel-left.dragging {
    transition: none;
    will-change: height;
  }

  /* Right panel as top sheet */
  .panel-right {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100% !important;
    max-height: 70%;
    z-index: var(--z-sheet);
    border: none;
    border-radius: 0;
    transform: translateY(-100%) !important;
    transition: transform var(--transition-normal);
    opacity: 1;
  }

  .panel-right[aria-hidden="false"] { transform: translateY(0) !important; }
  .panel-right .panel-header { flex-direction: row; }
  .panel-right .panel-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .panel-right .panel-collapse-btn, .panel-right .panel-resize-handle { display: none; }

  /* Hide rails */
  .panel-rail-left,
  .panel-rail-right {
    display: none !important;
  }

  .map-banner {
    --banner-left: 0;
    --banner-right: 0;
  }

  /* Map controls fade transition (both directions) */
  .maplibregl-ctrl-top-left,
  .maplibregl-ctrl-top-right,
  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-bottom-right,
  .map-menu,
  .map-ui-btn {
    transition: opacity var(--transition-fast);
  }

  /* Hide map controls when sheet is expanded */
  .sheet-expanded .maplibregl-ctrl-top-left,
  .sheet-expanded .maplibregl-ctrl-top-right,
  .sheet-expanded .maplibregl-ctrl-bottom-left,
  .sheet-expanded .maplibregl-ctrl-bottom-right,
  .sheet-expanded .map-menu,
  .sheet-expanded .map-ui-btn {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.visually-hidden,
.seo-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* No select during drag */
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* Map input disabled state */
.map-input-disabled .map-container {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Map UI Controls (floating buttons on map)
   -------------------------------------------------------------------------- */
.map-ui-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--bg-surface);
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.blur-supported .map-ui-btn {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.map-ui-btn:hover {
  background: var(--bg-surface-solid);
  color: var(--fg-primary);
}

.map-ui-btn:active {
  transform: scale(0.95);
}

.map-ui-btn.active {
  background: var(--accent-primary);
  color: #fff;
}

.map-ui-btn svg {
  width: 20px;
  height: 20px;
}

/* Map UI buttons positioning - relative to usable viewport */
#layer-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

#location-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
}

#location-btn.tracking {
  background: var(--accent-primary);
  color: #fff;
}

#location-btn.tracking svg {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.location-marker {
  position: relative;
  width: 40px;
  height: 40px;
}

.location-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #3b82f6;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 2;
}

.location-marker-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  background: #3b82f6;
  opacity: 0.25;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: location-pulse 2s ease-out infinite;
  z-index: 1;
}

.location-marker-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 30px;
  background: linear-gradient(to top, rgba(59, 130, 246, 0.5), transparent 90%);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}

@keyframes location-pulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Top-Center Map Menu
   -------------------------------------------------------------------------- */
.map-menu {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-menu-group {
  display: flex;
  gap: 2px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
}

.blur-supported .map-menu-group {
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.map-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.map-menu-btn:hover {
  background: var(--border-color);
  color: var(--fg-primary);
}

.map-menu-btn.active {
  background: var(--accent-primary);
  color: #fff;
}

.map-menu-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.map-menu-label {
  display: inline;
}

/* Hide 3D button when not supported */
.map-menu-btn[data-menu="3d"].hidden {
  display: none;
}

/* Compact mode - icons only */
.map-menu.compact .map-menu-label {
  display: none;
}

.map-menu.compact .map-menu-btn {
  padding: 8px;
}

/* Dropdowns */
.map-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-surface);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 10;
}

.map-menu-dropdown[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Raster overlay opacity slider */
.raster-overlay-opacity-control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  transition: none;
}

/* During slider drag: fade away other items so the map is visible underneath */
.map-menu-dropdown.slider-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Fade direct children that are not (and don't contain) the opacity slider */
.map-menu-dropdown.slider-active > :not(.raster-overlay-opacity-control):not(:has(.raster-overlay-opacity-control)) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
/* Inside the section that contains the slider, fade everything except the slider */
.map-menu-dropdown.slider-active > .dropdown-section > :not(.raster-overlay-opacity-control) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.map-menu-dropdown.slider-active > .dropdown-section {
  border-color: transparent;
  transition: border-color 0.2s ease;
}
/* The slider row itself gets its own translucent backdrop */
.map-menu-dropdown.slider-active .raster-overlay-opacity-control {
  background: var(--bg-surface);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-radius: var(--radius-md);
}
.raster-overlay-opacity-control label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.raster-opacity-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.raster-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 2px solid var(--bg-surface-solid);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
.raster-opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 2px solid var(--bg-surface-solid);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}

.dropdown-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

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

.dropdown-title {
  padding: 4px 12px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--fg-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
  min-height: 66px;
}

/* Thumbnail for map previews */
.dropdown-item-thumb {
  width: 80px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: var(--border-color);
  flex-shrink: 0;
  overflow: hidden;
}

.dropdown-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropdown-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}

.dropdown-item:hover {
  background: var(--border-color);
}

.dropdown-item.active {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  color: var(--accent-primary);
  font-weight: 500;
}

.dropdown-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dropdown-item.disabled:hover {
  background: transparent;
}

/* Dropdown item with inline select (e.g., OS Map with style selector) */
.dropdown-item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item-with-select .os-style-select {
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  cursor: pointer;
}

.dropdown-item.nearby {
  color: var(--fg-tertiary);
  font-style: italic;
}

.dropdown-item.nearby:hover {
  color: var(--fg-primary);
}

.dropdown-item-year {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-secondary);
  white-space: nowrap;
}

.dropdown-item-name {
  font-size: 14px;
  line-height: 1.3;
}

/* Responsive: compact mode on narrow viewports */
@media (max-width: 600px) {
  .map-menu .map-menu-label {
    display: none;
  }

  .map-menu .map-menu-btn {
    padding: 8px;
  }
}

/* --------------------------------------------------------------------------
   Layer Customizer (Right Panel Content)
   -------------------------------------------------------------------------- */
.layer-customizer {
  padding: 0;
}

.layer-group {
  border-bottom: 1px solid var(--border-color);
}

.layer-group:last-child {
  border-bottom: none;
}

.layer-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.layer-group-header:hover {
  background: var(--border-color);
}

.layer-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.layer-group-chevron {
  color: var(--fg-tertiary);
  transition: transform var(--transition-fast);
}

.layer-group.collapsed .layer-group-chevron {
  transform: rotate(-90deg);
}

.layer-group-items {
  padding: 0 8px 8px;
}

.layer-group.collapsed .layer-group-items {
  display: none;
}

/* Layer item */
.layer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.layer-item:hover {
  background: var(--border-color);
}

.layer-item-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.layer-item-checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.layer-item-checkbox .checkmark {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color-strong);
  border-radius: 4px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  pointer-events: none; /* Allow clicks to pass through to the input behind */
}

/* Radio button style (for exclusive groups like basemaps) */
.layer-item-checkbox input[type="radio"] + .checkmark {
  border-radius: 50%;
}

.layer-item-checkbox input:checked + .checkmark {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Radio inner dot instead of checkmark */
.layer-item-checkbox input[type="radio"]:checked + .checkmark::after {
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 50%;
  background: #fff;
  transform: none;
}

.layer-item-checkbox .checkmark::after {
  content: '';
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.layer-item-checkbox input:checked + .checkmark::after {
  display: block;
}

.layer-item-label {
  font-size: 13px;
  color: var(--fg-primary);
  flex: 1;
  -webkit-user-select: none;
  user-select: none;
}

.layer-item-opacity {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-quaternary);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.layer-item:hover .layer-item-opacity,
.layer-item-opacity:focus {
  opacity: 1;
}

.layer-item-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
}

.layer-item-opacity::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: none;
}

/* Layer info badge */
.layer-item-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--bg-quaternary);
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Radar distance control */
.layer-item-radar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radar-distance-control {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 30px;
  padding: 4px 0;
}

.radar-distance-input {
  width: 60px;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border-color-strong);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--fg-primary);
  text-align: right;
}

.radar-distance-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.radar-unit-toggle {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border-color-strong);
  border-radius: 4px;
  background: var(--bg-quaternary);
  color: var(--fg-secondary);
  cursor: pointer;
  min-width: 32px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.radar-unit-toggle:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

/* Parent layer with expandable children */
.layer-item-parent {
  margin-bottom: 2px;
}

.layer-item-parent-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.layer-item-parent-header:hover {
  background: var(--border-color);
}

.layer-item-expand {
  color: var(--fg-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.layer-item-parent.expanded .layer-item-expand {
  transform: rotate(90deg);
}

.layer-item-children {
  display: none;
  padding-left: 20px;
  border-left: 2px solid var(--border-color);
  margin-left: 20px;
  margin-top: 2px;
}

.layer-item-parent.expanded .layer-item-children {
  display: block;
}

/* Child layer items (sub-toggles under a parent) */
.layer-item-child {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 0;
}

.layer-item-child .layer-item-label {
  font-size: 12px;
  color: var(--fg-secondary);
}

.layer-item-child:hover {
  background: var(--bg-quaternary);
}

/* Indeterminate checkbox (some children checked) */
.layer-item-checkbox input:indeterminate + .checkmark {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.layer-item-checkbox input:indeterminate + .checkmark::after {
  display: block;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  border: none;
  background: #fff;
  transform: none;
}

/* Empty state */
.layer-empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--fg-tertiary);
}

.layer-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.layer-empty-state p {
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Map Container & Overlay Stack
   -------------------------------------------------------------------------- */
#map_wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
  touch-action: none;  /* Map handles its own touch gestures */
}

#map_overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--overlay-pad-top, 0);
  padding-right: var(--overlay-pad-right, 0);
  padding-bottom: var(--overlay-pad-bottom, 0);
  padding-left: var(--overlay-pad-left, 0);
  box-sizing: border-box;
}

#map_overlay.interactive {
  pointer-events: auto;
}

#map_ui {
  position: absolute;
  top: var(--ui-pad-top, 0);
  right: var(--ui-pad-right, 0);
  bottom: var(--ui-pad-bottom, 0);
  left: var(--ui-pad-left, 0);
  z-index: 20;
  pointer-events: none;
  transition: top 250ms ease-out, right 250ms ease-out, bottom 250ms ease-out, left 250ms ease-out;
}

#map_ui > * {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   MapLibre Control Positioning
   -------------------------------------------------------------------------- */
/* Transition only on desktop for panel open/close */
@media (min-width: 768px), (orientation: landscape) {
  .maplibregl-ctrl-top-left,
  .maplibregl-ctrl-top-right,
  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-bottom-right {
    transition: top 250ms ease-out, right 250ms ease-out, bottom 250ms ease-out, left 250ms ease-out;
  }
}

/* No transition on page load */
.no-transitions .maplibregl-ctrl-top-left,
.no-transitions .maplibregl-ctrl-top-right,
.no-transitions .maplibregl-ctrl-bottom-left,
.no-transitions .maplibregl-ctrl-bottom-right {
  transition: none !important;
}

.maplibregl-ctrl-top-left {
  top: var(--ui-pad-top, 0) !important;
  left: var(--ui-pad-left, 0) !important;
}

.maplibregl-ctrl-top-right {
  top: var(--ui-pad-top, 0) !important;
  right: var(--ui-pad-right, 0) !important;
}

.maplibregl-ctrl-bottom-left {
  bottom: var(--ui-pad-bottom, 0) !important;
  left: var(--ui-pad-left, 0) !important;
}

.maplibregl-ctrl-bottom-right {
  bottom: var(--ui-pad-bottom, 0) !important;
  right: var(--ui-pad-right, 0) !important;
}

/* --------------------------------------------------------------------------
   MapLibre Controls - Themed
   -------------------------------------------------------------------------- */
.maplibregl-ctrl-group {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

.maplibregl-ctrl-group button {
  background: transparent !important;
  width: 36px !important;
  height: 36px !important;
}

.maplibregl-ctrl-group button:hover {
  background: var(--border-color) !important;
}

.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--border-color) !important;
}

.maplibregl-ctrl-group .maplibregl-ctrl-icon {
  filter: var(--icon-filter, invert(1) opacity(0.7));
}

.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
  opacity: 1;
}

.maplibregl-ctrl-scale {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: 2px solid var(--fg-secondary) !important;
  border-radius: 4px !important;
  color: var(--fg-secondary) !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}

[data-theme="light"] .maplibregl-ctrl-group .maplibregl-ctrl-icon {
  filter: opacity(0.6);
}

/* --------------------------------------------------------------------------
   OpenLayers Controls - Match MapLibre styling exactly
   -------------------------------------------------------------------------- */

/* Base control positioning and transitions */
.ol-control {
  transition: top 250ms ease-out, right 250ms ease-out, bottom 250ms ease-out, left 250ms ease-out;
}

/* Force rotate to always be visible */
.ol-rotate {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Attribution positioning (zoom/rotate handled by JS for combined nav-group) */
.ol-attribution.ol-bottomright {
  top: auto !important;
  left: auto !important;
  bottom: calc(8px + var(--ui-pad-bottom, 0)) !important;
  right: calc(8px + var(--ui-pad-right, 0)) !important;
}

/* --------------------------------------------------------------------------
   OpenLayers Controls - Themed to match MapLibre exactly
   Uses shared styling approach for both map backends
   -------------------------------------------------------------------------- */

/* Combined navigation group (zoom + compass) - matches .maplibregl-ctrl-group */
.ol-nav-group {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: top 250ms ease-out, right 250ms ease-out, bottom 250ms ease-out, left 250ms ease-out;
}

.ol-nav-group button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.ol-nav-group button:hover,
.ol-nav-group button:focus {
  background: var(--bg-hover, rgba(255,255,255,0.05)) !important;
  outline: none !important;
}

.ol-nav-group button + button {
  border-top: 1px solid var(--border-color) !important;
}

/* Compass icon inside nav group */
.ol-nav-group .ol-compass {
  font-size: 20px !important;
  color: var(--text-secondary) !important;
}

/* Hide original separate OL controls when combined */
.ol-zoom[style*="display: none"],
.ol-rotate[style*="display: none"] {
  display: none !important;
}

/* Scale line - matches .maplibregl-ctrl-scale */
.ol-scale-line {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
}

.ol-scale-line-inner {
  border: 1px solid var(--fg-secondary) !important;
  border-top: 2px solid var(--fg-secondary) !important;
  border-bottom: none !important;
  color: var(--fg-secondary) !important;
  font-size: 11px !important;
  text-align: center;
  margin: 1px;
  padding: 0 4px;
}

/* Attribution - matches .maplibregl-ctrl-attrib */
.ol-attribution {
  background: var(--bg-surface) !important;
  border-radius: 4px !important;
  font-size: 11px;
  max-width: 300px;
}

.ol-attribution button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  color: var(--fg-tertiary) !important;
  cursor: pointer;
  padding: 2px 6px !important;
  width: auto !important;
  height: auto !important;
}

.ol-attribution ul {
  margin: 0;
  padding: 4px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.ol-attribution a {
  color: var(--fg-tertiary) !important;
}

/* Light theme adjustments for OL controls */
[data-theme="light"] .ol-rotate button .ol-compass {
  filter: opacity(0.6);
}

/* --------------------------------------------------------------------------
   Photo Overlay
   -------------------------------------------------------------------------- */
.tap-photo-overlay {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tap-photo-overlay img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.tap-photo-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tap-photo-close:hover {
  background: rgba(0, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   Compare Overlay
   -------------------------------------------------------------------------- */
.tap-compare-overlay {
  width: 100%;
  height: 100%;
  position: relative;
}


/* --------------------------------------------------------------------------
   Context Menu (right-click / long-press on map)
   -------------------------------------------------------------------------- */

#map-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  padding: 4px 0;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#map-context-menu.visible {
  display: block;
  animation: contextMenuIn 0.15s ease-out;
}

/* Square the corner that points to the click location */
#map-context-menu[data-corner="tl"] { border-top-left-radius: 0; }
#map-context-menu[data-corner="tr"] { border-top-right-radius: 0; }
#map-context-menu[data-corner="bl"] { border-bottom-left-radius: 0; }
#map-context-menu[data-corner="br"] { border-bottom-right-radius: 0; }

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

.context-menu-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2px;
}

.context-menu-location {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 2px;
}

.context-menu-location:empty {
  display: none;
}

.context-menu-coords {
  font-size: 11px;
  color: var(--fg-tertiary);
  font-family: 'SF Mono', Monaco, monospace;
  line-height: 1.3;
}

.context-menu-coords-wgs84 {
  color: var(--fg-tertiary);
}

.context-menu-coords-osgrid {
  color: var(--fg-secondary);
  font-weight: 500;
}

.context-menu-section {
  padding: 2px 0;
}

.context-menu-label {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 2px 6px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  min-height: 36px;
  border: none;
  background: none;
  color: var(--fg-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.context-menu-item:hover {
  background: var(--bg-tertiary);
}

.context-menu-item:active {
  background: var(--border-color);
}

svg.context-menu-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fg-secondary);
}

/* --------------------------------------------------------------------------
   Location Panel
   -------------------------------------------------------------------------- */

.location-header {
  /* Base styles - overridden by .panel-left .panel-header .location-header */
}

.location-name-row {
  line-height: 1.2;
}

.location-name {
  font-family: 'HittheRoad', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
  line-height: inherit;
  display: inline;
}

.location-type-badge {
  font-size: 10px;
  font-style: italic;
  text-transform: capitalize;
  color: var(--fg-secondary);
  background: color-mix(in srgb, var(--bg-primary) 12%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: baseline;
  margin-left: 6px;
  position: relative;
  top: -0.15em;
}

.location-name-row .favourite-btn-location {
  width: 26px;
  height: 26px;
  display: inline-flex;
  vertical-align: baseline;
  margin-left: 2px;
  position: relative;
  top: -0.1em;
}

.location-name-row .favourite-btn-location svg {
  width: 15px;
  height: 15px;
}

.location-breadcrumb {
  display: block;
  font-size: 12px;
  color: var(--ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}

.breadcrumb-inner {
  direction: ltr;
  unicode-bidi: embed;
}

.breadcrumb-item {
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.breadcrumb-item:hover {
  color: var(--ui-accent);
  text-decoration: underline;
}

.breadcrumb-item.current {
  color: var(--ui-text-subtle);
  cursor: default;
}

.breadcrumb-item.current:hover {
  color: var(--ui-text-subtle);
  text-decoration: none;
}

.breadcrumb-sep {
  color: var(--ui-text-muted);
  opacity: 0.5;
  margin: 0 2px;
  flex-shrink: 0;
}

.location-content {
  padding: 12px 16px;
}



.location-description {
  font-size: 13px;
  color: var(--ui-text-muted);
  line-height: 1.5;
  margin: 16px 0;
}

/* Place Page Content (wiki-style location pages) */
#place-page-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.place-subtitle {
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  color: var(--fg-primary);
  margin: 0;
}
.place-subtitle.has-hero {
  margin: -15px 0 0;
  text-shadow: 0 0 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.5);
}
[data-theme="light"] .place-subtitle.has-hero {
  text-shadow: 0 0 6px rgba(255,255,255,1), 0 0 12px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,0.9), 0 0 60px rgba(255,255,255,0.7);
}

/* Place hero container — sits above .location-content, no padding */
.place-hero-container {
  position: relative;
}
.place-hero-container:empty {
  display: none;
}
.place-hero-container:has(.media-hero, .place-hero) + .location-content {
  padding-top: 0;
}

/* Override default media-hero styles inside place hero container */
.place-hero-container .media-hero {
  border-radius: 0;
  margin: 0;
}
.place-hero-container .media-hero img,
.place-hero-container .place-hero img {
  max-height: 320px;
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}
.place-hero-container .media-hero-video {
  max-height: 320px;
}

/* Overlay opacity viewer slider (top of content, visible to all users) */
.overlay-viewer-opacity {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  margin: -12px -16px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}
.overlay-viewer-opacity label {
  font-size: 12px; font-weight: 500;
  color: var(--fg-secondary); white-space: nowrap;
}
.overlay-viewer-opacity .overlay-viewer-slider {
  flex: 1; height: 4px; cursor: pointer;
  accent-color: var(--accent-primary);
}

/* Mod banner & hierarchy inside hero container (above location-content) */
.place-hero-container .tap-ugc-hierarchy {
  margin: 0;
  border-radius: 0;
  padding: 8px 16px;
}
.place-hero-container .tap-mod-banner {
  border-radius: 0;
}

.place-hero {
  position: relative;
  overflow: hidden;
}

.place-hero img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.place-hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 12px;
  z-index: 1;
}

.place-etymology {
  font-size: 13px;
  font-style: italic;
  color: var(--fg-secondary);
  margin: 8px 0 12px;
}

.place-etymology strong {
  font-style: normal;
}

.place-fallthrough-note {
  font-size: 13px;
  font-style: italic;
  color: var(--fg-secondary);
  margin: 8px 0 4px;
}

.place-fallthrough-note a {
  color: var(--accent-primary);
}

.place-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-primary);
}

/* Note: .place-body shares markdown styles with .tap-ugc-body - see "Markdown Content" section */
.place-body {
  margin: 16px 0;
}

.place-section-title,
.place-body h3.place-section-title,
.place-body h4.place-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-secondary);
  margin: 0 0 12px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.place-items-count {
  font-weight: 400;
  color: var(--fg-tertiary);
}

.place-timeline {
  padding: 12px 0;
  margin-top: 12px;
}

.place-timeline-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.place-timeline-event {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.place-timeline-year {
  font-weight: 600;
  color: var(--accent-primary);
  min-width: 60px;
  flex-shrink: 0;
  text-align: center;
}

.place-timeline-text {
  color: var(--fg-primary);
}

.place-items {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-top: 12px;
}

.place-items-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 66dvh;
  overflow-y: auto;
}

@container (min-width: 500px) {
  .place-items-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Shared item card */
.item-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
  position: relative;
}

.item-card:hover {
  background: var(--bg-quaternary);
}

/* Hero variant */
.item-card.has-hero {
  padding: 0 12px 0 0;
}

.item-card-visual {
  flex-shrink: 0;
}

.item-card:not(.has-hero) .item-card-visual {
  width: 36px;
}

.item-card.has-hero .item-card-visual {
  width: 56px;
  height: 56px;
  min-height: 56px;
  overflow: hidden;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.item-card-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-card.has-hero .item-card-info {
  padding: 8px 0;
}

/* Icon variant */
.item-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-quaternary);
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--fg-primary);
}

/* Info area */
.item-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.item-card-title {
  font-size: 14px;
  color: var(--fg-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-card-meta {
  display: flex;
  align-items: center;
}

.item-card-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
  font-weight: 600;
}

.item-card-distance {
  font-size: 10px;
  color: var(--fg-secondary);
  margin-left: 6px;
}

.item-card-distance::before {
  content: '·';
  margin-right: 6px;
}

.item-card-distance:empty {
  display: none;
}

/* Badges — coloured border + label in top-right */
.item-card.has-badge {
  border-left: 3px solid var(--badge-color, var(--fg-tertiary));
  border-top: 1.5px solid color-mix(in srgb, var(--badge-color, var(--fg-tertiary)) 35%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--badge-color, var(--fg-tertiary)) 35%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--badge-color, var(--fg-tertiary)) 35%, transparent);
}


.item-card-badges {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0;
  z-index: 1;
}

.item-card-badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  line-height: 1.4;
  background: var(--badge-color, var(--fg-tertiary));
  color: white;
}

/* Badge corner radii — last child sits in the card's top-right corner */
.item-card-badge:first-child {
  border-radius: 0 0 0 4px;
}

.item-card-badge:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.item-card-badge:only-child {
  border-radius: 0 var(--radius-md) 0 4px;
}

/* Per-badge colors */
.badge-label-new       { background: color-mix(in srgb, var(--accent-primary) 35%, transparent); }
.badge-label-trending  { background: var(--accent-error); }
.badge-label-hot       { background: var(--accent-warning); color: #1a1a1a; }
.badge-label-popular   { background: var(--color-event); color: #1a1a1a; }
.badge-label-boosted   { background: var(--accent-info); }
.badge-label-collection { background: var(--bg-surface-solid); color: var(--fg-tertiary); }
.badge-label-loved     { background: var(--bg-tertiary); color: #e84060; border: 1px solid var(--border-color); padding-top: 0; padding-bottom: 0; }

.item-card.badge-new {
  --badge-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

.item-card.badge-trending {
  --badge-color: var(--accent-error);
}

.item-card.badge-hot {
  --badge-color: var(--accent-warning);
}

.item-card.badge-popular {
  --badge-color: var(--color-event);
}

.item-card.badge-boosted {
  --badge-color: var(--accent-info);
}

.item-card.badge-loved {
  --badge-color: var(--border-color);
}

.item-card.badge-collection {
  --badge-color: var(--bg-surface-solid);
}

.item-card.badge-collection > .item-card-badge {
  color: var(--fg-tertiary);
}

/* Collections (place-attached stories/thematic groups) */
.place-collections {
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}

.place-collections-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.place-collection-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-collection);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  position: relative;
}

.place-collection-card .collection-loved-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  line-height: 1;
  color: #e84060;
}

.place-collection-card:hover {
  background: var(--bg-quaternary);
  transform: translateX(2px);
}

.place-collection-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-collection);
  border-radius: 8px;
  font-size: 20px;
  flex-shrink: 0;
}

.place-collection-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.place-collection-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
}

.place-collection-time {
  font-size: 12px;
  color: var(--fg-secondary);
}

.place-collection-summary {
  font-size: 12px;
  color: var(--fg-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-collection-meta {
  font-size: 11px;
  color: var(--accent-primary);
}

/* (place-edit-section / place-actions-section removed — replaced by .place-action-bar) */

.place-item-title {
  font-size: 14px;
  color: var(--fg-primary);
}

/* Upcoming Events */
.place-events {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-top: 12px;
}

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

.place-event-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}

.place-event-card:hover {
  background: var(--bg-quaternary);
}

/* Calendar icon */
.place-event-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.place-event-cal-month {
  background: #d94334;
  color: white;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.place-event-cal-day {
  background: white;
  color: #222;
  font-size: 14px;
  font-weight: 700;
  padding: 1px 6px 2px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Event info */
.place-event-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.place-event-info .place-item-title {
  font-size: 14px;
  color: var(--fg-primary);
}

.place-event-countdown {
  font-size: 11px;
  color: var(--fg-secondary);
}

/* Urgent event styling */
.place-event-urgent {
  background: var(--color-event);
}

.place-event-urgent .place-event-cal-month {
  background: rgba(0,0,0,0.2);
}

.place-event-urgent .place-event-countdown,
.place-event-urgent .place-item-title {
  color: white;
}

/* Nearby Items */
.place-nearby {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-top: 12px;
}

.place-nearby-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

@container (min-width: 500px) {
  .place-nearby-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Nearby Photos gallery grid */
.place-photos {
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}

.place-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}

.place-photos-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background: rgba(128, 128, 128, 0.1);
}

.place-photos-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.place-photos-thumb:hover img {
  transform: scale(1.05);
}

.place-photos-thumb .media-type-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.place-photos-thumb:hover .media-video-play {
  background: rgba(0, 0, 0, 0.7);
}

/* Widget Embeds — inline sections via [[section]] shortcodes in body */
.place-widget {
  margin: 16px 0;
}
.place-widget > .place-events,
.place-widget > .place-timeline,
.place-widget > .place-collections,
.place-widget > .place-nearby,
.place-widget > .place-photos {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.place-widget > .place-items {
  margin-top: 0;
}

/* Tiles: 2-col image-forward grid */
.place-widget-tiles .place-items-list,
.place-widget-tiles .place-nearby-list {
  grid-template-columns: repeat(2, 1fr);
  max-height: none;
}
.place-widget-tiles .item-card {
  flex-direction: column;
}
.place-widget-tiles .item-card-visual {
  width: 100%;
  height: 120px;
  border-radius: 6px 6px 0 0;
}
.place-widget-tiles .item-card-info {
  padding: 8px;
}

/* Rows: compact single-line rows */
.place-widget-rows .place-items-list,
.place-widget-rows .place-nearby-list {
  grid-template-columns: 1fr;
  max-height: none;
}
.place-widget-rows .item-card {
  padding: 4px 8px;
  gap: 8px;
}
.place-widget-rows .item-card-visual {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 4px;
}
.place-widget-rows .item-card-info {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.place-widget-rows .item-card-title {
  font-size: 13px;
}
.place-widget-rows .item-card-meta,
.place-widget-rows .item-card-summary {
  display: none;
}

/* Small: reduced sizing */
.place-widget-small .item-card {
  padding: 6px 8px;
}
.place-widget-small .item-card-visual {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
.place-widget-small .item-card-title {
  font-size: 13px;
}
.place-widget-small .place-section-title {
  font-size: 12px;
}

/* Compact: hide section title, tighter spacing */
.place-widget-compact .place-section-title {
  display: none;
}
.place-widget-compact .place-timeline-events {
  gap: 4px;
}
.place-widget-compact .place-timeline-event {
  padding: 4px 0 4px 12px;
}
.place-widget-compact .place-events-list {
  gap: 4px;
}

/* Places in View */
.places-in-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.places-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.places-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.places-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-secondary);
  margin: 0;
}

.places-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.place-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--fg-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.place-chip:hover {
  background: var(--accent-primary);
  color: var(--fg-inverse);
}

.place-type {
  font-size: 0.8em;
  opacity: 0.6;
}

.places-empty {
  font-size: 13px;
  color: var(--ui-text-subtle);
  font-style: italic;
  margin: 0;
}

/* Panel Actions */
.panel-actions {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ui-border);
}

.panel-actions .btn {
  width: 100%;
}

/* Panel Footer */
.panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ui-border);
  margin-top: auto;
}

.panel-footer .theme-toggle-btn {
  margin-left: auto;
}

/* ==========================================================================
   TapEdit - Contribution Wizard Styles
   ========================================================================== */

/* Wizard container */
.contribute-wizard {
  padding: 0 16px 16px;
}

/* ── Step indicator ── */
.contribute-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 0 20px;
}

.contribute-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.contribute-step-dot.active {
  color: #fff;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.contribute-step-dot.done {
  color: #fff;
  background: #4caf50;
  border-color: #4caf50;
}

.contribute-step-line {
  width: 32px;
  height: 2px;
  background: var(--border-color);
  flex-shrink: 0;
}

/* ── Context block ── */
.contribute-context {
  text-align: center;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.contribute-context-label {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--fg-tertiary);
}

.contribute-context-location {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--fg-secondary);
}

.contribute-context-name {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.3;
}

.contribute-context-hint {
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: var(--fg-tertiary);
  line-height: 1.4;
}

/* ── Type grid ── */
.contribute-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.contribute-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.contribute-type-btn:hover {
  border-color: var(--fg-tertiary);
  background: var(--bg-quaternary);
}

.contribute-type-btn.selected {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.contribute-type-btn.selected .contribute-type-label {
  color: var(--accent-primary);
}

.contribute-type-icon {
  font-size: 24px;
  line-height: 1;
}

.contribute-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
}

.contribute-type-desc {
  font-size: 11px;
  color: var(--fg-tertiary);
  line-height: 1.3;
}

/* Last item spans full width if odd count */
.contribute-type-grid > .contribute-type-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ── Navigation bar ── */
.contribute-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  margin-top: 16px;
}

.contribute-nav .action-btn {
  flex: 1 1 100px;
  justify-content: center;
}

/* ── Details step ── */
.contribute-details {
  /* Uses TapFormBuilder fields, no extra wrapper styles needed */
}

/* ── Upload dropzone ── */
.contribute-upload-area {
  margin-top: 4px;
}

.contribute-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.contribute-upload-dropzone:hover {
  border-color: var(--fg-tertiary);
  background: var(--bg-tertiary);
}

.contribute-upload-dropzone.dragover {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
}

.contribute-upload-icon {
  font-size: 28px;
  line-height: 1;
}

.contribute-upload-text {
  font-size: 13px;
  color: var(--fg-secondary);
}

.contribute-upload-hint {
  font-size: 11px;
  color: var(--fg-tertiary);
}

/* ── File list ── */
.contribute-file-list {
  margin-top: 8px;
}

.contribute-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.contribute-file-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.contribute-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-quaternary);
  font-size: 18px;
}

.contribute-file-info {
  flex: 1;
  min-width: 0;
}

.contribute-file-name {
  display: block;
  font-size: 12px;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contribute-file-size {
  font-size: 11px;
  color: var(--fg-tertiary);
}

.contribute-file-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--fg-tertiary);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.contribute-file-remove:hover {
  color: var(--accent-primary);
  background: var(--bg-quaternary);
}

/* ── Location picker (heritage) ── */
.contribute-location {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 6px;
}

.contribute-location-coords {
  font-family: monospace;
  font-size: 13px;
  color: var(--fg-primary);
}

.contribute-location-source {
  font-size: 11px;
  color: var(--fg-tertiary);
  font-style: italic;
}

.contribute-location-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.action-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 28px;
  gap: 4px;
}

/* ── Draggable pin marker (shared by contributor + guest wizard) ── */
/* 36px rounded square rotated -45deg → ~51px bounding box.           */
/* Sharp corner (bottom-left pre-rotation) points straight down.      */
/* anchor: 'bottom' in MapLibre = bottom edge of element = map point. */
/* Outer element: NO position:relative (MapLibre gotcha — causes zoom drift). */
.maplibregl-marker:has(.tap-draggable-pin) {
  z-index: 9999 !important;
}
.tap-draggable-pin {
  --pin-square: 40px;
  --pin-color: var(--accent-primary);
  width: 58px;
  height: 58px;
  cursor: grab;
}
.tap-draggable-pin:active { cursor: grabbing; }
/* Inner wrapper provides positioning context for children */
.tap-draggable-pin .pin-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.tap-draggable-pin .pin-shape {
  position: absolute;
  width: var(--pin-square);
  height: var(--pin-square);
  top: calc(50% - var(--pin-square) / 2);
  left: calc(50% - var(--pin-square) / 2);
  background: var(--pin-color);
  border: 2.5px solid white;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  box-sizing: border-box;
}
/* Pulsing ring to draw attention */
.tap-draggable-pin .pin-shape::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 0 0 var(--pin-color);
  animation: tap-pin-pulse 2s ease-out infinite;
}
@keyframes tap-pin-pulse {
  0%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pin-color) 50%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100%{ box-shadow: 0 0 0 12px transparent; }
}
.tap-draggable-pin .pin-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
  z-index: 1;
}
.tap-draggable-pin .pin-icon img {
  filter: brightness(0) invert(1);
}

body.tap-picking-point .maplibregl-canvas {
  cursor: crosshair !important;
}

/* ── Contact step ── */
.contribute-contact {
  text-align: center;
  margin-bottom: 16px;
}

.contribute-contact-heading {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--fg-primary);
}

.contribute-contact-text {
  margin: 0;
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.5;
}

.contribute-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  color: var(--fg-secondary) !important;
  cursor: pointer;
}

.contribute-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Thank you ── */
.contribute-thank-you {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.contribute-success-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  font-size: 32px;
  line-height: 64px;
  color: #fff;
  background: #4caf50;
  border-radius: 50%;
}

.contribute-thank-you h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--fg-primary);
}

.contribute-thank-you p {
  margin: 0 0 8px;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.contribute-thank-you-detail {
  margin-bottom: 20px !important;
}

.contribute-thank-you .action-btn {
  margin-top: 8px;
}

/* Time section */
/* ── Time input (Year/Era mutual-exclusive) ── */
.tap-time-container {
  max-width: 480px;
  margin: 0 auto;
}

.tap-time-initial-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  max-height: 56px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

.tap-time-initial-row.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.tap-time-year-entry {
  width: 150px;
  padding: 9px 6px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 22px;
  -moz-appearance: textfield;
  transition: opacity 0.2s, border-style 0.2s;
}

.tap-time-year-entry::-webkit-inner-spin-button,
.tap-time-year-entry::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tap-time-or-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-tertiary);
  user-select: none;
  flex-shrink: 0;
}

.tap-time-era-select {
  flex: 1;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-secondary);
  font-size: 12px;
  transition: opacity 0.2s, border-style 0.2s;
}

.tap-time-inactive {
  opacity: 0.4;
  border-style: dashed;
}

.tap-time-inactive:focus {
  opacity: 1;
  border-style: solid;
}

.tap-time-hint {
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--fg-tertiary);
  margin-top: 6px;
  max-height: 24px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}

.tap-time-hint.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* Expanded section — smooth reveal */
.tap-time-expanded {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.tap-time-expanded.visible {
  max-height: 300px;
  opacity: 1;
  overflow: visible;
}

.tap-time-range-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tap-time-range-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tap-time-range-side.end.empty {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.tap-time-range-side.end.empty:hover,
.tap-time-range-side.end.empty:focus-within {
  opacity: 1;
}

.tap-time-range-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tap-time-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.tap-time-year {
  width: 100%;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 20px;
  -moz-appearance: textfield;
}

.tap-time-year::-webkit-inner-spin-button,
.tap-time-year::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tap-time-year-wrap {
  position: relative;
  display: block;
}

.tap-time-year-wrap .tap-time-year-entry,
.tap-time-year-wrap .tap-time-year {
  padding-right: 24px;
}

.tap-time-year-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--fg-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tap-time-year-wrap:hover .tap-time-year-clear,
.tap-time-year-wrap:focus-within .tap-time-year-clear {
  opacity: 0.5;
}

.tap-time-year-clear:hover {
  opacity: 1 !important;
  color: var(--accent-error, #ef4444);
}

.tap-time-month {
  width: 100%;
  padding: 5px 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 12px;
  text-align: center;
  text-align-last: center;
}

.tap-time-day {
  width: 100%;
  padding: 5px 4px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 13px;
  -moz-appearance: textfield;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  max-height: 34px;
}

.tap-time-day::-webkit-inner-spin-button,
.tap-time-day::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tap-time-day.hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  margin: 0;
}

.tap-time-clock {
  width: 100%;
  padding: 5px 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 12px;
  text-align: center;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  max-height: 34px;
}

.tap-time-clock::placeholder {
  color: var(--fg-tertiary, #999);
  font-style: italic;
  font-size: 11px;
}

.tap-time-clock.hidden {
  opacity: 0;
  max-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  margin: 0;
}

.tap-time-clock-hint {
  font-size: 10px;
  text-align: center;
  min-height: 14px;
  line-height: 14px;
  transition: opacity 0.2s ease, max-height 0.2s ease;
}

.tap-time-clock-hint.valid {
  color: var(--color-success, #2e7d32);
}

.tap-time-clock-hint.invalid {
  color: var(--color-error, #d32f2f);
}

.tap-time-clock-hint.hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.tap-time-error {
  border-color: var(--color-error, #d32f2f) !important;
  background: rgba(211, 47, 47, 0.05);
}

.tap-time-ongoing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg-secondary);
  cursor: pointer;
}

.tap-time-ongoing.hidden {
  display: none;
}

.tap-time-ongoing input[type="checkbox"] {
  accent-color: var(--accent-primary);
  margin: 0;
}

/* Responsive: narrow panels */
@media (max-width: 350px) {
  .tap-time-initial-row {
    flex-direction: column;
    gap: 4px;
  }

  .tap-time-or-pill {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tap-time-or-pill::before,
  .tap-time-or-pill::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
  }

  .tap-time-year-entry {
    width: 100%;
  }

  .tap-time-era-select {
    max-width: none;
    width: 100%;
  }

  .tap-time-range-controls {
    grid-template-columns: 1fr;
  }
}

/* Body state classes */
body.tap-edit-active {
  /* Prevent accidental navigation */
}

/* ==========================================================================
   TapAuth - Authentication UI Styles
   ========================================================================== */

/* Login button in footer */
.user-menu-container {
  margin-right: 12px;
}

.login-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.login-btn:hover {
  background: var(--bg-quaternary);
}

/* User menu */
.user-menu {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--fg-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.user-menu-btn:hover {
  background: var(--bg-tertiary);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-primary);
  border-radius: 50%;
}

.user-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: 180px;
  margin-bottom: 8px;
  padding: 8px 0;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.user-menu-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border-color);
}

.user-menu-header strong {
  font-size: 14px;
  color: var(--fg-primary);
}

.user-level {
  font-size: 11px;
  color: var(--fg-tertiary);
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--fg-secondary);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.user-menu-item:hover {
  background: var(--bg-tertiary);
  color: var(--fg-primary);
}

/* Login Modal */
.tap-auth-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.auth-modal-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 20px;
  padding: 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 1;
  color: var(--fg-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.auth-modal-close:hover {
  color: var(--fg-primary);
}

.auth-modal-body h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--fg-primary);
}

.auth-modal-intro {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--fg-secondary);
}

/* Auth form */
.auth-form .auth-field {
  margin-bottom: 20px;
}

.auth-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
}

.auth-form input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--fg-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.auth-form .btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
}

.auth-message {
  margin-top: 16px;
  padding: 12px;
  font-size: 13px;
  border-radius: var(--radius-md);
}

.auth-message-success {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.auth-message-error {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.auth-note {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--fg-tertiary);
  text-align: center;
}


/* ============================================================================
   TapUGC - UGC Display Styles
   ============================================================================ */

.tap-ugc-detail {
  padding: 0;
}


.tap-ugc-back-link {
  display: inline-block;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--accent-primary);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.tap-ugc-back-link:hover {
  background: var(--bg-tertiary);
}

.tap-ugc-hierarchy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.tap-ugc-hierarchy-label {
  color: var(--fg-tertiary);
}

.tap-ugc-hierarchy-parent {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.tap-ugc-hierarchy-parent:hover {
  text-decoration: underline;
}

.tap-ugc-detail-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.tap-ugc-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  border-radius: 12px;
}

.tap-ugc-date {
  font-size: 13px;
  color: var(--fg-primary);
  font-weight: 600;
  font-style: italic;
}

.tap-ugc-timespan {
  font-weight: 400;
  color: var(--fg-secondary);
}

.tap-ugc-summary {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-primary);
}

.tap-ugc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: #1E90FF;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s;
}

.tap-ugc-link span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tap-ugc-link::before {
  content: none;
}

.item-card.tap-ugc-link {
  display: flex;
  padding: 10px 12px;
  color: inherit;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
}

.item-card.tap-ugc-link::before {
  content: none;
}

.tap-ugc-link::after {
  content: '↗';
  font-size: 10px;
  opacity: 0.8;
}

.item-card.tap-ugc-link::after {
  content: none;
}

.tap-ugc-link:hover {
  background: #1a7fd4;
  text-decoration: none;
}

.item-card.tap-ugc-link:hover {
  background: var(--bg-quaternary);
}

.tap-ugc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tap-ugc-wiki-link { background: #636978; align-self: flex-start; }
.tap-ugc-wiki-link::before { content: none; }
.tap-ugc-wiki-link:hover { background: #52565f; }
.tap-ugc-link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
}

.tap-ugc-wiki-link .tap-ugc-link-icon {
  filter: brightness(0) invert(1);
}

.tap-ugc-info-row {
  margin: 8px 0;
  font-size: 13px;
  color: var(--fg-secondary);
}

.tap-ugc-info-row strong {
  color: var(--fg-primary);
}

/* ============================================================================
   Markdown Content - shared styles for rendered markdown
   Used by: .tap-ugc-body, .place-body
   ============================================================================ */

.tap-ugc-body,
.place-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-primary);
}

.tap-ugc-body p,
.place-body p {
  margin: 0 0 10px;
}

.tap-ugc-body p:last-child,
.place-body p:last-child {
  margin-bottom: 0;
}

.tap-ugc-body h1,
.tap-ugc-body h2,
.tap-ugc-body h3,
.tap-ugc-body h4,
.place-body h1,
.place-body h2,
.place-body h3,
.place-body h4 {
  font-family: 'HittheRoad', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 14px 0 8px;
  line-height: 1.3;
  font-weight: lighter;
  letter-spacing: -0.6px;
  color: var(--accent-primary);
}

.tap-ugc-body h1, .place-body h1 { font-size: 22px; }
.tap-ugc-body h2, .place-body h2 { font-size: 20px; }
.tap-ugc-body h3, .place-body h3 { font-size: 18px; }
.tap-ugc-body h4, .place-body h4 { font-size: 16px; }

.tap-ugc-body p,
.tap-ugc-body ul,
.tap-ugc-body ol,
.tap-ugc-body blockquote,
.place-body p,
.place-body ul,
.place-body ol,
.place-body blockquote {
  margin-left: 6px;
}

.tap-ugc-body ul,
.tap-ugc-body ol,
.place-body ul,
.place-body ol {
  margin: 8px 0;
  padding-left: 1.4em;
}

.tap-ugc-body li,
.place-body li {
  margin: 3px 0;
  padding: 0;
  line-height: 1.5;
}

.tap-ugc-body ul,
.place-body ul {
  list-style-type: disc;
}

.tap-ugc-body ol,
.place-body ol {
  list-style-type: decimal;
}

.tap-ugc-body blockquote,
.place-body blockquote {
  margin: 10px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--border-color, rgba(255,255,255,0.15));
  color: var(--fg-secondary, #aaa);
  font-style: italic;
}

.tap-ugc-body a,
.place-body a {
  color: var(--accent-primary);
  text-decoration: none;
}

.tap-ugc-body a:hover,
.place-body a:hover {
  text-decoration: underline;
}

/* Specific margins (different per context) */
.tap-ugc-body {
  margin: 14px 0;
}

.tap-ugc-creator {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--fg-tertiary);
}

/* Stats display (admin only) */
.tap-ugc-stats,
.tap-poi-stats {
  display: flex;
  gap: 12px;
  margin: 12px 0;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg-secondary);
}

.tap-ugc-stats:empty,
.tap-poi-stats:empty {
  display: none;
}

.tap-ugc-stat,
.tap-poi-stat {
  white-space: nowrap;
}

.tap-ugc-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tap-ugc-actions .action-btn {
  flex: 1 1 100px;
  justify-content: center;
}

/* Active item marker - elevate and add pulse to the pin itself */
.maplibregl-marker:has(.tap-ugc-marker-active),
.ol-overlay-container:has(.tap-ugc-marker-active) {
  z-index: 9999 !important;
}

.tap-ugc-marker-active {
  z-index: 9999 !important;
}

/* Pulse ring around active marker */
.tap-ugc-marker-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
  animation: tap-ugc-marker-pulse 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes tap-ugc-marker-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(59, 130, 246, 0);
  }
}

/* Favourite heart badge on markers */
.tap-marker-fav {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e74c6f;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
  pointer-events: none;
}

/* Hover state on marker (from extent hover or direct hover) */
.tap-ugc-marker-hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Highlight pulse for visible markers (when hovering sidebar items) */
.tap-ugc-marker-highlight {
  animation: marker-highlight-pulse 1s ease-out infinite;
}

@keyframes marker-highlight-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0,0,0,0.3);
  }
  15% {
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0,0,0,0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 2px 6px rgba(0,0,0,0.3);
  }
}

/* Time-based visibility (filtered by timeline) */
.tap-ugc-time-hidden {
  display: none !important;
}

/* ============================================================================
   PLACARDS (Collection markers)
   ============================================================================ */

.tap-ugc-placard-wrapper {
  width: auto;
  height: auto;
  pointer-events: none;
}

.tap-ugc-placard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: var(--placard-color, var(--color-collection));
  border: 2px solid white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 10s ease, transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 60px;
  max-width: 120px;
  position: relative;
}

.tap-ugc-placard:hover {
  opacity: 0.95 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tap-ugc-placard-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tap-ugc-placard-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.tap-ugc-placard-title {
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
  /* Embossed effect: light highlight above, dark shadow below */
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.tap-ugc-placard-date {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin-top: 2px;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Contrast mode - dark text for light backgrounds */
.tap-ugc-placard.tap-contrast-dark .tap-ugc-placard-icon {
  color: rgba(0, 0, 0, 0.85);
}

.tap-ugc-placard.tap-contrast-dark .tap-ugc-placard-title {
  color: rgba(0, 0, 0, 0.85);
  /* Inverse emboss: dark highlight above, light shadow below */
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.4);
}

.tap-ugc-placard.tap-contrast-dark .tap-ugc-placard-date {
  color: rgba(0, 0, 0, 0.7);
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.35);
}

.tap-ugc-placard.tap-contrast-dark {
  border-color: rgba(0, 0, 0, 0.2);
}

/* Hero image variant — full-bleed background with text overlay */
.tap-ugc-placard.has-hero {
  padding: 0;
  overflow: hidden;
  min-width: 100px;
  max-width: 140px;
  background: #111;
  border-color: rgba(255, 255, 255, 0.7);
  position: relative;
}

.tap-ugc-placard-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 80px;
}

.tap-ugc-placard-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 6px 5px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

.tap-ugc-placard.has-hero .tap-ugc-placard-title {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  font-size: 10px;
}

.tap-ugc-placard.has-hero .tap-ugc-placard-date {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Light mode: white fade instead of black */
[data-theme="light"] .tap-ugc-placard.has-hero {
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .tap-ugc-placard-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
}

[data-theme="light"] .tap-ugc-placard.has-hero .tap-ugc-placard-title {
  color: #111;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .tap-ugc-placard.has-hero .tap-ugc-placard-date {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Override contrast class for hero — text color is always controlled by the gradient */
.tap-ugc-placard.has-hero.tap-contrast-dark .tap-ugc-placard-title {
  color: #fff;
}

.tap-ugc-placard.has-hero.tap-contrast-dark .tap-ugc-placard-date {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .tap-ugc-placard.has-hero.tap-contrast-dark .tap-ugc-placard-title {
  color: #111;
}

[data-theme="light"] .tap-ugc-placard.has-hero.tap-contrast-dark .tap-ugc-placard-date {
  color: rgba(0, 0, 0, 0.7);
}

/* Active state for placards */
.tap-ugc-placard.tap-ugc-marker-active {
  opacity: 1 !important;
  border-color: var(--accent-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.tap-ugc-placard.tap-ugc-marker-active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--accent-primary, #3b82f6);
  border-radius: 12px;
  opacity: 0;
  animation: tap-ugc-placard-pulse 1.8s ease-out infinite;
}

@keyframes tap-ugc-placard-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.95);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* Hover state for placards */
.tap-ugc-placard.tap-ugc-marker-hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--accent-primary, #3b82f6), 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Highlight state for placards (e.g., during panel hover) */
.tap-ugc-placard.tap-ugc-marker-highlight {
  animation: placard-highlight-pulse 1s ease-out infinite;
}

@keyframes placard-highlight-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

/* Dark mode adjustments for placards - minimal changes needed since colored bg works in both modes */

/* UGC map marker dot styles (excludes placards which have their own layout) */
.tap-ugc-marker-wrapper:not(.tap-ugc-placard-wrapper) {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tap-ugc-marker:not(.tap-ugc-placard) {
  width: 28px;
  height: 28px;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1s ease, transform 0.15s ease, box-shadow 0.15s ease, visibility 1s ease;
}

/* ---- Marker size variants ------------------------------------------------
   Default (no data-size): 28px dot, 2px border, 14px icon
   md:  20px dot — slightly reduced, icon still legible
   sm:  14px dot — compact, small icon
   xs:  10px dot — minimal pip, tiny icon
   Apply via data-size="md|sm|xs" on the wrapper element.
   --------------------------------------------------------------------- */
.tap-ugc-marker-wrapper[data-size="md"] { width: 28px; height: 28px; }
.tap-ugc-marker-wrapper[data-size="sm"] { width: 20px; height: 20px; }
.tap-ugc-marker-wrapper[data-size="xs"] { width: 14px; height: 14px; }

.tap-ugc-marker[data-size="md"] {
  width: 20px; height: 20px;
  border-width: 1.5px; font-size: 11px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tap-ugc-marker[data-size="sm"] {
  width: 14px; height: 14px;
  border-width: 1px; font-size: 8px;
  box-shadow: 0 0.5px 3px rgba(0,0,0,0.25);
}
.tap-ugc-marker[data-size="xs"] {
  width: 10px; height: 10px;
  border: none; font-size: 6px;
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.2);
}

/* ---- Light markers (bulk data: listed buildings etc) ----------------------
   Single element, no wrapper, no transitions — pure GPU-composited dots.
   Click handled via delegated document listener.
   --------------------------------------------------------------------- */
.tap-ugc-light-marker {
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
  contain: layout style;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  will-change: transform;
  transform: translateZ(0);
}
.tap-ugc-light-marker[data-size="md"] { font-size: 11px; }
.tap-ugc-light-marker[data-size="sm"] { font-size: 8px; }
.tap-ugc-light-marker[data-size="md"] {
  width: 20px; height: 20px;
  border: 1.5px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tap-ugc-light-marker[data-size="sm"] {
  width: 14px; height: 14px;
  border: 1px solid white;
  box-shadow: 0 0.5px 3px rgba(0,0,0,0.25);
}
.tap-ugc-light-marker[data-size="xs"] {
  width: 10px; height: 10px;
  border: 1px solid;
  box-shadow: none;
}
.tap-ugc-light-marker:hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.3);
}
.tap-ugc-light-marker[data-size="xs"]:hover {
  background: var(--mc) !important;
  border-color: white !important;
  box-shadow: 0 0.5px 3px rgba(0,0,0,0.3);
}
/* Floating tooltip for light markers — positioned by JS, outside stacking contexts */
.tap-ugc-light-tooltip {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  padding: 4px 8px;
  background: var(--bg-surface-solid);
  color: var(--fg-primary);
  font-size: 12px;
  max-width: 220px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tap-ugc-light-tooltip-label {
  display: block;
  font-size: 10px;
  opacity: 0.6;
  white-space: nowrap;
}

/* Light markers render below curated markers */
.maplibregl-marker:has(.tap-ugc-light-marker),
.ol-overlay-container:has(.tap-ugc-light-marker) {
  z-index: 0 !important;
}
/* Active light markers elevate above everything (must come after z-index:0 rule) */
.maplibregl-marker:has(.tap-ugc-light-marker.tap-ugc-marker-active),
.ol-overlay-container:has(.tap-ugc-light-marker.tap-ugc-marker-active) {
  z-index: 9999 !important;
}

/* Custom icon images in markers */
.tap-ugc-marker img,
.direction-icon img {
  display: block;
  object-fit: contain;
}

/* Tags */
.tap-ugc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.tap-ugc-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  white-space: nowrap;
}
.tap-ugc-tag-clickable {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 0.15s;
}
.tap-ugc-tag-clickable:hover {
  opacity: 0.85;
}

/* Tag filter panel */
.tag-filter-bar {
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}
.tag-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tag-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 14px;
  white-space: nowrap;
}
.tag-filter-chip-remove {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
  opacity: 0.7;
}
.tag-filter-chip-remove:hover {
  opacity: 1;
}
.tag-filter-add-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  background: none;
  color: var(--fg-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.tag-filter-add-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.tag-filter-search {
  margin-top: 8px;
}
.tag-filter-search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  outline: none;
  box-sizing: border-box;
}
.tag-filter-search-input:focus {
  border-color: var(--accent-primary);
}
.tag-filter-search-results {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
}
.tag-filter-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.tag-filter-search-item:hover {
  background: var(--bg-secondary);
}
.tag-filter-search-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-filter-search-name {
  flex: 1;
  color: var(--fg-primary);
}
.tag-filter-search-cat {
  font-size: 11px;
  color: var(--fg-tertiary);
}
.tag-filter-search-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--fg-tertiary);
  text-align: center;
}
.tag-filter-count {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-bottom: 10px;
}
.tag-filter-empty {
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: var(--fg-tertiary);
}

/* Media Browser */
.media-browser-panel {
  padding: 12px;
}
.media-browser-count {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-bottom: 8px;
}
.media-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}
.media-browser-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background: rgba(128, 128, 128, 0.1);
}
.media-browser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.media-browser-thumb:hover img {
  transform: scale(1.05);
}
.media-browser-new {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.media-browser-empty {
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: var(--fg-tertiary);
}
.place-section-see-all {
  float: right;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  color: var(--accent-primary);
  text-decoration: none;
  letter-spacing: 0;
}
.place-section-see-all:hover {
  text-decoration: underline;
}

/* Related items */
.tap-ugc-related {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.tap-ugc-related-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-tertiary);
}

.tap-ugc-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* See Also (siblings + parent for child items) */
.tap-ugc-see-also {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.tap-ugc-see-also-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-tertiary);
}


.tap-ugc-see-also-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* OSM Linking */
.tap-ugc-osm-link {
  margin: 12px 0;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.tap-ugc-osm-badge {
  font-size: 12px;
  color: var(--fg-secondary);
  font-family: var(--font-mono);
}

/* Marker hover tooltip — shown via JS-applied .tap-ugc-marker-hover class
   (not CSS :hover) so it cannot extend the marker's hover hit area.
   JS adds this class on: direct mouseenter, and extent polygon hover. */
.tap-ugc-marker.tap-ugc-marker-hover::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--bg-surface-solid);
  color: var(--fg-primary);
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
  margin-bottom: 4px;
}
/* Push label higher on markers with thumbnail previews */
.tap-ugc-marker.tap-ugc-marker-hover.has-preview::after {
  margin-bottom: 42px;
}



/* ============================================================================
   TapPOI - Point of Interest Panel
   ============================================================================ */

.tap-poi-detail {
  padding: 16px;
}

.tap-poi-icon {
  font-size: 40px;
  float: right;
  margin: 0 0 8px 12px;
  line-height: 1;
}

.tap-poi-notice {
  font-size: 13px;
  color: var(--fg-secondary);
  font-style: italic;
  margin: 0 0 12px;
}

.tap-poi-summary {
  font-size: 14px;
  color: var(--fg-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.tap-poi-media {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.tap-poi-properties {
  margin-bottom: 16px;
}

.tap-poi-row {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.tap-poi-row strong {
  color: var(--fg-secondary);
}

.tap-poi-row a {
  color: var(--accent-color, #3b82f6);
  text-decoration: none;
}

.tap-poi-row a:hover {
  text-decoration: underline;
}

.tap-poi-row-small {
  font-size: 12px;
  color: var(--fg-secondary);
}

.tap-poi-more {
  margin: 16px 0;
  font-size: 13px;
}

.tap-poi-more summary {
  cursor: pointer;
  color: var(--fg-tertiary);
  font-size: 12px;
  padding: 8px 0;
}

.tap-poi-more summary:hover {
  color: var(--fg-secondary);
}

.tap-poi-more-content {
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.tap-poi-coords {
  font-size: 11px;
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.tap-poi-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tap-poi-actions .action-btn {
  flex: 1 1 100px;
  justify-content: center;
}

.tap-poi-edited {
  font-size: 11px;
  color: var(--accent-primary);
  font-weight: 500;
}

.tap-poi-linked {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.tap-poi-linked h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-secondary);
}

.tap-poi-linked-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.tap-poi-linked-item:hover {
  background: var(--bg-hover);
}

.tap-poi-linked-icon {
  font-size: 18px;
  grid-row: 1;
  grid-column: 1;
}

.tap-poi-linked-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-primary);
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}

.tap-poi-linked-summary {
  margin: 0;
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.5;
  grid-row: 2;
  grid-column: 1 / -1;
}

/* POI Edit Form */
.tap-poi-edit {
  padding: 16px;
}
/* .tap-poi-edit-field, .tap-poi-edit-actions removed — now uses shared .tap-form-field / .tap-form-actions */

/* --------------------------------------------------------------------------
   Toast Notifications (TapNotify)
   -------------------------------------------------------------------------- */
.tap-notify-container {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.tap-notify {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 400px;
  padding: 12px 32px 12px 16px;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: var(--fg-primary);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-theme="dark"] .tap-notify {
  background: rgba(30, 30, 30, 0.75);
  border-color: rgba(255, 255, 255, 0.1);
}

.tap-notify-show {
  opacity: 1;
  transform: translateX(0);
}

.tap-notify-hiding {
  opacity: 0;
  transform: translateX(100%);
}

.tap-notify-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.tap-notify-success .tap-notify-icon {
  background: #22c55e;
  color: white;
}

.tap-notify-error .tap-notify-icon {
  background: #ef4444;
  color: white;
}

.tap-notify-warning .tap-notify-icon {
  background: #f59e0b;
  color: white;
}

.tap-notify-info .tap-notify-icon {
  background: #3b82f6;
  color: white;
}

.tap-notify-message {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  white-space: pre-line;
}

.tap-notify-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg-tertiary);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.tap-notify-close:hover {
  background: var(--border-color);
  color: var(--fg-primary);
}

/* Edit and Link type styling */
.tap-notify-edit .tap-notify-icon {
  background: var(--accent-primary);
}

.tap-notify-link .tap-notify-icon {
  background: #3b82f6;
}

/* Buttons in notifications */
.tap-notify-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

/* Inline buttons variant - buttons on same line as message */
.tap-notify-inline .tap-notify-buttons {
  width: auto;
  margin-top: 0;
  margin-left: auto;
}

.tap-notify-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

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

.tap-notify-btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.tap-notify-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Mobile adjustments - notifications at top */
@media (max-width: 600px) {
  .tap-notify-container {
    left: 16px;
    right: 16px;
    top: 16px;
    bottom: auto;
  }

  .tap-notify {
    min-width: 0;
    max-width: none;
    transform: translateY(-100%);
  }

  .tap-notify-show {
    transform: translateY(0);
  }

  .tap-notify-hiding {
    transform: translateY(-100%);
  }
}


/* ============================================================================
   Direction Indicators - Off-screen location arrows
   ============================================================================ */

.direction-indicators {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
}

.direction-indicator {
  --marker-size: 40px;
  --marker-color: var(--accent-primary);

  position: absolute;
  width: var(--marker-size);
  height: var(--marker-size);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.direction-indicator.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: fade-in 0.25s ease-out, pulse-toward 1.5s ease-in-out 0.25s infinite;
}

/* Quick fade in */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pulse animation - moves toward destination using rotation-aware translate */
@keyframes pulse-toward {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(
      calc(-50% + sin(var(--rotation, 0deg)) * 15px),
      calc(-50% - cos(var(--rotation, 0deg)) * 15px)
    );
  }
}

.direction-indicator.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* Pin shape - rotated rounded square */
.direction-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--marker-color);
  border: 2px solid white;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  /* Base rotation puts point down, then add target bearing */
  /* Sharp corner at bottom-left, rotate 135deg to point up (north=0) */
  transform: rotate(calc(var(--rotation, 0deg) + 135deg));
}

/* Icon - centered in indicator, stays upright */
.direction-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 1;
  z-index: 2;
}

/* Type-specific colors - using shared CSS variables from :root */
.direction-indicator.ugc {
  --marker-color: var(--accent-primary);
}

.direction-indicator.poi {
  --marker-color: var(--color-poi);
}

.direction-indicator.place {
  --marker-color: var(--color-place);
}

.direction-indicator.story {
  --marker-color: var(--color-story);
}

.direction-indicator.heritage {
  --marker-color: var(--color-heritage);
}

.direction-indicator.event {
  --marker-color: var(--color-event);
}

.direction-indicator.media {
  --marker-color: var(--color-media);
}

.direction-indicator.memory {
  --marker-color: var(--color-memory);
}

.direction-indicator.document {
  --marker-color: var(--color-document);
}

.direction-indicator.collection {
  --marker-color: var(--color-collection);
}

.direction-indicator.geocache {
  --marker-color: var(--color-geocache);
}

.direction-indicator.timecapsule {
  --marker-color: var(--color-timecapsule);
}

.direction-indicator.achievement {
  --marker-color: var(--color-achievement);
}

.direction-indicator.message {
  --marker-color: var(--color-message);
}

.direction-indicator.oral_history {
  --marker-color: var(--color-oral_history);
}

.direction-indicator.streetview {
  --marker-color: var(--color-streetview);
}

.direction-indicator.guided_tour {
  --marker-color: var(--color-guided_tour);
}

.direction-indicator.listed_building {
  --marker-color: var(--color-listed_building);
}

/* Geocache undiscovered marker */
.tap-ugc-marker-geocache-undiscovered {
  opacity: 0.6 !important;
  filter: grayscale(0.3);
}

/* Guided tour stop markers */
.tap-tour-stop-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-guided_tour);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: pointer;
  pointer-events: auto;
}

/* ============================================================================
   GPS Proximity Detection - Multi-area panel
   ============================================================================ */

.proximity-multi-area {
  padding: 16px;
}

.proximity-intro {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--fg-secondary);
}

.proximity-area-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proximity-area-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.proximity-area-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.proximity-area-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.proximity-area-icon-img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.proximity-area-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proximity-area-dist {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Empty Place Page CTA
   -------------------------------------------------------------------------- */
.place-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px 24px;
  gap: 16px;
}

.place-empty-cta-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-tertiary);
  opacity: 0.6;
}

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

.place-empty-cta-text {
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
  max-width: 320px;
  margin: 0;
}

.place-empty-cta-btn {
  margin-top: 4px;
}

.place-empty-cta-email {
  font-size: 12px;
  color: var(--fg-tertiary);
  margin: 0;
}

.place-empty-cta-email a {
  color: var(--accent-primary);
  text-decoration: none;
}

.place-empty-cta-email a:hover {
  text-decoration: underline;
}

/* Inline CTA - shown inside POI/UGC panels for data-sparse entries */
.poi-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 16px;
  gap: 10px;
}
.poi-empty-cta-icon {
  width: 36px;
  height: 36px;
  color: var(--fg-tertiary);
  opacity: 0.5;
}
.poi-empty-cta-icon svg {
  width: 100%;
  height: 100%;
}
.poi-empty-cta-text {
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
  max-width: 280px;
  margin: 0;
}

/* Compact CTA - shown when place has items but no wiki page */
.place-compact-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 16px;
  margin: 0 0 8px;
  gap: 6px;
}

.place-compact-cta-text {
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-tertiary);
  max-width: 280px;
}

.place-compact-cta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.place-compact-cta-actions .action-btn-sm {
  font-size: 12px;
  padding: 4px 12px;
  min-height: 28px;
}

.place-compact-cta-email {
  font-size: 11px;
  color: var(--accent-primary);
  text-decoration: none;
}

.place-compact-cta-email:hover {
  text-decoration: underline;
}

/* Mobile: push CTAs to the bottom so content takes priority */
@media (max-width: 600px) {
  .place-compact-cta {
    order: 99;
  }
  .place-empty-cta {
    order: 99;
  }
}

/* =========================================================================
   MEMBER PROFILE & FAVOURITES
   ========================================================================= */

/* ---- Member Profile ---- */
.member-profile {
  padding: 4px 0 8px;
}

.member-nudge {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  text-align: center;
}

.member-nudge p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--fg-tertiary);
}

/* Summary line */
.member-summary {
  font-size: 13px;
  color: var(--fg-secondary);
  margin: 0 0 18px 0;
  letter-spacing: 0.2px;
}

.member-summary-num {
  font-weight: 700;
  color: var(--fg-primary);
  font-size: 15px;
}

/* Badge tracks */
.member-track {
  margin-bottom: 14px;
}

.member-track-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.member-track-header > span:first-child {
  font-size: 11px;
  font-style: italic;
  color: var(--fg-tertiary);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.member-track-line {
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.member-track-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
}

/* Earned badge — warm gold, prominent */
.member-badge.earned {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px 6px;
  border-radius: 10px;
  background: rgba(216, 168, 64, 0.06);
  border: 1px solid rgba(216, 168, 64, 0.2);
  cursor: default;
  animation: memberBadgeIn 0.35s ease both;
}

.member-badge.earned .member-badge-icon {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(216, 168, 64, 0.3));
}

.member-badge.earned .member-badge-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.2;
  max-width: 80px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge image / emoji display */
.member-badge-img {
  display: block;
  object-fit: contain;
}

.member-badge-emoji {
  line-height: 1;
}

.member-badge-emoji--lg {
  font-size: 40px;
}

.member-badge-emoji--sm {
  font-size: 22px;
}

/* Badge image in toast notifications */
.member-toast-badge-img {
  vertical-align: -3px;
  margin-right: 4px;
}

/* Locked badge — small ring with progress arc */
.member-badge.locked {
  position: relative;
  cursor: pointer;
  animation: memberBadgeIn 0.35s ease both;
}

.member-badge-ring {
  position: relative;
  width: 48px;
  height: 48px;
}

.member-badge-ring svg {
  width: 100%;
  height: 100%;
}

.member-ring-bg {
  stroke: var(--border-color);
}

.member-ring-fill {
  stroke: var(--color-achievement);
  opacity: 0.65;
  transition: stroke-dashoffset 0.8s ease 0.15s;
}

.member-badge.locked .member-badge-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 1;
  opacity: 0.25;
  filter: grayscale(0.8);
  pointer-events: none;
}

.member-badge.locked .member-badge-img {
  opacity: 0.2;
  filter: grayscale(0.8);
}

/* Badge tooltip — fixed position, appended to body, positioned via JS */
.member-badge-tooltip {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--color-achievement);
  border-radius: 8px;
  padding: 8px 12px 10px;
  white-space: nowrap;
  z-index: 9999;
  animation: memberTooltipIn 0.15s ease;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.member-badge-tooltip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-primary);
  display: block;
  margin-bottom: 3px;
}

.member-badge-tooltip-desc {
  font-size: 11px;
  color: var(--fg-secondary);
  display: block;
  margin-bottom: 6px;
}

.member-badge-tooltip-bar {
  width: 100px;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto 4px;
}

.member-badge-tooltip-fill {
  height: 100%;
  background: var(--color-achievement);
  border-radius: 2px;
}

.member-badge-tooltip-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-secondary);
}

@keyframes memberBadgeIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes memberTooltipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .member-badge.earned,
  .member-badge.locked { animation: none; }
  .member-ring-fill { transition: none; }
}

/* Section headings (no border, no uppercase) */
.member-heading {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
  margin: 20px 0 6px 0;
  padding: 0;
  border: none;
}

/* Visit/browse lists */
.member-visits-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.member-visit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.member-visit-row:hover {
  background: var(--bg-secondary);
}

.member-visit-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.member-visit-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-visit-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-tertiary);
  flex-shrink: 0;
}

/* Favourite locations */
.member-fav-locations-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.member-fav-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.member-fav-location-row:hover {
  background: var(--bg-secondary);
}

.member-fav-location-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-fav-location-type {
  font-size: 11px;
  color: var(--fg-tertiary);
  text-transform: capitalize;
  flex-shrink: 0;
}

/* Favourites list (TapItemCard) */
.member-favourites-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Empty state */
.member-empty {
  font-size: 13px;
  color: var(--fg-tertiary);
  font-style: italic;
  padding: 4px 0;
  margin: 0;
}

/* Favourite button (heart toggle) */
.favourite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.favourite-btn:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.favourite-btn.active {
  color: #e74c3c;
}

.favourite-btn.active:hover {
  background: rgba(231, 76, 60, 0.15);
}

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

/* ── Media Detail Panel ── */
.tap-media-detail { padding: 0; }
.tap-media-detail-caption { font-size: 15px; line-height: 1.5; margin: 0 0 8px; padding: 0 16px; }
.tap-media-detail-date { font-size: 13px; color: var(--fg-secondary); margin: 0 0 8px; padding: 0 16px; }
.tap-media-detail-attribution { font-size: 13px; color: var(--fg-secondary); margin: 0 0 12px; padding: 0 16px; }
.tap-media-detail-section { padding: 12px 16px; border-top: 1px solid var(--border-color); }
.tap-media-detail-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-tertiary); margin: 0 0 8px; }
.tap-media-detail-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--accent-primary); color: white; margin-left: 6px; vertical-align: middle; }
.tap-media-detail-badge-shared { background: var(--fg-tertiary); }

/* Hero container for media panel — clickable */
.media-detail-hero { cursor: pointer; position: relative; }
.media-detail-hero img { width: 100%; display: block; }
.media-detail-placeholder { padding: 32px 16px; text-align: center; background: var(--bg-secondary); color: var(--fg-secondary); }
.media-detail-hero .media-360-badge,
.media-detail-hero .media-video-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.7); color: white;
  padding: 2px 8px; border-radius: 4px; font-size: 11px;
}

/* Disambiguation panel */
.tap-ugc-disambiguate { padding: 16px; }
.tap-ugc-disambiguate h3 { margin: 0 0 8px; font-size: 16px; }
.tap-ugc-disambiguate p { margin: 0 0 12px; font-size: 14px; color: var(--fg-secondary); }
.tap-ugc-disambiguate-list { list-style: none; padding: 0; margin: 0; }
.tap-ugc-disambiguate-list li { margin-bottom: 8px; }
.tap-ugc-disambiguate-link {
  display: block; padding: 10px 12px;
  background: var(--bg-secondary); border-radius: var(--radius-md);
  color: var(--fg-primary); text-decoration: none;
  border: 1px solid var(--border-color);
  transition: background 0.15s;
}
.tap-ugc-disambiguate-link:hover { background: var(--bg-tertiary); }
.tap-ugc-disambiguate-loc { color: var(--fg-secondary); font-size: 13px; }