:root {
  color-scheme: light;
  --surface-1: #fffaf0;
  --surface-2: #fff4de;
  --page-plane: #f7ecd6;
  --text-primary: #211d14;
  --text-secondary: #5c5340;
  --text-muted: #948a71;
  --gridline: #e9dcbd;
  --baseline: #d2c39a;
  --border: rgba(33, 25, 10, 0.14);
  --accent: #1f6f54;
  --accent-strong: #144d3a;
  --accent-2: #d9731c;
  --accent-2-strong: #b5570f;
  --accent-3: #b3392b;
  --accent-gold: #dda21b;
  --status-final: #1f8a4c;
  --status-draft: #dda21b;
  --status-none: #948a71;
  --shadow-soft: 0 10px 24px -12px rgba(33, 25, 10, 0.28);
  --shadow-lift: 0 18px 32px -14px rgba(33, 25, 10, 0.32);
  --radius-lg: 22px;
  --radius-md: 14px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --font-body: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #16241d;
    --surface-2: #1b2c22;
    --page-plane: #0e1a14;
    --text-primary: #f5ecd7;
    --text-secondary: #c8bea3;
    --text-muted: #8b8268;
    --gridline: #24382c;
    --baseline: #33473a;
    --border: rgba(245, 236, 216, 0.14);
    --accent: #4fb787;
    --accent-strong: #7fd4ab;
    --accent-2: #f0954a;
    --accent-2-strong: #ffb066;
    --accent-3: #e2685a;
    --accent-gold: #f0c14b;
    --status-final: #4fb787;
    --status-draft: #f0c14b;
    --status-none: #857c63;
    --shadow-soft: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 20px 36px -16px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #16241d;
  --surface-2: #1b2c22;
  --page-plane: #0e1a14;
  --text-primary: #f5ecd7;
  --text-secondary: #c8bea3;
  --text-muted: #8b8268;
  --gridline: #24382c;
  --baseline: #33473a;
  --border: rgba(245, 236, 216, 0.14);
  --accent: #4fb787;
  --accent-strong: #7fd4ab;
  --accent-2: #f0954a;
  --accent-2-strong: #ffb066;
  --accent-3: #e2685a;
  --accent-gold: #f0c14b;
  --status-final: #4fb787;
  --status-draft: #f0c14b;
  --status-none: #857c63;
  --shadow-soft: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 20px 36px -16px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 6% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--accent-gold) 16%, transparent), transparent 40%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 46%),
    var(--page-plane);
  color: var(--text-primary);
}

a { color: var(--accent-strong); }

/* ---------- keyframes ---------- */
@keyframes fly-across {
  0% { transform: translate(-10vw, 6px) scale(0.9); opacity: 0; }
  8% { opacity: 0.55; }
  50% { transform: translate(55vw, -22px) scale(1.05); }
  92% { opacity: 0.5; }
  100% { transform: translate(120vw, 4px) scale(0.9); opacity: 0; }
}
@keyframes leaf-sway {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-6px); }
}
@keyframes firefly-drift {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0.15; }
  30% { opacity: 0.85; }
  50% { transform: translate(10px, -14px) scale(1.15); opacity: 0.35; }
  75% { opacity: 0.9; }
  100% { transform: translate(-6px, -4px) scale(0.8); opacity: 0.15; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: var(--shadow-soft), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: var(--shadow-soft), 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .flying-bird, .drifting-leaf, .firefly { animation: none !important; }
}

/* ---------- header / canopy hero ---------- */
.site-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, var(--accent-strong) 0%, var(--accent) 45%, #2c8f68 75%, var(--accent-gold) 130%);
  padding: 2.6rem 1.25rem 3.6rem;
  isolation: isolate;
}
.header-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; color: #fdf7e6; }
.header-kicker {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe3ad;
  animation: fade-up 0.6s ease both;
}
.site-header h1 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  letter-spacing: -0.01em;
  color: #fffaf0;
  animation: fade-up 0.6s ease 0.08s both;
}
.site-header h1 em {
  font-style: italic;
  font-weight: 500;
  color: #ffd77a;
}
.subtitle {
  margin: 0 0 1.15rem;
  color: #eee3c4;
  max-width: 66ch;
  line-height: 1.55;
  font-size: 1.02rem;
  animation: fade-up 0.6s ease 0.16s both;
}
.subtitle a { color: #fff3d1; text-decoration-color: rgba(255, 243, 209, 0.5); }
.header-links { position: relative; z-index: 3; display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; animation: fade-up 0.6s ease 0.24s both; }

/* ---------- source status ---------- */
.source-status {
  position: relative;
  z-index: 3;
  margin-top: 1.5rem;
  animation: fade-up 0.6s ease 0.36s both;
}
.source-status-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  color: #f0e6c9;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.15rem 0;
}
.source-status-summary::-webkit-details-marker { display: none; }
.source-status-summary:focus-visible { outline: 2px solid #ffe9a8; outline-offset: 3px; border-radius: 4px; }
.source-status-text a { color: #ffe3ad; text-decoration-color: rgba(255, 227, 173, 0.5); }
.source-status-text strong { color: #fffaf0; }
.source-status-caret { flex: none; color: #f0e6c9; transition: transform 0.18s ease; }
.source-status[open] .source-status-caret { transform: rotate(180deg); }
.source-status-body {
  margin-top: 0.75rem;
  padding: 1rem 1.1rem 1.15rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 820px;
}
.source-status-heading {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fffaf0;
}
.source-status-hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: rgba(255, 250, 240, 0.72);
}
.source-status-body .table-wrap { overflow-x: auto; }
.source-status-generated {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: rgba(255, 250, 240, 0.55);
  text-align: right;
}
.source-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  overflow: hidden;
}
.source-status-table th, .source-status-table td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
}
.source-status-table th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffe9c2;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.source-status-table td { color: #fdf7e6; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.source-status-table tr:last-child td { border-bottom: none; }
.source-status-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.source-status-table td small { color: rgba(255, 250, 240, 0.62); font-size: 0.78em; font-weight: 400; }
.source-status-table a { color: #ffe3ad; font-weight: 700; text-decoration-color: rgba(255, 227, 173, 0.5); }
/* Conflated summarizes the MoEF/Wikidata join rather than being an external
   source, and doubles as the expand/collapse trigger for the four upstream
   sources nested under it. */
.source-status-table tr.source-status-derived td:first-child { color: #ffe9c2; font-style: italic; }
.source-status-table tr.source-status-toggle { cursor: pointer; }
.source-status-table tr.source-status-toggle:hover td { background: rgba(255, 255, 255, 0.06); }
.source-status-table tr.source-status-toggle:focus-visible { outline: 2px solid #ffe9a8; outline-offset: -2px; }
.source-status-row-caret { flex: none; margin-right: 0.4rem; vertical-align: -1px; transition: transform 0.18s ease; }
.source-status-toggle[aria-expanded="true"] .source-status-row-caret { transform: rotate(90deg); }
/* Final ESZ is the headline figure of the status split -- call it out. */
.source-status-table tr.source-status-highlight td { background: color-mix(in srgb, var(--accent-gold) 16%, transparent); }
.source-status-table tr.source-status-highlight td:first-child { color: #ffe9c2; font-weight: 700; }
/* Nested rows (the four upstream sources under Conflated, or the
   Final/Draft/No-notification status split) indented under their parent. */
.source-status-table tr.source-status-subrow td { padding-top: 0.28rem; padding-bottom: 0.28rem; font-size: 0.85em; }
.source-status-table tr.source-status-subrow td:first-child { padding-left: 1.6rem; color: rgba(255, 250, 240, 0.68); }
.source-status-table tr.source-status-subrow td:first-child::before { content: '\21B3'; margin-right: 0.4rem; opacity: 0.6; }
.source-status-table tr.source-status-subrow td:not(:first-child) { color: rgba(253, 247, 230, 0.72); }
@media (max-width: 640px) {
  .source-status-table { font-size: 0.78rem; }
  .source-status-table th, .source-status-table td { padding: 0.4rem 0.5rem; }
}

/* ---------- hero aggregate stats ---------- */
.hero-stats-block { margin-top: 2rem; animation: fade-up 0.6s ease 0.32s both; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}
.hero-stat {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.3rem 1.3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-stat:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.5); }
.hero-stat-primary {
  background: linear-gradient(160deg, rgba(255, 215, 122, 0.3), rgba(255, 255, 255, 0.09) 65%);
  border-color: rgba(255, 215, 122, 0.55);
}
.hero-stat-primary:hover { background: linear-gradient(160deg, rgba(255, 215, 122, 0.38), rgba(255, 255, 255, 0.14) 65%); }
.hero-stat-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd77a;
  margin-bottom: 0.5rem;
}
.hero-stat-icon svg { width: 100%; height: 100%; }
.hero-stat-primary .hero-stat-icon { color: #fff3d1; }
.hero-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: #fffaf0;
}
.hero-stat-label {
  display: block;
  margin-top: 0.32rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffe9c2;
}
.hero-stat-label sup { color: #ffd77a; }
.hero-stat-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: rgba(255, 250, 240, 0.72);
}
.hero-stat-progress {
  margin-top: 0.75rem;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.hero-stat-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb84d, #ffe9a8);
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-stats-footnote {
  margin: 0.65rem 0 0;
  font-size: 0.74rem;
  color: rgba(255, 250, 240, 0.6);
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

.hero-stat[role="button"] { cursor: pointer; }
.hero-stat[role="button"]:focus-visible {
  outline: 2px solid #ffe9a8;
  outline-offset: 2px;
}

/* ---------- KPI detail modal ---------- */
.kpi-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1.25rem;
  overflow-y: auto;
  background: rgba(10, 16, 12, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.kpi-modal-overlay[hidden] { display: none; }
.kpi-modal-overlay.is-open { opacity: 1; }
.kpi-modal {
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.18s ease;
}
.kpi-modal-overlay.is-open .kpi-modal { transform: translateY(0) scale(1); }
.kpi-modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem 1.1rem;
  border-bottom: 1px solid var(--gridline);
  background: var(--surface-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi-modal-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.kpi-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-primary);
}
.kpi-modal-subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 62ch;
}
.kpi-modal-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kpi-modal-close:hover { color: var(--text-primary); border-color: var(--text-muted); transform: rotate(90deg); }
.kpi-modal-body { padding: 1.2rem 1.6rem 1.6rem; overflow-y: auto; }
.kpi-modal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.kpi-modal-summary strong { color: var(--text-primary); font-family: var(--font-display); font-size: 1.05rem; }

.kpi-table-wrap { overflow-x: auto; }
.kpi-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.kpi-table th, .kpi-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.kpi-table td:nth-child(2) { white-space: normal; }
.kpi-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.kpi-table tbody tr:hover { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.kpi-table-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpi-table-pct-cell { display: flex; align-items: center; gap: 0.5rem; }
.kpi-table-pct-bar {
  width: 60px;
  height: 6px;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
  flex: none;
}
.kpi-table-pct-fill { display: block; height: 100%; border-radius: 999px; background: var(--status-final); }

.kpi-intro {
  margin: 0 0 1.3rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius-md);
  background: var(--page-plane);
}
.kpi-intro summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}
.kpi-intro .section-intro { margin-top: 0.6rem; }
.kpi-intro-media {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  margin: 0.9rem 0;
}
.kpi-intro-image-col { flex: none; display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 260px; }
.kpi-intro-image-link { display: block; }
.kpi-intro-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.kpi-intro-day-counter {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--status-none) 35%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--status-none) 14%, var(--surface-1)), var(--surface-1) 70%);
  text-align: center;
}
.kpi-intro-day-counter strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--accent-strong);
}
.kpi-intro-day-counter span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.kpi-timeline {
  flex: 1 1 260px;
  min-width: 240px;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
  list-style-type: disc;
}
.kpi-timeline li { margin-bottom: 0.4rem; }
.kpi-timeline strong { color: var(--accent-strong); font-family: var(--font-display); }
.kpi-intro-source { margin: 0.4rem 0 0; font-size: 0.74rem; color: var(--text-muted); }

/* Overrides for the same .kpi-intro markup shown standalone in the header,
   above the hero KPIs, rather than inside the (light-background) modal. */
.header-inner .kpi-intro {
  margin: 0 0 1.6rem;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fdf7e6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-inner .kpi-intro summary { color: #fff3d1; }
.header-inner .kpi-intro .section-intro { color: rgba(253, 247, 230, 0.85); }
.header-inner .kpi-timeline { color: rgba(253, 247, 230, 0.8); }
.header-inner .kpi-timeline a { color: #fff3d1; text-decoration-color: rgba(255, 243, 209, 0.5); }
.header-inner .kpi-timeline strong { color: #ffd77a; }
.header-inner .kpi-intro-source { color: rgba(253, 247, 230, 0.6); }
.header-inner .kpi-intro-source a { color: rgba(253, 247, 230, 0.85); }
.header-inner .kpi-intro-day-counter {
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(160deg, rgba(255, 215, 122, 0.22), rgba(255, 255, 255, 0.08) 65%);
}
.header-inner .kpi-intro-day-counter strong { color: #ffd77a; }
.header-inner .kpi-intro-day-counter span { color: rgba(253, 247, 230, 0.75); }

.kpi-summary-tiles { margin: 0 0 0.6rem; }
.kpi-filter-status {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.kpi-filter-status strong { color: var(--text-primary); }
.kpi-filter-status button {
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
}
.kpi-filter-status button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

body.modal-open { overflow: hidden; }

.canopy-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.flying-bird {
  position: absolute;
  width: 30px;
  color: rgba(255, 250, 235, 0.75);
  animation: fly-across linear infinite;
}
.bird-1 { top: 18%; animation-duration: 34s; animation-delay: 1s; }
.bird-2 { top: 34%; width: 22px; animation-duration: 46s; animation-delay: 9s; opacity: 0.8; }
.bird-3 { top: 12%; width: 20px; animation-duration: 52s; animation-delay: 20s; }

.drifting-leaf {
  position: absolute;
  width: 34px;
  fill: color-mix(in srgb, var(--accent-gold) 70%, #fff 0%);
  opacity: 0.35;
  transform-origin: top center;
  animation: leaf-sway ease-in-out infinite;
}
.leaf-1 { top: 8%; left: 6%; animation-duration: 6s; }
.leaf-2 { top: 12%; right: 10%; width: 26px; opacity: 0.28; animation-duration: 7.5s; animation-delay: 1.2s; }
.leaf-3 { top: 60%; left: 88%; width: 20px; opacity: 0.22; animation-duration: 5s; animation-delay: 0.6s; }

.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 8px 3px rgba(255, 233, 168, 0.8);
  animation: firefly-drift ease-in-out infinite;
}
.firefly-1 { top: 66%; left: 12%; animation-duration: 4.5s; }
.firefly-2 { top: 78%; left: 30%; animation-duration: 5.5s; animation-delay: 0.8s; }
.firefly-3 { top: 70%; left: 55%; animation-duration: 4s; animation-delay: 1.6s; }
.firefly-4 { top: 82%; left: 72%; animation-duration: 6s; animation-delay: 0.4s; }
.firefly-5 { top: 60%; left: 90%; animation-duration: 5s; animation-delay: 2s; }

.canopy-divider {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 42px;
  fill: var(--page-plane);
  z-index: 2;
}
.canopy-divider-footer { position: relative; bottom: auto; height: 34px; fill: var(--page-plane); margin-top: -1px; }

.ambient-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
.ambient-toggle .sound-wave { opacity: 0.5; transition: opacity 0.2s; }
.ambient-toggle.is-playing { background: rgba(255, 255, 255, 0.18); }
.ambient-toggle.is-playing .sound-wave { opacity: 1; animation: glow-pulse 2.4s ease-in-out infinite; animation-name: none; }
.ambient-toggle.is-playing .sound-wave-2 { opacity: 0.75; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.btn:hover { border-color: var(--text-muted); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-2-strong));
  color: #fff8ea;
  border-color: transparent;
}
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; }

.site-header .btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fffaf0;
}
.site-header .btn:hover { background: rgba(255, 255, 255, 0.22); }
.site-header .btn-primary {
  background: linear-gradient(135deg, #ffcf6b, var(--accent-2));
  color: #2b1a05;
  border-color: transparent;
}

/* ---------- download dropdown ---------- */
.dropdown { position: relative; }
.dropdown-toggle .dropdown-caret { transition: transform 0.18s ease; }
.dropdown.is-open .dropdown-toggle .dropdown-caret { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 0.4rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: var(--radius-sm, 8px);
  background: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.dropdown-item + .dropdown-item { margin-top: 0.1rem; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; }

section { margin-bottom: 2.25rem; }

/* ---------- filter hero ---------- */
.filter-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-gold) 22%, var(--surface-1)), var(--surface-1) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.filter-hero::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.filter-hero-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.filter-hero-heading {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.filter-hero-heading .stat-label { font-size: 0.95rem; }
.stat-value-lg { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; color: var(--accent-strong); }
.filter-hero--active { border-color: var(--accent-2); }
.filter-hero--active .stat-value-lg { color: var(--accent-2-strong); }
.filter-hero-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter-hero-controls .type-filter-select {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  min-width: 140px;
}

/* ---------- KPI stat tiles ---------- */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.stat-tile {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
button.stat-tile {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.stat-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.stat-tile.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-lift);
}
.stat-tile-final { background: linear-gradient(160deg, color-mix(in srgb, var(--status-final) 12%, var(--surface-1)), var(--surface-1) 70%); border-color: color-mix(in srgb, var(--status-final) 35%, var(--border)); }
.stat-tile-draft { background: linear-gradient(160deg, color-mix(in srgb, var(--status-draft) 16%, var(--surface-1)), var(--surface-1) 70%); border-color: color-mix(in srgb, var(--status-draft) 35%, var(--border)); }
.stat-tile-none { background: linear-gradient(160deg, color-mix(in srgb, var(--status-none) 14%, var(--surface-1)), var(--surface-1) 70%); border-color: color-mix(in srgb, var(--status-none) 30%, var(--border)); }
.stat-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.type-filter-select {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.type-filter-select:hover { border-color: var(--text-muted); }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; }
.stat-note { font-size: 0.78rem; color: var(--text-muted); }

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.dot-final { background: var(--status-final); color: var(--status-final); }
.dot-draft { background: var(--status-draft); color: var(--status-draft); }
.dot-none { background: var(--status-none); color: var(--status-none); }

.progress-wrap { margin-top: 1.1rem; }
.progress-bar {
  display: flex;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gridline);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.segment { height: 100%; transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.segment:not(:last-child) { border-right: 2px solid var(--page-plane); }
.segment-final { background: linear-gradient(90deg, var(--status-final), color-mix(in srgb, var(--status-final) 70%, #fff 0%)); }
.segment-draft { background: linear-gradient(90deg, var(--status-draft), color-mix(in srgb, var(--status-draft) 70%, #fff 0%)); }
.segment-none { background: var(--status-none); }
.progress-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.legend-item { display: flex; align-items: center; gap: 0.4rem; }

.caveat {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.qa-panel {
  margin-top: 0.85rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  background: var(--surface-1);
}
.qa-panel summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.qa-instructions {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0.6rem 0;
  max-width: 80ch;
}
.qa-instructions code {
  font-size: 0.85em;
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}
.qa-legend-swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 3px;
  vertical-align: -0.1em;
  border: 1px solid var(--border);
}
.qa-legend-swatch-moef { background: color-mix(in srgb, var(--accent-2) 16%, var(--surface-1)); }
.qa-legend-swatch-wikidata { background: color-mix(in srgb, var(--accent) 14%, var(--surface-1)); }

.qa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.qa-search-group { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 220px; }
#qa-name-search {
  flex: 1 1 180px;
  min-width: 140px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.82rem;
}
.qa-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.qa-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.qa-mode-btn.is-active { background: var(--accent); color: #fff8ea; }

.qa-table-wrap { max-height: 320px; overflow-y: auto; overflow-x: auto; }
.qa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.qa-table th, .qa-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gridline);
}
.qa-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
}
.qa-row-moef { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.qa-row.is-copied { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
.qa-row-matched { background: color-mix(in srgb, var(--status-final) 12%, transparent); }
.qa-name { margin-right: 0.4rem; }
.qa-match-rename { display: block; color: var(--text-muted); }
.qa-match-banner { display: block; font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.15rem; }
.qa-select-label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.qa-hide-matched-toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 0.78rem; color: var(--text-secondary); }
.qa-already-matched-badge {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
}

.btn-xs {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-xs:hover { border-color: var(--text-muted); }
.btn-xs:disabled { opacity: 0.45; cursor: not-allowed; }
.link-btn {
  border: none;
  background: transparent;
  color: var(--accent-strong);
  font-size: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.qa-quickstatements { margin-top: 0.75rem; }
.qa-quickstatements-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.qa-quickstatements-title { font-weight: 700; font-size: 0.82rem; }
.qa-quickstatements-count { font-size: 0.76rem; color: var(--text-muted); flex: 1 1 auto; }
.qa-quickstatements-output {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  resize: vertical;
}

.search-group {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 260px;
}
#filter-search {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.9rem;
}
.table-hint { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.6rem; }

/* Result count + clear-filters sit on the left, right after the search
   controls; "Data filters" is pinned to the right end of the toolbar row. */
.result-status { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; }
.result-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  cursor: pointer;
}
.result-clear-btn:hover { background: var(--accent-3); border-color: var(--accent-3); color: #fff8ea; }

.data-filters-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; flex: none; }
.data-filters-toggle[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface-1);
}
.data-filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff8ea;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.advanced-search-panel {
  margin-bottom: 0.8rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  background: var(--surface-1);
}
.advanced-search-body { margin-top: 0; }
.advanced-search-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 0.6rem;
  max-width: 80ch;
}
.doc-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin-bottom: 0.2rem;
}
.doc-filter-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.doc-filter-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.doc-filter-icon svg { width: 100%; height: 100%; }
.doc-filter-field select { font-size: 0.8rem; padding: 0.25rem 0.5rem; }

.edit-data-panel { margin-top: 0.8rem; }
.edit-data-panel > .section-intro { margin-top: 0.6rem; }

.contribute-section { position: relative; margin-top: 2rem; }
.section-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}
.section-intro {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 80ch;
  margin: 0 0 1rem;
}

.explorer-section { position: relative; }
.explorer-grid {
  display: grid;
  grid-template-areas: "map" "table";
  gap: 1.4rem;
}
.map-panel { grid-area: map; min-width: 0; }
.table-panel { grid-area: table; min-width: 0; }

@media (min-width: 1024px) {
  .explorer-grid {
    grid-template-columns: 7fr 3fr;
    grid-template-areas: "table map";
    align-items: start;
  }
  .map-panel { position: sticky; top: 1rem; }
  #map { height: calc(100vh - 220px); }
}

#map {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: var(--radius-lg);
  border: 3px solid var(--surface-1);
  outline: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.map-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.6rem 0 0; }

.map-layer-control {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 0.35rem 0.6rem;
}
.map-layer-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.maplibregl-popup-content {
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.popup-title { font-weight: 700; font-family: var(--font-display); margin: 0 0 0.35rem; }
.popup-row { font-size: 0.85rem; color: var(--text-secondary); margin: 0.15rem 0; }

.map-hover-popup {
  pointer-events: none;
}
.map-hover-popup .maplibregl-popup-content {
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.map-hover-popup .maplibregl-popup-tip {
  display: none;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.result-count { font-size: 0.85rem; color: var(--text-secondary); }

.accordion-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
}

/* ---------- state accordion ---------- */
.pa-accordion { background: var(--surface-1); }
.state-row { border-bottom: 1px solid var(--gridline); }
.state-row:last-child { border-bottom: none; }

/* The collapsed state row (name, count, combined progress) gets its own
   fixed dark theme, independent of the page's light/dark toggle -- same
   "photo-strip" treatment as a collapsed .pa-card below. Once a state is
   expanded, its body (.state-row-body / .pa-type-group) reverts to the
   normal themed surface, since that content is read as detail, not browsed. */
.state-row-header {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  padding: 0.85rem 1.1rem;
  background: #16241d;
  border: none;
  color: #f5ecd7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.state-row-header:hover { background: #1b2c22; }
.state-row-chevron {
  flex: none;
  display: inline-block;
  color: rgba(245, 236, 216, 0.68);
  transition: transform 0.18s ease;
}
.state-row-header[aria-expanded="true"] .state-row-chevron { transform: rotate(90deg); color: #7fd4ab; }
.state-row-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  flex: none;
  transition: color 0.18s ease;
}
/* An open state gets a visibly heavier header -- brighter accent-tinted
   background, a left accent bar, and a bolder/brighter title -- so it's
   unmistakable at a glance which state(s) are currently expanded. */
.state-row-header[aria-expanded="true"] {
  background: #1f3327;
  box-shadow: inset 3px 0 0 #4fb787;
}
.state-row-header[aria-expanded="true"]:hover { background: #24392c; }
.state-row-header[aria-expanded="true"] .state-row-name {
  color: #9fe6c4;
  font-size: 1.12rem;
}
.state-row-count { font-size: 0.8rem; color: rgba(245, 236, 216, 0.68); flex: none; }

/* Progress blocks (state-level and per-type) share one fixed width and are
   pushed flush against the same right padding in both contexts, so their
   bars line up exactly regardless of how much text sits to their left. The
   meta line sits above the bar in both. */
.state-row-progress,
.pa-type-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  flex: none;
  width: 180px;
  margin-left: auto;
}
.state-row-progress .chip-bar,
.pa-type-progress .chip-bar {
  width: 100%;
}
/* Thinner than the state-level bar so the hierarchy (state rolls up several
   type groups) reads visually, not just from position/indent. */
.pa-type-progress .chip-bar { height: 4px; }
.state-row-progress-meta { font-size: 0.78rem; color: rgba(245, 236, 216, 0.68); white-space: nowrap; text-align: right; }

.chip-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gridline);
}
.chip-bar-final { background: var(--status-final); }
.chip-bar-draft { background: var(--status-draft); }
.chip-bar-none { background: var(--status-none); }

/* The whole expanded state row -- type groups, their progress bars, and the
   PA cards within -- keeps the same fixed dark "photo-strip" theme as the
   collapsed header, independent of the page's light/dark toggle, so a state
   doesn't flash from a dark header into a light body when opened. Only a
   card's own expanded detail view (read as body text, not browsed) reverts
   to the normal themed surface -- see .pa-card.is-expanded below. */
.state-row-body { background: #0e1a14; color: #f5ecd7; }
.state-row:not(.is-open) .state-row-body { display: none; }
.state-row-body .chip-bar { background: rgba(245, 236, 216, 0.14); }
.state-row-body .pa-type-progress-meta { color: rgba(245, 236, 216, 0.68); }
.state-row-body .pa-type-count { color: rgba(245, 236, 216, 0.55); }

/* .pa-type-group is a <section>, which the global `section` rule below gives
   a 2.25rem bottom margin -- override to 0 so type groups sit flush against
   each other (separated only by the border-top) and the last one doesn't
   leave a large gap before the next state row. */
.pa-type-group { position: relative; margin-bottom: 0; padding: 0.9rem 1.1rem 1.2rem 1rem; border-top: 1px solid rgba(245, 236, 216, 0.1); border-left: 3px solid transparent; }
.state-row-body .pa-type-group:first-child { border-top: none; }
.pa-type-group--tiger { background: linear-gradient(120deg, rgba(240, 149, 74, 0.14), transparent 65%); border-left-color: rgba(240, 149, 74, 0.55); }
.pa-type-group--np { background: linear-gradient(120deg, rgba(79, 183, 135, 0.14), transparent 65%); border-left-color: rgba(79, 183, 135, 0.55); }
.pa-type-group--bird-sanctuary { background: linear-gradient(120deg, rgba(90, 169, 230, 0.14), transparent 65%); border-left-color: rgba(90, 169, 230, 0.55); }
.pa-type-group--wildlife-sanctuary { background: linear-gradient(120deg, rgba(240, 193, 75, 0.14), transparent 65%); border-left-color: rgba(240, 193, 75, 0.55); }
.pa-type-group--other { background: linear-gradient(120deg, rgba(139, 130, 104, 0.14), transparent 65%); border-left-color: rgba(139, 130, 104, 0.5); }

.pa-type-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0 0 0.7rem;
}
.pa-type-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  flex: none;
}
.pa-type-icon {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.pa-type-icon svg { width: 15px; height: 15px; }
.pa-type-group--tiger .pa-type-icon { background: rgba(240, 149, 74, 0.22); color: #f0954a; }
.pa-type-group--np .pa-type-icon { background: rgba(79, 183, 135, 0.22); color: #4fb787; }
.pa-type-group--bird-sanctuary .pa-type-icon { background: rgba(90, 169, 230, 0.22); color: #5aa9e6; }
.pa-type-group--wildlife-sanctuary .pa-type-icon { background: rgba(240, 193, 75, 0.22); color: #f0c14b; }
.pa-type-group--other .pa-type-icon { background: rgba(139, 130, 104, 0.22); color: #b5ab8f; }
.pa-type-count { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }
.pa-type-progress-meta { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; text-align: right; }

/* ---------- PA card list ---------- */
/* Each PA is a full-width row (not a tile), laid out horizontally so a
   thumbnail + name + area + status fit in one compact line. */
.pa-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.pa-card:hover { box-shadow: var(--shadow-soft); }
.pa-card.is-selected { box-shadow: 0 0 0 2px var(--accent); }

/* Collapsed, the row gets its own fixed dark theme (independent of the
   page's light/dark toggle) -- a deliberate photo-strip look, not the
   paper-toned surface the rest of the UI uses. Corners are square and the
   border carries no per-status colour -- the notification status is already
   stated as text on the right (see .pa-card-status), so a coloured accent
   here would just be redundant. Clicking it swaps this compact strip for the
   wiki-sourced header (image/title/excerpt) in place -- see
   .pa-card.is-expanded .pa-card-row below -- rather than duplicating that
   content in a separate panel. */
.pa-card-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  background: #16241d;
  color: #f5ecd7;
  transition: background 0.15s ease;
}
.pa-card-row:hover { background: #1c2e24; }
.pa-card-row .pa-card-right { color: rgba(245, 236, 216, 0.68); }

/* Expanded, the row holds the wiki header (read as body text/links, not
   browsed) so it reverts to the normal themed surface/text colour -- else it
   would inherit the fixed dark-mode text colour set on .state-row-body above
   and blend into its own light-mode background. */
.pa-card.is-expanded .pa-card-row {
  display: block;
  background: var(--surface-1);
  color: var(--text-primary);
}
.pa-card.is-expanded .pa-card-row:hover { background: var(--surface-1); }

/* The compact strip and expanded header are both always in the DOM (see
   cardOuterHtml in app.js) -- only one is shown at a time, purely via CSS, so
   toggling a card never tears down (and thus never re-fetches/re-renders)
   the wiki header's image or Commons gallery. display:contents on the
   compact wrapper keeps its .pa-card-thumb/.pa-card-body as direct flex
   children of .pa-card-row, matching the layout as if the wrapper weren't
   there. */
.pa-card-compact { display: contents; }
.pa-card.is-expanded .pa-card-compact { display: none; }
.pa-card-expanded-header { display: none; }
.pa-card.is-expanded .pa-card-expanded-header { display: block; }

.pa-card-thumb {
  flex: none;
  align-self: stretch;
  width: 68px;
  background: #0e1a14;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pa-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-card-thumb-placeholder {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
}
.pa-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
}
.pa-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-card-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.pa-card-area { white-space: nowrap; }
.pa-card-status { white-space: nowrap; }

/* Notification history pops open below the row -- normal themed
   surface/text colour, same reasoning as the expanded row above. Empty when
   collapsed, so it takes up no space until a card is expanded; the top
   border only appears once there's actually something below the row. */
.pa-card-detail {
  background: var(--surface-1);
  color: var(--text-primary);
}
.pa-card-detail:not(:empty) { border-top: 1px solid var(--border); }
.pa-card-detail:empty { display: none; }

.pa-detail-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.1rem;
  padding: 1rem 1.2rem 0.4rem;
}
@media (max-width: 720px) {
  .pa-detail-grid { grid-template-columns: 1fr; }
}
.pa-detail-media { border-radius: var(--radius-md); overflow: hidden; background: var(--page-plane); min-height: 120px; display: flex; flex-direction: column; align-items: center; }
.pa-detail-media a { display: block; }
.pa-detail-image { width: 120px; height: 120px; display: block; object-fit: cover; }
.pa-detail-media a + a { border-top: 1px solid var(--border); }
.pa-commons-mosaic {
  width: 126px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.pa-commons-mosaic:empty { display: none; margin-top: 0; }
.pa-commons-mosaic a:not(.pa-commons-edit) { width: 40px; height: 40px; }
.pa-commons-mosaic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pa-commons-edit {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  margin-top: 0.15rem;
}
.pa-commons-edit:hover { border-bottom-color: currentColor; }
.pa-detail-title { margin: 0 0 0.3rem; font-family: var(--font-display); font-size: 1.15rem; }
.pa-detail-meta { margin: 0 0 0.3rem; font-size: 0.82rem; color: var(--text-secondary); }
.pa-detail-links { margin: 0 0 0.5rem; font-size: 0.85rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pa-detail-excerpt { font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.pa-detail-excerpt:empty { display: none; }
.pa-excerpt-more { white-space: nowrap; font-size: 0.82rem; }

/* Protected area title linked to Wikipedia, with Wikidata/OSM logo links --
   used in both the accordion detail card title and the KPI group modal
   tables (see paTitleLinksHtml in app.js). */
.pa-title-with-logos { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; white-space: normal; }
.pa-title-link { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.pa-title-link:hover { border-bottom-color: currentColor; }
/* Wikipedia "redlink" styling for a title with no confirmed article. */
.pa-title-link-new { color: var(--accent-3); }
.pa-title-link-new:hover { color: var(--accent-3); }
.pa-title-logos { display: inline-flex; align-items: center; gap: 0.3rem; }
.pa-title-logo { display: inline-flex; color: var(--text-muted); opacity: 0.75; transition: opacity 0.15s, color 0.15s; }
.pa-title-logo:hover { opacity: 1; color: var(--accent); }
.pa-title-logo svg { width: 13px; height: 13px; }

.pa-notification-heading {
  margin: 0.6rem 1.2rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.pa-notification-heading a { color: inherit; text-decoration: none; }
.pa-notification-heading a:hover { text-decoration: underline; }
.pa-notification-list { list-style: none; margin: 0; padding: 0 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pa-notification-row {
  display: flex;
  align-items: center;
  gap: 0.7rem 0.9rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.pa-notification-date {
  flex: none;
  min-width: 6.5em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.pa-notification-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pa-notification-order {
  color: var(--text-muted);
  font-size: 0.76rem;
}
.pa-notification-docs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex: none;
}
.pa-doc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--gridline);
  background: var(--page-plane);
  color: var(--accent);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pa-doc-link svg { width: 18px; height: 18px; }
a.pa-doc-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface-1);
  transform: translateY(-1px);
}
.pa-doc-link.is-disabled {
  color: var(--text-muted);
  border-style: dashed;
}
a.pa-doc-link.is-disabled:hover {
  background: var(--surface-2);
  border-color: var(--text-muted);
  color: var(--text-primary);
  transform: none;
}
span.pa-doc-link[aria-disabled="true"] {
  color: var(--text-muted);
  opacity: 0.45;
  border-style: dashed;
  cursor: not-allowed;
}
.pa-detail-empty { margin: 0 1.2rem 1rem; font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .pa-notification-docs { margin-left: 0; width: 100%; }
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  background: var(--surface-2);
  margin-top: 1rem;
}
.site-footer p {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .stat-value { font-size: 1.5rem; }
  .stat-value-lg { font-size: 1.9rem; }
  .filter-hero-row { flex-direction: column; align-items: stretch; }
  .filter-hero-controls { justify-content: stretch; }
  .filter-hero-controls .type-filter-select { flex: 1 1 auto; }
  #map { height: 380px; }
  .ambient-toggle span { display: none; }
  .state-row-progress, .pa-type-progress { width: 100%; }
}