/* Charts: v4 Graphite chart anatomy (BRAND-STANDARD §8). Reads tokens only; no hex here.
   Plex Sans 14 for category names, Plex Mono 12 for values, axes and method text.
   Motion: transform and opacity only, 220 to 380 ms, the house easing, off under reduced motion. */

:root {
  /* channel colors: identity, fixed order (credit, WIOA, apprenticeship), never by rank */
  --wa-ch-credit: var(--wa-series-3);
  --wa-ch-wioa: var(--wa-series-5);
  --wa-ch-appr: var(--wa-series-1);
  --wa-ch-capacity: var(--wa-seq-2);   /* pale: capacity, never graduates */
  --wa-c-stake: var(--wa-series-3);
  /* route channels in speed to wage: the three above plus the other three series slots */
  --wa-ch-noncredit: var(--wa-series-6);
  --wa-ch-bootcamp: var(--wa-series-4);
  --wa-ch-employer: var(--wa-series-2);
  --wa-ch-other: var(--wa-ink-muted);
  /* import or train: certified positions lead in the accent, local completers in slate */
  --wa-c-import: var(--wa-series-2);
  --wa-c-local: var(--wa-series-3);
  /* AI exposure bands: one slate hue, dark for high; unscored is an empty outlined segment */
  --wa-ai-high: var(--wa-seq-6);
  --wa-ai-moderate: var(--wa-seq-4);
  --wa-ai-low: var(--wa-seq-2);
  /* in-house or open: closed to the public in graphite, open in pale slate */
  --wa-c-internal: var(--wa-series-1);
  --wa-c-open: var(--wa-seq-2);
  /* earnings proof: one slate line per institution; identity by direct label, the active line in the accent */
  --wa-c-earn: var(--wa-series-3);
  /* the family-supporting band: the palest slate step behind the dots */
  --wa-c-band: var(--wa-seq-1);
  /* catalog pulse: launches in slate (dark for growing occupations), retirements in muted oxblood below the line */
  --wa-c-growing: var(--wa-seq-6);
  --wa-c-other: var(--wa-seq-3);
  --wa-c-retired: var(--wa-div-2);
  /* postings momentum: the chosen metro in the accent, Missouri in slate, the nation as the muted reference */
  --wa-c-l-metro: var(--wa-series-2);
  --wa-c-l-mo: var(--wa-series-3);
  --wa-c-l-us: var(--wa-ink-muted);
  /* funding: federal dollars in slate, state MoExcels awards in ochre */
  --wa-c-fund: var(--wa-series-3);
  --wa-c-mx: var(--wa-series-6);
  /* training deserts: beyond 45 minutes in mid slate, the double desert inside it in dark slate */
  --wa-c-desert: var(--wa-seq-3);
  --wa-c-double: var(--wa-seq-6);
}

.wa-chart { position: relative; font-family: var(--wa-font-operate); color: var(--wa-ink-body); }
.wa-chart-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--wa-s-3) var(--wa-s-5); margin-bottom: var(--wa-s-4);
}
.wa-chart-key { margin: 0; font-size: var(--wa-t-ui); color: var(--wa-ink); }

/* the plot sits on the sheet; the SVG is drawn at the container width, so labels never shrink */
.wa-chart-plot { position: relative; background: var(--wa-sheet); }
.wa-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* marks */
.wa-bar { shape-rendering: crispEdges; }
.wa-c-stake { fill: var(--wa-c-stake); }
.wa-ch-credit { fill: var(--wa-ch-credit); background: var(--wa-ch-credit); }
.wa-ch-wioa { fill: var(--wa-ch-wioa); background: var(--wa-ch-wioa); }
.wa-ch-appr { fill: var(--wa-ch-appr); background: var(--wa-ch-appr); }
.wa-ch-capacity { fill: var(--wa-ch-capacity); background: var(--wa-ch-capacity); }
/* a 1px sheet gap between stacked segments */
.wa-ch-credit, .wa-ch-wioa, .wa-ch-appr { stroke: var(--wa-sheet); stroke-width: 1px; }
.wa-ch-noncredit { fill: var(--wa-ch-noncredit); background: var(--wa-ch-noncredit); }
.wa-ch-bootcamp { fill: var(--wa-ch-bootcamp); background: var(--wa-ch-bootcamp); }
.wa-ch-employer { fill: var(--wa-ch-employer); background: var(--wa-ch-employer); }
.wa-ch-other { fill: var(--wa-ch-other); background: var(--wa-ch-other); }
.wa-ch-credit { --wa-c: var(--wa-ch-credit); }
.wa-ch-wioa { --wa-c: var(--wa-ch-wioa); }
.wa-ch-appr { --wa-c: var(--wa-ch-appr); }
.wa-ch-noncredit { --wa-c: var(--wa-ch-noncredit); }
.wa-ch-bootcamp { --wa-c: var(--wa-ch-bootcamp); }
.wa-ch-employer { --wa-c: var(--wa-ch-employer); }
.wa-ch-other { --wa-c: var(--wa-ch-other); }
.wa-c-import { fill: var(--wa-c-import); background: var(--wa-c-import); }
.wa-c-local { fill: var(--wa-c-local); background: var(--wa-c-local); }

.wa-ai-high { fill: var(--wa-ai-high); background: var(--wa-ai-high); }
.wa-ai-moderate { fill: var(--wa-ai-moderate); background: var(--wa-ai-moderate); }
.wa-ai-low { fill: var(--wa-ai-low); background: var(--wa-ai-low); }
.wa-ai-unscored { fill: var(--wa-sheet); background: var(--wa-sheet); }
.wa-c-internal { fill: var(--wa-c-internal); background: var(--wa-c-internal); }
.wa-c-open { fill: var(--wa-c-open); background: var(--wa-c-open); }
/* a 1px sheet gap between share segments; the unscored segment keeps a rule outline */
.wa-ai-high, .wa-ai-moderate, .wa-ai-low, .wa-c-internal, .wa-c-open { stroke: var(--wa-sheet); stroke-width: 1px; }
rect.wa-ai-unscored { stroke: var(--wa-rule); stroke-width: 1px; }
.wa-key.wa-ai-unscored { border: 1px solid var(--wa-rule); }
/* an unpublished band inside a share bar: an empty span bracketed by two ink-muted rules */
.wa-c-gapmark { stroke: var(--wa-ink-muted); stroke-width: 1px; shape-rendering: crispEdges; }

/* scatter: dots with a 2px sheet ring so overlaps stay legible; unknown openings are a hollow ring */
.wa-dot { stroke: var(--wa-sheet); stroke-width: 2px; }
.wa-dot.wa-dot-np { fill: var(--wa-sheet); stroke: var(--wa-c, var(--wa-ink-muted)); stroke-width: 2px; }
.wa-band { fill: var(--wa-c-band); background: var(--wa-c-band); }
.wa-key.wa-band { box-shadow: none; outline: 1px solid var(--wa-hairline); outline-offset: -1px; }
.wa-c-threshold { stroke: var(--wa-rule); stroke-width: 1px; shape-rendering: crispEdges; }
.wa-c-band { font-family: var(--wa-font-measure); font-size: 12px; fill: var(--wa-ink-body); }
.wa-c-grid { stroke: var(--wa-hairline); stroke-width: 1px; shape-rendering: crispEdges; }
.wa-c-tick { stroke: var(--wa-rule); stroke-width: 1px; shape-rendering: crispEdges; }
.wa-c-dotlabel { paint-order: stroke; stroke: var(--wa-sheet); stroke-width: 3px; stroke-linejoin: round; }
.wa-key-dot { border-radius: 50%; }
.wa-key-ring { background: transparent; border: 2px solid var(--wa-ink-muted); width: 8px; height: 8px; }
.wa-mark:focus-visible .wa-dot, .wa-mark.is-active .wa-dot { stroke: var(--wa-ink); }
/* lines: 2px, points 8px across with a sheet ring; a wide invisible stroke is the pointer target */
.wa-line { fill: none; stroke: var(--wa-c-earn); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.wa-point { fill: var(--wa-c-earn); stroke: var(--wa-sheet); stroke-width: 2px; }
.wa-hit-line { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; }
.wa-mark.is-active .wa-line, .wa-mark:focus-visible .wa-line { stroke: var(--wa-accent); }
.wa-mark.is-active .wa-point, .wa-mark:focus-visible .wa-point { fill: var(--wa-accent); }
.wa-mark.is-active .wa-c-endlabel, .wa-mark:focus-visible .wa-c-endlabel { fill: var(--wa-accent); }
.wa-c-leader { stroke: var(--wa-hairline); stroke-width: 1px; }
.wa-key.wa-key-earn { background: var(--wa-c-earn); }
.wa-openings { stroke: var(--wa-ink); stroke-width: 2px; shape-rendering: crispEdges; }
.wa-openings-halo { stroke: var(--wa-sheet); stroke-width: 6px; shape-rendering: crispEdges; }

/* catalog pulse, funding, deserts: fills; a 1px sheet gap between stacked segments */
.wa-c-growing { fill: var(--wa-c-growing); background: var(--wa-c-growing); }
.wa-c-other { fill: var(--wa-c-other); background: var(--wa-c-other); }
.wa-c-retired { fill: var(--wa-c-retired); background: var(--wa-c-retired); }
.wa-c-fund { fill: var(--wa-c-fund); background: var(--wa-c-fund); }
.wa-c-mx { fill: var(--wa-c-mx); background: var(--wa-c-mx); }
.wa-c-desert { fill: var(--wa-c-desert); background: var(--wa-c-desert); }
.wa-c-double { fill: var(--wa-c-double); background: var(--wa-c-double); }
.wa-c-growing, .wa-c-other, .wa-c-retired, .wa-c-desert, .wa-c-double { stroke: var(--wa-sheet); stroke-width: 1px; }
/* a month with no snapshot: an empty outlined slot, never a zero bar */
.wa-c-npbox { fill: none; stroke: var(--wa-rule); stroke-width: 1px; shape-rendering: crispEdges; }
.wa-key.wa-key-np-box { border: 1px solid var(--wa-rule); background: transparent; }
/* reference rules (February 2020 = 100, the Missouri per-worker value): 1px, behind the marks */
.wa-c-ref { stroke: var(--wa-ink-muted); stroke-width: 1px; shape-rendering: crispEdges; }
.wa-c-reflabel { font-family: var(--wa-font-measure); font-size: 12px; fill: var(--wa-ink-body); }
/* postings momentum lines: the nation is the thinner muted reference */
.wa-line.wa-c-l-metro { stroke: var(--wa-c-l-metro); }
.wa-line.wa-c-l-mo { stroke: var(--wa-c-l-mo); }
.wa-line.wa-c-l-us { stroke: var(--wa-c-l-us); stroke-width: 1.5px; }
.wa-point.wa-c-l-metro { fill: var(--wa-c-l-metro); }
.wa-point.wa-c-l-mo { fill: var(--wa-c-l-mo); }
.wa-point.wa-c-l-us { fill: var(--wa-c-l-us); }
.wa-key-line.wa-c-l-metro { background: var(--wa-c-l-metro); }
.wa-key-line.wa-c-l-mo { background: var(--wa-c-l-mo); }
.wa-key-line.wa-c-l-us { background: var(--wa-c-l-us); }
.wa-mark.is-active .wa-line.wa-c-l-mo, .wa-mark:focus-visible .wa-line.wa-c-l-mo,
.wa-mark.is-active .wa-line.wa-c-l-us, .wa-mark:focus-visible .wa-line.wa-c-l-us { stroke: var(--wa-ink); }
.wa-mark.is-active .wa-point.wa-c-l-mo, .wa-mark:focus-visible .wa-point.wa-c-l-mo,
.wa-mark.is-active .wa-point.wa-c-l-us, .wa-mark:focus-visible .wa-point.wa-c-l-us { fill: var(--wa-ink); }
/* ranked funding bars: text keeps a sheet halo where the Missouri reference rule crosses it */
.wa-funding .wa-c-label, .wa-funding .wa-c-value, .wa-funding .wa-c-np {
  paint-order: stroke; stroke: var(--wa-sheet); stroke-width: 3px; stroke-linejoin: round;
}
.wa-funding { display: grid; gap: var(--wa-s-6); }
.wa-chart-sub { margin: 0 0 var(--wa-s-3); font-size: var(--wa-t-ui); font-weight: 600; color: var(--wa-ink); }

/* text in charts */
.wa-c-label { font-family: var(--wa-font-operate); font-size: 14px; fill: var(--wa-ink); }
.wa-c-value, .wa-c-axis, .wa-c-cap, .wa-c-np {
  font-family: var(--wa-font-measure); font-size: 12px; font-variant-numeric: tabular-nums;
}
.wa-c-value { fill: var(--wa-ink-body); }
.wa-c-axis, .wa-c-cap { fill: var(--wa-ink-muted); }
.wa-c-np { fill: var(--wa-ink-muted); font-style: italic; }
.wa-c-baseline { stroke: var(--wa-rule); stroke-width: 1px; shape-rendering: crispEdges; }

/* hit targets: bigger than the mark, invisible until focus */
.wa-hit { fill: transparent; stroke: transparent; stroke-width: 2px; pointer-events: all; }
.wa-mark { cursor: default; outline: none; }
.wa-mark.is-active .wa-hit { fill: var(--wa-accent-wash); }
.wa-mark:focus-visible .wa-hit { stroke: var(--wa-accent); }
.wa-mark .wa-bar, .wa-mark .wa-dot, .wa-mark .wa-line, .wa-mark .wa-point { transition: opacity var(--wa-dur-state) var(--wa-ease); }
.wa-chart-plot:has(.wa-mark.is-active) .wa-mark:not(.is-active) .wa-bar { opacity: .72; }
.wa-chart-plot:has(.wa-mark.is-active) .wa-mark:not(.is-active) .wa-dot { opacity: .55; }
.wa-chart-plot:has(.wa-mark.is-active) .wa-mark:not(.is-active) .wa-line,
.wa-chart-plot:has(.wa-mark.is-active) .wa-mark:not(.is-active) .wa-point { opacity: .35; }

/* entrance: bars grow from the baseline once, on draw. Nothing waits hidden. */
@keyframes wa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wa-enter .wa-bar {
  transform-box: fill-box; transform-origin: left center;
  animation: wa-grow var(--wa-dur-swap) var(--wa-ease);
}
/* dots settle in from a smaller scale; lines and their points fade in. Same single moment. */
@keyframes wa-settle { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } }
.wa-enter .wa-dot {
  transform-box: fill-box; transform-origin: center;
  animation: wa-settle var(--wa-dur-swap) var(--wa-ease);
}
.wa-enter .wa-line, .wa-enter .wa-point { animation: wa-fade var(--wa-dur-swap) var(--wa-ease); }
/* pulse columns grow up from the baseline, retirements down from it */
@keyframes wa-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.wa-enter .wa-bar.wa-c-growing, .wa-enter .wa-bar.wa-c-other { transform-origin: center bottom; animation-name: wa-grow-y; }
.wa-enter .wa-bar.wa-c-retired { transform-origin: center top; animation-name: wa-grow-y; }

/* tooltip: values lead, labels follow; hairline, no shadow, no radius */
.wa-tip {
  position: absolute; left: 0; top: 0; z-index: 2; max-width: 280px; pointer-events: none;
  background: var(--wa-sheet); border: 1px solid var(--wa-rule); padding: var(--wa-s-2) var(--wa-s-3);
  transition: opacity var(--wa-dur-state) var(--wa-ease);
}
.wa-tip[hidden] { display: none; }
.wa-tip p { margin: 0; }
.wa-tip-title { font-size: var(--wa-t-ui); color: var(--wa-ink); font-weight: 500; margin-bottom: var(--wa-s-1) !important; }
.wa-tip-row { display: flex; gap: var(--wa-s-2); align-items: baseline; font-size: var(--wa-t-meta); color: var(--wa-ink-muted); }
.wa-tip-row strong { font-family: var(--wa-font-measure); font-weight: 500; color: var(--wa-ink); font-variant-numeric: tabular-nums; }
.wa-tip-note { margin-top: var(--wa-s-1) !important; font-size: var(--wa-t-meta); color: var(--wa-ink-body); }

/* legend: one wrapping row above the plot; keys mirror the marks */
.wa-legend {
  list-style: none; margin: 0 0 var(--wa-s-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--wa-s-2) var(--wa-s-5);
  font-size: var(--wa-t-ui); color: var(--wa-ink);
}
.wa-legend li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--wa-s-1) var(--wa-s-2); }
.wa-key { display: inline-block; width: 10px; height: 10px; flex: none; }
.wa-key-line { width: 2px; height: 14px; background: var(--wa-ink); margin: 0 4px; }
.wa-key-np { border: 1px solid var(--wa-rule); background: transparent; }
.wa-legend-np, .wa-legend-sub {
  font-family: var(--wa-font-measure); font-size: var(--wa-t-meta); color: var(--wa-ink-muted);
}
.wa-legend-np { font-style: italic; }

/* (i) definitions */
.wa-term { display: inline; }
.wa-def {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: 1px;
  font-family: var(--wa-font-measure); font-size: var(--wa-t-meta); line-height: 1; font-style: normal;
  color: var(--wa-ink-muted); background: transparent; border: 1px solid var(--wa-hairline); cursor: pointer;
}
/* a 44px tap target around the 18px glyph */
.wa-def { position: relative; }
.wa-def::after { content: ""; position: absolute; inset: -13px; }
.wa-def:hover, .wa-def[aria-expanded="true"] { border-color: var(--wa-ink); color: var(--wa-ink); }
.wa-def-text {
  display: block; margin: var(--wa-s-2) 0 var(--wa-s-1); max-width: var(--wa-measure);
  padding-left: var(--wa-s-3); border-left: 1px solid var(--wa-rule);
  font-size: var(--wa-t-ui); line-height: 1.5; color: var(--wa-ink-body); font-weight: 400;
}
.wa-def-text[hidden] { display: none; }

/* region switch: a native select styled to the chrome; the chevron is two hairlines */
.wa-control { position: relative; display: inline-flex; flex-direction: column; gap: var(--wa-s-1); max-width: 100%; }
.wa-control::after {
  content: ""; position: absolute; right: 16px; bottom: 19px; width: 6px; height: 6px;
  border-right: 1px solid var(--wa-ink); border-bottom: 1px solid var(--wa-ink);
  transform: rotate(45deg); pointer-events: none;
}
.wa-control-label { font-family: var(--wa-font-measure); font-size: var(--wa-t-meta); color: var(--wa-ink-muted); }
.wa-select {
  min-height: 44px; min-width: 12rem; max-width: 100%; padding: 0 40px 0 var(--wa-s-3);
  font-family: var(--wa-font-operate); font-size: var(--wa-t-ui); color: var(--wa-ink);
  background: var(--wa-sheet); border: 1px solid var(--wa-rule); border-radius: 0;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.wa-select:hover { border-color: var(--wa-ink); }

.wa-chart-note { margin: var(--wa-s-3) 0 0; font-size: var(--wa-t-ui); color: var(--wa-ink-body); }
.wa-chart-method { margin-top: var(--wa-s-3); }

/* table view: every value reachable without hovering */
.wa-table { margin-top: var(--wa-s-3); font-size: var(--wa-t-ui); }
.wa-table summary {
  min-height: 44px; display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--wa-font-operate); color: var(--wa-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.wa-table-scroll { overflow-x: auto; margin-top: var(--wa-s-2); }
.wa-table table { border-collapse: collapse; width: 100%; min-width: 30rem; }
.wa-table caption { text-align: left; caption-side: top; padding-bottom: var(--wa-s-2); color: var(--wa-ink-muted); font-size: var(--wa-t-meta); font-family: var(--wa-font-measure); }
.wa-table th { text-align: left; font-weight: 600; color: var(--wa-ink); background: var(--wa-recess); padding: var(--wa-s-2) var(--wa-s-3); border-bottom: 1px solid var(--wa-rule); }
.wa-table td { padding: var(--wa-s-2) var(--wa-s-3); border-bottom: 1px solid var(--wa-hairline); vertical-align: top; }
.wa-table td.num { font-family: var(--wa-font-measure); font-size: var(--wa-t-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-table td:last-child.num { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .wa-enter .wa-bar, .wa-enter .wa-dot, .wa-enter .wa-line, .wa-enter .wa-point { animation: none; }
  /* the pulse columns name their animation with a more specific selector, so they are listed here too */
  .wa-enter .wa-bar.wa-c-growing, .wa-enter .wa-bar.wa-c-other, .wa-enter .wa-bar.wa-c-retired { animation: none; }
  .wa-mark .wa-bar, .wa-mark .wa-dot, .wa-mark .wa-line, .wa-mark .wa-point, .wa-tip { transition: none; }
}
@media (forced-colors: active) {
  .wa-bar { stroke: CanvasText; }
  .wa-key { border: 1px solid CanvasText; }
}