/* ============================================================
   charts.css · styling for window.TICharts (svg-charts.js)
   Candidate-branch public-safe demo · "Datum" skin

   Theme tokens ONLY — every colour is a site custom
   property (var(--accent), var(--text), …) so each chart paints
   in the dark Halcyon palette. No hardcoded hex. No @import.
   No url() to any external host. No JS.

   halcyon.css loads FIRST and owns the tokens used here:
     --text --text-dim --text-dimmer --accent --accent-deep
     --accent-soft --accent-pale --accent-bright
     --surface --surface-2 --surface-3 --paper --bg-warm
     --border --border-soft --border-accent --subtle
     --ok --warn --gold --gold-soft --gold-pale
     --mono --radius --radius-sm

   Datum posture: calm, precise, hairline. Thin strokes, tight
   radii, mono micro-labels. Amber (--gold) is reserved for
   "attention" only — out-of-spec / hot cells read --warn, the
   gold stacked segment is the single opt-in attention tone.
   color-mix only ever TINTS an existing token — never names a
   colour directly — so nothing can ship a fixed hue that fails
   to flip between the two themes.
   ============================================================ */

/* ---- ring -------------------------------------------------- */
.ti-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ti-ring svg { display: block; }

.ti-ring-track {
  /* a faint datum track that still reads on the lightest paper */
  stroke: color-mix(in srgb, var(--border) 72%, var(--surface-2));
}
.ti-ring-arc {
  stroke: var(--accent);
  transition: stroke-dasharray 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* reduced motion: no draw-in animation */
.ti-ring-arc[data-reduced="true"] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ti-ring-arc { transition: none; }
}

.ti-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ti-ring-pct {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ti-ring-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  margin-top: 3px;
  max-width: 80%;
}

/* ---- donut ------------------------------------------------- */
.ti-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ti-donut-svgwrap {
  position: relative;
  display: inline-flex;
}
.ti-donut-svgwrap svg { display: block; }

.ti-donut-track {
  stroke: color-mix(in srgb, var(--border) 62%, var(--surface-2));
}
/* default + named segment colours, overridable by .cls on the segment.
   Legacy seg names kept (seg-pi/seg-tax/seg-alt) so a ported donut
   still paints; Datum re-points them onto the instrument-blue ramp. */
.ti-donut-arc { stroke: var(--accent); }
.ti-donut-arc.seg-pi  { stroke: var(--accent); }
.ti-donut-arc.seg-tax { stroke: var(--accent-deep); }
.ti-donut-arc.seg-alt { stroke: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
/* shared seg vocabulary (ok / warn / accent / gold / neutral) */
.ti-donut-arc.seg-ok      { stroke: var(--ok); }
.ti-donut-arc.seg-warn    { stroke: var(--warn); }
.ti-donut-arc.seg-accent  { stroke: var(--accent); }
.ti-donut-arc.seg-gold    { stroke: var(--gold); }
.ti-donut-arc.seg-neutral { stroke: color-mix(in srgb, var(--subtle) 60%, var(--surface-2)); }

.ti-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ti-donut-cval {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ti-donut-clabel {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  margin-top: 2px;
}

.ti-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}
.ti-donut-legrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
}
.ti-donut-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--accent);
  flex: 0 0 auto;
}
.ti-donut-swatch.seg-pi      { background: var(--accent); }
.ti-donut-swatch.seg-tax     { background: var(--accent-deep); }
.ti-donut-swatch.seg-alt     { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.ti-donut-swatch.seg-ok      { background: var(--ok); }
.ti-donut-swatch.seg-warn    { background: var(--warn); }
.ti-donut-swatch.seg-accent  { background: var(--accent); }
.ti-donut-swatch.seg-gold    { background: var(--gold); }
.ti-donut-swatch.seg-neutral { background: color-mix(in srgb, var(--subtle) 60%, var(--surface-2)); }
.ti-donut-leglabel { color: var(--text-dim); }
.ti-donut-legval {
  margin-left: auto;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---- bars -------------------------------------------------- */
.ti-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ti-bar-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 10px;
}
.ti-bar-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-bar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 58%, var(--surface-2));
  overflow: hidden;
}
.ti-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 3px;
}
.ti-bar-fill.is-emph { background: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) {
  .ti-bar-fill { transition: none; }
}
/* n/a track: a thin dashed neutral datum line, visibly "no data" */
.ti-bar-na {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--text-dim) 48%, transparent);
}
.ti-bar-value {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ti-bar-value-na {
  font-weight: 500;
  color: var(--text-dimmer);
  font-style: italic;
}
/* screen-reader-only text inside a fill / segment */
.ti-bar-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- gauge ------------------------------------------------- */
.ti-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 260px;
}
.ti-gauge svg { display: block; width: 100%; height: auto; }

.ti-gauge-track {
  stroke: color-mix(in srgb, var(--border) 62%, var(--surface-2));
}
.ti-gauge-arc { stroke: var(--accent); }
.ti-gauge-threshold { stroke: var(--accent-deep); }
.ti-gauge-needle { stroke: var(--text); }
.ti-gauge-hub { fill: var(--text); }

.ti-gauge-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.ti-gauge-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  text-align: center;
  max-width: 92%;
}

/* ---- areaLocator ------------------------------------------ */
.ti-arealoc {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}
.ti-arealoc svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ti-arealoc-land {
  fill: var(--bg-warm);
}
.ti-arealoc-water {
  fill: color-mix(in srgb, var(--accent) 20%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 36%, transparent);
  stroke-width: 0.4;
}
.ti-arealoc-coast {
  stroke: color-mix(in srgb, var(--accent) 48%, transparent);
  stroke-width: 0.6;
  stroke-linecap: round;
}
.ti-arealoc-halo {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
}
.ti-arealoc-dot {
  fill: var(--accent-deep);
  stroke: var(--surface);
  stroke-width: 0.8;
}
.ti-arealoc-label {
  fill: var(--text);
  font-size: 4.4px;
  font-weight: 600;
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.1px;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 1.1px;
  stroke-linejoin: round;
}

/* ---- line + area (shared geometry, two skins) ------------- */
.ti-line, .ti-area {
  width: 100%;
}
.ti-line svg, .ti-area svg {
  display: block;
  width: 100%;
  height: auto;
}

/* baseline / axis datum rule along the bottom of the plot */
.ti-line-axis {
  stroke: color-mix(in srgb, var(--border) 80%, var(--surface-2));
  stroke-width: 1;
}
/* dashed reference / target marker line */
.ti-line-target {
  stroke: var(--gold);
  stroke-width: 1.25;
  opacity: 0.85;
}
/* the stroked series line */
.ti-line-path {
  stroke: var(--accent);
  stroke-width: 2;
}
/* per-point + emphasised end dots */
.ti-line-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1;
}
.ti-line-dot.is-end {
  fill: var(--accent-deep);
  stroke: var(--surface);
  stroke-width: 1.25;
}

/* area: low-opacity fill beneath the same curve */
.ti-area-fill {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: none;
}
.ti-area-line {
  stroke: var(--accent);
  stroke-width: 2;
}

/* ---- heatmap ----------------------------------------------- */
.ti-heatmap {
  width: 100%;
}
.ti-heatmap svg {
  display: block;
  width: 100%;
  height: auto;
}
/* axis labels are mono dimension callouts */
.ti-heatmap-col,
.ti-heatmap-row {
  fill: var(--text-dim);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.2px;
}
/* cells: accent ramp via fill-opacity (set inline by the JS); a hairline
   keeps the lowest cells visible on light paper. is-hot takes the
   reserved attention tone. */
.ti-heatmap-cell {
  fill: var(--accent);
  stroke: color-mix(in srgb, var(--border) 50%, transparent);
  stroke-width: 0.5;
}
.ti-heatmap-cell.is-hot {
  fill: var(--warn);
}

/* ---- stackedBar -------------------------------------------- */
.ti-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ti-stack-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 10px;
}
.ti-stack-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-stack-track {
  position: relative;
  display: flex;
  height: 12px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--border) 58%, var(--surface-2));
  overflow: hidden;
}
.ti-stack-seg {
  height: 100%;
  min-width: 2px;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ti-stack-seg { transition: none; }
}
/* a hairline divider between adjacent segments reads them as distinct
   without needing per-segment gaps */
.ti-stack-seg + .ti-stack-seg {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--surface) 65%, transparent);
}
.ti-stack-seg.seg-ok      { background: var(--ok); }
.ti-stack-seg.seg-warn    { background: var(--warn); }
.ti-stack-seg.seg-accent  { background: var(--accent); }
.ti-stack-seg.seg-gold    { background: var(--gold); }
.ti-stack-seg.seg-neutral { background: color-mix(in srgb, var(--subtle) 58%, var(--surface-2)); }
/* empty row: thin dashed neutral track */
.ti-stack-na {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--text-dim) 48%, transparent);
}
.ti-stack-total {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- trendline --------------------------------------------- */
.ti-trend {
  display: inline-flex;
  line-height: 0;
}
.ti-trend svg { display: block; }
.ti-trend-path {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.ti-trend-dot {
  fill: var(--accent-deep);
}

/* ---- deviationStrip (tolerance band) ----------------------- */
.ti-devstrip {
  width: 100%;
}
.ti-devstrip svg {
  display: block;
  width: 100%;
  height: auto;
}
/* the in-tolerance band — a calm accent wash */
.ti-devstrip-band {
  fill: color-mix(in srgb, var(--accent) 9%, transparent);
  stroke: color-mix(in srgb, var(--accent) 24%, transparent);
  stroke-width: 0.75;
}
/* upper / lower tolerance limits — dashed accent datum lines */
.ti-devstrip-tol {
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1;
}
/* nominal centre line — a solid hairline datum */
.ti-devstrip-center {
  stroke: color-mix(in srgb, var(--text-dim) 55%, transparent);
  stroke-width: 1;
}
/* points: in-spec reads ok, out-of-spec reads warn (the attention tone) */
.ti-devstrip-dot {
  stroke: var(--surface);
  stroke-width: 1;
}
.ti-devstrip-dot.is-ok {
  fill: var(--ok);
}
.ti-devstrip-dot.is-warn {
  fill: var(--warn);
}
.ti-devstrip-label {
  fill: var(--text-dim);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.2px;
}

/* ---- shared empty / fallback node ------------------------- */
.ti-chart-empty {
  min-height: 1px;
}

/* ============================================================
   Responsive pass — shrink gracefully under 480px.
   ============================================================ */
@media (max-width: 480px) {
  .ti-ring-pct { font-size: 1.3rem; }
  .ti-ring-sub { font-size: 0.64rem; }

  .ti-bar-row,
  .ti-stack-row {
    grid-template-columns: 64px 1fr auto;
    gap: 8px;
  }
  .ti-bar-label,
  .ti-stack-label { font-size: 0.68rem; }
  .ti-bar-value,
  .ti-stack-total { font-size: 0.74rem; }

  .ti-donut-legend { max-width: 100%; }
  .ti-donut-legrow { font-size: 0.78rem; }

  .ti-gauge { max-width: 220px; }
  .ti-gauge-note { font-size: 0.64rem; }

  .ti-arealoc { max-width: 100%; }

  .ti-heatmap-col,
  .ti-heatmap-row { font-size: 9px; }
}

/* Very narrow: stack the value under the track if room is tight. */
@media (max-width: 340px) {
  .ti-bar-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "label track"
      "label value";
    row-gap: 2px;
  }
  .ti-bar-label { grid-area: label; align-self: center; }
  .ti-bar-track { grid-area: track; }
  .ti-bar-value { grid-area: value; text-align: left; font-size: 0.7rem; }

  .ti-stack-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "label track"
      "label total";
    row-gap: 2px;
  }
  .ti-stack-label { grid-area: label; align-self: center; }
  .ti-stack-track { grid-area: track; }
  .ti-stack-total { grid-area: total; text-align: left; font-size: 0.7rem; }
}