/* dashboard.css — hero + stat tiles + the two stacked SVG charts (owner: Agent C).
   Every color/space/type value comes from the tokens in tokens.css; nothing is hardcoded.
   Light + dark are handled by the token layer, so these rules stay theme-agnostic. */

/* ============================ HERO ============================ */
#hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--s-5, 20px);
  /* Wrap layout (not a rigid 1fr auto grid): the big number keeps its width and the
     category pill/note drop to the next line when a wide reading (e.g. 190/125 + the
     crisis note) would otherwise collide with it. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-3);
}

.hero-empty {
  flex: 1 1 100%;
  color: var(--ink-2);
  font-size: var(--fs-md);
  padding-block: var(--s-2);
}

#hero-latest { flex: 1 1 auto; }
.hero-reading { display: flex; align-items: center; gap: var(--s-3); }
.hero-reading .range-glyph { flex: none; }

.hero-nums { min-width: 0; }
.hero-bp {
  font-size: clamp(2.5rem, 10vw, var(--fs-3xl)); /* shrinks on narrow phones so the pill still fits beside it */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums; /* hero figures are proportional, not tabular */
  color: var(--ink);
}
.hero-slash { color: var(--muted); font-weight: 400; margin-inline: 2px; }
.hero-sub {
  margin-top: var(--s-1);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

#hero-category {
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  text-align: right;
}
.hero-alert {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--critical-ink);
  max-width: 22ch;
}

#hero-avg {
  flex: 1 1 100%;
  margin-top: var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}
.hero-avg-head {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-avg-val {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hero-avg-unit { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-left: 4px; }
.hero-avg-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* ============================ STAT TILES ============================ */
#tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
/* the two dual-metric tiles (Trend, Progress) span the full width so their
   Systolic/Diastolic rows have room and read as the headline metrics they are */
.tile.wide { grid-column: 1 / -1; }
.tile-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile-value { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.stat-num {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-num.muted { color: var(--muted); }
.stat-num .pct { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); margin-left: 1px; }
.unit { font-size: var(--fs-sm); color: var(--ink-2); }

.tile-foot { font-size: var(--fs-xs); color: var(--muted); display: flex; flex-direction: column; gap: var(--s-1); }
.foot-note { display: block; }
.foot-strong { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* down-is-good signed chips + trend value */
.delta {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend-val {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
[data-status='good'].delta, [data-status='good'].trend-val, [data-status='good'].goal-chip { color: var(--good-ink); }
[data-status='serious'].delta, [data-status='serious'].trend-val, [data-status='serious'].goal-chip { color: var(--serious-ink); }
[data-status='critical'].delta, [data-status='critical'].trend-val, [data-status='critical'].goal-chip { color: var(--critical-ink); }
[data-status='muted'].delta, [data-status='muted'].trend-val, [data-status='muted'].goal-chip { color: var(--muted); }

/* meter (in-target) */
.meter {
  width: 100%;
  height: 8px;
  margin-top: var(--s-1);
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: var(--good);
  border-radius: var(--r-full);
  transition: width var(--dur) var(--ease);
}

/* mini rows (peaks, morning/evening) */
.mini-rows { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; }
.mini-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.mini-row b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.mini-lab { color: var(--ink-2); }
/* trend + goal chips sit on the right of their mini-row, compact (not the old hero-size value) */
.mini-row .trend-val { margin-left: auto; font-size: var(--fs-base); white-space: nowrap; }
.goal-chip { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; text-align: right; }
.goal-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* sparkline */
.sparkline { display: block; width: 100%; max-width: 132px; height: auto; }
.sparkline path { fill: none; stroke: var(--series-avg); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-end { fill: var(--series-avg); }

/* series key dot, shared by tiles + tooltip */
.key { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: var(--r-full); }
.key.morning { background: var(--series-morning); }
.key.evening { background: var(--series-evening); }
.key.avg { width: 14px; height: 3px; border-radius: 2px; background: var(--series-avg); }

/* ============================ CHARTS ============================ */
#chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
}
.legend-keys { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding: 0; }
.legend-keys li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-2); /* label is a neutral text token, never the series color */
}
.lg-key { flex: none; }
.lg-key.morning, .lg-key.evening { width: 11px; height: 11px; border-radius: var(--r-full); }
.lg-key.morning { background: var(--series-morning); }
.lg-key.evening { background: var(--series-evening); }
.lg-key.avg { width: 18px; height: 3px; border-radius: 2px; background: var(--series-avg); }
.legend-table-link { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); white-space: nowrap; }

.chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--s-3) var(--s-3) var(--s-2);
}
#chart-sys { margin-bottom: var(--s-4); }

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--s-1) var(--s-1);
}
.chart-title { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.chart-unit { font-size: var(--fs-xs); color: var(--muted); }

.chart-plot { position: relative; }
.chart-svg { display: block; width: 100%; font-family: var(--font); touch-action: pan-y; }
.chart-svg:focus { outline: none; }
.chart-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); }
.chart-overlay { pointer-events: none; }

/* zones — recessive category washes */
.zones { opacity: 0.7; }
.zone.good { fill: var(--good-wash); }
.zone.warning { fill: var(--warning-wash); }
.zone.serious { fill: var(--serious-wash); }
.zone.critical { fill: var(--critical-wash); }
.zone-label { font-size: 10px; font-weight: 600; }
.zone-label.good { fill: var(--good-ink); }
.zone-label.warning { fill: var(--warning-ink); }
.zone-label.serious { fill: var(--serious-ink); }
.zone-label.critical { fill: var(--critical-ink); }

/* gridlines + axes — solid hairlines, recessive */
.grid-line { stroke: var(--hairline); stroke-width: 1; }
.axis-base { stroke: var(--baseline); stroke-width: 1; }
.y-tick, .x-tick { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.x-tick.today { fill: var(--ink-2); font-weight: 600; }

/* range motif + series */
.range-link { stroke: var(--baseline); stroke-width: 2; stroke-linecap: round; opacity: 0.5; }
.avg-line { fill: none; stroke: var(--series-avg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.avg-node { fill: var(--series-avg); }
.avg-end { fill: var(--series-avg); stroke: var(--surface); stroke-width: 2; }
.avg-end-chip { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.avg-end-label { fill: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk { stroke: var(--surface); stroke-width: 2; }
.mk-morning { fill: var(--series-morning); }
.mk-evening { fill: var(--series-evening); }

.chart-empty-text { fill: var(--muted); font-size: 13px; }

/* shared crosshair */
.cross-band { fill: var(--accent); opacity: 0.1; }
.cross-line { stroke: var(--baseline); stroke-width: 1; }

/* tooltip */
.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  min-width: 132px;
  max-width: 200px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  color: var(--ink);
}
.tip-day { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-1); }
.tip-empty { color: var(--muted); }
.tip-rows { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--s-2); }
.tip-row { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); }
.tip-row b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip .pill { font-size: var(--fs-xs); padding: 2px var(--s-2); }

/* fade the crosshair/tooltip in when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .cross-band, .cross-line, .chart-tip { transition: opacity var(--dur) var(--ease); }
}

/* wide layout: give tiles a touch more room */
@media (min-width: 900px) {
  #tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}