/* ============================================================================
   Design tokens
   Palette drawn from a field-survey ledger: aged topo-map paper, ink,
   forest canopy greens in a strata gradient, monsoon blue and clay-red
   used ONLY functionally (alerts), never as brand color.
   Type: Fraunces (display, characterful serif) / IBM Plex Sans (UI) /
   IBM Plex Mono (data readouts — canopy height, km², counts).
============================================================================ */
:root {
  --paper: #E9E4D6;
  --paper-panel: #F4F1E8;
  --ink: #1B2A22;
  --ink-soft: #4B5A50;
  --line: #CFC7AD;

  --canopy: #2F6B4F;
  --canopy-dark: #1F4A36;
  --canopy-mid: #5C8A6C;
  --canopy-light: #A9C4AE;

  --monsoon: #35516B;
  --alert: #A8442B;
  --gold: #B08D2B;

  /* Per-category accents — each layer category gets its own identity so the
     sidebar reads at a glance, not just decoration for its own sake. */
  --cat-deforestation: #A8442B;
  --cat-forest: #2F6B4F;
  --cat-landcover: #2B7A78;
  --cat-satellite: #35516B;
  --cat-terrain: #8A5A32;
  --cat-climate: #3B7EA1;
  --cat-landsat: #6B4A8A;

  --radius: 3px;
  --font-display: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

button, select, input { font-family: inherit; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--ink);
  border-bottom: 3px solid var(--canopy);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-mark rect {
  transform-origin: center;
  animation: canopy-sway 3.2s ease-in-out infinite;
}
.brand-mark rect:nth-child(1) { animation-delay: 0s; }
.brand-mark rect:nth-child(2) { animation-delay: 0.25s; }
.brand-mark rect:nth-child(3) { animation-delay: 0.5s; }
.brand-mark rect:nth-child(4) { animation-delay: 0.75s; }
@keyframes canopy-sway {
  0%, 100% { opacity: 0.82; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark rect { animation: none; }
}
.brand-text h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--paper-panel);
  margin: 0;
  letter-spacing: 0.2px;
}
.eyebrow {
  margin: 2px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--canopy-light);
}
.status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--canopy-light);
}
.status.ok::before { content: '● '; color: var(--canopy-mid); }
.status.error::before { content: '● '; color: var(--alert); }

/* ---------------------------------------------------------------- layout */
.layout { display: flex; height: calc(100vh - 64px); }

.sidebar {
  width: 340px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 18px;
  background: var(--paper-panel);
  border-right: 1px solid var(--line);
}

.map-wrap { position: relative; flex: 1; }
#map { width: 100%; height: 100%; }

.panel-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}

.block-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--canopy-dark);
}

.field-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
}

.button-row { display: flex; gap: 8px; margin-top: 10px; }

.btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.95); }
.btn-primary { background: var(--canopy); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }

/* ---------------------------------------------------------------- layers */
.category-group { margin-bottom: 10px; }
.category-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--accent, var(--ink));
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 2px solid var(--accent, var(--line));
  user-select: none;
}
.category-header .cat-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}
.category-header:hover .cat-icon {
  transform: translateY(-2px) rotate(-6deg);
}
.category-header .chevron {
  margin-left: auto;
  transition: transform 0.15s ease;
  color: var(--ink-soft);
  font-size: 0.75rem;
}
.category-group.collapsed .chevron { transform: rotate(-90deg); }
.category-group.collapsed .layer-list { display: none; }

.layer-list { padding: 6px 0 4px 4px; }
.layer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
  font-size: 0.8rem;
}
.layer-item label.layer-name { cursor: pointer; flex: 1; }

/* Toggle switch — color comes from the category-group's --accent variable,
   so each category's switches light up in that category's own color. */
.switch {
  position: relative;
  display: inline-block;
  width: 32px; height: 18px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0; width: 0; height: 0;
  position: absolute;
}
.switch .track {
  position: absolute; inset: 0;
  background: var(--line);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.switch .track::before {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  left: 2.5px; top: 2.5px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.switch input:checked + .track {
  background: var(--accent, var(--canopy));
}
.switch input:checked + .track::before {
  transform: translateX(14px);
}
.switch input:disabled + .track {
  opacity: 0.4; cursor: not-allowed;
}

.layer-item.loading .track::before {
  animation: toggle-pulse 0.9s ease-in-out infinite;
}
@keyframes toggle-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 0 4px rgba(0,0,0,0.08); }
}
.layer-item.loading label.layer-name { color: var(--ink-soft); }
.layer-item.failed label.layer-name { color: var(--alert); }
@media (prefers-reduced-motion: reduce) {
  .switch .track::before, .layer-item.loading .track::before { animation: none; transition: none; }
}

/* ---------------------------------------------------------------- stats */
.stats-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.82rem;
  padding: 10px 4px;
}
.empty-mark { width: 100%; max-width: 140px; height: 30px; opacity: 0.6; margin-bottom: 10px; }

.stats-content dl {
  margin: 0; font-size: 0.82rem;
}
.stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; border-bottom: 1px dotted var(--line);
}
.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--ink-soft); }
.stat-value { font-family: var(--font-mono); font-weight: 500; }
.stat-value.alert { color: var(--alert); }
.stat-zone {
  display: inline-block; margin-top: 8px;
  font-size: 0.72rem; padding: 3px 8px;
  background: var(--canopy-light); color: var(--canopy-dark);
  border-radius: 20px;
}
.stat-value.counting { color: var(--canopy-dark); }

.btn-report {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: var(--gold);
  border-radius: var(--radius);
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-report:hover { filter: brightness(1.08); }
.btn-report:active { transform: scale(0.98); }
.btn-report .icon { margin-right: 6px; }

/* ---------------------------------------------------------------- legend */
.legend {
  position: absolute; bottom: 20px; right: 20px;
  background: var(--paper-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.78rem;
  max-width: 240px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.legend.hidden { display: none; }
.legend h3 {
  font-family: var(--font-display);
  font-size: 0.85rem; margin: 0 0 6px;
}
.legend-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend-swatch { width: 12px; height: 12px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.2); }

/* ---------------------------------------------------------------- misc */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

@media (max-width: 760px) {
  .layout { flex-direction: column; height: auto; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  #map { height: 60vh; }
}