/* The results design language of the six reference calculators, written once.

   The reference pages each carry their own copy of this idea: a navy hero with an orange edge for
   the one figure that matters, quiet tiles for the supporting figures, an accent card for anything
   interactive, a caption under every picture, and the detail folded away in disclosures. This file
   is that same pattern as reusable pieces, so the rest of the calculators can reach the same
   standard without copying a stylesheet twenty-five times.

   Everything is scoped to .results-page, a body class a calculator opts into, so no rule here can
   reach a page that has not asked for it. Every colour, radius and shadow is a token from
   styles.css: nothing new is introduced, and both themes come for free. */

/* ---------------------------------------------------------------- The headline */

/* The answer, on the same navy-to-navy gradient and orange edge as the reference heroes, with the
   label, the figure and the sentence it came from reading as one statement. */
.results-page .calc-results .big-result { text-align: left; padding: 24px; }
.results-page .calc-results .big-result .value {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.15;
  margin: 8px 0 12px;
  overflow-wrap: anywhere;
}
.results-page .calc-results .big-result .sub { font-size: 0.95rem; line-height: 1.5; opacity: 1; }
.results-page .rp-hero {
  position: relative;
  overflow: hidden;
  border-inline-start: 4px solid var(--highlight);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
/* Two or three derived figures on the hero's own edge, the way the reference cards carry the
   split of the answer without leaving the card. */
.results-page .rp-hero-split {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid currentColor;
}
.results-page .rp-hero-split > span { display: grid; gap: 3px; min-width: 0; font-size: 0.78rem; }
.results-page .rp-hero-split strong { font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- The supporting figures */

/* The site's own stat tiles, given the orange cap the reference results use. */
.results-page .rp-tiles { gap: 10px; margin-bottom: 20px; }
.results-page .rp-tiles .stat { border-top: 3px solid var(--highlight); }
.results-page .rp-tiles .stat .value { font-size: clamp(1.05rem, 2.4vw, 1.3rem); overflow-wrap: anywhere; }

/* A heading inside the results panel, one step below the panel's own h2. */
.results-page .rp-heading { font-size: 1rem; margin: 24px 0 10px; }
.results-page .rp-heading:first-of-type { margin-top: 20px; }

/* The one quiet line under a picture or a chart that says what it is showing. */
.results-page .rp-caption { font-size: 0.85rem; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }
.results-page .rp-caption strong { color: var(--text); }
.results-page .rp-support { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.results-page .rp-assumption { font-size: 0.8rem; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }

/* "What this means", quieter than the figures it explains — the same line every reference page
   carries directly under its hero. */
.results-page .calc-meaning { color: var(--muted); font-size: 0.9rem; margin: 0 0 16px; }
.results-page .calc-meaning strong { color: var(--text); }

/* ---------------------------------------------------------------- The timeline */

/* From today to paid off, on one track: the filled part is the time the repayments take, and the
   orange stretch at the end is the time an extra payment saves. */
.results-page .rp-timeline { margin: 24px 0 0; }
.results-page .rp-ruler { display: grid; gap: 7px; }
.results-page .rp-ruler-track {
  position: relative;
  display: block;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--border);
}
.results-page .rp-ruler-fill { position: absolute; inset: 0 auto 0 0; background: var(--primary); }
.results-page .rp-ruler-extra { position: absolute; inset: 0 0 0 auto; background: var(--highlight); }
.results-page .rp-ruler-marks { display: flex; justify-content: space-between; gap: 10px; font-size: 0.75rem; color: var(--muted); }
.results-page .rp-ruler-marks span:nth-child(2) { text-align: center; }
.results-page .rp-ruler-marks span:last-child { text-align: right; }

/* ---------------------------------------------------------------- The explorer */

/* The accent card the reference pages use for "try another number", with a 44px slider and the
   answer underneath it. Motion is limited to bar widths and is switched off on request. */
.results-page .rp-explorer { margin: 24px 0; padding: 20px; border-radius: var(--radius); background: var(--accent); }
.results-page .rp-explorer > .rp-heading { margin-top: 0; }
.results-page .rp-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 2px;
}
.results-page .rp-slider-label output { font-weight: 700; color: var(--primary); }
.results-page .rp-explorer input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: var(--highlight);
  cursor: pointer;
}
.results-page .rp-explorer input[type="range"]:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; border-radius: 5px; }
.results-page .rp-explore-answer { padding-top: 14px; }
.results-page .rp-explore-answer strong {
  display: block;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.15;
  color: var(--primary);
  overflow-wrap: anywhere;
}
.results-page .rp-explore-answer strong.is-steady { font-size: 1.1rem; }
.results-page .rp-explore-answer p { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.5; }

/* ---------------------------------------------------------------- Two figures side by side */

.results-page .rp-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; }
.results-page .rp-insights > section { min-width: 0; padding-top: 16px; border-top: 2px solid var(--border); }
.results-page .rp-insights h3 { margin: 0 0 6px; font-size: 1rem; }
.results-page .rp-number { font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin: 10px 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- The detail, folded away */

.results-page .calc-disclosure { border-top: 1px solid var(--border); margin-top: 8px; }
.results-page .calc-disclosure summary { cursor: pointer; font-weight: 600; padding: 14px 0; line-height: 1.5; min-height: 48px; }
.results-page .calc-disclosure summary:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; border-radius: 4px; }
.results-page .calc-disclosure-body { padding: 0 0 12px; min-width: 0; }

/* ---------------------------------------------------------------- The proportion ring */

/* A share of a whole, as the reference life-cost page draws it: a conic ring whose fill is set by
   --rp-fill, with the number written in the middle. */
.results-page .rp-ring {
  width: 128px;
  height: 128px;
  flex: none;
  padding: 12px;
  border-radius: 50%;
  background: conic-gradient(var(--highlight) var(--rp-fill, 0%), var(--border) 0);
  transition: background 180ms ease;
}
.results-page .rp-ring > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 100%;
  border-radius: 50%;
  background: var(--card);
}
.results-page .rp-ring strong { font-size: 1.15rem; overflow-wrap: anywhere; text-align: center; max-width: 100%; }
.results-page .rp-ring span { font-size: 0.72rem; color: var(--muted); text-align: center; }
.results-page .rp-ring-row { display: flex; align-items: center; gap: 20px; padding: 16px; border-radius: var(--radius); background: var(--accent); }

/* ---------------------------------------------------------------- The line chart */

/* One SVG, scaled to the panel, from zero: a filled area for the balance, a dashed line for the
   money paid in, and the gap between them read as the interest. The same shape the reference
   coffee page draws, with its classes generalised so any calculator can use them. */
.results-page .rp-figure { margin: 24px 0 0; }
.results-page .rp-figure[hidden] { display: none; }
.results-page .rp-chart { display: block; width: 100%; height: auto; overflow: visible; }
.results-page .rp-chart text { font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--muted); }
.results-page .rp-chart-axis { stroke: var(--border); fill: none; stroke-width: 2; }
.results-page .rp-chart-grid { stroke: var(--border); fill: none; stroke-width: 1; stroke-dasharray: 3 5; }
.results-page .rp-chart-area { fill: var(--highlight); opacity: 0.12; }
.results-page .rp-chart-balance { fill: none; stroke: var(--highlight); stroke-width: 3; stroke-linejoin: round; }
.results-page .rp-chart-paid { fill: none; stroke: var(--primary); stroke-width: 3; stroke-dasharray: 6 4; }
.results-page .rp-chart-point { fill: var(--highlight); stroke: var(--card); stroke-width: 2; }
.results-page .rp-chart-key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.8rem; margin: 10px 0 0; }
.results-page .rp-chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.results-page .rp-chart-key i { width: 22px; height: 0; border-top: 3px solid var(--highlight); }
.results-page .rp-chart-key .key-paid { border-color: var(--primary); border-top-style: dashed; }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 600px) {
  .results-page .calc-results .big-result { padding: 18px; }
  .results-page .rp-explorer { padding: 16px; }
  .results-page .rp-insights { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .results-page .rp-ring-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .results-page .rp-ring { align-self: center; }
  .results-page .rp-ruler-marks { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .results-page .rp-ruler-fill,
  .results-page .rp-ruler-extra,
  .results-page .rp-ring { transition: none; }
}