/* Overpay or save: styles only this tool uses. The layout, stat labels,
   chart and table are shared in ../assets/toolkit.css. */

/* The overpay card spans the option grid (shared styles in toolkit.css). */
.option-card--overpay { grid-column: 1 / -1; border-color: var(--primary); }

/* ── Before you choose ───────────────────────────────────── */
.checklist { padding: 20px 24px; }
.checklist-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.checklist-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist-tip {
  margin: 6px 0 0 28px; padding-left: 10px;
  border-left: 3px solid var(--warning);
  font-size: 0.8125rem; color: var(--muted); line-height: 1.55;
}

/* ── Chart series: one colour per option, fixed whichever are shown.
   Overpaying keeps --primary. Checked with the dataviz palette validator
   against --surface in both themes (all pairs, since lines cross): every
   pair clears the normal-vision floor; teal and pink sit close for
   deuteranopia, so pension is also dashed, and lines are labelled at the end. */
:root {
  --series-savings: #0f8f8f;
  --series-isa: #008300;
  --series-gia: #eda100;
  --series-pension: #c2336b;
}
html[data-theme="dark"] {
  --series-savings: #14a3a3;
  --series-isa: #008300;
  --series-gia: #c98500;
  --series-pension: #e0618f;
}
.legend-swatch--savings, .tt-key--savings { border-color: var(--series-savings); }
.legend-swatch--isa, .tt-key--isa { border-color: var(--series-isa); }
.legend-swatch--gia, .tt-key--gia { border-color: var(--series-gia); }
.legend-swatch--pension, .tt-key--pension { border-color: var(--series-pension); border-top-style: dashed; }
.chart .line--savings { stroke: var(--series-savings); }
.chart .line--isa { stroke: var(--series-isa); }
.chart .line--gia { stroke: var(--series-gia); }
.chart .line--pension { stroke: var(--series-pension); stroke-dasharray: 6 4; }
.chart .dot--savings { fill: var(--series-savings); }
.chart .dot--isa { fill: var(--series-isa); }
.chart .dot--gia { fill: var(--series-gia); }
.chart .dot--pension { fill: var(--series-pension); }

/* ── Chart legend: overpaying is always drawn; each option is a toggle. */
.series-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-bottom: 12px;
}
.series-row .legend li { white-space: nowrap; }
.series-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.series-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.series-chip input { position: absolute; opacity: 0; pointer-events: none; }
.series-chip .legend-swatch { opacity: 0.35; transition: opacity 0.15s ease; }
.series-chip:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--text); }
.series-chip:has(input:checked) .legend-swatch { opacity: 1; }
.series-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.series-all {
  padding: 5px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--primary);
  white-space: nowrap;
}
.series-all:hover { text-decoration: underline; }
.series-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }