/* GENERATED by marketing/build-tool-partials.py — DO NOT EDIT.
   Source of truth: marketing/tools/retirement-planner.html */
/* Tool-local layout only. Every colour is a token or a color-mix of one —
     the shared design system owns the palette (tools-core.css BRAND RULES). */

  /* ---- the assumption grid ---------------------------------------------- */
  .ist-tool.ist-tool.ist-tool.ist-tool .assume { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
  .ist-tool.ist-tool.ist-tool.ist-tool .assume .field { margin-bottom: 0; }
  .ist-tool.ist-tool.ist-tool.ist-tool .assume input { text-align: right; }
  /* Every input on this page is an ASSUMPTION, and saying so once per field is
     what keeps the output from reading as a forecast (UI-STANDARDS §9 CA3). */
  .ist-tool.ist-tool.ist-tool.ist-tool .field .asm {
    display: block; font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); margin-top: 3px;
  }

  /* ---- the stress control ------------------------------------------------ */
  .ist-tool.ist-tool.ist-tool.ist-tool .stress {
    margin-top: var(--card-gap); padding: var(--row-y) var(--pad-x);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .stress label.sw { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
  .ist-tool.ist-tool.ist-tool.ist-tool .stress input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; width: auto; }
  .ist-tool.ist-tool.ist-tool.ist-tool .stress .sgrid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4);
    margin-top: var(--row-y);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .stress .sgrid .field { margin-bottom: 0; }
  .ist-tool.ist-tool.ist-tool.ist-tool .stress p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: var(--sp-2) 0 0; }

  /* ---- the two paths, side by side --------------------------------------- */
  .ist-tool.ist-tool.ist-tool.ist-tool .paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path {
    padding: var(--row-y) var(--pad-x);
    border: 1px solid var(--line); border-radius: var(--r);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .path.survives { border-color: color-mix(in srgb, var(--positive) 50%, transparent); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path.fails { border-color: color-mix(in srgb, var(--alarm) 55%, transparent); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path h3 { font: 400 19px/1.25 var(--font-display); margin: 0 0 var(--sp-1); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path .sub { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 0 0 var(--row-y); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path .headline {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 26px; line-height: 1.1; margin: 0 0 var(--sp-1);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .path .headline.bad { color: var(--alarm-ink); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path .headline.good { color: var(--positive); }
  .ist-tool.ist-tool.ist-tool.ist-tool .path .hsub { font-size: 12px; color: var(--muted); margin: 0 0 var(--row-y); }

  /* ---- the projection chart (hand-rolled SVG, no libraries) -------------- */
  .ist-tool.ist-tool.ist-tool.ist-tool .chart { width: 100%; height: auto; display: block; margin-top: var(--sp-2); }
  .ist-tool.ist-tool.ist-tool.ist-tool .chart .grid { stroke: var(--line); stroke-width: 1; }
  .ist-tool.ist-tool.ist-tool.ist-tool .chart .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
  .ist-tool.ist-tool.ist-tool.ist-tool .chart .lineA { fill: none; stroke: var(--muted); stroke-width: 2; }
  /* T-184 — the two series were told apart by COLOUR ALONE (WCAG SC 1.4.1). --muted
     #A99E8E against --accent #A6835A is 1.32:1, and colour-vision simulation (Viénot  tools-brand-ok: cites the two token VALUES this row measured; naming them is the record, and a CSS comment declares nothing
     1999) makes it no better for anyone: protanopia 1.37, deuteranopia 1.30,
     tritanopia 1.21. Both lines individually clear the 3:1 GRAPHICAL floor against the
     card ground (6.06 and 4.57), so this was never a 1.4.11 defect and re-colouring was
     the wrong instrument — measured, --accent-active vs --muted is 1.14 and --positive
     vs --muted is 1.06, both WORSE than what shipped.
     So the differentiator is non-colour. `9 4` is deliberately distinct from BOTH
     dasharrays already on this chart — .zero's `2 3` and .callmark's `3 3` — because
     trading one ambiguity for another is not a fix.
     It is lineB (--accent) that dashes, not lineA: lineA shares --muted with .zero, so
     dashing THAT would put two muted dashed strokes on one chart. */
  .ist-tool.ist-tool.ist-tool.ist-tool .chart .lineB { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 9 4; }
  .ist-tool.ist-tool.ist-tool.ist-tool .chart .callmark { stroke: var(--alarm); stroke-width: 2; stroke-dasharray: 3 3; }
  .ist-tool.ist-tool.ist-tool.ist-tool .chart text { font: 500 10px/1 var(--font-mono); fill: var(--muted); }
  .ist-tool.ist-tool.ist-tool.ist-tool .chartkey { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
  .ist-tool.ist-tool.ist-tool.ist-tool .chartkey span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
  .ist-tool.ist-tool.ist-tool.ist-tool .chartkey i { display: inline-block; width: 14px; height: 2px; }
  .ist-tool.ist-tool.ist-tool.ist-tool .chartkey i.a { background: var(--muted); }
  /* Mirrors .lineB's `9 4` exactly: a 9px run of ink, then 4px of gap, so the swatch
     carries the same non-colour cue as the stroke it stands for. A solid swatch here
     would put the legend back to colour-only and undo half the fix. */
  .ist-tool.ist-tool.ist-tool.ist-tool .chartkey i.b {
    background: repeating-linear-gradient(to right, var(--accent) 0 9px, transparent 9px 13px);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .chartkey i.c { background: var(--alarm); }

  /* ---- the year-by-year table -------------------------------------------- */
  .ist-tool.ist-tool.ist-tool.ist-tool .yby { width: 100%; border-collapse: collapse; font-size: 12px; }
  .ist-tool.ist-tool.ist-tool.ist-tool .yby th {
    font: 600 10px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); text-align: right; padding: 0 var(--sp-2) var(--sp-2);
    border-bottom: 1px solid var(--line);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .yby th:first-child, .ist-tool.ist-tool.ist-tool.ist-tool .yby td:first-child { text-align: left; }
  .ist-tool.ist-tool.ist-tool.ist-tool .yby td {
    text-align: right; padding: 4px var(--sp-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .yby tr.called td { background: color-mix(in srgb, var(--alarm) 12%, transparent); }
  .ist-tool.ist-tool.ist-tool.ist-tool .yby tr.gone td { color: var(--muted); }
  .ist-tool.ist-tool.ist-tool.ist-tool .ybwrap { overflow-x: auto; margin-top: var(--sp-2); }

  /* CA1 — the null option is RENDERED, equally weighted, never implied. */
  .ist-tool.ist-tool.ist-tool.ist-tool .null-option {
    margin-top: var(--card-gap); padding: var(--row-y) var(--pad-x);
    border: 1px solid color-mix(in srgb, var(--positive) 40%, transparent);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--positive) 7%, transparent);
  }
  .ist-tool.ist-tool.ist-tool.ist-tool .null-option p:last-child { margin: 0; }

  @media (max-width: 680px) { /* DS-36: was 560 — the odd one out among the four tools (the other three used 480). Folded into the md=680 tier, which also finally lines every tool up on one shared set of values instead of 3-of-4 agreeing and one drifting. */
    .ist-tool.ist-tool.ist-tool.ist-tool .assume, .ist-tool.ist-tool.ist-tool.ist-tool .paths, .ist-tool.ist-tool.ist-tool.ist-tool .stress .sgrid { grid-template-columns: 1fr; }

    /* T-188 H1 — the chart downscales its own axis type into illegibility, and a
       media query on `font-size` in CSS px CANNOT rescue it. The SVG is
       `viewBox="0 0 640 240"` at `width:100%`, so everything inside is scaled by
       (rendered width / 640) — a UNIFORM transform that applies to text as readily
       as to the gridlines. Measured in the harness at 375px, embedded: rendered
       width 277px → factor 0.433, so the declared 10px axis labels painted at a
       bounding height of 5.0 CSS px.
       The fix is therefore in USER UNITS: 22 × 0.433 ≈ 9.5 CSS px, clearing the 9px
       floor. It reads oversized in the source and is correct on screen — that is
       what a viewBox does. */
    .ist-tool.ist-tool.ist-tool.ist-tool .chart text { font-size: 22px; }
  }