/* How It Heals — data and diagrams.
   One data colour, one highlight, reserved status colours. Slim marks, hairline
   rules, mono labels. Loaded after brand.css; every value comes from --b- tokens.

   The rule behind the rules: our palette is deliberately near-neutral, so it
   cannot carry a multi-colour chart. One series is the default. Two is the
   ceiling, and only with direct labels. Beyond that: small multiples. */

:root {
  /* the data colour, by ground */
  --c-data:        var(--b-sky-deep);      /* #3B7598 on light: 5.0:1 */
  --c-data-soft:   rgba(59,117,152,.12);   /* band and area wash */
  --c-data-2:      var(--b-ink);           /* the only second series */
  --c-mark:        var(--b-butter);        /* the one point worth looking at */

  /* structure */
  --c-grid:        var(--b-rule);
  --c-axis:        var(--b-faint);
  --c-label:       var(--b-muted);
  --c-surface:     var(--b-white);

  /* status — reserved. Never a series colour. Always with a label. */
  --c-good:        #2F6B4F;
  --c-watch:       #B0842C;
  --c-out:         #A33A2A;

  /* geometry */
  --c-line:        2px;
  --c-hair:        1px;
  --c-dot:         8px;
  --c-bar:         8px;
  --c-round:       4px;
}

[data-ground="dark"], .on-dark {
  --c-data:      var(--b-sky);             /* #7FB0CC on ink: 7.7:1 */
  --c-data-soft: rgba(127,176,204,.16);
  --c-data-2:    var(--b-butter);
  --c-grid:      rgba(255,255,255,.16);
  --c-axis:      rgba(255,255,255,.45);
  --c-label:     rgba(255,255,255,.7);
  --c-surface:   var(--b-ink);
  --c-good:      #7FB894;
  --c-watch:     #E3C173;
  --c-out:       #E08A73;
}

/* ── the frame ───────────────────────────────────────────────── */
.chart {
  background: var(--c-surface);
  border: 1px solid var(--b-rule);
  border-radius: var(--b-r-card);
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-title {
  font-family: var(--b-mono); font-size: var(--b-t-label);
  letter-spacing: var(--b-tr-label); text-transform: uppercase;
  color: var(--c-label); margin: 0;
}
.chart-note { font-size: var(--b-t-small); color: var(--c-label); margin: 0; }
.chart-value {
  font-size: var(--b-t-h3); font-weight: 500; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums; margin: 0;
}

/* ── marks ───────────────────────────────────────────────────── */
.c-line   { fill: none; stroke: var(--c-data); stroke-width: var(--c-line);
            stroke-linecap: round; stroke-linejoin: round; }
.c-line-2 { fill: none; stroke: var(--c-data-2); stroke-width: var(--c-line);
            stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; }
.c-area   { fill: var(--c-data-soft); stroke: none; }
.c-dot    { fill: var(--c-data); stroke: var(--c-surface); stroke-width: 2; }
.c-dot-mark { fill: var(--c-mark); stroke: var(--b-ink); stroke-width: 1.5; }
.c-bar    { fill: var(--c-data); rx: var(--c-round); }
.c-track  { fill: var(--c-grid); rx: var(--c-round); }
.c-band   { fill: var(--c-data-soft); }
.c-grid   { stroke: var(--c-grid); stroke-width: var(--c-hair); }
.c-axis   { stroke: var(--c-grid); stroke-width: var(--c-hair); }
.c-ref    { stroke: var(--c-axis); stroke-width: var(--c-hair); stroke-dasharray: 3 4; }

/* ── type inside the plot ────────────────────────────────────── */
.c-label {
  font-family: var(--b-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; fill: var(--c-label);
}
.c-num   { font-family: var(--b-sans); font-size: 13px; font-weight: 500;
           fill: var(--b-ink); font-variant-numeric: tabular-nums; }
[data-ground="dark"] .c-num, .on-dark .c-num { fill: #fff; }

/* ── status, always paired with a word ───────────────────────── */
.c-good { fill: var(--c-good); } .c-watch { fill: var(--c-watch); } .c-out { fill: var(--c-out); }
.c-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--b-mono); font-size: var(--b-t-label);
  letter-spacing: var(--b-tr-label); text-transform: uppercase; color: var(--c-label);
}
.c-chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.c-chip.is-good  { color: var(--c-good); }
.c-chip.is-watch { color: var(--c-watch); }
.c-chip.is-out   { color: var(--c-out); }

/* ── the range bar: our most common figure ───────────────────── */
.c-range { display: grid; gap: .5rem; }
.c-range-track { position: relative; height: var(--c-bar); background: var(--c-grid);
  border-radius: 999px; }
.c-range-optimal { position: absolute; top: 0; bottom: 0; background: var(--c-data);
  border-radius: 999px; opacity: .9; }
.c-range-you { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  margin-left: -7px; border-radius: 999px; background: var(--c-mark);
  border: 1.5px solid var(--b-ink); }
.c-range-ends { display: flex; justify-content: space-between; }

/* ── motion: draw once, then be still ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .chart .c-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c-draw .9s ease-out .15s forwards; }
  @keyframes c-draw { to { stroke-dashoffset: 0; } }
}