/* Workbench page styles — extracted from the three inline <style> blocks in
   app/templates/workbench.html (2026-08-07 CSS reorg; verbatim move, no rule changes).
   Page-scoped, not shared with Sandbox/Explorer — see site.css for cross-page rules. */

#profile-heading {
  font-size: 1rem;
  display: block;
  flex: 1;
  background: aliceblue;
  font-variant-caps: small-caps;
}
/* Default (closed) vs. open state for the two trait accordion headers -- overrides
   Bootstrap's list-group-item-action default (white, pale-grey hover/focus), which
   read as too low-contrast to tell open from closed at a glance. */
.soc-accordion-toggle,
.soc-accordion-toggle:hover,
.soc-accordion-toggle:focus {
  background-color: aliceblue;
}
.soc-accordion-toggle.soc-open,
.soc-accordion-toggle.soc-open:hover,
.soc-accordion-toggle.soc-open:focus {
  background-color: lightblue;
}

/* Hillshade blend: keeps relief legible when reference tiles (streets/labels) are toggled on.
   Note: mix-blend-mode behavior can vary slightly across browsers. */
.edop-hillshade {
  mix-blend-mode: multiply;
}

/* CITYKIN WO4 (2026-07-30, meter-bar redesign): the Climate envelope scatter + the
   five-variable environment meters + composition donut. Palette per the dataviz skill's
   reference instance (light mode only -- this site has no dark-mode toggle anywhere else,
   so a dark block would be dead weight, not parity). Categorical slots 1/2/3 (blue/
   orange/aqua): the reference palette's own documentation certifies these three together
   pass the all-pairs CVD check required for small-multiples/scatter forms -- the donut's
   three named-family slots use exactly these, not ad hoc colors. */
.wo4-viz {
  --wo4-surface:      #fcfcfb;
  --wo4-text-primary: #0b0b0b;
  --wo4-text-secondary: #52514e;
  --wo4-text-muted:   #898781;
  --wo4-gridline:     #e1e0d9;
  --wo4-baseline:     #c3c2b7;
  --wo4-backdrop:     #c3c2b7;   /* emphasis form: de-emphasized gray for the backdrop cloud */
  --wo4-focus:        #2a78d6;   /* categorical slot 1 -- the confirmatory scatter's 1 series */
  --wo4-cat-1: #2a78d6;   /* blue */
  --wo4-cat-2: #eb6834;   /* orange */
  --wo4-cat-3: #1baf7a;   /* aqua */
  --wo4-neutral-fill: #9a9890;   /* "Other" -- visible, deliberately subordinate to the 3 named */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wo4-viz svg { max-width: 100%; height: auto; }
.wo4-viz .wo4-legend { display: flex; gap: 1rem; align-items: center; font-size: 0.8rem; color: var(--wo4-text-secondary); margin-bottom: 0.35rem; flex-wrap: wrap; }
.wo4-viz .wo4-legend-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.wo4-viz .wo4-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.wo4-viz .wo4-caption { font-size: 0.85rem; color: var(--wo4-text-secondary); margin-top: 0.5rem; line-height: 1.5; }
.wo4-viz .wo4-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--wo4-text-primary); color: #fff; font-size: 0.75rem;
  padding: 0.3rem 0.5rem; border-radius: 4px; white-space: nowrap;
  opacity: 0; transition: opacity 0.1s ease;
}
.wo4-viz .wo4-bar-label { fill: var(--wo4-text-secondary); font-size: 11px; }
.wo4-viz .wo4-axis-label { fill: var(--wo4-text-primary); font-size: 15px; }
.wo4-viz .wo4-axis-pole { fill: var(--wo4-text-secondary); font-size: 12px; }

/* -- Strip plots (the five-variable environment scan, WO4 EA045 2026-08-10 -- one tick per
   society, replacing the earlier mean-position meter bars) -- */
.wo4-strips { display: flex; flex-direction: column; }
.wo4-strip-row { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 0.55rem;
  align-items: center; padding: 0.2rem 0; border-top: 1px solid var(--wo4-gridline); }
.wo4-strip-row:first-child { border-top: none; padding-top: 0; }
.wo4-strip-label { font-size: 0.85rem; font-weight: 600; color: var(--wo4-text-primary); }
.wo4-strip-none { font-size: 0.82rem; color: var(--wo4-text-secondary); font-style: italic; }
.wo4-strip-track-wrap { min-width: 0; }
.wo4-strip-svg { display: block; width: 100%; height: 15px; }
.wo4-strip-poles { display: flex; justify-content: space-between; font-size: 0.8rem;
  color: var(--wo4-text-muted); margin-top: 0.1rem; }

/* -- Isolates view (WO5, experimental, 2026-08-10) -- three nearest-neighbor rankings, named
   societies not an aggregate. List can run to the full focus-group size, so it scrolls
   internally same as the ecoregions list below. */
.wo4-isolates-measures { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.wo4-isolates-measure-btn {
  font-size: 0.78rem; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid var(--wo4-gridline);
  background: var(--wo4-surface); color: var(--wo4-text-secondary); cursor: pointer;
}
.wo4-isolates-measure-btn.is-active { background: var(--wo4-focus); color: #fff; border-color: var(--wo4-focus); }
.wo4-isolates-list { max-height: 50vh; overflow-y: auto; }
.wo4-isolates-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.3rem 0.3rem; border-top: 1px solid var(--wo4-gridline); cursor: default;
}
.wo4-isolates-row:first-child { border-top: none; }
.wo4-isolates-row:hover { background: var(--wo4-gridline); }
.wo4-isolates-name { font-size: 0.85rem; color: var(--wo4-text-primary); }
.wo4-isolates-ranks {font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums;}

/* -- Results heading (#dplace-results-heading) -- the dynamic trait value colored so it's easy
   to pick out of the plain-text prefix (Karl's browser review, 2026-08-11); matches
   .edops-help's existing red-ish accent for a consistent "this is a live value" color across the
   page, not a new one-off. Plus the smaller muted "(n = X)" suffix (WO4 EA045 nit, 2026-08-10 --
   same line as the title, not its own row). Outside .wo4-viz's DOM scope (that wrapper is only
   appended inside #dplace-results-content), so neither can use the --wo4-* custom properties. */
.wo4-heading-value { color: #993333; }
.wo4-heading-n { font-size: 0.78rem; font-weight: 400; }

/* Ecoregions-by-realm list can run to dozens of realms -- scroll internally instead of pushing
   the page well below the fold (Karl's browser review, 2026-08-10). Two flex columns (JS-split,
   see renderTopEcoregions()) instead of CSS multi-column -- multicol's scroll-instead-of-adding-
   columns behavior didn't hold in testing (it added columns sideways, not a vertical scrollbar),
   so plain overflow-y:auto on ordinary block content is used instead, which has no such
   ambiguity. */
.wo4-ecoregions-scroll { max-height: 50vh; overflow-y: auto; padding-right: 0.5rem; }
.wo4-ecoregion-block { margin-bottom: 0.75rem; }

/* -- Composition donut + legend -- */
.wo4-donut-row { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.75rem; }
.wo4-donut-figure { flex: none; }
.wo4-donut-total { font-family: inherit; }
.wo4-comp-legend-wrap { flex: 1; min-width: 12rem; }
.wo4-comp-legend-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wo4-text-primary); background: var(--wo4-gridline);
  padding: 0.1rem 0.55rem; border-radius: 3px;
}
.wo4-comp-legend { list-style: none; margin: 0; padding: 0; }
.wo4-comp-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.3rem; border-radius: 5px; cursor: pointer; transition: background 0.12s ease; }
.wo4-comp-row:hover, .wo4-comp-row.is-active { background: var(--wo4-gridline); }
.wo4-comp-name { font-size: 0.85rem; color: var(--wo4-text-primary); flex: 1; }
.wo4-comp-count { font-size: 0.78rem; color: var(--wo4-text-muted); }
.wo4-comp-count.is-thin { font-style: italic; }
.wo4-comp-row.is-neutral .wo4-comp-name { color: var(--wo4-text-secondary); }
.wo4-map-dot-lit { }