/* ============================================================
   SYMPTOM TRACKERS (template-parts/symptom-tracker.php)
   Layout comes from game-tracker.css (masthead, figures, columns,
   sections, tables, stacked rows); this file adds the line chart,
   the legend and the tooltip.

   COLOUR. Line charts carry up to three companies, each on a fixed
   categorical slot so a company keeps its colour on every chart.
   Slots 1-3 of the dataviz reference palette, run through its
   validator against the page ground #edefe0: lightness, chroma, CVD
   (worst adjacent 9.2) and normal-vision separation all pass. Slots
   2 and 3 sit under 3:1 against the ground, so every line carries a
   direct end label and a table twin; colour never stands alone.
   ============================================================ */

.ic-sym-tracker {
  --ic-sym-slot-1: #2a78d6;
  --ic-sym-slot-2: #eb6834;
  --ic-sym-slot-3: #1baf7a;
  --ic-sym-plot: 200px;
}

/* --- Legend and swatches: a swatch beside ink, never coloured text --- */
.ic-sym-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-space-xs) var(--ic-space-lg);
  margin: 0 0 var(--ic-space-md);
  padding: 0;
  list-style: none;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  color: var(--ic-text);
}
.ic-sym-legend li { display: inline-flex; align-items: center; margin: 0; }
.ic-sym-swatch {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 3px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: middle;
}
.ic-sym-slot-1 { --ic-sym-c: var(--ic-sym-slot-1); }
.ic-sym-slot-2 { --ic-sym-c: var(--ic-sym-slot-2); }
.ic-sym-slot-3 { --ic-sym-c: var(--ic-sym-slot-3); }
.ic-sym-swatch { background: var(--ic-sym-c); }

/* --- Line chart --- */
.ic-sym-lines {
  position: relative;
  padding: 0 9rem 0 3.5rem;
}
.ic-sym-lines__plot {
  position: relative;
  height: var(--ic-sym-plot);
  border-top: 1px solid var(--ic-rule);
  border-bottom: 1px solid var(--ic-text-strong);
}
.ic-sym-lines__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ic-sym-lines__grid { stroke: var(--ic-rule); stroke-width: 1; }
.ic-sym-lines__path { fill: none; stroke: var(--ic-sym-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ic-sym-lines__tick {
  position: absolute;
  left: 0;
  top: calc(var(--y) * var(--ic-sym-plot) / 100);
  transform: translateY(-50%);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ic-text-muted);
}
/* Markers: 8px with a 2px ground ring, so overlapping points stay apart. */
.ic-sym-lines__dot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ic-sym-c);
  box-shadow: 0 0 0 2px var(--ic-bg);
}
/* End labels hang right of the last point, in ink; the marker carries the
   colour. Nudged apart in PHP when two series end close together. */
.ic-sym-lines__end {
  position: absolute;
  left: calc(var(--x) * 1% + 10px);
  top: calc(var(--y) * 1%);
  transform: translateY(-50%);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ic-text-strong);
  white-space: nowrap;
}
.ic-sym-lines__crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 1%);
  width: 1px;
  background: var(--ic-text-muted);
  pointer-events: none;
}
.ic-sym-lines__years {
  position: relative;
  height: 1.5em;
  margin-top: var(--ic-space-sm);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  color: var(--ic-text-muted);
}
.ic-sym-lines__years span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); }

/* --- Tooltip: values lead, labels follow (the Pop tracker's) --- */
.ic-sym-chart { position: relative; }
.ic-sym-section--columns { position: relative; }
.ic-sym-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 9rem;
  padding: var(--ic-space-sm) var(--ic-space-md);
  background: var(--ic-surface);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  line-height: 1.45;
  color: var(--ic-text);
  pointer-events: none;
}
.ic-sym-tooltip__head { margin: 0 0 var(--ic-space-xs); font-size: var(--ic-text-meta); color: var(--ic-text-muted); }
.ic-sym-tooltip__row { display: flex; align-items: center; gap: var(--ic-space-sm); margin: 0; }
.ic-sym-tooltip__row strong { min-width: 3.4em; font-variant-numeric: tabular-nums; color: var(--ic-text-strong); }
.ic-sym-tooltip__row .ic-sym-swatch { margin-right: 0; }

/* Hover on columns: the one under the pointer stays, the rest step back. */
.ic-tracker-columns.is-hovering .ic-tracker-columns__column:not(.is-active) { opacity: 0.45; }
.ic-tracker-columns__column { transition: opacity var(--ic-fast) var(--ic-ease); }

/* --- Series break (a change of survey) ---
   Bars on the new basis take the texture fill: the same amber with a
   darker stripe at 45 degrees, so the break reads without colour. A dashed
   divider with its label stands between the two runs. */
.ic-tracker-columns__column.is-after-break .ic-tracker-columns__bar {
  background: repeating-linear-gradient(45deg, var(--ic-accent) 0 5px, var(--ic-accent-deep) 5px 7px);
}
.ic-sym-break {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 0;
  margin: 0 var(--ic-space-xs);
  border-left: 1px dashed var(--ic-text-muted);
}
/* The label sits above the plot, clear of the bar values. */
.ic-sym-break__label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  transform: translateX(-50%);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ic-text-muted);
}

/* --- Ledger tables: the series name may carry its line's swatch --- */
.ic-sym-ledger tbody th { white-space: nowrap; }
.ic-sym-ledger thead th.ic-tracker-number { text-align: right; }
.ic-sym-ledger td.ic-tracker-number { text-align: right; }

@media (max-width: 899px) {
  .ic-sym-ledger tbody th { white-space: normal; }
  .ic-sym-ledger td.ic-tracker-number { text-align: left; }
}

/* Under 640 the end labels have no room: the legend and the table name
   every line instead. */
@media (max-width: 640px) {
  .ic-sym-tracker { --ic-sym-plot: 160px; }
  .ic-sym-lines { padding: 0 0.75rem 0 2.75rem; }
  .ic-sym-lines__end { display: none; }
  .ic-sym-lines__years span:nth-child(even):not(:last-child) { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-tracker-columns__column { transition: none; }
}