/* stats.html — reuses guide.css's body.guide-body (normal scrolling page)
   and .back-link, plus .stats-card/.chart-card/.list-card straight from
   style.css. This file only covers what's specific to this page's layout:
   a scrolling column instead of the sidebar's fixed-height flex column,
   and always-on icon-on-top stat boxes (that style is mobile-only on
   index.html, but this page is reached from mobile, so it's the default
   look here regardless of viewport). */

.stats-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-main .card {
  flex: none;
}

.stats-main .sightings-list {
  flex: none;
  max-height: none;
  overflow-y: visible;
  gap: 10px;
}

.stats-main .sighting-item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.stats-main .stats-grid {
  gap: 6px;
  /* 4 boxes now (community sightings + news mentions, split apart --
     see js/sightings-panel.js's renderStatsAndChart()) instead of the
     base rule's 3-column layout. */
  grid-template-columns: repeat(2, 1fr);
}

.stats-grid-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

.stats-main .stat {
  flex-direction: column;
  text-align: center;
  gap: 6px;
  padding: 10px 6px 12px;
  border-radius: 10px;
}

.stats-main .stat-text {
  align-items: center;
}

.stats-main .stat-total {
  background: rgba(137, 135, 129, 0.08);
}

.stats-main .stat-year {
  background: rgba(12, 163, 12, 0.08);
}

.stats-main .stat-recent {
  background: rgba(217, 123, 41, 0.08);
}

/* Distinct from the orange/green community-data cards above — a clearly
   separate "official research" figure so the two numbers (our community
   report count vs. LVMI Silava's population estimate) never read as the
   same kind of count. */
.research-card {
  border-left: 3px solid var(--series-1);
}

.research-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}

.research-number {
  color: var(--series-1);
}

/* .stat-label is shared with the narrow compact stat boxes elsewhere
   (index.html's home feed, this page's own community-stats row above),
   where a tight max-width/centered-flex layout makes sense for a 1-2 word
   caption. This card's label is a full descriptive sentence next to a big
   number in a wide row, so it needs to read as normal wrapping text
   instead — the shared max-width:7ch was squeezing it into a single
   vertical column of one word per line. */
.research-figure .stat-label {
  max-width: none;
  min-height: 0;
  display: block;
  text-align: left;
  font-size: 0.85rem;
}

.research-desc {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* A deliberately abstract 2x2 layout (Kurzeme/Vidzeme top,
   Zemgale/Latgale bottom) — a rough compass-position approximation, not a
   geographic outline of Latvia. Levels come straight from the same
   regional description already cited on biology.html ("visvairāk lāču
   sastopami Vidzemē un Latgalē... arvien biežāk arī Kurzemē un Zemgalē"),
   just visualized instead of only stated as a sentence. */
.region-card {
  border-left: 3px solid var(--brand-forest);
}

.region-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "kurzeme vidzeme"
    "zemgale latgale";
  gap: 8px;
  margin: 8px 0 12px;
}

.region-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  border-radius: 10px;
}

.region-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.region-level {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.region-level-highest {
  background: rgba(47, 93, 63, 0.14);
}

.region-level-high {
  background: rgba(47, 93, 63, 0.06);
}

/* Not a geographic map (see the region-card comment above for the same
   reasoning) — grouped by rough compass description straight from each
   territory's own municipality/parish names in the source report, listed
   top-to-bottom rather than positioned on any kind of grid, since the
   groups vary a lot in how many named territories they contain. */
.monitoring-card {
  border-left: 3px solid var(--series-1);
}

.monitoring-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}

.monitoring-zone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(42, 120, 214, 0.06);
}

.monitoring-zone-name {
  font-weight: 700;
  font-size: 0.85rem;
}

.monitoring-zone-list {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.4;
}