/* api/static/css/trends.css
 *
 * Trends tab ("trends-*") styles. Extracted from styles.css in #2227.
 * Modify in place. Bump api/static/sw.js CACHE_NAME on every change.
 *
 * Shared chart primitives (`.chart-axis-line`, `.chart-zero-line`,
 * `.chart-axis-tick`, `.chart-gridline`, `.chart-hairline`, `.chart-tooltip*`)
 * live in base.css since they are also used by the Data tab detail charts.
 */

.trends-surface {
  margin-top: 44px;
  padding: 1rem;
  overflow-y: auto;
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
}
.trends-container { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }

@media (max-width: 640px) {
  .trends-surface { padding: 0.75rem; }
  .trends-container { gap: 1.5rem; }
}

.trends-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.trends-title { margin: 0; font-size: 1.5rem; }

.trends-ranges { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.trends-range {
  min-width: 44px; min-height: 44px;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--slate-100);
  background: transparent;
  color: var(--slate-800);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.trends-range:hover:not(:disabled) { border-color: var(--ember-500); }
.trends-range.active {
  background: var(--ember-500);
  color: var(--white);
  border-color: var(--ember-500);
  font-weight: 600;
}
.trends-range:disabled { opacity: 0.4; cursor: not-allowed; }

.trends-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.trends-card.is-loading .trends-card-body { opacity: 0.5; transition: opacity 150ms ease; }
.trends-card-head h3 { margin: 0 0 0.25rem 0; font-size: 1.125rem; }
.trends-card-sub { margin: 0; color: var(--slate-600); font-size: 0.875rem; }
.trends-card-body { position: relative; width: 100%; }

.trends-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; color: var(--slate-600); }
.trends-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.375rem; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .trends-range, .trends-card.is-loading .trends-card-body { transition: none; }
}

/* Trends tab — PMC chart */
.trends-chart { display: block; }
.trends-line { fill: none; }
.trends-line-ctl { stroke: var(--ember-500); stroke-width: 1.25; opacity: 0.55; }
.trends-line-atl { stroke: var(--blue-600); stroke-width: 1.25; opacity: 0.55; }
.trends-line-tsb { stroke-width: 2.75; }
.trends-tsb-area { pointer-events: none; }
.trends-swatch-ctl { background: var(--ember-500); opacity: 0.55; }
.trends-swatch-atl { background: var(--blue-600); opacity: 0.55; }
.trends-swatch-tsb { background: linear-gradient(180deg, var(--emerald-500) 0%, var(--slate-400) 50%, var(--red-500) 100%); }
.trends-form-label { color: var(--slate-800); font-weight: 600; font-size: 0.95rem; }
/* #2219 — form label colour follows the TSB chart fill (emerald→slate→red)
   so the text reads its own state. Modifier classes added by
   _trendsFormZoneClass in trends-tab.js. */
.trends-form-label--positive { color: var(--teal-400); }
.trends-form-label--neutral  { color: var(--slate-800); }
.trends-form-label--warn     { color: var(--ember-500); }
.trends-form-label--negative { color: var(--red-400); }
.trends-sub-muted { color: var(--slate-400); }
.trends-legend-primary { font-weight: 600; color: var(--slate-800); }
/* `.trends-empty` retired in favour of `.empty-state empty-state--sm` (issue #2168). */

.trends-bar { shape-rendering: crispEdges; }
.trends-bar-run { fill: var(--ember-500); }
.trends-bar-ride { fill: var(--blue-600); }
.trends-bar-swim { fill: var(--cyan-400, #22d3ee); }
.trends-bar-other { fill: var(--slate-600); opacity: 0.7; }
.trends-swatch-run { background: var(--ember-500); }
.trends-swatch-ride { background: var(--blue-600); }
.trends-swatch-swim { background: var(--cyan-400, #22d3ee); }
.trends-swatch-other { background: var(--slate-600); }
/* 28-day mean overlay — dashed to distinguish it as a computed trend, not raw data. */
.trends-volume-mean { stroke: var(--ember-600); stroke-width: 2; stroke-dasharray: 5,3; opacity: 0.8; pointer-events: none; }
.trends-swatch-volume-mean { background: var(--ember-600); opacity: 0.8; border-radius: 0; height: 2px; align-self: center; }

/* `.trends-empty-card` is now a plain card wrapper around `.empty-state`
   (issue #2168). The card chrome stays; the empty-state handles padding/centring. */
.trends-empty-card { padding: 0; }

/* Recovery sparklines — HRV (rolling mean over baseline band) + sleep score.
   The baseline is rendered as a soft band so the deviation reads visually
   without the user having to compute it. Sleep score line is teal so it
   doesn't compete with HRV's ember accent on the same scroll position. */
.trends-line-hrv { stroke: var(--ember-500); stroke-width: 2; }
.trends-hrv-baseline-band {
  fill: var(--slate-400);
  fill-opacity: 0.18;
  stroke: none;
  pointer-events: none;
}
.trends-swatch-hrv { background: var(--ember-500); }
.trends-swatch-hrv-baseline { background: var(--slate-400); opacity: 0.4; }
.trends-line-sleep { stroke: var(--teal-600); stroke-width: 2; }

/* HRV baseline onset annotation — explains why the band starts mid-chart. */
.trends-hrv-onset-tick {
  stroke: var(--slate-400);
  stroke-width: 1;
  stroke-dasharray: 2,3;
  pointer-events: none;
}
.trends-hrv-onset-label {
  font-size: 9px;
  fill: var(--slate-400);
  pointer-events: none;
}

/* Today pip — persistent filled dot + value label at the latest data point.
   pointer-events: none keeps the existing tooltip/hairline hover unaffected. */
.trends-today-pip {
  stroke: var(--white);
  stroke-width: 1.5;
  pointer-events: none;
}
.trends-today-pip--positive { fill: var(--teal-400); }
.trends-today-pip--neutral  { fill: var(--slate-500); }
.trends-today-pip--warn     { fill: var(--ember-500); }
.trends-today-pip--negative { fill: var(--red-400); }
.trends-today-pip--hrv      { fill: var(--ember-500); }
.trends-today-pip--sleep    { fill: var(--teal-600); }
.trends-today-pip--volume   { fill: var(--slate-600); }
.trends-today-label {
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linejoin: round;
}
.trends-today-label--positive { fill: var(--teal-400); }
.trends-today-label--neutral  { fill: var(--slate-600); }
.trends-today-label--warn     { fill: var(--ember-500); }
.trends-today-label--negative { fill: var(--red-400); }
.trends-today-label--hrv      { fill: var(--ember-500); }
.trends-today-label--sleep    { fill: var(--teal-600); }
.trends-today-label--volume   { fill: var(--slate-600); }