/* Goal & compound-growth calculator — tool-specific styles.
   Layers on top of site.css + 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 overridden — this file only adds the few pieces
   the shared shell does not provide: the £/% input affix, the advanced-rate
   disclosure, and the horizon breakdown list. Mobile-first; prefers-reduced-
   motion is honoured wherever a transition or transform is used. */

/* The Planning eyebrow's breadcrumb styling used to live here. The way back to
   the section is `.tool-back` in planning.css now, on all six tool pages rather
   than the two that happened to declare a rule of their own. */

.tool-head .illustrative-stamp { margin-top: 18px; }

/* ---------- £ / % affixed inputs ----------
   A symbol sits inside the field's box so the number reads as money or a rate
   without a separate label. The input keeps the shared .tool-controls styling;
   we only pad it to clear the symbol. */
.input-affix { position: relative; }
.input-affix-symbol {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--neutral);
  pointer-events: none;
}
.input-affix-suffix { left: auto; right: 14px; }
.input-affix input[type="number"] { padding-left: 30px; }
.input-affix input#custom-rate { padding-left: 14px; padding-right: 30px; }

/* ---------- Advanced (custom-rate) disclosure ---------- */
.advanced { margin-bottom: 0; }
.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.advanced-toggle:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 3px; border-radius: var(--r-sm); }
.advanced-chevron { transition: transform .25s var(--ease); flex: none; }
.advanced-toggle[aria-expanded="true"] .advanced-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .advanced-chevron { transition: none; }
}
.advanced-panel { margin-top: 16px; }
.advanced-panel > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

/* ---------- Breakdown at the horizon ---------- */
.breakdown {
  margin: 0 0 clamp(18px, 3vw, 26px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--raised);
  overflow: hidden;
}
.breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-top: 1px solid var(--hairline);
}
.breakdown-row:first-child { border-top: 0; }
.breakdown-row dt { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.breakdown-row dd {
  margin: 0;
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "tnum" 0, "lnum" 1;
}
.breakdown-total {
  background: var(--ground-2);
}
.breakdown-total dt { color: var(--ink); font-weight: 600; }
.breakdown-total dd { color: var(--navy); }

/* The Low/Med/High headline row: give the Medium figure a touch more presence
   so the central scenario reads as the reference point without ever standing
   alone. */
.result-figures #fig-med { color: var(--navy); }
.result-figures #fig-low,
.result-figures #fig-high { color: color-mix(in srgb, var(--navy) 62%, var(--ground-2)); }

/* In-panel risk warning. The site's .risk-warning is styled for the dark
   footer (light text on near-black), so the tool defines its own on the cream
   ground rather than reusing that class. */
.tool-risk {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--gold-tint);
}
.tool-risk strong { color: var(--ink); font-weight: 600; }