/* ═══════════════════════════════════════════════════════════════════════════
   Calculator visualizations (js/calc-viz.js) : inline SVG, no libraries.

   The charts commit to the light card surface, and that commitment is now
   declared once, in css/calculators.css, where .calc-frame and .calc-viz
   re-declare the core tokens with their light values. So every color below is
   still chosen and validated against #ffffff in BOTH themes, and this file no
   longer needs the [data-theme] !important overrides it used to carry.

   Series palette is the dataviz reference categorical set (slots 1-4),
   validated for adjacent CVD separation and the normal-vision floor on this
   surface; the sub-3:1 contrast of slots 3-4 is relieved by direct labels +
   the result rows. The slot tokens (--viz-s1..s4, --viz-cov, --viz-gap,
   --viz-axis) are declared ONCE in css/calculators.css, shared with the
   legacy bars and the hub previews. Measured on #ffffff: s1 4.65:1,
   s2 3.20:1, s3 2.82:1, s4 2.17:1, cov 4.76:1, gap 6.47:1, ink 14.76:1,
   muted 5.83:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.calc-viz {
  --viz-ink: #1f2933;
  --viz-muted: #5b6675;
  --viz-grid: #e8edf4;
  --viz-surface: #ffffff;

  background: var(--viz-surface);
  border: 1px solid var(--border, #d9e1ec);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin: 16px 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The chart ink follows the worksheet, not the page. --viz-ink and the site's
   own --ink are the same value inside .calc-viz, so no !important is needed. */
.calc-viz,
.calc-viz p,
.calc-viz label {
  color: var(--viz-ink);
}

.calc-viz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.calc-viz-title {
  font-size: 1rem;
  margin: 0;
  color: var(--viz-ink);
}
.calc-viz-pin {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--link, #1565c0);
  background: none;
  border: 1px solid var(--border, #d9e1ec);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.calc-viz-pin:hover,
.calc-viz-pin:focus-visible {
  border-color: var(--primary, #1565c0);
}
.calc-viz-pin[aria-pressed='true'] {
  background: var(--primary, #1565c0);
  color: var(--on-accent);
  border-color: var(--primary, #1565c0);
}

.calc-viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.8rem;
  color: var(--viz-muted);
  margin: 2px 0 8px;
}
.calc-viz-key-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.viz-key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.viz-key.viz-k-line {
  height: 3px;
  width: 16px;
  border-radius: 2px;
}
.viz-k-s1 { background: var(--viz-s1); }
.viz-k-s2 { background: var(--viz-s2); }
.viz-k-s3 { background: var(--viz-s3); }
.viz-k-s4 { background: var(--viz-s4); }
.viz-k-cov { background: var(--viz-cov); }
.viz-k-gap { background: var(--viz-gap); }

.calc-viz-chart {
  position: relative;
}
.calc-viz-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

/* ── SVG marks ── */
.viz-f-s1 { fill: var(--viz-s1); }
.viz-f-s2 { fill: var(--viz-s2); }
.viz-f-s3 { fill: var(--viz-s3); }
.viz-f-s4 { fill: var(--viz-s4); }
.viz-f-cov { fill: var(--viz-cov); }
.viz-f-gap { fill: var(--viz-gap); }

.viz-seg {
  stroke: none;
}
.viz-seg:focus {
  outline: none;
  stroke: var(--viz-ink);
  stroke-width: 2;
}
.viz-ghost {
  opacity: 0.4;
}
.viz-ghost-line {
  stroke: var(--viz-axis);
  stroke-dasharray: 5 4;
}

.viz-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz-l-s1 { stroke: var(--viz-s1); }
.viz-l-s2 { stroke: var(--viz-s2); }
.viz-l-s3 { stroke: var(--viz-s3); }
.viz-area {
  fill: var(--viz-s1);
  opacity: 0.1;
}
.viz-end-dot {
  stroke: var(--viz-surface);
  stroke-width: 2;
}
.viz-be {
  fill: var(--viz-surface);
  stroke: var(--viz-ink);
  stroke-width: 1.5;
}

.viz-grid {
  stroke: var(--viz-grid);
  stroke-width: 1;
}
.viz-axis {
  stroke: var(--viz-axis);
  stroke-width: 1;
}
.viz-cursor {
  stroke: var(--viz-ink);
  stroke-width: 1;
  opacity: 0.65;
}
.viz-marker-line {
  stroke: var(--viz-ink);
  stroke-width: 1;
  opacity: 0.5;
}
.viz-bracket {
  stroke: var(--viz-muted);
  stroke-width: 1;
}

/* IRMAA step + cliff */
.viz-step {
  fill: none;
  stroke: var(--viz-s1);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.viz-step-more {
  fill: none;
  stroke: var(--viz-muted);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.viz-cliff {
  stroke: var(--viz-gap);
  stroke-width: 3;
}
.viz-cliff-guide {
  stroke: var(--viz-gap);
  stroke-width: 1;
  opacity: 0.35;
}
.viz-wash-ok {
  fill: #2e7d32;
  opacity: 0.07;
}
.viz-wash-over {
  fill: #b91c1c;
  opacity: 0.06;
}
.viz-dot {
  stroke: var(--viz-surface);
  stroke-width: 2;
}
.viz-dot-ok { fill: var(--viz-s1); }
.viz-dot-over { fill: var(--viz-gap); }

/* ── SVG text: text tokens, never series color ── */
.calc-viz-svg text {
  fill: var(--viz-ink);
  font-size: 11px;
}
.viz-caption {
  fill: var(--viz-muted);
  font-size: 12px;
}
.viz-caption-strong {
  fill: var(--viz-ink);
  font-size: 12px;
  font-weight: 700;
}
.viz-note {
  fill: var(--viz-muted);
  font-size: 10.5px;
}
.viz-tick {
  fill: var(--viz-muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.viz-end-label {
  fill: var(--viz-ink);
  font-size: 11px;
  font-weight: 600;
}
.viz-seg-letter {
  font-size: 11px;
  font-weight: 700;
}
.viz-seg-value {
  font-size: 11px;
  font-weight: 600;
}
/* In-fill label ink, chosen per fill so every in-segment label clears 4.5:1.
   These rules MUST carry .calc-viz-svg: the generic `.calc-viz-svg text`
   rule above is (0,1,1) and a bare `.viz-onGap` is (0,1,0), so without the
   prefix the generic ink won and "Gap $1,075,000" rendered #1f2933 on the
   #b91c1c gap bar at 2.28:1. Pinned by tests/calc-viz-legacy-and-ink.test.js.
   Measured: white on s1 4.65:1, ink on s2 4.61:1 (white is only 3.20:1),
   #17301f on s3 5.04:1, #33270a on s4 6.76:1, white on cov 4.76:1,
   white on gap 6.47:1. */
.calc-viz-svg .viz-onS1,
.calc-viz-svg .viz-onCov,
.calc-viz-svg .viz-onGap { fill: #ffffff; }
.calc-viz-svg .viz-onS2 { fill: var(--viz-ink); }
.calc-viz-svg .viz-onS3 { fill: #17301f; }
.calc-viz-svg .viz-onS4 { fill: #33270a; }

/* ── Readout + summary ── */
.calc-viz-readout {
  min-height: 1.3em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--viz-ink);
  margin: 8px 0 0;
}
.calc-viz-summary {
  font-size: 0.8rem;
  color: var(--viz-muted);
  margin: 6px 0 0;
}

/* Longevity slider (ss-claiming) */
.calc-viz-slider {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 4px 0 10px;
}
.calc-viz-slider input[type='range'] {
  display: block;
  width: 100%;
  margin-top: 8px;
  accent-color: var(--primary, #1565c0);
}
.calc-viz-slider output {
  color: var(--link-hover, #0d47a1);
  font-variant-numeric: tabular-nums;
}

/* ── Reduced motion: no transitions anywhere in the viz ── */
@media (prefers-reduced-motion: reduce) {
  .calc-viz *,
  .calc-viz-pin {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Print: charts render, controls do not ── */
@media print {
  .calc-viz {
    break-inside: avoid;
    border-color: #bbb;
  }
  .calc-viz-pin {
    display: none;
  }
}