/* ==========================================================================
   hi-spark.css — the word-scale figure.
   ------------------------------------------------------------------------
   A sparkline is not a chart. It is a WORD: it sits in the line of type it
   belongs to, at the size of the type, and it is read at the same speed.
   The numbers next to it are always the carrier — the spark is aria-hidden
   reinforcement and never the only place a value appears.

   USAGE
     <span data-spark="41,52,48,66,71" data-spark-kind="line"
           data-spark-hi="4"></span>

   The box is declared HERE, not by the script, so the space is reserved
   before hi-spark.js has run and nothing shifts when it does.

   INK: the trace is muted ink. The emphasised point is blue, because blue
   is this site's "look here". There is no gold in a spark, ever.
   ========================================================================== */

:root{
  --hsp-ink:   var(--muted, var(--do-muted, var(--rw-muted, var(--hi-muted, #556a80))));
  --hsp-hi:    var(--blue,  var(--do-accent, var(--rw-blue, var(--hi-blue, #1f5fbf))));
  --hsp-base:  var(--hairline, var(--do-hairline, var(--rw-hairline, var(--hi-hair, #e4dac7))));
}

/* the fixed box — width/height are the contract with the layout */
[data-spark]{
  display:inline-block;
  width:var(--hi-spark-w, 56px);
  height:var(--hi-spark-h, 18px);
  vertical-align:var(--hi-spark-align, -.3em);
  flex:0 0 auto;
  line-height:0;
  overflow:hidden;
  /* the trace inherits this, so a spark inside a coral or mint row can be
     re-tinted by setting `color` on the row and nothing else */
  color:var(--hsp-ink);
}
[data-spark] > svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* the parts. The trace carries vector-effect:non-scaling-stroke (set on the
   element by hi-spark.js), so a page that widens the box to 84px gets a
   longer line at the SAME weight rather than a fatter one. On a 2x display
   the browser still draws the hairline at device resolution — engraved, not
   fuzzy. */
.hi-spark-base{
  fill:var(--hsp-base);
}
.hi-spark-line{
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}
.hi-spark-bar{
  fill:currentColor;
  opacity:.5;
}
.hi-spark-bar.is-hi{
  fill:var(--hsp-hi);
  opacity:1;
}
.hi-spark-dot{
  fill:var(--hsp-hi);
  stroke:var(--card, var(--hi-surface-1, #fffaf1));
  stroke-width:.9;
}

/* a spark that sits AFTER a number in a flex row wants its own breathing
   room; pages opt into this rather than the spark asserting margin. */
.hi-spark-pair{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* a spark on navy furniture — the muted ink disappears there */
.masthead [data-spark],
.hero [data-spark],
.footer [data-spark],
[data-spark].on-navy{
  --hsp-ink:var(--hi-on-navy-dim, #a8c2de);
  --hsp-hi:var(--hi-on-navy-hi, #8ab8f2);
  --hsp-base:var(--hi-navy-line, rgba(157,184,221,.26));
}

@media print{
  [data-spark]{ color:#556a80 }
}