/* ===========================================================================
   Charts — hand-rolled SVG. No chart library, no runtime, no CDN.

   Mark specs are fixed here so every chart in the app obeys the same grammar:
   2px lines, ≤24px bars with a 4px rounded data-end, ≥8px markers, a 2px
   surface gap between touching marks, hairline solid gridlines, recessive axes.
   Text never wears a series colour — the mark beside it carries identity.
   =========================================================================== */

.chart {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
}
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart__svg text { font-family: var(--font); }

.chart-grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-axis line, .chart-axis path { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart-tick {
  fill: var(--chart-ink);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.chart-tick--y { text-anchor: end; dominant-baseline: middle; }
.chart-tick--x { text-anchor: middle; dominant-baseline: hanging; }
.chart-label {
  fill: var(--ink-2);
  font-size: 10.5px;
  font-weight: 640;
}
.chart-zero line { stroke: var(--axis); stroke-width: 1; stroke-dasharray: none; opacity: 0.8; }

/* --- Series marks --------------------------------------------------------- */
.series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.series-area { stroke: none; opacity: 0.1; }
.series-dot { stroke: var(--s1); stroke-width: 2; }      /* the 2px surface ring */

.s1 { color: var(--s-1); }
.s2 { color: var(--s-2); }
.s3 { color: var(--s-3); }
.s4 { color: var(--s-4); }
.s5 { color: var(--s-5); }
.s6 { color: var(--s-6); }
.series-line.s1, .series-dot.s1 { stroke: var(--s-1); fill: none; }
.series-line.s2, .series-dot.s2 { stroke: var(--s-2); fill: none; }
.series-dot.s1 { fill: var(--s-1); }
.series-dot.s2 { fill: var(--s-2); }
.series-area.s1 { fill: var(--s-1); }
.series-area.s2 { fill: var(--s-2); }

.load-bar { fill: var(--ink-3); opacity: 0.4; }
.load-bar.is-today { fill: var(--brand); opacity: 0.9; }

.div-pos { fill: var(--div-pos); }
.div-neg { fill: var(--div-neg); }
.div-line-pos { stroke: var(--div-pos); }
.div-line-neg { stroke: var(--div-neg); }

/* --- Legend --------------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: var(--sp-2);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-micro);
  color: var(--ink-2);
  font-weight: 600;
}
.legend__key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.legend__key--dot { width: 9px; height: 9px; border-radius: var(--r-pill); }
.legend__value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 660;
}

/* --- Crosshair & tooltip -------------------------------------------------- */
.chart__hit { fill: transparent; cursor: crosshair; }
.chart-cursor line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-cursor circle { stroke: var(--s1); stroke-width: 2; }

.chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 8rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--s3);
  border: 1px solid var(--line-strong);
  box-shadow: var(--e-2);
  font-size: var(--fs-micro);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -110%);
  transition: opacity var(--t-fast) var(--ease);
}
.chart-tip.is-on { opacity: 1; }
.chart-tip__date { color: var(--ink-3); font-weight: 640; margin-bottom: 3px; }
.chart-tip__row { display: flex; align-items: center; gap: 0.4rem; line-height: 1.5; }
.chart-tip__key { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tip__name { color: var(--ink-2); }
.chart-tip__val { margin-left: auto; font-weight: 660; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Workout structure — the .zwo profile, drawn from the ordinal zone ramp
   -------------------------------------------------------------------------- */
.wko { display: flex; align-items: flex-end; gap: 2px; width: 100%; }
.wko__block {
  min-width: 1px;
  border-radius: 3px 3px 0 0;
  background: var(--z3);
  align-self: flex-end;
}
.wko__block[data-z="1"] { background: var(--z1); }
.wko__block[data-z="2"] { background: var(--z2); }
.wko__block[data-z="3"] { background: var(--z3); }
.wko__block[data-z="4"] { background: var(--z4); }
.wko__block[data-z="5"] { background: var(--z5); }
.wko__block[data-z="6"] { background: var(--z6); }

.wko--lg { height: 108px; }
.wko--md { height: 64px; }
.wko--sm { height: 26px; gap: 1px; }
.wko--xs { height: 14px; gap: 1px; }
.wko--xs .wko__block { border-radius: 1px 1px 0 0; }

.zone-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.65rem; }
.zone-legend__item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-micro); color: var(--ink-3); }
.zone-legend__swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* --------------------------------------------------------------------------
   Lap bars — what the ride actually looked like
   -------------------------------------------------------------------------- */
.laps { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 44px; }
.laps--sm { height: 20px; gap: 1px; }
.laps__bar {
  min-width: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--s-2);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Gauges — Rider DNA scores
   -------------------------------------------------------------------------- */
.gauge { display: grid; justify-items: center; gap: 0.35rem; }
.gauge__svg { display: block; width: 100%; max-width: 132px; height: auto; }
.gauge__track { fill: none; stroke: var(--sunken); stroke-width: 9; stroke-linecap: round; }
.gauge__fill { fill: none; stroke: var(--s-1); stroke-width: 9; stroke-linecap: round;
               transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
.gauge__value { font-size: 1.45rem; font-weight: 680; letter-spacing: -0.03em; line-height: 1; }
.gauge__label {
  font-size: var(--fs-micro); font-weight: 660;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3); text-align: center;
}

/* --------------------------------------------------------------------------
   Sparkline
   -------------------------------------------------------------------------- */
.spark { width: 100%; height: 34px; display: block; overflow: visible; }
.spark__line { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__line--accent { stroke: var(--brand); }
.spark__dot { fill: var(--brand); stroke: var(--s1); stroke-width: 2; }

/* --------------------------------------------------------------------------
   Wind rose
   -------------------------------------------------------------------------- */
.rose__ring { fill: none; stroke: var(--grid); stroke-width: 1; }
.rose__cardinal { fill: var(--chart-ink); font-size: 9px; text-anchor: middle; dominant-baseline: middle; }
.rose__arrow { fill: var(--s-1); }
.rose__heading { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 3; }

/* --------------------------------------------------------------------------
   Elevation profile
   -------------------------------------------------------------------------- */
.elev__fill { fill: var(--s-3); opacity: 0.16; }
.elev__line { fill: none; stroke: var(--s-3); stroke-width: 2; stroke-linejoin: round; }
.elev__peak { fill: var(--brand-wash); }

/* A table view is the relief for every chart: values are never colour-only. */
.chart-table-toggle {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 2px;
}