/* ==========================================================================
   viz.css — figure styling for the shared server-rendered primitive:
   chart marks, map layers, the figure shell, and the disclosed data table.

   Markup contract (the ONLY emitter is LorainData.Viz.Figure.render/1):

     figure.viz[.viz--chart|.viz--map]
       > svg.viz__svg            (chart marks from LorainData.Viz.Chart,
                                    map layers from LorainData.Viz.Map)
       > figcaption.viz__figcaption
       > details.viz__table > summary + table

   Every colour below is a design-system token (design-system/tokens.css,
   design-system/field-guide-tokens.css) — no hex literals outside comments.
   No animation, no transition, no stylesheet import, no external asset
   reference: this figure must render the same offline, in print, or with
   CSS disabled.
   ========================================================================== */

/* ---- figure shell --------------------------------------------------------
   .viz--chart and .viz--map both resolve to the same shell; nothing here
   needs to differ between them, so no modifier rule is written for either. */
.viz{
  display:block;
  max-width:100%;
  margin:0 0 var(--sp-8);
}

.viz__svg{
  width:100%;
  height:auto;
  display:block;
  color:var(--ink); /* currentColor baseline for untoned marks and layers */
}

.viz__svg text{
  font-family:var(--sans);
  font-size:12px; /* viewBox user units; 12 reads as small caption type */
}

/* ---- caption --------------------------------------------------------------
   One line of `·`-separated spans (figure.ex omits absent optional ones, so
   ":not(:first-child)" always lands on whichever span renders first). */
.viz__figcaption{
  display:block;
  margin-top:var(--sp-3);
  font-family:var(--sans);
  font-size:var(--t-src);
  color:var(--ink-quiet);
}

.viz__figcaption > span:not(:first-child)::before{
  content:" · ";
  color:var(--rule);
}

.viz__caption{
  color:var(--ink);
}

.viz__receipt{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}

.viz__receipt:hover{
  color:var(--rule-strong);
}

/* ---- data table (details.viz__table) --------------------------------------
   No card wrapper (that needs --r-card, outside this file's token list) —
   just the site's rule/rule-soft border rhythm from .rt in app.css, and its
   own horizontal scroll so a wide matrix/small-multiples table never pushes
   the page sideways. */
details.viz__table{
  margin-top:var(--sp-3);
  overflow-x:auto;
  overflow-y:hidden;
}

details.viz__table summary{
  cursor:pointer;
  font-family:var(--sans);
  font-size:var(--t-src);
  color:var(--ink-quiet);
  padding:var(--sp-2) 0;
}

details.viz__table table{
  width:100%;
  border-collapse:collapse;
  margin-top:var(--sp-2);
}

details.viz__table[open] table{
  background:var(--evidence);
}

details.viz__table th,
details.viz__table td{
  padding:var(--sp-2) var(--sp-3);
  border-bottom:var(--bw) solid var(--rule-soft);
  font-size:var(--t-src);
  text-align:left;
  vertical-align:baseline;
  white-space:nowrap;
}

details.viz__table th{
  font-weight:600;
  color:var(--ink-quiet);
  border-bottom:var(--bw) solid var(--rule);
}

details.viz__table tbody tr:last-child td{
  border-bottom:0;
}

/* ---- chart vocabulary (LorainData.Viz.Chart) ------------------------------
   viz-mark--bar, --dot, --event, --segment take no modifier rule of their
   own: they read the shared .viz-mark fill (overridden per series by
   tone-1..8, same as --cell). */
.viz-axis{ color:var(--ink) }
.viz-axis line{ stroke:var(--rule); stroke-width:1px }
.viz-axis-label{ fill:var(--ink-quiet) }
.viz-grid line{ stroke:var(--rule-soft); stroke-width:1px }

/* Legacy vocabulary: Chart.line/2, .bars/2, and .heatmap/2 predate the
   viz-* rename and still emit chart-axis/axis-labels. The Gazette's own
   stylesheet (priv/gazette/templates/gazette.css) already carries these
   rules; the same primitives wrapped in Viz.Figure outside the Gazette
   need them here too, or their axis lines and labels render unstyled —
   no inline stroke on a bare <line>, default text fill instead of the
   theme-aware token. */
.chart-axis{ color:var(--ink) }
.chart-axis line{ stroke:var(--rule); stroke-width:1px }
.chart-axis text,
.axis-labels{ fill:var(--ink-quiet); font:12px var(--sans) }

.viz-mark{ fill:var(--ink) }
.viz-mark--line{ fill:none; stroke:var(--ink); stroke-width:2px }
.viz-mark--range{ fill:none; stroke:var(--ink-quiet); stroke-width:2px }
.viz-mark--tick{ stroke:var(--ink); stroke-width:2px }
.viz-mark--cell{ rx:var(--r-cell) }
.viz-mark--cell.is-empty{ fill:var(--evidence-inset) }
.viz-mark--step{ fill:var(--ink-quiet) }
.viz-mark--step.is-total{ fill:var(--ink) }

.viz-label{ fill:var(--ink) }
.viz-label--dim{ fill:var(--ink-quiet) }

.viz-legend{ font-family:var(--sans) }
.viz-legend__swatch{ rx:var(--r-cell) }
.viz-legend__label{ fill:var(--ink-quiet) }

/* tone-1..8 walk the field-guide register ramp (forest-deep -> mist);
   shared by stacked/share-bar segments, dot-matrix legends, matrix cells. */
.tone-1{ fill:var(--reg-1) }
.tone-2{ fill:var(--reg-2) }
.tone-3{ fill:var(--reg-3) }
.tone-4{ fill:var(--reg-4) }
.tone-5{ fill:var(--reg-5) }
.tone-6{ fill:var(--reg-6) }
.tone-7{ fill:var(--reg-7) }
.tone-8{ fill:var(--reg-8) }

/* State modifiers, generic across marks and map features alike. The map
   layer below overrides is-emphasized with a stroke change instead, since
   opacity there is fixed by the reference layer's own group (see
   .viz-layer--reference). */
.is-muted{ opacity:.55 }
.is-emphasized{ opacity:1 }
.is-positive{ fill:var(--reg-2) }
.is-negative{ fill:var(--rule-strong) }

/* A share-bar percentage is drawn right after its segment; on the four
   darkest register tones the default ink label would disappear. */
.viz-mark--segment.tone-1 + .viz-label,
.viz-mark--segment.tone-2 + .viz-label,
.viz-mark--segment.tone-3 + .viz-label,
.viz-mark--segment.tone-4 + .viz-label{ fill:var(--paper) }

/* ---- map vocabulary (LorainData.Viz.Map) ----------------------------------
   viz-ref--county takes no modifier rule: the base .viz-ref stroke, plus the
   reference layer's own currentColor, is enough. */
.viz-layer--reference{ color:var(--rule) }
.viz-ref{ stroke-width:1px }
.viz-ref--shoreline{ stroke:var(--ink-quiet) }
.viz-ref--municipality.is-emphasized{ stroke:var(--rule-strong); stroke-width:1.5px }

.viz-feature--polygon{ fill:var(--evidence-inset); stroke:var(--ink); stroke-width:1px }
.viz-feature--line{ fill:none; stroke:var(--ink); stroke-width:1.5px }
.viz-feature--point{ fill:var(--ink) }

.viz-scale,
.viz-north{ color:var(--ink-quiet) }
.viz-scale line,
.viz-north path{ stroke:var(--ink-quiet); fill:var(--ink-quiet) }
.viz-scale text,
.viz-north text{ fill:var(--ink-quiet) }