/* ---------- Stats overview (issue #122) ----------
   Same fixed full-viewport overlay pattern as .map-view (map.css), same
   z-index so #menu-toggle (see that file's #33 comment) stays reachable
   above it. overflow-y:auto - unlike the map, this content can exceed the
   viewport in landscape/small screens and has no gesture of its own to
   reclaim, so a plain scroll is the right escape hatch. */
.stats-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
}

.stats-view[hidden] {
  display: none;
}

.stats-content {
  max-width: 420px;
  width: 100%;
  text-align: center;
  margin: auto;
}

.stats-title {
  font-size: 1.6rem;
  margin-bottom: 36px;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 28px;
  direction: ltr; /* counts are numerals, not translated content - see .counter-grid in story.css */
}

.stat-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
}

.stat-unit span {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 2.4rem;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}

.stat-unit label {
  margin-top: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-light);
}

.stats-highlight {
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--grey);
}

.stats-highlight[hidden] {
  display: none;
}

/* The place name itself is raw, untranslated Nominatim English (see
   AI-HANDOFF.md) - isolated so it renders left-to-right even inside a
   Persian (RTL) sentence around it, same reasoning as the numerals above. */
#stat-top-place-value {
  color: var(--black);
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  unicode-bidi: isolate;
  direction: ltr;
}