/* Risk and reward slider — tool-scoped styles.
   Layers on top of site.css and planning.css; every colour, radius and easing
   token comes from site.css :root. No new brand colours are declared here, and
   nothing in planning.css is edited — this file only adds the few pieces the
   shared shell does not already provide (the cautious/adventurous scale under
   the slider, the plain-English takeaway box, the cross-link, and a couple of
   chart-title spacings). */

/* Cautious ↔ adventurous labels sitting under the one big slider. */
.rr-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral);
}

/* The plain-English sentence that rewrites itself as the slider moves —
   "more growth potential, and bigger ups and downs". */
.rr-takeaway {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--ground-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.rr-takeaway strong { color: var(--ink); font-weight: 600; }

/* Two-way cross-link to the Risk Profiler. */
.rr-crosslink {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gold-ink);
  text-decoration: none;
}
.rr-crosslink:hover { text-decoration: underline; text-underline-offset: 2px; }
.rr-crosslink svg { transition: transform .35s var(--ease); }
.rr-crosslink:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .rr-crosslink:hover svg { transform: none; }
}

/* Chart section titles, tighter to the summary that follows them. */
.rr-chart-title {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.01em;
  margin: clamp(20px, 3vw, 30px) 0 12px;
}

/* The illustrative stamp sits above the figures on this tool. */
.tool-output .illustrative-stamp { margin-bottom: 18px; }

/* On this tool the poorer-year figure reads as a loss; tint it so the good/bad
   pair is legible at a glance without relying on the minus sign alone. */
#rr-low { color: var(--gold-ink); }