/* Readiness Index — score sparkline
   Fixed geometry: the chart is ALWAYS 216 x 61 CSS px. Only the contents change. */

.ri-spark {
  --ri-purple-medium: #270066;
  --ri-purple-dark:   #1D0446;
  --ri-lilac:         #ECE6FF;
  --ri-khaki:         #F4EEE9;
  --ri-coral:         #FB9D61;
  --ri-paper:         #FBF7F3;
  --ri-warm-gray:     #CEC8C3;
  --ri-lavender:      #7F6B97;

  display: flex;
  align-items: center;
  gap: 7px;
  /* Optical alignment: the plot's top/bottom land on the ink of the 92px "66".
     Tune only if the score type size changes. */
  transform: translateY(8.5px);
}

/* NEVER change these two numbers. */
.ri-spark__plot { width: 216px; height: 61px; display: block; flex: none; }

.ri-spark__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 61px;
  position: relative;
  font: 700 11px/1 'Roboto Mono', ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: var(--ri-purple-dark);
}

/* Once the script has placed them, each label sits on the line it names
   rather than being spread evenly down the box. Added by the script, so a
   reader with no JavaScript keeps the evenly-spaced fallback beside an empty
   plot instead of three labels stacked at the top. */
/* Absolutely-positioned children contribute no width, so the column has to
   carry its own or it collapses to nothing and the labels land on the plot. */
.ri-spark__scale.is-placed { display: block; width: 1.4em; }
.ri-spark__scale.is-placed span {
  position: absolute; right: 0; transform: translateY(-50%); line-height: 1;
}

.ri-spark__caption {
  width: 216px;
  margin-top: 13px;                 /* 8.5px translate + 4.5px gap */
  display: flex;
  justify-content: space-between;
  font: 400 12px/1 'Roboto Mono', ui-monospace, monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ri-lavender);
}
.ri-spark__caption strong { color: var(--ri-purple-dark); font-weight: 700; }
.ri-spark__caption--empty { justify-content: flex-end; }

/* Parts drawn by the sparkline library */
.ri-spark .sparkline--fill { fill: var(--ri-purple-medium); fill-opacity: 0.12; }
.ri-spark .sparkline--line {
  stroke: var(--ri-purple-medium);
  stroke-width: 2.5;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ri-spark .sparkline--spot { fill: var(--ri-coral); stroke: var(--ri-purple-medium); stroke-width: 2; }
.ri-spark .sparkline--cursor { display: none; }
.ri-spark__dot { fill: var(--ri-purple-medium); fill-opacity: 0.5; }
.ri-spark__lead { stroke: var(--ri-lavender); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.55; }

/* ---------------------------------------------------------------------------
   Everything above ships from the design handoff unchanged. Below is only what
   it takes to seat the chart in the report header — the handoff specifies this
   row in prose and in its markup comment rather than in CSS. */

/* Chart left, score right, so the number stays the rightmost thing on the page. */
.score-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Below ~900px the chart is dropped rather than shrunk. The fixed 216 x 61 is
   the whole point of it: a box that resized to fit a phone would be a different
   chart with the same colors, and two reports would stop being comparable. The
   score and the subline reflow exactly as they did before it existed. */
@media (max-width: 900px) {
  .score-row > .ri-spark__col { display: none; }
}