/* chart.css — TimeChart (chart.js). Tokens only: no hex, no easing, no UI duration.
   Loaded after design-system.css and eq-tokens.css. Owner: CHART agent.
   The host element is filled completely: legend / readout row on top, the canvas below it
   taking all the remaining height. Nothing in here ever scrolls: when the legend does not fit
   it wraps, and below 560 / 420 px (or 300 / 250 px high) it also gets smaller type and a
   shorter status chip. */

.tc {
  --tc-fs: var(--fs-small);                 /* legend type: 14 px, then 13, then 12 */
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow: hidden;
  color: var(--ink);
}
.tc--sm { --tc-fs: 0.8125rem; gap: var(--sp-1); }
.tc--xs { --tc-fs: 0.75rem;   gap: 2px; }

/* ---------- legend / readout row ---------- */
.tc-legend {
  flex: none; min-width: 0; max-height: 52%; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--sp-4); row-gap: 2px;
  padding: 0 var(--sp-1);
  font: var(--w-normal) var(--tc-fs)/1.35 var(--font-body);
}
.tc-grp { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); row-gap: 2px; min-width: 0; }
.tc-it { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; white-space: nowrap; }

/* species chip: line sample (colour + dash) with the marker shape on it, formula, live value */
.tc-sw { flex: none; width: 26px; height: 12px; overflow: visible; }
.tc-sw .ln { stroke: var(--tc-c); stroke-width: 2.5; fill: none; }
.tc-sw .mk { fill: var(--tc-c); stroke: var(--card); stroke-width: 1.5; }
.tc-f  { color: var(--ink-2); font-weight: var(--w-semi); }
.tc-ph { color: var(--muted); font-weight: var(--w-normal); font-size: var(--fs-micro); margin-left: 2px; }
.tc-notq .tc-f { font-style: italic; }

/* numbers: mono, tabular; the minimum width is raised by chart.js to the longest text seen,
   so the row never reflows while the cursor moves */
.tc-v {
  display: inline-block; text-align: left; min-width: 4ch;
  font-family: var(--font-mono); font-weight: var(--w-medium); font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tc-k { color: var(--muted); font-weight: var(--w-semi); }
.tc-u { color: var(--muted); font-size: var(--fs-micro); line-height: 1; }

.tc-status {
  box-sizing: border-box; justify-content: center; white-space: nowrap;
  font-size: var(--tc-fs); padding: 3px 10px;
}
.tc-st-s { display: none; }
.tc--xs .tc-st-l { display: none; }
.tc--xs .tc-st-s { display: inline; }
.tc--xs .tc-status { padding: 2px 8px; }
.tc--xs .tc-it { min-height: 18px; gap: 4px; }
.tc--xs .tc-sw { width: 20px; }
.tc--xs .tc-grp, .tc--xs .tc-legend { column-gap: var(--sp-2); row-gap: 0; }
.tc--xs .tc-unit, .tc--xs .tc-grp-q .tc-u { display: none; }
.tc--xs .tc-kv-t { display: none; }          /* the time plate on the x axis and the slider text still carry t */

/* ---------- plot: the focusable "time cursor" slider ---------- */
.tc-plot {
  position: relative; flex: 1 1 0; min-height: 72px; min-width: 0;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair; border-radius: var(--r-sm);
}
.tc-plot:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; box-shadow: none; }
.tc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- legend options (chart.setLegendOptions): the shell hides what it already shows elsewhere ---------- */
.tc--noqk .tc-kv-qk { display: none; }
.tc--nostatus .tc-status { display: none; }
.tc-kv[title] { cursor: help; }