/* charts.css — (v206) chart kit + Story screen.
 * Loaded after styles.css. Tokens resolve through var(--token, §B1 hex) so
 * this file works before and after the design-system token swap.
 * Owner: charts / Story. Spec: overhaul/design-direction.md §B5, §B7. */

/* ── chart frame ─────────────────────────────────────────────── */
.hc { position: relative; width: 100%; min-width: 0; }
.hc-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hc[data-hc] .hc-svg { cursor: crosshair; }
.hc-t { font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); }

/* line draw-in, once (keyed charts only); reduced-motion skips it */
@keyframes hc-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.hc-anim .hc-draw { stroke-dasharray: 1000; animation: hc-draw 600ms cubic-bezier(.2,0,0,1) both; }
@media (prefers-reduced-motion: reduce) { .hc-anim .hc-draw { animation: none; stroke-dasharray: none; } }

/* ── shared tap tooltip: a small label BELOW the chart ─────────── */
.hc-tip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 6px; padding: 8px 10px;
  background: var(--bg-2, #1e1b18);
  border: 1px solid var(--line, #33302c);
  border-radius: var(--r-sm, 10px);
  font: 500 13px/1.35 var(--font-ui, -apple-system, BlinkMacSystemFont, sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2, #c1bdb7);
  animation: hc-tip-in 160ms cubic-bezier(.05,.7,.1,1);
}
.hc-tip[hidden] { display: none; }
@keyframes hc-tip-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.hc-tip-date { color: var(--ink-3, #95928b); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hc-tip-row { display: inline-flex; align-items: center; gap: 6px; }
.hc-tip-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hc-tip-row b { color: var(--ink, #f4f1ec); font-weight: 600; }
.hc-tip-note { flex-basis: 100%; color: var(--ink-3, #95928b); font-size: 12px; }

/* ── empty state ─────────────────────────────────────────────── */
.hc-empty { position: relative; padding: 4px 0; }
.hc-empty .hc-svg { opacity: .9; }
.hc-empty-msg {
  margin: 0; padding: 6px 16px 2px; text-align: center;
  font: 400 14px/1.4 var(--font-ui, -apple-system, sans-serif);
  color: var(--ink-2, #c1bdb7);
}

/* ── stat tiles ──────────────────────────────────────────────── */
.hc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hc-tile {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  background: var(--bg-2, #1e1b18);
  border: 1px solid var(--line, #33302c);
  border-radius: var(--r-md, 14px);
}
.hc-tile.full { grid-column: 1 / -1; }
.hc-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; }
.hc-tile-label {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font: 600 11px/1.2 var(--font-ui, -apple-system, sans-serif);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3, #95928b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hc-tile-v {
  display: flex; align-items: baseline; gap: 3px;
  font: 600 28px/1.05 var(--font-ui, -apple-system, sans-serif);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--ink, #f4f1ec);
}
.hc-unit { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink-3, #95928b); }
.hc-tile-sub { font: 400 13px/1.35 var(--font-ui, -apple-system, sans-serif); color: var(--ink-3, #95928b); }
.hc-tile-spark { margin-top: 4px; }
.hc-nudge { font: 500 12px/1.35 var(--font-ui, -apple-system, sans-serif); color: var(--ink-2, #c1bdb7); }

.hc-delta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font: 600 12px/1 var(--font-ui, -apple-system, sans-serif); font-variant-numeric: tabular-nums;
  color: var(--ink-3, #95928b);
  background: color-mix(in oklch, var(--ink-3, #95928b) 16%, transparent);
}
.hc-delta.good { color: var(--good, #63d99b); background: color-mix(in oklch, var(--good, #63d99b) 16%, transparent); }
.hc-delta.bad  { color: var(--bad, #f3625d);  background: color-mix(in oklch, var(--bad, #f3625d) 16%, transparent); }
.hc-vs { font-weight: 500; opacity: .8; }
.hc-arrow {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font: 700 13px/1 var(--font-ui, -apple-system, sans-serif);
  color: var(--ink-3, #95928b); background: var(--bg-3, #282521);
}
.hc-arrow.good { color: var(--good, #63d99b); background: color-mix(in oklch, var(--good, #63d99b) 16%, transparent); }
.hc-arrow.bad  { color: var(--bad, #f3625d);  background: color-mix(in oklch, var(--bad, #f3625d) 16%, transparent); }

/* ── heatmap ─────────────────────────────────────────────────── */
.hc-heat .hc-cell { cursor: pointer; }
.hc-heat .hc-cell.is-sel { stroke: var(--ink, #f4f1ec); stroke-width: 1.5px; }
.hc-heat-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 6px;
  font: 500 11px/1 var(--font-ui, -apple-system, sans-serif); color: var(--ink-3, #95928b);
}
.hc-heat-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.hc-heat-legend span { margin: 0 4px; }

/* ── Story: report story cards (scroll-snap) ─────────────────── */
.sr-scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 2px;
  margin: 0 -4px; padding: 2px 4px 6px;
  scrollbar-width: none;
}
.sr-scroller::-webkit-scrollbar { display: none; }
.sr-card {
  scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px;
  background: var(--bg-2, #1e1b18);
  border: 1px solid var(--line, #33302c);
  border-radius: var(--r-lg, 20px);
  min-height: 236px;
}
.sr-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font: 600 11px/1.2 var(--font-ui, -apple-system, sans-serif);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #95928b);
}
.sr-big {
  display: flex; align-items: baseline; gap: 6px;
  font: 600 44px/1 var(--font-ui, -apple-system, sans-serif);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink, #f4f1ec);
}
.sr-big .hc-unit { font-size: 18px; letter-spacing: 0; }
.sr-sentence { font: 400 15px/1.45 var(--font-ui, -apple-system, sans-serif); color: var(--ink-2, #c1bdb7); }
.sr-sentence b { color: var(--ink, #f4f1ec); font-weight: 600; }
.sr-chart { margin-top: auto; padding-top: 6px; }
.sr-card.is-win .sr-big { color: var(--volt, #d3fb58); }
.sr-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.sr-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong, #4b4743); transition: background 200ms, transform 200ms; }
.sr-dots i.on { background: var(--brand, #f9bc8b); transform: scale(1.2); }
.sr-seg {
  display: inline-flex; padding: 2px; gap: 2px; margin-bottom: 10px;
  background: var(--bg-3, #282521); border-radius: var(--r-sm, 10px);
}
.sr-seg button {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  font: 500 13px/1 var(--font-ui, -apple-system, sans-serif); color: var(--ink-2, #c1bdb7); cursor: pointer;
}
.sr-seg button.on { background: var(--bg-1, #15120f); color: var(--ink, #f4f1ec); }

/* ── Story: Daily Arc calendar ───────────────────────────────── */
.arc-cal-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.arc-cal-head .arc-cal-stat { font: 600 13px/1.3 var(--font-ui, -apple-system, sans-serif); color: var(--ink-2, #c1bdb7); font-variant-numeric: tabular-nums; }
.arc-cal-head .arc-cal-stat b { color: var(--ink, #f4f1ec); }
.arc-cal-label { font: 600 11px/1.2 var(--font-ui, -apple-system, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #95928b); }
#streakChips { margin-top: 14px; }

/* restyle legacy Story pieces onto the token system */
#screen-history .streak-chip {
  min-height: 28px; padding: 0 10px; gap: 6px;
  background: var(--bg-3, #282521); border: 0; border-radius: 999px;
  font: 500 13px/1 var(--font-ui, -apple-system, sans-serif); color: var(--ink-2, #c1bdb7);
}
#screen-history .streak-chip strong { font: 600 13px/1 var(--font-ui, -apple-system, sans-serif); font-variant-numeric: tabular-nums; color: var(--ink, #f4f1ec); }
#screen-history .tl-item { background: var(--bg-1, #15120f); border: 1px solid var(--line, #33302c); border-radius: var(--r-lg, 20px); }
#screen-history .tl-item::before { display: none; }
#screen-history .tl-item .tl-when { font: 600 11px/1.2 var(--font-ui, -apple-system, sans-serif); letter-spacing: .08em; color: var(--ink-3, #95928b); }
#screen-history .tl-item .tl-body { color: var(--ink-2, #c1bdb7); font-size: 15px; line-height: 1.5; }

/* year heatmap: brand ramp instead of neon mint; bonus = warn inner ring */
/* (v208) perceptual ramp: graphite → muted coral → coral → light apricot
   (lightness rises monotonically, so levels still read without colour) */
.hm-cell.mint    { background: var(--bg-3, #282521); }
.hm-cell.mint.l1 { background: color-mix(in oklch, var(--brand-b, #f58f67) 34%, var(--bg-3, #282521)); }
.hm-cell.mint.l2 { background: color-mix(in oklch, var(--brand-b, #f58f67) 66%, var(--bg-3, #282521)); }
.hm-cell.mint.l3 { background: var(--brand-b, #f58f67); }
.hm-cell.mint.l4 { background: var(--brand-a, #fad3a4); }
.hm-cell.mint.b1 { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn, #f2ce59) 55%, transparent); }
.hm-cell.mint.b2 { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--warn, #f2ce59) 80%, transparent); }
.hm-cell.mint.b3 { box-shadow: inset 0 0 0 2px var(--warn, #f2ce59); }
.hm-cell.future { background: transparent; box-shadow: inset 0 0 0 1px var(--line, #33302c); }
.hm-cell.muted { background: transparent; }
#screen-history .hm-legend .dot.mint { background: var(--brand, #f9bc8b); background: linear-gradient(135deg, var(--brand-a, #fad3a4), var(--brand-b, #f58f67)); }
#screen-history .hm-legend .dot.gold { background: transparent; box-shadow: inset 0 0 0 2px var(--warn, #f2ce59); }

/* Extras → tiles (same grid as hc-tiles) */
.extras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.extras-grid .hc-tile .hc-tile-sub { font-size: 12px; }

/* ── nutrition trends tiles (Field guide → Fuel) ─────────────── */
.ntr-tile { background: var(--bg-2, #1e1b18); border: 1px solid var(--line, #33302c); border-radius: var(--r-md, 14px); padding: 10px 10px 8px; gap: 2px; }
.ntr-tile-label { font: 600 11px/1.2 var(--font-ui, -apple-system, sans-serif); letter-spacing: .08em; color: var(--ink-3, #95928b); }
.ntr-tile-value { font: 600 20px/1.1 var(--font-ui, -apple-system, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ntr-tile-goal { font: 500 12px/1 var(--font-ui, -apple-system, sans-serif); color: var(--ink-3, #95928b); }
.ntr-goal-src { position: static; display: block; margin-top: 2px; font: 500 11px/1.2 var(--font-ui, -apple-system, sans-serif); color: var(--ink-3, #95928b); }
.ntr-tile .hc-svg { margin-top: 2px; }

/* macro pacing (Today → Fuel) */
.macro-weekly-trend .hc-line { margin-top: 6px; }

/* strength standards tiles */
.ss-tile .hc-spark { max-width: 160px; }

/* ── InBody trends sheet ─────────────────────────────────────── */
.trend-block .hc { margin-top: 6px; }
.trend-block .trend-current { font-variant-numeric: tabular-nums; }
.trend-block .trend-head .hc-delta { margin-top: 2px; }

/* ── Aggregate trends (Story + Life) ─────────────────────────── */
.trends-host .hc-tiles { margin-top: 2px; }
.trends-host .trends-axis-label { margin-top: 10px; font: 500 11px/1.35 var(--font-ui, -apple-system, sans-serif); letter-spacing: 0; text-transform: none; color: var(--ink-3, #95928b); text-align: left; }

/* ── strength progression chart ──────────────────────────────── */
.sp-wrap { padding-bottom: 0; }
.sp-svg { touch-action: pan-y; }
.sp-wrap .sp-tooltip {
  position: static !important; transform: none !important;
  margin-top: 6px; padding: 8px 10px; max-width: none;
  background: var(--bg-2, #1e1b18); border: 1px solid var(--line, #33302c); border-radius: var(--r-sm, 10px);
  box-shadow: none; backdrop-filter: none; animation: hc-tip-in 160ms cubic-bezier(.05,.7,.1,1);
  font: 500 13px/1.35 var(--font-ui, -apple-system, sans-serif); font-variant-numeric: tabular-nums;
}
.sp-wrap .sp-tt-date { font: 600 11px/1.2 var(--font-ui, -apple-system, sans-serif); letter-spacing: .08em; color: var(--ink-3, #95928b); border-bottom-color: var(--line, #33302c); }
.sp-axis-label { font-family: var(--font-ui, -apple-system, sans-serif) !important; font-size: 11px !important; fill: var(--ink-3, #95928b) !important; }
.sp-grid { stroke: var(--line, #33302c) !important; stroke-dasharray: 2 4; stroke-width: 1px; }
.sp-target-label { font-family: var(--font-ui, -apple-system, sans-serif); font-size: 11px; }

/* ── (v208) infographic washes ─────────────────────────────────
   Data cards carry a whisper of their domain hue from the top-left corner
   (9% at the corner, gone by ~60%), so text always sits on graphite and
   contrast is unchanged; the dot + label still name the domain. */
.hc-tile, .sr-card, .ntr-tile {
  background:
    radial-gradient(120% 95% at 0% 0%, color-mix(in oklch, var(--wash, transparent) 9%, transparent), transparent 62%),
    var(--bg-2, #1e1b18);
}
.d-fuel   { --wash: var(--fuel, #fe8f5b); }
.d-train  { --wash: var(--train, #5fa1f3); }
.d-sleep  { --wash: var(--sleep, #a996e2); }
.d-mind   { --wash: var(--mind, #65d0dc); }
.d-spirit { --wash: var(--spirit, #ee8dbd); }
.d-brand  { --wash: var(--brand, #f9bc8b); }
.d-good   { --wash: var(--good, #63d99b); }
.d-warn   { --wash: var(--warn, #f2ce59); }
.ntr-tile { --wash: var(--fuel, #fe8f5b); }
/* wins (PRs, perfect days): lime → yellow figures; the glyph/label still says "win" */
.sr-card.is-win .sr-big > span:first-child {
  background: linear-gradient(120deg, var(--volt-a, #cdff58), var(--volt-m, #e9f245) 55%, var(--volt-b, #fce343));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--volt, #d3fb58);
}
.sr-card.is-win { --wash: var(--volt, #d3fb58); }
.sr-dots i.on { background: linear-gradient(135deg, var(--brand-a, #fad3a4), var(--brand-b, #f58f67)); }
.hc-heat-legend i { border-radius: 3px; }
/* (v208) big standalone figures use Bricolage's proportional digits: there is
   no column to align, and the tabular "1" leaves holes ("1 .0 mcg"). Small
   numbers in rows, axes, chips, tables and timers stay tabular. */
.hc-tile-v, .hc-tile-v .num, .sr-big, .ntr-tile-value {
  font-variant-numeric: proportional-nums; font-feature-settings: "pnum";
}

/* (v206) delta chips never wrap inside their pill (narrow Story tiles) */
.hc-delta { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hc-delta .hc-vs { white-space: nowrap; }