/* EHD viewer. Palette validated with the dataviz skill's checker:
   all six taxon hues pass lightness band, chroma floor, CVD separation and
   normal-vision floor on the adjacent pairlist, in both modes.  The ordering
   below is load-bearing: the three warm hues (oak, larch, beech) are kept
   non-adjacent, which is what makes the set pass. */

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #f2f2f0;
  --surface-3: #e6e6e2;
  --border: #d5d5d0;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #7b7a75;

  --pine: #00846c;
  --oak: #bf6f16;
  --spruce: #3b7fd4;
  --larch: #d29417;
  --fir: #7a52b5;
  --beech: #cf4536;
  --other: #7b7a75;

  --grid: #e0e0dc;
  --axis: #b8b8b2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --surface-3: #2e2e2c;
    --border: #3a3a38;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8f8e86;

    --pine: #12a488;
    --oak: #c47a22;
    --spruce: #5a97e0;
    --larch: #b08a20;
    --fir: #9a78d0;
    --beech: #e06455;
    --other: #8f8e86;

    --grid: #2b2b29;
    --axis: #4a4a46;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --surface-3: #2e2e2c;
  --border: #3a3a38;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8f8e86;

  --pine: #12a488;
  --oak: #c47a22;
  --spruce: #5a97e0;
  --larch: #b08a20;
  --fir: #9a78d0;
  --beech: #e06455;
  --other: #8f8e86;

  --grid: #2b2b29;
  --axis: #4a4a46;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--surface-1);
  color: var(--text-primary);
  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

#app { display: flex; flex-direction: column; height: 100%; }

/* --- header ------------------------------------------------------------- */

header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
}

h1 { font-size: 15px; margin: 0; font-weight: 620; letter-spacing: -0.01em; }
.subtitle { color: var(--text-secondary); font-size: 12px; }
.spacer { flex: 1; }

/* --- controls ----------------------------------------------------------- */

.controls {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  flex-wrap: wrap;
}

.control { display: flex; align-items: center; gap: 6px; }
.control > label { color: var(--text-secondary); font-size: 12px; }

button, select {
  font: inherit;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
}
button:hover, select:hover { background: var(--surface-3); }
button[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--surface-1);
  border-color: var(--text-primary);
}

/* --- legend: identity is never colour alone, every swatch carries a label */

.legend { display: flex; gap: 4px; flex-wrap: wrap; }

.legend button,
.legend button[aria-pressed="true"] {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: transparent;
  border-color: transparent;
  /* Must be restated: the generic pressed style paints text in the surface
     colour to sit on a filled button, which is invisible once the legend
     removes that fill. */
  color: var(--text-primary);
}
.legend button:hover { background: var(--surface-2); }
.legend button[aria-pressed="false"] { opacity: 0.38; }
.legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.legend .count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- stage -------------------------------------------------------------- */

.stage { position: relative; flex: 1; min-height: 0; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
canvas.panning { cursor: grabbing; }

/* --- tooltip ------------------------------------------------------------ */

#tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  max-width: 280px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  font-size: 12px;
  opacity: 0;
  transition: opacity 90ms;
}
#tooltip.visible { opacity: 1; }
#tooltip .tt-title { font-weight: 620; margin-bottom: 2px; }
#tooltip .tt-row { color: var(--text-secondary); }
#tooltip .tt-years { font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* --- detail panel ------------------------------------------------------- */

#detail {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 340px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  z-index: 10;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: none;
}
#detail.open { display: block; }
#detail h2 { font-size: 14px; margin: 0 0 2px; }
#detail .sub { color: var(--text-secondary); margin-bottom: 10px; font-size: 12px; }
#detail dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0 0; }
#detail dt { color: var(--text-muted); font-size: 11.5px; }
#detail dd { margin: 0; font-size: 12px; word-break: break-word; }
#detail .close {
  position: absolute; top: 10px; right: 10px;
  border: none; background: transparent; color: var(--text-muted);
  font-size: 16px; line-height: 1; padding: 2px 6px;
}
#spark { width: 100%; height: 76px; display: block; margin-top: 6px; }
.spark-caption { color: var(--text-muted); font-size: 11px; margin-top: 3px; }

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-secondary);
}
.badge.floating { border-color: var(--beech); color: var(--beech); }

/* --- footer ------------------------------------------------------------- */

footer {
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11.5px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: var(--surface-1);
  z-index: 20;
}