/**
 * Legend's Map fallback route shell styles.
 * LGM.M5 packet A — owner-only fallback route shell and shared frontend boundary.
 * LGM.M5 packet B — list-view fallback integration with pin-detail and setlist.
 * LGM.M5 packet C — timeline and cities fallback views with accessible view switching.
 * LGM.M6 packet B — provider-shell states, attribution, and failure-fallback interplay.
 * LGM.M6 packet C — Tour path overlay, low-data hardening, and failure-safe route states.
 *
 * Shell states:
 * - locked-preview: entitlement not met or privacy notice required
 * - loading: bootstrap/journey RPC in flight
 * - empty: authenticated but no venue summaries in cache
 * - degraded: RPC error or partial failure
 * - owner-private: authenticated owner with valid cache and entitlement
 *
 * Provider shell states (data-provider-shell on #legends-map-root):
 * - unresolved: provider shell not yet evaluated (initial/loading)
 * - active: provider is usable; provider shell region visible with attribution
 * - unavailable: provider conditions not met; fallback views are primary
 * - failed: provider was attempted but failed; fallback views with notice
 * - disabled: provider explicitly disabled by feature flag or configuration
 */

:root {
  --legends-map-bg: #0f172a;
  --legends-map-surface: rgba(15, 23, 42, 0.88);
  --legends-map-card: rgba(30, 41, 59, 0.92);
  --legends-map-border: rgba(148, 163, 184, 0.22);
  --legends-map-text: #e2e8f0;
  --legends-map-muted: #94a3b8;
  --legends-map-accent: #a855f7;
  --legends-map-accent-2: #22d3ee;
  --legends-map-success: #34d399;
  --legends-map-warning: #f59e0b;
  --legends-map-danger: #fb7185;
  --legends-map-shadow: 0 24px 48px rgba(15, 23, 42, 0.32);
  --legends-map-radius: 16px;
}

/* Base shell container */
.legends-map-shell {
  min-height: 100vh;
  padding: var(--gutter, 16px);
  background:
    radial-gradient(circle at top left, rgba(168, 85, 247, 0.18), transparent 34%),
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.14), transparent 26%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
  color: var(--legends-map-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.legends-map-shell * {
  box-sizing: border-box;
}

/* Shell header */
.legends-map-header {
  text-align: center;
  padding: 2rem 1rem;
  margin-bottom: 1.5rem;
}

.legends-map-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  background: linear-gradient(135deg, var(--legends-map-accent), var(--legends-map-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.legends-map-subtitle {
  font-size: 1rem;
  color: var(--legends-map-muted);
  margin: 0;
}

/* Status container */
.legends-map-status {
  text-align: center;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--legends-map-radius);
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
}

.legends-map-status[aria-live="polite"] {
  min-height: 3rem;
}

/* Locked preview state */
.legends-map-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  text-align: center;
}

.legends-map-locked-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.legends-map-locked-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--legends-map-text);
}

.legends-map-locked-reason {
  font-size: 1rem;
  color: var(--legends-map-muted);
  margin: 0 0 1.5rem;
  max-width: 400px;
}

.legends-map-locked-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--legends-map-accent), var(--legends-map-accent-2));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.legends-map-locked-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

.legends-map-locked-cta:focus {
  outline: 2px solid var(--legends-map-accent-2);
  outline-offset: 2px;
}

/* Loading state */
.legends-map-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem;
}

.legends-map-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--legends-map-border);
  border-top-color: var(--legends-map-accent);
  border-radius: 50%;
  animation: legends-map-spin 1s linear infinite;
  margin-bottom: 1.5rem;
}

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

.legends-map-loading-text {
  font-size: 1rem;
  color: var(--legends-map-muted);
  margin: 0;
}

/* Empty state */
.legends-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem;
  text-align: center;
}

.legends-map-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.legends-map-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.legends-map-empty-text {
  font-size: 0.9375rem;
  color: var(--legends-map-muted);
  margin: 0;
  max-width: 360px;
}

/* Degraded/error state */
.legends-map-degraded {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem;
  text-align: center;
}

.legends-map-degraded-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--legends-map-warning);
}

.legends-map-degraded-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--legends-map-warning);
}

.legends-map-degraded-text {
  font-size: 0.9375rem;
  color: var(--legends-map-muted);
  margin: 0 0 1.5rem;
  max-width: 400px;
}

.legends-map-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  color: var(--legends-map-text);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legends-map-retry-btn:hover {
  background: rgba(30, 41, 59, 1);
  border-color: var(--legends-map-accent);
}

.legends-map-retry-btn:focus {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* Owner-private content shell */
.legends-map-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Journey fallback list */
.legends-map-journey {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.legends-map-journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--legends-map-border);
  margin-bottom: 0.5rem;
}

.legends-map-journey-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.legends-map-journey-count {
  font-size: 0.875rem;
  color: var(--legends-map-muted);
}

/* Journey item card */
.legends-map-journey-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: var(--legends-map-radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.legends-map-journey-item:hover {
  border-color: var(--legends-map-accent);
  transform: translateX(4px);
}

.legends-map-journey-item:focus {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-journey-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.legends-map-journey-item-icon.available {
  background: rgba(52, 211, 153, 0.2);
  color: var(--legends-map-success);
}

.legends-map-journey-item-icon.approximate {
  background: rgba(245, 158, 11, 0.2);
  color: var(--legends-map-warning);
}

.legends-map-journey-item-icon.hidden {
  background: rgba(148, 163, 184, 0.2);
  color: var(--legends-map-muted);
}

.legends-map-journey-item-content {
  flex: 1;
  min-width: 0;
}

.legends-map-journey-item-name {
  font-weight: 600;
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legends-map-journey-item-meta {
  font-size: 0.875rem;
  color: var(--legends-map-muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.legends-map-journey-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(168, 85, 247, 0.2);
  color: var(--legends-map-accent);
}

/* Cache availability summary */
.legends-map-cache-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.legends-map-cache-stat {
  padding: 1rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: var(--legends-map-radius);
  text-align: center;
}

.legends-map-cache-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--legends-map-accent);
  margin-bottom: 0.25rem;
}

.legends-map-cache-stat-label {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Skeleton loading for journey items */
.legends-map-skeleton-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: var(--legends-map-radius);
}

.legends-map-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.2) 25%, rgba(148, 163, 184, 0.3) 50%, rgba(148, 163, 184, 0.2) 75%);
  background-size: 200% 100%;
  animation: legends-map-shimmer 1.5s infinite;
}

.legends-map-skeleton-content {
  flex: 1;
}

.legends-map-skeleton-line {
  height: 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.2) 25%, rgba(148, 163, 184, 0.3) 50%, rgba(148, 163, 184, 0.2) 75%);
  background-size: 200% 100%;
  animation: legends-map-shimmer 1.5s infinite;
  margin-bottom: 0.5rem;
}

.legends-map-skeleton-line:last-child {
  width: 60%;
  margin-bottom: 0;
}

@keyframes legends-map-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .legends-map-title {
    font-size: 1.5rem;
  }

  .legends-map-journey-item {
    padding: 0.875rem;
  }

  .legends-map-journey-item-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .legends-map-cache-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .legends-map-spinner,
  .legends-map-skeleton-avatar,
  .legends-map-skeleton-line {
    animation: none;
  }

  .legends-map-journey-item,
  .legends-map-locked-cta,
  .legends-map-retry-btn {
    transition: none;
  }
}

/* Focus visible for keyboard navigation */
.legends-map-journey-item:focus-visible,
.legends-map-locked-cta:focus-visible,
.legends-map-retry-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* Screen reader only text */
.legends-map-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── LGM.M5 Packet B: Pin-detail fallback panel ─── */

.legends-map-pin-detail {
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: var(--legends-map-radius);
  padding: 1.5rem;
  margin-bottom: 0.75rem;
  animation: legends-map-slide-in 0.25s ease-out;
}

@keyframes legends-map-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legends-map-pin-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.legends-map-pin-detail-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--legends-map-border);
  color: var(--legends-map-text);
  font-size: 1.125rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legends-map-pin-detail-back:hover {
  background: rgba(148, 163, 184, 0.22);
  border-color: var(--legends-map-accent);
}

.legends-map-pin-detail-back:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-pin-detail-title-group {
  flex: 1;
  min-width: 0;
}

.legends-map-pin-detail-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legends-map-pin-detail-location {
  font-size: 0.875rem;
  color: var(--legends-map-muted);
  margin: 0;
}

.legends-map-pin-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.legends-map-pin-detail-stat {
  padding: 0.75rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--legends-map-border);
  border-radius: 12px;
  text-align: center;
}

.legends-map-pin-detail-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--legends-map-accent);
  margin-bottom: 0.125rem;
}

.legends-map-pin-detail-stat-label {
  font-size: 0.6875rem;
  color: var(--legends-map-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legends-map-pin-detail-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.legends-map-pin-detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.legends-map-pin-detail-badge.stamp {
  background: rgba(168, 85, 247, 0.2);
  color: var(--legends-map-accent);
}

.legends-map-pin-detail-badge.residency {
  background: rgba(34, 211, 238, 0.2);
  color: var(--legends-map-accent-2);
}

.legends-map-pin-detail-badge.pin-state {
  background: rgba(52, 211, 153, 0.2);
  color: var(--legends-map-success);
}

.legends-map-pin-detail-badge.pin-state.approximate {
  background: rgba(245, 158, 11, 0.2);
  color: var(--legends-map-warning);
}

/* ─── LGM.M5 Packet B: Setlist drill-down ─── */

.legends-map-setlist {
  border-top: 1px solid var(--legends-map-border);
  padding-top: 1rem;
}

.legends-map-setlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.legends-map-setlist-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.legends-map-setlist-count {
  font-size: 0.8125rem;
  color: var(--legends-map-muted);
}

.legends-map-setlist-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.legends-map-setlist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.legends-map-setlist-item:hover {
  border-color: var(--legends-map-border);
}

.legends-map-setlist-item-ordinal {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(168, 85, 247, 0.15);
  color: var(--legends-map-accent);
  flex-shrink: 0;
}

.legends-map-setlist-item-content {
  flex: 1;
  min-width: 0;
}

.legends-map-setlist-item-song {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0.125rem;
}

.legends-map-setlist-item-artist {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.legends-map-setlist-item-date {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.legends-map-setlist-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
}

.legends-map-setlist-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
}

.legends-map-setlist-loading .legends-map-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin-bottom: 0;
}

.legends-map-load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: var(--legends-map-accent);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legends-map-load-more-btn:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: var(--legends-map-accent);
}

.legends-map-load-more-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pin-detail error state */
.legends-map-pin-detail-error {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
}

.legends-map-pin-detail-error-retry {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  color: var(--legends-map-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legends-map-pin-detail-error-retry:hover {
  background: rgba(30, 41, 59, 1);
  border-color: var(--legends-map-accent);
}

.legends-map-pin-detail-error-retry:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* ─── Packet B responsive adjustments ─── */

@media (max-width: 640px) {
  .legends-map-pin-detail {
    padding: 1rem;
  }

  .legends-map-pin-detail-name {
    font-size: 1.125rem;
  }

  .legends-map-pin-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .legends-map-setlist-item {
    padding: 0.5rem 0.625rem;
  }
}

/* Accessibility: reduced motion for Packet B animations */
@media (prefers-reduced-motion: reduce) {
  .legends-map-pin-detail {
    animation: none;
  }

  .legends-map-pin-detail-back,
  .legends-map-setlist-item,
  .legends-map-load-more-btn,
  .legends-map-pin-detail-error-retry {
    transition: none;
  }
}

/* Focus visible for Packet B keyboard navigation */
.legends-map-pin-detail-back:focus-visible,
.legends-map-load-more-btn:focus-visible,
.legends-map-pin-detail-error-retry:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* ─── LGM.M5 Packet C: View switching, timeline, and cities fallback views ─── */

/* View switcher tab bar */
.legends-map-view-switcher {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: 12px;
}

.legends-map-view-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--legends-map-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.legends-map-view-tab:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--legends-map-text);
}

.legends-map-view-tab[aria-selected="true"] {
  background: rgba(168, 85, 247, 0.18);
  color: var(--legends-map-accent);
  font-weight: 600;
}

.legends-map-view-tab:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: -2px;
}

.legends-map-view-tab-icon {
  font-size: 1rem;
  line-height: 1;
}

/* View panel visibility */
.legends-map-view-panel {
  display: none;
}

.legends-map-view-panel[aria-hidden="false"] {
  display: block;
  animation: legends-map-view-fade-in 0.2s ease-out;
}

@keyframes legends-map-view-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Timeline fallback view ─── */

.legends-map-timeline {
  position: relative;
  padding-left: 2rem;
}

/* Vertical timeline rail */
.legends-map-timeline::before {
  content: "";
  position: absolute;
  left: 0.625rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--legends-map-accent) 0%,
    rgba(168, 85, 247, 0.3) 100%
  );
  border-radius: 1px;
}

/* Timeline year group */
.legends-map-timeline-year {
  margin-bottom: 1.5rem;
}

.legends-map-timeline-year-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--legends-map-accent);
}

.legends-map-timeline-year-dot {
  position: relative;
  left: -2rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--legends-map-accent);
  border: 2px solid var(--legends-map-bg);
  box-shadow: 0 0 0 2px var(--legends-map-accent);
  flex-shrink: 0;
}

.legends-map-timeline-year-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--legends-map-muted);
}

/* Timeline month group */
.legends-map-timeline-month {
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.legends-map-timeline-month-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--legends-map-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Timeline venue entry */
.legends-map-timeline-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.375rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.legends-map-timeline-entry:hover {
  border-color: var(--legends-map-accent);
  transform: translateX(4px);
}

.legends-map-timeline-entry:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-timeline-entry-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legends-map-timeline-entry-dot.available {
  background: var(--legends-map-success);
}

.legends-map-timeline-entry-dot.approximate {
  background: var(--legends-map-warning);
}

.legends-map-timeline-entry-dot.hidden {
  background: var(--legends-map-muted);
}

.legends-map-timeline-entry-content {
  flex: 1;
  min-width: 0;
}

.legends-map-timeline-entry-name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0.125rem;
}

.legends-map-timeline-entry-meta {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.legends-map-timeline-entry-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  background: rgba(168, 85, 247, 0.2);
  color: var(--legends-map-accent);
}

.legends-map-timeline-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
}

/* ─── Cities fallback view ─── */

.legends-map-cities {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.legends-map-city-group {
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: var(--legends-map-radius);
  overflow: hidden;
}

.legends-map-city-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--legends-map-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.legends-map-city-header:hover {
  background: rgba(148, 163, 184, 0.06);
}

.legends-map-city-header:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: -2px;
}

.legends-map-city-name-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.legends-map-city-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.legends-map-city-name {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legends-map-city-region {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
}

.legends-map-city-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.legends-map-city-venue-count {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  white-space: nowrap;
}

.legends-map-city-expand-icon {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  transition: transform 0.2s ease;
}

.legends-map-city-group[aria-expanded="true"] .legends-map-city-expand-icon {
  transform: rotate(180deg);
}

/* City venue list (collapsible) */
.legends-map-city-venues {
  padding: 0.5rem;
}

.legends-map-city-venues[aria-hidden="true"] {
  display: none;
}

.legends-map-city-venue {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.legends-map-city-venue:hover {
  background: rgba(15, 23, 42, 0.4);
  border-color: var(--legends-map-border);
}

.legends-map-city-venue:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-city-venue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legends-map-city-venue-dot.available {
  background: var(--legends-map-success);
}

.legends-map-city-venue-dot.approximate {
  background: var(--legends-map-warning);
}

.legends-map-city-venue-dot.hidden {
  background: var(--legends-map-muted);
}

.legends-map-city-venue-content {
  flex: 1;
  min-width: 0;
}

.legends-map-city-venue-name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0.125rem;
}

.legends-map-city-venue-meta {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.legends-map-cities-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
}

/* ─── Packet C responsive adjustments ─── */

@media (max-width: 640px) {
  .legends-map-view-switcher {
    gap: 0.125rem;
    padding: 0.125rem;
  }

  .legends-map-view-tab {
    padding: 0.5rem 0.375rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }

  .legends-map-view-tab-icon {
    font-size: 0.875rem;
  }

  .legends-map-timeline {
    padding-left: 1.5rem;
  }

  .legends-map-timeline::before {
    left: 0.375rem;
  }

  .legends-map-timeline-year-dot {
    left: -1.5rem;
    width: 10px;
    height: 10px;
  }

  .legends-map-timeline-entry {
    padding: 0.625rem;
  }

  .legends-map-city-header {
    padding: 0.75rem 1rem;
  }

  .legends-map-city-venue {
    padding: 0.625rem;
  }
}

/* Accessibility: reduced motion for Packet C animations */
@media (prefers-reduced-motion: reduce) {
  .legends-map-view-panel[aria-hidden="false"] {
    animation: none;
  }

  .legends-map-view-tab,
  .legends-map-timeline-entry,
  .legends-map-city-header,
  .legends-map-city-venue,
  .legends-map-city-expand-icon {
    transition: none;
  }
}

/* Focus visible for Packet C keyboard navigation */
.legends-map-view-tab:focus-visible,
.legends-map-timeline-entry:focus-visible,
.legends-map-city-header:focus-visible,
.legends-map-city-venue:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* ─── LGM.M6 Packet B: Provider shell, attribution, and failure-fallback interplay ─── */

/* Provider shell region — rendered inside owner-private content when provider is active */
.legends-map-provider-shell {
  position: relative;
  min-height: 320px;
  margin-bottom: 1.25rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: var(--legends-map-radius);
  overflow: hidden;
  animation: legends-map-provider-shell-in 0.3s ease-out;
}

@keyframes legends-map-provider-shell-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Provider shell placeholder — shown when provider is active but canvas not yet rendered */
.legends-map-provider-shell-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 2rem;
  text-align: center;
  color: var(--legends-map-muted);
}

.legends-map-provider-shell-placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.legends-map-provider-shell-placeholder-text {
  font-size: 0.9375rem;
  margin: 0;
}

/* Provider shell hidden when provider is not active */
[data-provider-shell="unavailable"] .legends-map-provider-shell,
[data-provider-shell="disabled"] .legends-map-provider-shell,
[data-provider-shell="unresolved"] .legends-map-provider-shell {
  display: none;
}

/* Provider failure notice — shown when provider was active but failed at runtime */
.legends-map-provider-failure-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  color: var(--legends-map-warning);
  font-size: 0.875rem;
  animation: legends-map-provider-failure-in 0.25s ease-out;
}

@keyframes legends-map-provider-failure-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legends-map-provider-failure-notice-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.legends-map-provider-failure-notice-text {
  flex: 1;
  min-width: 0;
}

.legends-map-provider-failure-notice-text p {
  margin: 0;
}

/* Hide failure notice when provider shell is not in failed state */
[data-provider-shell="active"] .legends-map-provider-failure-notice,
[data-provider-shell="unavailable"] .legends-map-provider-failure-notice,
[data-provider-shell="disabled"] .legends-map-provider-failure-notice,
[data-provider-shell="unresolved"] .legends-map-provider-failure-notice {
  display: none;
}

/* Provider attribution — rendered below provider shell or at content footer */
.legends-map-provider-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.6875rem;
  color: var(--legends-map-muted);
  letter-spacing: 0.02em;
}

.legends-map-provider-attribution-label {
  white-space: nowrap;
}

.legends-map-provider-attribution a {
  color: var(--legends-map-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.legends-map-provider-attribution a:hover {
  color: var(--legends-map-accent);
}

.legends-map-provider-attribution a:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* Hide attribution when provider is not active */
[data-provider-shell="unavailable"] .legends-map-provider-attribution,
[data-provider-shell="disabled"] .legends-map-provider-attribution,
[data-provider-shell="unresolved"] .legends-map-provider-attribution {
  display: none;
}

/* Fallback views become primary when provider is not active */
[data-provider-shell="unavailable"] .legends-map-view-switcher,
[data-provider-shell="disabled"] .legends-map-view-switcher,
[data-provider-shell="failed"] .legends-map-view-switcher {
  order: -1;
}

/* Provider shell status indicator in cache summary area */
.legends-map-provider-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.legends-map-provider-status-badge.active {
  background: rgba(52, 211, 153, 0.15);
  color: var(--legends-map-success);
}

.legends-map-provider-status-badge.unavailable {
  background: rgba(148, 163, 184, 0.12);
  color: var(--legends-map-muted);
}

.legends-map-provider-status-badge.failed {
  background: rgba(245, 158, 11, 0.15);
  color: var(--legends-map-warning);
}

.legends-map-provider-status-badge.disabled {
  background: rgba(148, 163, 184, 0.08);
  color: var(--legends-map-muted);
}

/* ─── Packet B responsive adjustments ─── */

@media (max-width: 640px) {
  .legends-map-provider-shell {
    min-height: 240px;
  }

  .legends-map-provider-shell-placeholder {
    min-height: 240px;
    padding: 1.5rem;
  }

  .legends-map-provider-failure-notice {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }

  .legends-map-provider-attribution {
    font-size: 0.625rem;
  }
}

/* Accessibility: reduced motion for Packet B animations */
@media (prefers-reduced-motion: reduce) {
  .legends-map-provider-shell,
  .legends-map-provider-failure-notice {
    animation: none;
  }

  .legends-map-provider-attribution a {
    transition: none;
  }
}

/* Focus visible for Packet B keyboard navigation */
.legends-map-provider-attribution a:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* ─── LGM.M6 Packet C — Tour path overlay ─── */

/* Tour path selector — shown when provider is active and tours are available */
.legends-map-tour-path-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--legends-map-card);
  border: 1px solid var(--legends-map-border);
  border-radius: 12px;
}

.legends-map-tour-path-selector-label {
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--legends-map-muted);
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.legends-map-tour-path-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--legends-map-border);
  border-radius: 999px;
  background: transparent;
  color: var(--legends-map-text);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.legends-map-tour-path-chip:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: var(--legends-map-accent);
}

.legends-map-tour-path-chip:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-tour-path-chip[aria-pressed="true"] {
  background: rgba(168, 85, 247, 0.2);
  border-color: var(--legends-map-accent);
  color: var(--legends-map-accent);
  font-weight: 600;
}

.legends-map-tour-path-chip-icon {
  font-size: 0.875rem;
}

/* Tour path overlay panel — rendered inside provider shell when a tour is selected */
.legends-map-tour-path-overlay {
  position: relative;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: var(--legends-map-card);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--legends-map-radius);
  animation: legends-map-tour-path-overlay-in 0.25s ease-out;
}

@keyframes legends-map-tour-path-overlay-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legends-map-tour-path-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.legends-map-tour-path-overlay-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--legends-map-text);
}

.legends-map-tour-path-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--legends-map-border);
  border-radius: 8px;
  background: transparent;
  color: var(--legends-map-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.legends-map-tour-path-overlay-close:hover {
  background: rgba(251, 113, 133, 0.1);
  color: var(--legends-map-danger);
}

.legends-map-tour-path-overlay-close:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* Tour path stop list — ordered venue stops within the overlay */
.legends-map-tour-path-stops {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legends-map-tour-path-stop {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--legends-map-border);
}

.legends-map-tour-path-stop:last-child {
  border-bottom: none;
}

.legends-map-tour-path-stop-ordinal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.15);
  color: var(--legends-map-accent);
  font-size: 0.6875rem;
  font-weight: 700;
}

.legends-map-tour-path-stop-ordinal.bonus {
  background: rgba(34, 211, 238, 0.15);
  color: var(--legends-map-accent-2);
}

.legends-map-tour-path-stop-content {
  flex: 1;
  min-width: 0;
}

.legends-map-tour-path-stop-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--legends-map-text);
}

.legends-map-tour-path-stop-meta {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  margin-top: 0.125rem;
}

.legends-map-tour-path-stop-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.375rem;
}

.legends-map-tour-path-stop-badge.required {
  background: rgba(52, 211, 153, 0.15);
  color: var(--legends-map-success);
}

.legends-map-tour-path-stop-badge.bonus {
  background: rgba(34, 211, 238, 0.15);
  color: var(--legends-map-accent-2);
}

.legends-map-tour-path-stop-badge.hidden {
  background: rgba(148, 163, 184, 0.12);
  color: var(--legends-map-muted);
}

/* Tour path summary stats */
.legends-map-tour-path-stats {
  display: flex;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--legends-map-border);
  margin-top: 0.5rem;
}

.legends-map-tour-path-stat {
  text-align: center;
}

.legends-map-tour-path-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--legends-map-accent);
}

.legends-map-tour-path-stat-label {
  font-size: 0.6875rem;
  color: var(--legends-map-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Tour path loading state */
.legends-map-tour-path-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
}

/* Tour path error state */
.legends-map-tour-path-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(251, 113, 133, 0.08);
  border: 1px solid rgba(251, 113, 133, 0.2);
  border-radius: 12px;
  color: var(--legends-map-danger);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.legends-map-tour-path-error-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Tour path unavailable state — when path_state is not complete/partial */
.legends-map-tour-path-unavailable {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  color: var(--legends-map-muted);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.legends-map-tour-path-unavailable-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* ─── LGM.M6 Packet C — Low-data hardening ─── */

/* Low-data mode indicator */
.legends-map-low-data-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 10px;
  color: var(--legends-map-accent-2);
  font-size: 0.75rem;
  animation: legends-map-low-data-notice-in 0.2s ease-out;
}

@keyframes legends-map-low-data-notice-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legends-map-low-data-notice-icon {
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* Hide low-data notice when not in low-data mode */
[data-low-data="false"] .legends-map-low-data-notice {
  display: none;
}

/* Low-data mode: suppress non-essential visual elements */
[data-low-data="true"] .legends-map-provider-shell {
  min-height: 180px;
}

[data-low-data="true"] .legends-map-provider-shell-placeholder {
  min-height: 180px;
}

[data-low-data="true"] .legends-map-tour-path-overlay {
  animation: none;
}

[data-low-data="true"] .legends-map-low-data-notice {
  display: flex;
}

/* Low-data: reduce decorative animations */
[data-low-data="true"] .legends-map-spinner {
  animation-duration: 1.5s;
}

/* Low-data: compact cache summary */
[data-low-data="true"] .legends-map-cache-summary {
  padding: 0.5rem;
  gap: 0.375rem;
}

[data-low-data="true"] .legends-map-cache-stat-value {
  font-size: 1rem;
}

/* Low-data: compact journey items */
[data-low-data="true"] .legends-map-journey-item {
  padding: 0.5rem 0.625rem;
}

/* Low-data: compact timeline entries */
[data-low-data="true"] .legends-map-timeline-entry {
  padding: 0.375rem 0;
}

/* Low-data: compact city groups */
[data-low-data="true"] .legends-map-city-header {
  padding: 0.5rem;
}

/* ─── Packet C responsive adjustments ─── */

@media (max-width: 640px) {
  .legends-map-tour-path-selector {
    padding: 0.5rem;
    gap: 0.375rem;
  }

  .legends-map-tour-path-chip {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .legends-map-tour-path-overlay {
    padding: 0.5rem;
  }

  .legends-map-tour-path-overlay-title {
    font-size: 0.875rem;
  }

  .legends-map-tour-path-stop-name {
    font-size: 0.8125rem;
  }

  .legends-map-tour-path-stats {
    gap: 0.75rem;
  }

  .legends-map-tour-path-stat-value {
    font-size: 1rem;
  }

  .legends-map-low-data-notice {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
  }
}

/* Accessibility: reduced motion for Packet C animations */
@media (prefers-reduced-motion: reduce) {
  .legends-map-tour-path-overlay,
  .legends-map-low-data-notice {
    animation: none;
  }

  .legends-map-tour-path-chip {
    transition: none;
  }

  .legends-map-tour-path-overlay-close {
    transition: none;
  }
}

/* Focus visible for Packet C keyboard navigation */
.legends-map-tour-path-chip:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-tour-path-overlay-close:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LGM.M7 Packet B — Privacy controls panel and route refetch feedback
   Owner-private collapsible panel for hidden venue/city preferences.
   ═══════════════════════════════════════════════════════════════════════ */

.legends-map-privacy-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--legends-map-border);
  border-radius: 8px;
  background: var(--legends-map-surface);
  color: var(--legends-map-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  margin-left: auto;
}

.legends-map-privacy-toggle-btn:hover {
  background: var(--legends-map-card);
  border-color: var(--legends-map-accent);
}

.legends-map-privacy-toggle-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-toggle-btn-icon {
  font-size: 0.875rem;
  line-height: 1;
}

.legends-map-privacy-toggle-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--legends-map-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.legends-map-privacy-controls {
  background: var(--legends-map-surface);
  border: 1px solid var(--legends-map-border);
  border-radius: 12px;
  margin-top: 12px;
  overflow: hidden;
  animation: legends-map-privacy-panel-in 0.2s ease-out;
}

.legends-map-privacy-controls[data-open="false"] {
  display: none;
}

.legends-map-privacy-controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--legends-map-border);
}

.legends-map-privacy-controls-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--legends-map-text);
  margin: 0;
}

.legends-map-privacy-controls-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--legends-map-muted);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.legends-map-privacy-controls-close:hover {
  background: var(--legends-map-card);
  color: var(--legends-map-text);
}

.legends-map-privacy-controls-close:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-controls-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Toggle switch row ── */

.legends-map-privacy-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.legends-map-privacy-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.legends-map-privacy-toggle-label-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--legends-map-text);
}

.legends-map-privacy-toggle-label-desc {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  line-height: 1.35;
}

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

.legends-map-privacy-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.legends-map-privacy-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--legends-map-border);
  transition: background 0.2s ease;
  cursor: pointer;
}

.legends-map-privacy-switch input:checked + .legends-map-privacy-switch-track {
  background: var(--legends-map-accent);
}

.legends-map-privacy-switch input:focus-visible + .legends-map-privacy-switch-track {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.legends-map-privacy-switch input:checked ~ .legends-map-privacy-switch-thumb {
  transform: translateX(20px);
}

.legends-map-privacy-switch[data-saving="true"] .legends-map-privacy-switch-track {
  opacity: 0.6;
}

.legends-map-privacy-switch[data-saving="true"] .legends-map-privacy-switch-thumb {
  animation: legends-map-privacy-switch-pulse 0.8s ease-in-out infinite;
}

/* ── Hidden items section ── */

.legends-map-privacy-hidden-section {
  border-top: 1px solid var(--legends-map-border);
  padding-top: 14px;
}

.legends-map-privacy-hidden-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--legends-map-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.legends-map-privacy-hidden-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}

.legends-map-privacy-hidden-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--legends-map-card);
  font-size: 0.8125rem;
  color: var(--legends-map-text);
}

.legends-map-privacy-hidden-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legends-map-privacy-hidden-item-type {
  font-size: 0.6875rem;
  color: var(--legends-map-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.legends-map-privacy-unhide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border: 1px solid var(--legends-map-border);
  border-radius: 6px;
  background: transparent;
  color: var(--legends-map-accent);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.legends-map-privacy-unhide-btn:hover {
  background: var(--legends-map-accent);
  color: #fff;
  border-color: var(--legends-map-accent);
}

.legends-map-privacy-unhide-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-unhide-btn[data-saving="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.legends-map-privacy-hidden-empty {
  font-size: 0.8125rem;
  color: var(--legends-map-muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── Refetch feedback states ── */

.legends-map-privacy-refetch-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  animation: legends-map-privacy-refetch-in 0.2s ease-out;
}

.legends-map-privacy-refetch-feedback[data-state="saving"] {
  background: color-mix(in srgb, var(--legends-map-accent) 10%, transparent);
  color: var(--legends-map-accent);
}

.legends-map-privacy-refetch-feedback[data-state="saved"] {
  background: color-mix(in srgb, var(--legends-map-success) 10%, transparent);
  color: var(--legends-map-success);
}

.legends-map-privacy-refetch-feedback[data-state="error"] {
  background: color-mix(in srgb, var(--legends-map-danger) 10%, transparent);
  color: var(--legends-map-danger);
}

.legends-map-privacy-refetch-feedback[data-state="idle"] {
  display: none;
}

.legends-map-privacy-refetch-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: legends-map-privacy-spinner 0.6s linear infinite;
  flex-shrink: 0;
}

.legends-map-privacy-refetch-icon {
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Route refetch overlay ── */

.legends-map-refetch-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--legends-map-bg) 85%, transparent);
  border-radius: inherit;
  z-index: 10;
  animation: legends-map-privacy-refetch-in 0.15s ease-out;
}

.legends-map-refetch-overlay[data-active="false"] {
  display: none;
}

.legends-map-refetch-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
}

.legends-map-refetch-overlay-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--legends-map-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: legends-map-privacy-spinner 0.6s linear infinite;
}

.legends-map-refetch-overlay-text {
  font-size: 0.875rem;
  color: var(--legends-map-muted);
  font-weight: 500;
}

/* ── LGM.M7 Packet C — Coordinate issue submission UI ── */

.legends-map-coordinate-issue-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--legends-map-border);
  border-radius: 8px;
  background: transparent;
  color: var(--legends-map-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.legends-map-coordinate-issue-btn:hover {
  background: var(--legends-map-surface);
  color: var(--legends-map-text);
  border-color: var(--legends-map-accent);
}

.legends-map-coordinate-issue-btn-icon {
  font-size: 0.875rem;
}

.legends-map-coordinate-issue-panel {
  margin-top: 12px;
  border: 1px solid var(--legends-map-border);
  border-radius: 10px;
  background: var(--legends-map-surface);
  overflow: hidden;
  animation: legends-map-coordinate-issue-panel-in 0.2s ease-out;
}

.legends-map-coordinate-issue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--legends-map-border);
}

.legends-map-coordinate-issue-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--legends-map-text);
  margin: 0;
}

.legends-map-coordinate-issue-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--legends-map-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.legends-map-coordinate-issue-close:hover {
  background: var(--legends-map-border);
  color: var(--legends-map-text);
}

.legends-map-coordinate-issue-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legends-map-coordinate-issue-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legends-map-coordinate-issue-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--legends-map-text);
}

.legends-map-coordinate-issue-required {
  color: var(--legends-map-accent);
  font-weight: 600;
}

.legends-map-coordinate-issue-select {
  padding: 8px 10px;
  border: 1px solid var(--legends-map-border);
  border-radius: 6px;
  background: var(--legends-map-bg);
  color: var(--legends-map-text);
  font-size: 0.8125rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  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='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.legends-map-coordinate-issue-select:focus {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 1px;
}

.legends-map-coordinate-issue-textarea {
  padding: 8px 10px;
  border: 1px solid var(--legends-map-border);
  border-radius: 6px;
  background: var(--legends-map-bg);
  color: var(--legends-map-text);
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.legends-map-coordinate-issue-textarea:focus {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 1px;
}

.legends-map-coordinate-issue-char-count {
  font-size: 0.6875rem;
  color: var(--legends-map-muted);
  text-align: right;
}

.legends-map-coordinate-issue-contact-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.legends-map-coordinate-issue-contact-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--legends-map-accent);
  cursor: pointer;
}

.legends-map-coordinate-issue-contact-label {
  font-size: 0.8125rem;
  color: var(--legends-map-text);
}

.legends-map-coordinate-issue-error {
  padding: 8px 12px;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.8125rem;
  border: 1px solid #fecaca;
}

.legends-map-coordinate-issue-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--legends-map-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.legends-map-coordinate-issue-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.legends-map-coordinate-issue-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.legends-map-coordinate-issue-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: legends-map-coordinate-issue-spinner 0.6s linear infinite;
}

.legends-map-coordinate-issue-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.legends-map-coordinate-issue-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #dcfce7;
  color: #166534;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.legends-map-coordinate-issue-success-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legends-map-coordinate-issue-success-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--legends-map-text);
  margin: 0;
}

.legends-map-coordinate-issue-success-ref {
  font-size: 0.75rem;
  color: var(--legends-map-muted);
  margin: 0;
}

/* ── Animations ── */

@keyframes legends-map-privacy-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes legends-map-privacy-switch-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes legends-map-privacy-spinner {
  to { transform: rotate(360deg); }
}

@keyframes legends-map-privacy-refetch-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes legends-map-coordinate-issue-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes legends-map-coordinate-issue-spinner {
  to { transform: rotate(360deg); }
}

/* ── Responsive ── */

@media (max-width: 480px) {
  .legends-map-privacy-controls-body {
    padding: 12px 14px 14px;
    gap: 14px;
  }

  .legends-map-privacy-toggle-row {
    gap: 8px;
  }

  .legends-map-privacy-toggle-label-desc {
    display: none;
  }

  .legends-map-privacy-hidden-list {
    max-height: 160px;
  }

  .legends-map-coordinate-issue-body {
    padding: 12px 14px 14px;
    gap: 12px;
  }

  .legends-map-coordinate-issue-textarea {
    min-height: 48px;
  }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .legends-map-privacy-controls {
    animation: none;
  }

  .legends-map-privacy-switch-thumb {
    transition: none;
  }

  .legends-map-privacy-switch[data-saving="true"] .legends-map-privacy-switch-thumb {
    animation: none;
  }

  .legends-map-privacy-refetch-feedback {
    animation: none;
  }

  .legends-map-refetch-overlay {
    animation: none;
  }

  .legends-map-privacy-refetch-spinner,
  .legends-map-refetch-overlay-spinner {
    animation: none;
  }

  .legends-map-coordinate-issue-panel {
    animation: none;
  }

  .legends-map-coordinate-issue-spinner {
    animation: none;
  }
}

/* ── Focus visible for Packet B keyboard navigation ── */

.legends-map-privacy-toggle-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-controls-close:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-switch input:focus-visible + .legends-map-privacy-switch-track {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-privacy-unhide-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

/* ── Focus visible for Packet C coordinate issue keyboard navigation ── */

.legends-map-coordinate-issue-btn:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-coordinate-issue-close:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-coordinate-issue-select:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-coordinate-issue-textarea:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}

.legends-map-coordinate-issue-submit:focus-visible {
  outline: 2px solid var(--legends-map-accent);
  outline-offset: 2px;
}