taxa-server 0.1.0

/* taxa — Paradigm-inspired styling.
 *
 * Two fonts, no bold:
 *   EB Garamond  — display serif for headings
 *   Space Mono   — monospace for everything else (body, labels, ui)
 * Distinctive feel comes from the universal monospace + selective serif.
 */

:root {
  --color-bg:       #ffffff;
  --color-fg:       #1a1a1a;
  --color-muted:    #7a7a7a;
  --color-line:     #1a1a1a;
  --color-line-soft: #d8d8d8;
  --color-tint:     #f5f5f5;
  --color-accent:   #00a14b;     /* default accent (override via ThemeConfig) */
  --serif:          "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:           "Space Mono", "SF Mono", Menlo, Consolas, monospace;
  --header-h:       64px;
  --sub-h:          44px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%; margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-fg);
  background: var(--color-bg);
}

body { display: flex; flex-direction: column; }

/* ─── Header ────────────────────────────────────────────────────────── */

header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); min-height: var(--header-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 50;
}

.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--color-line); border-radius: 50%;
  text-decoration: none; color: var(--color-fg);
  font-size: 20px; line-height: 1;
}

#page-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-title em {
  font-style: normal;
  border-bottom: 2px solid var(--color-line);
  padding-bottom: 1px;
}
#page-title a#home-link {
  color: var(--color-fg);
  text-decoration: none;
  font-style: italic;        /* the wordmark reads as a serif italic */
}
#page-title a#home-link:hover { color: var(--color-accent); }

.header-right { display: flex; align-items: center; gap: 8px; }
.hamburger {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 0;
  font-family: var(--mono); font-size: 16px;
  color: var(--color-fg);
  cursor: pointer;
}
.hamburger:hover { background: var(--color-tint); }
/* Dataset switcher (multi-dataset servers): sits left of the hamburger. */
#dataset-select {
  height: 36px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 0;
  font-family: var(--mono); font-size: 12px;
  color: var(--color-fg);
  padding: 0 8px;
  cursor: pointer;
}
#dataset-select:hover { background: var(--color-tint); }

/* ─── Sub-header (tabs + selection summary) ─────────────────────────── */

#subheader {
  display: flex; align-items: stretch; justify-content: space-between;
  height: var(--sub-h); min-height: var(--sub-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  position: sticky; top: var(--header-h); z-index: 49;
}

#tabs { display: flex; align-items: stretch; gap: 0; }
#tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-line-soft);
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  cursor: pointer;
}
#tabs button:first-child { border-left: 1px solid var(--color-line-soft); }
#tabs button:hover { color: var(--color-fg); background: var(--color-tint); }
#tabs button.active {
  color: var(--color-fg);
  background: var(--color-fg);
  color: var(--color-bg);
}
#tabs button .ico { font-size: 14px; line-height: 1; }

.subheader-right {
  display: flex; align-items: center; gap: 12px;
  padding-left: 12px;
}
#selection-count { font-size: 11px; color: var(--color-muted); }

/* ─── Layout: sidebar + main ────────────────────────────────────────── */

#layout { display: flex; flex: 1; min-height: 0; }

aside#sidebar {
  width: 260px; min-width: 260px;
  padding: 18px 20px;
  border-right: 1px solid var(--color-line);
  background: var(--color-bg);
  overflow-y: auto;
}
body.sidebar-hidden aside#sidebar { display: none; }

main#content {
  flex: 1; padding: 18px 24px; overflow: auto;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--color-bg);
}

.tab { display: none; flex: 1; min-height: 0; flex-direction: column; }
.tab.active { display: flex; }

.placeholder { color: var(--color-muted); }
.muted       { color: var(--color-muted); font-size: 11px; }

/* ─── Sidebar selection UI ──────────────────────────────────────────── */

.picker-label {
  display: block;
  margin: 0 0 6px 0;
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mode-tabs   { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 16px; }
/* Size-by has 6 metrics — too cramped on one row. Split into two
   stacked rows of 3 buttons each; collapse the inner horizontal
   border so they read as one connected grid. */
.metric-pickers { margin-bottom: 16px; }
.metric-pickers .mode-tabs { margin-bottom: 0; }
.metric-pickers .mode-tabs + .mode-tabs { margin-top: -1px; }

/* Treemap filter widgets — same monospace look as the picker buttons so the
   filter section reads as continuous with the controls above it. */
/* The filter labels get extra top-margin so each filter group sits
   in a visually distinct band — ~1.4× the inter-picker spacing. */
.picker-label.filter { margin-top: 22px; }
/* The first filter label sits right after the Levels picker (a bare
   .mode-tabs, not wrapped in .metric-pickers). Give that boundary an
   extra-large gap to set the whole filter section apart from the
   bucket/size/levels controls above. Margins collapse, so 82px wins
   against the .mode-tabs margin-bottom (16px). */
.mode-tabs + .picker-label.filter { margin-top: 82px; }

.ent-combo input {
  width: 100%; box-sizing: border-box;
  padding: 6px 8px;
  font-family: var(--mono); font-size: 10.5px;
  background: transparent; color: var(--color-muted);
  border: 1px solid var(--color-line-soft);
}
.age-range {
  display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.age-range input {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 6px 8px;
  font-family: var(--mono); font-size: 10.5px;
  background: transparent; color: var(--color-muted);
  border: 1px solid var(--color-line-soft);
}
.age-sep { color: var(--color-muted); font-family: var(--mono); }

/* Clear-X overlay inside filter text inputs. Positioned absolutely so
   it floats above the input's right edge without disturbing layout.
   Hidden by default; the JS toggles [hidden] based on input value. */
.input-clear-wrap { position: relative; display: block; }
.age-range .input-clear-wrap { flex: 1; min-width: 0; }
.age-range .input-clear-wrap input { width: 100%; }
.input-clear-wrap input { padding-right: 22px; }
.input-clear-wrap .input-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; padding: 0 4px;
  font-family: var(--mono); font-size: 13px; line-height: 1;
  color: var(--color-muted); cursor: pointer;
}
.input-clear-wrap .input-clear:hover { color: var(--color-fg); }

.mode-tabs button {
  flex: 1;
  background: transparent;
  border: 1px solid var(--color-line-soft);
  /* Collapse the shared border with the neighbor to the right and below by
     overlapping 1px, so every edge reads as a single 1px line whether the row
     is full-width or wrapped onto multiple lines (no doubled seams, no
     missing/clipped right edge on per-row last cells). */
  margin: 0 -1px -1px 0;
  position: relative;
  padding: 6px 4px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--color-muted);
  letter-spacing: 0.02em; text-transform: lowercase;
  cursor: pointer;
}
/* Mcap-filter chips contain unit suffixes (M/B/T) that lose meaning
   when lowercased — opt them out of the .mode-tabs lowercase rule. */
.mode-tabs[data-group="mcap-filter"] button { text-transform: none; }
.mode-tabs button:hover    { color: var(--color-fg); }
.mode-tabs button.active   { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); z-index: 1; }
.mode-tabs button:disabled {
  color: var(--color-line-soft); cursor: not-allowed; background: transparent;
}
.mode-tabs button:disabled:hover { color: var(--color-line-soft); }

/* Treemap bounding-knob sliders (branch cap / leaf cap / lookahead). */
.bounding-controls { margin-top: 22px; }
.slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.slider-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--color-accent); }
/* Editable number readout — override the global block/full-width #mode-body input
   so it stays a compact inline box beside the slider. */
.slider-row input.slider-val {
  display: inline-block; width: 4.5ch; margin: 0; padding: 2px 4px;
  font-family: var(--mono); font-size: 11px; color: var(--color-fg);
  text-align: right;
  border: 1px solid var(--color-line-soft); border-radius: 3px;
  background: var(--color-bg);
}
.slider-row input.slider-val:focus { outline: none; border-color: var(--color-accent); }
/* Hide the spin buttons (we have the slider for nudging). */
.slider-row input.slider-val::-webkit-inner-spin-button,
.slider-row input.slider-val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.reset-bounds {
  margin-top: 4px; padding: 5px 10px; width: 100%;
  font-family: var(--mono); font-size: 11px; color: var(--color-muted);
  background: transparent; border: 1px solid var(--color-line-soft); border-radius: 3px;
  cursor: pointer; letter-spacing: 0.03em;
}
.reset-bounds:hover { background: var(--color-tint); color: var(--color-fg); }

#mode-body label {
  display: block; margin-bottom: 12px;
  font-size: 11px; color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#mode-body select, #mode-body input, #mode-body textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 6px 8px;
  font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--color-line-soft);
  border-radius: 0; background: var(--color-bg);
  color: var(--color-fg);
}
#mode-body select:focus,
#mode-body input:focus,
#mode-body textarea:focus {
  outline: none; border-color: var(--color-line);
}
#mode-body textarea { font-family: var(--mono); resize: vertical; }

/* ─── Viz panel controls (above each chart) ─────────────────────────── */

.viz-controls {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 0 0 12px 0; margin-bottom: 12px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 12px;
}
.viz-controls label {
  display: flex; align-items: center; gap: 6px;
  color: var(--color-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.viz-controls select, .viz-controls input {
  padding: 4px 6px;
  font-family: var(--mono); font-size: 12px;
  color: var(--color-fg);
  border: 1px solid var(--color-line-soft);
  border-radius: 0;
  background: var(--color-bg);
  max-width: 320px;
}
/* Colormap dropdown (map view) — custom because each row shows a gradient preview. */
.cmap-dd { position: relative; margin-bottom: 16px; }
.cmap-cur {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 5px 8px; background: var(--color-bg); color: var(--color-fg);
  border: 1px solid #cfcfcf; cursor: pointer; font-family: var(--mono); font-size: 12px;
}
.cmap-caret { margin-left: auto; opacity: 0.6; }
.cmap-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--color-bg); border: 1px solid #cfcfcf; border-top: none;
  max-height: 280px; overflow-y: auto;
}
.cmap-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; cursor: pointer;
  font-family: var(--mono); font-size: 12px;
}
.cmap-opt:hover { background: rgba(0, 0, 0, 0.06); }
.cmap-swatch { display: inline-block; width: 64px; height: 12px; border: 1px solid #cfcfcf; flex: 0 0 auto; }

.tip {
  position: absolute; padding: 6px 9px;
  background: var(--color-fg); color: var(--color-bg);
  font-family: var(--mono); font-size: 11px;
  border-radius: 0; pointer-events: none; z-index: 10;
}
.tip .tip-title { margin-bottom: 3px; }
/* Title row holds the node name on the left (room for a right-side tag later). */
.tip .tip-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 3px;
}
.tip .tip-title-row .tip-title { margin-bottom: 0; }
.tip table.tip-table {
  border-collapse: collapse;
  /* Header row + four column alignment, no borders. Door open to
     adding framing later by styling td borders. */
}
.tip table.tip-table td {
  padding: 0 12px 0 0;
  vertical-align: top;
  line-height: 1.35;
}
.tip table.tip-table td:nth-child(2) { text-align: right; }   /* value */
.tip table.tip-table td:nth-child(3) {
  text-align: right;
  opacity: 0.65;                                              /* % all muted */
}
.tip table.tip-table td:nth-child(4) {
  text-align: right; padding-right: 0;
  opacity: 0.65;                                              /* % parent muted */
}
.tip table.tip-table tr.tip-header td {
  opacity: 0.5;
  font-size: 10px;
  letter-spacing: 0.03em;
  padding-bottom: 2px;
}
.err { color: #c00; }
#content { position: relative; }
.radio-group { display: inline-flex; gap: 4px; }
.radio-group label { font-size: 11px; gap: 4px; text-transform: none; letter-spacing: 0; }

/* ─── Viz canvases ──────────────────────────────────────────────────── */

#sc-canvas, #ts-canvas { min-height: 450px; }
#tm-canvas {
  flex: 1; min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);     /* white — gaps between cells are parent's color, not dark */
}

/* ─── Treemap breadcrumb ────────────────────────────────────────────── */

#tm-breadcrumb {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  display: flex; align-items: center; gap: 4px;
  min-height: 22px;
  color: var(--color-muted);
}
#tm-breadcrumb .bc-link  { color: var(--color-fg); cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; }
#tm-breadcrumb .bc-link:hover { border-bottom-color: var(--color-fg); }
#tm-breadcrumb .bc-sep   { color: var(--color-muted); padding: 0 2px; }
#tm-breadcrumb .bc-here  { color: var(--color-fg); }

/* ─── Global entity search box (subheader-right) ────────────────────── */

#entity-search-wrap { position: relative; }
#entity-search {
  width: 240px;
  padding: 5px 9px;
  border: 1px solid var(--color-line-soft);
  background: var(--color-bg);
  font-family: var(--mono); font-size: 11px;
  color: var(--color-fg);
}
#entity-search:focus { outline: none; border-color: var(--color-fg); }
#entity-search-results {
  position: absolute; top: calc(100% + 3px); right: 0;
  width: 320px; max-height: 360px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  z-index: 60;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
#entity-search-results li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-line-soft);
}
#entity-search-results li:last-child { border-bottom: none; }
#entity-search-results li:hover,
#entity-search-results li.active { background: var(--color-tint); }
#entity-search-results .sr-sym {
  font-family: var(--mono); font-size: 11px; color: var(--color-fg);
  white-space: nowrap;
}
#entity-search-results .sr-name {
  font-family: var(--serif); font-size: 13px; color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* In entity mode the group-view tab selector is hidden — but the search
   box must stay pinned to the right of the sub-header (not slide left into
   the gap the tabs left behind), so override the space-between. */
body.entity-mode #tabs { display: none; }
body.entity-mode #subheader { justify-content: flex-end; }

/* ─── Individual-entity split view ──────────────────────────────────── */

.entity-split {
  flex: 1; min-height: 0;
  display: flex; gap: 24px;
}
.entity-meta {
  width: 320px; min-width: 280px;
  overflow-y: auto;
  border-right: 1px solid var(--color-line-soft);
  padding-right: 20px;
}
/* Metadata hidden → chart takes the full width. */
.entity-split.meta-hidden .entity-meta { display: none; }
.entity-chart { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#ent-canvas { flex: 1; min-height: 0; position: relative; }

/* Custom metric combobox: text input + scrollable autocomplete dropdown. */
.ent-combo { position: relative; margin-bottom: 16px; }
.ent-combo ul {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  background: var(--color-bg); border: 1px solid var(--color-line);
  z-index: 40; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.ent-combo li {
  padding: 5px 8px;
  font-family: var(--mono); font-size: 11px; color: var(--color-fg);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-combo li:hover,
.ent-combo li.active { background: var(--color-tint); }
.ent-combo li.current { color: var(--color-accent); }
.ent-combo li.empty { color: var(--color-muted); cursor: default; }

/* ── Shared line-plot chart classes (viz/lineplot.js) — used by both the
   individual-entity chart and the group per-branch chart. */
.lp-grid line {
  stroke: var(--color-line-soft); stroke-width: 1;
  stroke-dasharray: 2 3; shape-rendering: crispEdges;
}
.lp-area { fill: rgba(78, 121, 167, 0.13); stroke: none; }
.lp-crosshair {
  stroke: var(--color-muted); stroke-width: 1;
  stroke-dasharray: 3 3; pointer-events: none;
}
.lp-focus { fill: #fff; stroke: #4e79a7; stroke-width: 2; pointer-events: none; }
.lp-axis-label {
  font-family: var(--mono); font-size: 14px; fill: var(--color-muted);
}
.lp-canvas .tick text { font-size: 13px; fill: var(--color-fg); }
.lp-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--color-fg); color: var(--color-bg);
  padding: 5px 8px; font-family: var(--mono); font-size: 11px;
  line-height: 1.35; white-space: nowrap;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.lp-tooltip .tt-date { opacity: 0.7; font-size: 10px; }
.lp-tooltip .tt-val, .lp-tooltip .tt-ohlc { font-size: 13px; }

.ent-head { margin-bottom: 18px; }
.ent-name {
  margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px;
  line-height: 1.15;
}
.ent-sym {
  font-family: var(--mono); font-size: 12px; color: var(--color-muted);
  margin-top: 2px;
}
.ent-sub {
  font-family: var(--serif); font-size: 14px; color: var(--color-fg);
  margin-top: 6px;
}
.ent-facts { margin: 0 0 18px; }
.ent-facts > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.ent-facts dt {
  font-family: var(--mono); font-size: 10.5px; text-transform: lowercase;
  letter-spacing: 0.02em; color: var(--color-muted);
}
.ent-facts dd { margin: 0; font-family: var(--serif); font-size: 13px; text-align: right; }

.ent-metrics { width: 100%; border-collapse: collapse; }
.ent-metrics td { padding: 4px 0; border-bottom: 1px solid var(--color-line-soft); }
.ent-mlabel {
  font-family: var(--mono); font-size: 10.5px; color: var(--color-muted);
  text-transform: lowercase; letter-spacing: 0.02em;
}
.ent-mval {
  font-family: var(--mono); font-size: 12px; color: var(--color-fg);
  text-align: right;
}
.ent-asof { margin-top: 10px; }