/* דקל לפרישה - the calculators, dressed in the site's design system.

   The markup inside .calc comes from the eight original calculator pages and keeps their class names:
   the original scripts find their elements by them and write results with them. This file gives every
   one of those names the look of the site's components (tokens, cards, fields, buttons, tables), so the
   selectors are lists of the originals' names for the same thing.

   1. tokens + the originals' colour names     5. results: the result card, tiles, tables
   2. layout and cards                         6. charts
   3. fields: number field with - / +, slider  7. what each script shows and hides (state contract)
   4. buttons, tabs, toggles                   8. per-calculator adjustments, motion */

/* ------------------------------------------------------------------ 1. tokens */
.calc {
  --chart-a: var(--blue-500);
  --chart-b: #9A8348;
  /* names used by the original pages (inline styles in their markup, colours in their generated SVG) */
  --bg-dark: var(--blue-800); --bg-mid: var(--blue-700); --blue-main: var(--blue-500); --blue-light: var(--sky-soft); --blue-pale: #C8DDF5;
  --bg-page: var(--paper); --bg-card: #fff; --text-main: var(--ink); --text-sub: var(--muted);
  --green: var(--ok); --orange: var(--chart-b); --red: var(--error); --purple: var(--gold-ink);
  --surface: #fff; --surface-2: var(--mist); --faint: #5C6A82; --rule: var(--line); --grid: #E2E9F2;
  --accent: var(--blue-800); --accent-ink: #fff; --accent-soft: var(--mist); --warn: var(--gold-ink); --warn-soft: var(--sand);
  --series-a: var(--chart-a); --series-b: var(--chart-b); --focus: var(--blue-800); --brass: var(--gold); --border: var(--line);
  --display: var(--font-display);
}

/* ------------------------------------------------------------------ 2. layout and cards */
.calc-page { padding-block: 34px var(--section); }
.calc { font-size: 1.125rem; line-height: 1.65; min-width: 0; }
/* the page is a column of blocks; whichever of them a script shows or hides, the rhythm holds */
.calc :is(.container, .page, .results, #results, .results-wrap, #resultsContent, .route-panel, .tab-panel, .results-area, #normalSpreadFields, #compareSection) > * { min-width: 0; }
.calc :is(.container, .page, .results, #results, .results-wrap, #resultsContent, .route-panel, .tab-panel, .results-area, #compareSection) > * + * { margin-top: 22px; }
.calc :is(.card, .panel) > :is(.info-box, .warn-inline, .warn-box, .warning-box, .note-box, .danger-box, .alert-box, .table-wrap, .table-scroll, .details-table-wrap, .month-table-wrap, .scroll, .hero-box, .cards-grid, .stat-grid, .secondary-grid, .chart-wrap, .chart-svg-wrap, .mode-toggle, .stale-banner, .annuity-error, .field-note, .check-row, .radio-row) { margin-block: 16px; }
.calc :is(.card, .panel) > :last-child { margin-bottom: 0; }
.calc :is(.card, .panel) > :first-child { margin-top: 0; }
.calc [hidden] { display: none !important; }
.calc-nojs { margin: 20px 0 0; padding: 16px 20px; border-radius: var(--radius); background: var(--sand); font-weight: 700; color: var(--blue-800); }

.calc :is(.card, .panel, .route-card, .stat-card) {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); padding: 22px 18px; min-width: 0;
}
.calc .card .card, .calc .panel .panel { box-shadow: none; }
.calc :is(h2, h3) { font-family: var(--font-body); letter-spacing: 0; text-wrap: balance; }
.calc :is(.card, .panel, .group) > h2, .calc .results-section-title {
  position: relative; margin: 0 0 16px; padding-bottom: 12px; font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.2; color: var(--blue-800);
}
.calc :is(.card, .panel, .group) > h2::after, .calc .results-section-title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--gold); }
.calc h3 { font-size: 1.25rem; font-weight: 800; color: var(--blue-800); margin: 0 0 8px; }
.calc :is(.card-sub, .sub, .alt-sub, .chart-sub, .route-tagline) { margin: -6px 0 18px; color: var(--muted); font-size: 1.0625rem; font-family: var(--font-body); font-weight: 400; }
.calc h3.chart-sub { margin: 22px 0 6px; color: var(--blue-800); font-weight: 800; font-size: 1.1875rem; }
.calc .tag { display: inline-block; margin-inline-start: 8px; padding: 2px 12px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); color: var(--blue-800); font-family: var(--font-body); font-size: 1rem; font-weight: 600; vertical-align: middle; }
.calc .section-gap { margin-top: 0; }

/* notes: the originals' warnings, assumptions and disclaimers - their words, the site's surfaces */
.calc :is(.notice-box, .info-box, .warn-inline, .warn-box, .warning-box, .note-box, .alert-box, .danger-box, .alert, .error-summary, .error-panel, .annuity-error, .block-message, .depletion-alert, .ok-alert, .equality-notice, .narrative-box, .stale-badge, .stale-banner, .stale, .errors:not(:empty), .fee-note, .equal-note, .assume) {
  padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line); border-inline-start: 5px solid var(--blue-500); background: var(--mist); color: var(--ink); font-size: 1.0625rem; line-height: 1.6;
}
.calc :is(.notice-box, .warn-inline, .warn-box, .warning-box, .stale-badge, .stale-banner, .stale, .depletion-alert, .fee-note, .assume) { background: var(--sand); border-color: #E6DCC4; border-inline-start-color: var(--gold); }
.calc :is(.alert-box, .danger-box, .alert-error, .error-summary, .error-panel, .annuity-error, .block-message, .errors:not(:empty)) { background: #FFF6F5; border-color: #F1C9C5; border-inline-start-color: var(--error); color: #5F1410; }
.calc .ok-alert, .calc .equality-notice.equal { background: #F1F8F4; border-color: #C6E2D2; border-inline-start-color: var(--ok); }
.calc .formula { display: block; margin: 8px 0; padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 600; color: var(--blue-800); }
.calc :is(.info-box, .note-box, .warn-box, .warning-box, .assume) ul { margin: 6px 0 0; padding-inline-start: 1.3em; }
.calc :is(.info-box, .note-box, .warn-box, .warning-box) li { margin-bottom: 4px; }
.calc h2 .num { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-inline-end: 10px; border-radius: 50%; background: var(--blue-800) !important; border: 2px solid var(--gold); color: #fff; font-family: var(--font-display); font-size: 1.25rem; vertical-align: middle; }
.calc .notice-box { display: flex; gap: 14px; align-items: flex-start; }
/* the originals mark their warning with an emoji; it stays in the text, the site draws its own sign over it */
.calc .notice-box .icon {
  flex: none; width: 30px; height: 30px; margin-top: 2px; overflow: hidden; font-size: 0; line-height: 0; color: transparent; background: var(--gold-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.calc :is(.notice-box, .warn-inline, .alert-box) strong:first-child, .calc .alert-title { display: block; margin-bottom: 4px; color: var(--blue-800); font-weight: 800; }
.calc :is(.alert-box, .warn-inline, .error-summary) ul { margin: 8px 0 0; padding-inline-start: 1.2em; }
.calc :is(.note-line, .src-note, .source-note, .hero-note) { font-size: 1rem; color: var(--muted); }
.calc :is(.note-line, .src-note, .source-note) { margin: 12px 0 0; }

.calc details:is(.assumptions, .advanced-box, .method) { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); padding: 0; overflow: hidden; }
.calc details.method.panel { padding: 0; }
.calc details > summary {
  position: relative; display: flex; align-items: center; min-height: 60px; padding: 12px 20px; padding-inline-end: 64px; cursor: pointer; list-style: none;
  font-weight: 800; color: var(--blue-800); font-size: 1.1875rem; transition: background-color var(--t) var(--ease-out);
}
.calc details > summary::-webkit-details-marker { display: none; }
.calc details > summary:hover { background: var(--mist); }
.calc details > summary::after {
  content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 3px solid var(--blue-500); border-bottom: 3px solid var(--blue-500); transform: rotate(45deg); transition: transform var(--t) var(--ease-out);
}
.calc details[open] > summary::after { transform: translateY(5px) rotate(-135deg); }
.calc details > :not(summary) { padding: 4px 20px 18px; margin: 0; }
.calc details ul { padding-inline-start: 2.4em; }
.calc details li { margin-bottom: 6px; }
.calc .method-body { display: grid; gap: 12px; }

.calc :is(.footer-box, .footer-disclaimer, .disclaimer-box, .site-footer) {
  display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius); background: var(--mist); border: 1px solid var(--line); color: var(--ink); font-size: 1.0625rem; line-height: 1.65;
}
.calc :is(.footer-box, .footer-disclaimer, .disclaimer-box, .site-footer) p { margin: 0; }
.calc :is(.disclaimer, .disclaimer-main, .site-footer .main) { font-weight: 700; color: var(--blue-800); }
.calc .site-footer { border-top: 1px solid var(--line); isolation: auto; overflow: visible; }

/* ------------------------------------------------------------------ 3. fields */
.calc :is(.field-grid, .fields-grid, .grid2, .grid3, .row2, .grant-grid, .alts-grid, .annuity-grid, .panels-grid, .routes-grid, .strat-grid, .be-grid) { display: grid; gap: 18px; min-width: 0; }
.calc :is(.field, .field-row) { display: grid; gap: 7px; align-content: start; min-width: 0; margin: 0 0 18px; }
.calc :is(.field-grid, .fields-grid, .grid2, .grid3, .row2, .grant-grid, .annuity-grid) > :is(.field, .field-row) { margin-bottom: 0; }
.calc :is(.field-grid, .fields-grid, .grid2, .grid3, .row2) { margin-bottom: 18px; }
.calc :is(.field, .field-row) > label, .calc .field-label, .calc .grant-grid label, .calc .lbl-top {
  font-weight: 700; color: var(--blue-800); font-size: 1.0625rem; line-height: 1.4; transition: color var(--t-fast) var(--ease-out);
}
.calc :is(.field, .field-row):focus-within > label { color: var(--blue-600); }
.calc :is(.field-help, .hint, .helper-text, .field-note, .sub-label, .s-note) { font-size: 1rem; line-height: 1.55; color: var(--muted); }
.calc .field-help.strong, .calc .field-note { color: var(--ink); font-weight: 600; }
.calc :is(.field-error, .err, .error-text, .warn-text) { font-size: 1rem; font-weight: 700; color: var(--error); }
.calc .warn-text { color: var(--gold-ink); }
.calc .err:empty { display: none; }

.calc-input, .calc-select, .calc input:is([type="text"], [type="number"], [type="date"]), .calc select {
  width: 100%; min-height: 56px; padding: 8px 14px; border: 2px solid var(--field-line); border-radius: 14px; background: #fff; color: var(--ink);
  font: inherit; font-size: 1.125rem; font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
.calc input:is([type="text"], [type="number"], [type="date"]):hover, .calc select:hover { border-color: var(--blue-800); }
.calc input:is([type="text"], [type="number"], [type="date"]):focus-visible, .calc select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--blue-800); border-radius: 14px; }
.calc select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3F7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; background-size: 20px; cursor: pointer; }
.calc input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc input[type="number"]::-webkit-inner-spin-button, .calc input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc input[readonly], .calc input:disabled { background: var(--mist); border-style: dashed; color: var(--blue-800); font-weight: 700; }
.calc :is(.invalid, .has-error) > input:not(.calc-range), .calc input.invalid, .calc .has-error .calc-ctl, .calc .calc-ctl:has(input.invalid), .calc .calc-ctl:has(input[aria-invalid="true"]), .calc :not(.calc-ctl) > input[aria-invalid="true"] { border-color: var(--error); border-width: 3px; background-color: #FFF8F7; }

/* the number field: [ - | value | unit | + ] in one frame. The value reads left to right, centred. */
.calc .calc-ctl {
  position: relative; display: flex; align-items: stretch; min-height: 56px; border: 2px solid var(--field-line); border-radius: 14px; background: #fff; overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.calc .calc-ctl:hover { border-color: var(--blue-800); }
.calc .calc-ctl:focus-within { border-color: var(--blue-800); outline: 3px solid var(--focus); outline-offset: 2px; }
.calc .calc-ctl::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--t) var(--ease-out); pointer-events: none; }
.calc .calc-ctl:focus-within::after { transform: none; }
.calc .calc-ctl > input {
  order: 2; flex: 1 1 0; min-width: 0; width: auto; min-height: 52px; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 6px 4px; text-align: center; direction: ltr; font-weight: 700; color: var(--blue-800);
}
.calc .calc-ctl > input:focus, .calc .calc-ctl > input:focus-visible { outline: none; box-shadow: none; }
.calc .calc-ctl > input::placeholder { font-weight: 400; font-size: 0.9375rem; color: #5B6B86; }
.calc .calc-ctl > :is(.shekel, .unit, .unit-glyph) { order: 3; position: static; align-self: center; flex: none; padding-inline: 2px 12px; color: var(--muted); font-weight: 700; transform: none; }
.calc .money-wrap.calc-ctl::before { content: "₪"; order: 3; align-self: center; flex: none; padding-inline: 2px 12px; color: var(--muted); font-weight: 700; }
.calc .calc-ctl:not(.calc-ctl--step) > :is(.shekel, .unit, .unit-glyph) { padding-inline-end: 16px; }
.calc .calc-ctl:not(.calc-ctl--step) > input { padding-inline-start: 16px; }
.calc-step {
  flex: none; display: grid; place-items: center; width: 50px; min-height: 52px; padding: 0; border: 0; background: var(--mist); color: var(--blue-800); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.calc-step[data-step-dir="-1"] { order: 1; border-inline-end: 1px solid var(--line); }
.calc-step[data-step-dir="1"] { order: 4; border-inline-start: 1px solid var(--line); }
.calc-step svg { width: 20px; height: 20px; stroke-width: 2.6; transition: transform var(--t-fast) var(--ease-out); }
.calc-step:hover { background: var(--blue-800); color: #fff; }
.calc-step:active svg { transform: scale(0.78); }

/* slider synced with the field above it */
.calc-range {
  --fill: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
.calc-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to left, var(--blue-600) var(--fill), #7887A1 var(--fill)); }
.calc-range::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(to left, var(--blue-600) var(--fill), #7887A1 var(--fill)); }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--blue-800); box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.calc-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--blue-800); box-shadow: var(--shadow-1); }
.calc-range:hover::-webkit-slider-thumb { border-color: var(--blue-500); }
.calc-range:active::-webkit-slider-thumb { transform: scale(1.14); border-color: var(--gold-ink); }
.calc-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-radius: 12px; }
.calc-range:focus-visible::-webkit-slider-thumb { border-color: var(--blue-500); transform: scale(1.1); }
.calc-range:focus-visible::-moz-range-thumb { border-color: var(--blue-500); }
@media (forced-colors: active) {
  .calc-range { -webkit-appearance: auto; appearance: auto; height: 48px; }
  .calc-range::-webkit-slider-thumb { -webkit-appearance: auto; margin-top: 0; }
  .calc :is(.tab-btn.active, .toggle-btn.active), .calc .mode-toggle .active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .calc .calc-ctl:focus-within { outline: 3px solid Highlight; }
  .calc-step { border: 1px solid ButtonBorder; }
  .calc :is(.legend-swatch, .dot, .legend i) { forced-color-adjust: none; }
}

.calc .period-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 480px) { .calc .period-row { grid-template-columns: 1fr 1fr; } }
.calc .period-row > div { display: grid; gap: 4px; min-width: 0; }
.calc .computed { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--mist); font-weight: 600; }
.calc .computed .num { font-family: var(--font-display); font-size: 1.375rem; color: var(--blue-800); font-variant-numeric: tabular-nums; }
.calc .group { padding: 0 0 6px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.calc .group:last-of-type { border-bottom: 0; }
.calc .group > h2 { font-size: 1.375rem; }

/* choices: radio, checkbox */
.calc :is(.radio-row, .radios, .check-row) { display: grid; gap: 10px; margin: 0; }
.calc :is(.radio-opt, .check-opt, .check, .opt), .calc .radios label {
  display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer;
  font-weight: 600; color: var(--ink); line-height: 1.45; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t) var(--ease-out);
}
.calc :is(.radio-opt, .check-opt, .check, .opt):hover, .calc .radios label:hover { border-color: var(--blue-800); }
.calc :is(.radio-opt, .check-opt, .check, .opt):has(input:checked), .calc .radios label:has(input:checked) { border-color: var(--blue-500); background: var(--mist); }
.calc input:is([type="radio"], [type="checkbox"]) { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--blue-500); cursor: pointer; }

/* ------------------------------------------------------------------ 4. buttons, tabs, toggles */
.calc :is(.btn-primary, .btn-secondary, .btn-outline, .btn, .actions button, .btn-add-grant) {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 8px 26px; border: 2px solid var(--blue-800); border-radius: 999px; background: #fff; color: var(--blue-800);
  font: inherit; font-weight: 700; font-size: 1.125rem; line-height: 1.25; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.calc :is(.btn-primary, .btn-secondary, .btn-outline, .btn, .actions button, .btn-add-grant)::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--blue-800); transform: translateX(102%); transition: transform 380ms var(--ease-out);
}
.calc :is(.btn-primary, .btn-secondary, .btn-outline, .btn, .actions button, .btn-add-grant):is(:hover, :focus-visible) { color: #fff; box-shadow: var(--shadow-2); }
.calc :is(.btn-primary, .btn-secondary, .btn-outline, .btn, .actions button, .btn-add-grant):is(:hover, :focus-visible)::before { transform: none; }
.calc :is(.btn-primary, .btn-secondary, .btn-outline, .btn, .actions button, .btn-add-grant):active { transform: translateY(1px) scale(0.985); box-shadow: none; }
/* the main action: the site's primary button, with the puck and its arrow */
.calc :is(.btn-primary, .actions button.primary) { border-color: transparent; background: var(--blue-500); color: #fff; padding-inline-end: 10px; }
.calc :is(.btn-primary, .actions button.primary)::after {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 20px;
  transition: transform var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
.calc :is(.btn-primary, .actions button.primary):is(:hover, :focus-visible)::after {
  transform: translateX(-4px); background-color: var(--gold-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2F5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.calc .btn-add-grant { min-height: 48px; padding-inline: 20px; font-size: 1.0625rem; border-style: dashed; }
.calc :is(.actions-row, .btn-row, .actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.calc :is(.actions-row, .btn-row, .actions) > :is(.btn-primary, .primary) { flex: 1 1 220px; }

/* quiet buttons: shortcuts, "copy the value", remove */
.calc :is(.btn-shortcut, .link-btn, .btn-remove-grant, .actions button.link, .fee-note button, .narrative-box button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); color: var(--blue-800);
  font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; overflow: visible; box-shadow: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t) var(--ease-out), color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.calc :is(.btn-shortcut, .link-btn, .btn-remove-grant, .actions button.link)::before { display: none; }
.calc :is(.btn-shortcut, .link-btn, .btn-remove-grant, .actions button.link, .fee-note button, .narrative-box button):is(:hover, :focus-visible) { background: var(--blue-800); border-color: var(--blue-800); color: #fff; box-shadow: none; }
.calc :is(.btn-shortcut, .link-btn, .btn-remove-grant, .actions button.link, .fee-note button, .narrative-box button):active { transform: scale(0.96); }
.calc .fee-note button { margin-top: 10px; background: #fff; }
.calc .btn-remove-grant { color: var(--error); background: #fff; border-color: #F1C9C5; }
.calc .btn-remove-grant:is(:hover, :focus-visible) { background: var(--error); border-color: var(--error); }
.calc .credit-shortcut-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* tabs and yes/no toggles: segmented controls with a sliding fill */
.calc :is(.tabs, .toggle-group, .mode-toggle) { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 20px; background: var(--mist); border: 1px solid var(--line); }
.calc .toggle-group { display: inline-flex; width: fit-content; border-radius: 999px; }
.calc :is(.tab-btn, .tab, .toggle-btn), .calc .mode-toggle :is(button, .btn) {
  position: relative; flex: 1 1 auto; min-height: 48px; padding: 8px 18px; border: 0; border-radius: 14px; background: transparent; color: var(--blue-800); overflow: visible; box-shadow: none;
  font: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t) var(--ease-out), color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.calc .mode-toggle :is(button, .btn)::before { display: none; }
.calc .toggle-btn { border-radius: 999px; min-width: 76px; }
.calc :is(.tab-btn, .tab, .toggle-btn):hover, .calc .mode-toggle :is(button, .btn):hover { background: #fff; color: var(--blue-800); }
.calc :is(.tab-btn, .tab, .toggle-btn):active, .calc .mode-toggle :is(button, .btn):active { transform: scale(0.97); }
.calc :is(.tab-btn.active, .tab[aria-selected="true"], .toggle-btn.active), .calc .mode-toggle :is(button, .btn).active { background: var(--blue-800); color: #fff; box-shadow: var(--shadow-1); }
.calc :is(.tab-btn.active, .tab[aria-selected="true"], .toggle-btn.active):hover, .calc .mode-toggle :is(button, .btn).active:hover { background: var(--blue-800); color: #fff; }

/* ------------------------------------------------------------------ 5. results */
.calc :is(.results-placeholder, .results-hidden-msg, .placeholder-box) { padding: 26px 18px; border: 2px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); font-weight: 600; }

/* the result card */
.calc .hero-box, .calc .headline {
  position: relative; isolation: isolate; overflow: hidden; padding: 26px 20px; border: 0; border-radius: var(--radius-l); color: #fff; text-align: center;
  background: var(--surface-blue-glow); box-shadow: var(--shadow-2);
}
.calc .hero-box::before, .calc .headline::before {
  content: ""; position: absolute; z-index: -1; width: 360px; height: 425px; inset-inline-end: -90px; top: -120px; background: rgba(217, 240, 253, 0.14);
  -webkit-mask: var(--shield-line) center / 100% 100% no-repeat; mask: var(--shield-line) center / 100% 100% no-repeat;
}
.calc .hero-label { color: #fff; font-weight: 700; font-size: 1.125rem; margin: 0 0 6px; }
.calc :is(.hero-value, .hero-number) {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.calc :is(.hero-sub, .hero-note, .hero-sentence) { margin: 10px auto 0; max-width: 40rem; color: var(--on-dark-muted); font-size: 1.0625rem; }
/* the break-even figure: the same voice as the result card, on a light surface */
.calc .be-headline { display: grid; gap: 4px; margin: 0 0 18px; padding: 20px 22px; border-radius: var(--radius); background: var(--sand); border: 1px solid #E6DCC4; }
.calc .be-label { color: var(--muted); font-weight: 700; font-size: 1.0625rem; }
.calc .be-number { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.875rem, 7vw, 2.75rem); line-height: 1.15; color: var(--blue-800); font-variant-numeric: tabular-nums; }
.calc .be-number.none { color: var(--muted); }
.calc .be-sentence { color: var(--ink); font-size: 1.0625rem; }
.calc .hero-box .hero-sentence { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: #fff; margin: 0 0 18px; }
.calc .hero-number.purple, .calc .hero-box .purple { color: var(--gold-light); }
.calc .hero-box :is(.negative, .red, .loss, .down) { color: #FFE1DD; }
.calc .hero-box :is(.green, .gain, .up) { color: #D6F7E4; }
.calc .hero-number.neutral { color: #fff; }
.calc .hero-tax { margin-top: 8px; color: var(--on-dark-muted); font-weight: 600; }
.calc .hero-limited-badge, .calc .winner-badge, .calc .badge-approval { align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--gold-light); color: var(--blue-900); font-weight: 800; font-size: 1rem; }
.calc .badge-approval { display: inline-flex; }

/* tiles */
.calc :is(.secondary-grid, .stat-grid, .hero-stats, .hero-totals, .cards-grid) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.calc :is(.secondary-item, .stat-item, .hero-stat, .hero-total-item, .stat-card, .age-info-item) {
  display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: var(--radius); background: var(--mist); border: 1px solid var(--line); box-shadow: none; min-width: 0;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
.calc :is(.secondary-item, .stat-item, .stat-card):hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--line-strong); }
.calc :is(.secondary-item .lbl, .stat-label, .s-label, .t-label, .hero-stat .label, .r-label, .age-info-item .lbl) { font-size: 1rem; font-weight: 600; color: var(--muted); line-height: 1.4; }
.calc :is(.secondary-item .val, .stat-value, .s-value, .t-value, .hero-stat .value, .age-info-item .val) {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--blue-800); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.calc .hero-box :is(.hero-stat, .hero-total-item) { background: rgba(11, 47, 94, 0.3); border-color: rgba(255, 255, 255, 0.4); text-align: start; }
.calc .hero-box :is(.hero-stat .label, .t-label) { color: var(--on-dark-muted); }
.calc .hero-box :is(.hero-stat .value, .t-value) { color: #fff; }
.calc .hero-box .diff-pos { color: var(--gold-light); }
.calc .hero-stat .value.small { font-size: 1.25rem; }
.calc :is(.green, .gain, .up) { color: var(--ok); }
.calc :is(.red, .negative, .loss, .down, .missing) { color: var(--error); }
.calc .age-info-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* tables */
.calc :is(.table-wrap, .table-scroll, .details-table-wrap, .month-table-wrap, .scroll) { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.calc :is(.table-wrap, .table-scroll, .details-table-wrap, .month-table-wrap, .scroll, .chart-wrap, .chart-svg-wrap, .chart-svg-holder):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.calc table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.calc :is(th, td) { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.calc thead th { background: var(--blue-800); color: #fff; font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.calc tbody tr:nth-child(even) { background: var(--mist); }
.calc tbody tr:last-child :is(td, th) { border-bottom: 0; }
.calc tbody tr:hover { background: #E7EFF9; }
.calc :is(td.val, td.num, .details-table td:last-child) { font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.calc tr:is(.highlight, .total, .row-net, .compare-highlight) :is(td, th) { background: var(--sand); font-weight: 800; color: var(--blue-800); border-top: 2px solid var(--gold); }
.calc :is(.metric-name, .month-name, .year-cell) { font-weight: 700; color: var(--blue-800); }
.calc :is(.table-title, .chart-title, .section-title) { margin: 22px 0 10px; font-weight: 800; font-size: 1.1875rem; color: var(--blue-800); }
.calc td[style*="color"]:not([style*="var(--red)"]) { color: var(--muted) !important; }
.calc td[style*="var(--red)"] { color: var(--error) !important; }
.calc .month-table :is(td, th) { padding: 8px 8px; }
.calc .month-table input { min-height: 48px; min-width: 96px; padding: 6px 10px; text-align: center; direction: ltr; }
.calc .month-table .calc-ctl { min-height: 48px; min-width: 110px; }
.calc .month-table .calc-ctl > input { min-height: 44px; min-width: 0; padding-inline: 8px; }

/* dynamic rows (grants) */
.calc .grant-row { display: grid; gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); animation: calc-rise var(--t-slow) var(--ease-out) both; }
.calc .grant-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; color: var(--blue-800); }
.calc .grant-grid > div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.calc :is(.grant-result-line, .grants-total-line) { padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--blue-800); }
.calc .grants-total-line { margin-top: 12px; background: var(--sand); border-color: #E6DCC4; }

/* ------------------------------------------------------------------ 6. charts */
.calc :is(.chart-wrap, .chart-svg-wrap, .chart-svg-holder) { overflow-x: auto; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.calc .chart-wrap .chart-svg-holder { border: 0; padding: 0; }
/* the charts are drawn left to right (their scripts place every label by x); a Hebrew label still reads right to left */
.calc svg { direction: ltr; }
.calc svg text { font-family: var(--font-body); unicode-bidi: plaintext; }
.calc svg :is([stroke="#8b5cf6"], [stroke="#e67e22"]) { stroke: var(--chart-b); }
.calc svg :is([fill="#8b5cf6"], [fill="#e67e22"]) { fill: var(--chart-b); }
.calc svg [stroke="#5bc4f0"] { stroke: var(--sky); }
/* the second series is told from the first by its line as well as by its colour: dashed, in the chart and in the legend */
.calc svg path[fill="none"]:not([stroke-dasharray]):is([stroke="#8b5cf6"], [stroke="#e67e22"], [stroke="var(--series-b)"]) { stroke-dasharray: 10 5; }
.calc svg :is([fill="#555555"], [fill="#555"]) { fill: var(--muted); }
/* words inside a chart are small: they take the darker ink of their series, the line keeps its colour */
.calc svg text:is([fill="#8b5cf6"], [fill="#e67e22"]) { fill: var(--gold-ink); }
.calc svg text:is([fill="#27ae60"], [fill="#2ecc71"]) { fill: #14663C; }
.calc svg text:is([fill="#5bc4f0"], [fill="#1a6fc4"], [fill="#2e86de"]) { fill: var(--blue-600); }
.calc :is(.legend, .chart-legend) { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.calc .legend-item { display: inline-flex; align-items: center; gap: 8px; }
.calc :is(.legend-swatch, .dot, .legend-ring) { flex: none; display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: var(--chart-a); }
.calc :is(.legend-swatch, .dot).purple, .calc :is(.legend-swatch, .dot).inv, .calc .col-b .legend-swatch { background: repeating-linear-gradient(90deg, var(--chart-b) 0 8px, transparent 8px 12px); width: 28px; }
.calc .legend i[style*="series-b"] { border-top-style: dashed; width: 28px; }
.calc .legend-ring { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--chart-a); }
.calc .breakeven-text { margin-top: 12px; font-weight: 700; color: var(--blue-800); }

/* ------------------------------------------------------------------ 7. what each script shows and hides.
   These pairs are the originals' own rules, carried over one for one: the scripts toggle the classes. */
.calc .route-panel, .calc .tab-panel { display: none; }
.calc .route-panel.active, .calc .tab-panel.active { display: block; }
.calc .results-area { display: none; }
.calc .results-area.visible { display: block; }
.calc .stale-badge, .calc .alert { display: none; }
.calc .stale-badge.visible, .calc .alert.visible { display: block; }
.calc .stale-banner, .calc .error-summary, .calc .block-message { display: none; }
.calc .stale-banner.show, .calc .error-summary.show, .calc .block-message.show { display: block; }
.calc--neches-hashkaa .stale-banner.show { display: flex; }
.calc .errors:empty { display: none; }
.calc .field-error { display: none; }
.calc .field-error.show { display: block; }
.calc--ktsva-hayom-atid .field-error { display: block; }
.calc--ktsva-hayom-atid .field-error:empty { display: none; }
.calc .field .error-text, .calc .field .warn-text { display: none; }
.calc .field.has-error .error-text, .calc .field.has-warn .warn-text { display: block; }
.calc .hero-limited-badge { display: none; }
.calc .hero-box.limited .hero-limited-badge { display: inline-flex; margin-block: 10px 16px; }
.calc .error-panel, .calc .annuity-error, .calc .fee-note { display: none; }
.calc .error-panel.show, .calc .annuity-error.show, .calc .fee-note.show { display: block; }
.calc .winner-badge { display: none; }
.calc .route-card.winner .winner-badge { display: inline-flex; }

/* ------------------------------------------------------------------ 8. per-calculator adjustments */
.calc .alt-col, .calc :is(.panel-property, .panel-investment, .prop-col, .inv-col) { padding: 18px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--mist); min-width: 0; }
.calc .alt-col h3, .calc :is(.prop-col, .inv-col) h3 { padding-bottom: 8px; border-bottom: 3px solid var(--chart-a); }
.calc :is(.alt-col.alt2, .inv-col, .panel-investment) h3 { border-bottom-color: var(--chart-b); }
.calc .route-card { display: grid; gap: 10px; align-content: start; transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out); }
.calc .route-card.winner { border-color: var(--gold); box-shadow: var(--shadow-2), 0 0 0 2px var(--gold); }
.calc .route-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--blue-800); }
.calc .route-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.calc .route-row:last-child { border-bottom: 0; }
.calc .r-value { font-weight: 800; color: var(--blue-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc .r-value.gain { color: var(--ok); }
.calc .r-value.loss { color: var(--error); }
.calc .route-row:is(.row-net, .row-breakeven) { background: transparent; }
.calc .route-row.row-net .r-value { font-family: var(--font-display); font-size: 1.5rem; }
.calc .inline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; font-weight: 600; }
.calc .inline-controls :is(select, input) { width: auto; min-width: 120px; max-width: 100%; }
.calc .inline-controls > * { min-width: 0; max-width: 100%; }
.calc section.block > * { min-width: 0; max-width: 100%; }
.calc .inline-controls .calc-ctl { width: 190px; }
.calc .be-card { display: grid; gap: 6px; text-align: start; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.calc .be-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--blue-800); }
.calc .be-card:active { transform: translateY(0) scale(0.99); }
.calc .be-card[aria-pressed="true"] { border-color: var(--blue-500); background: var(--mist); box-shadow: var(--shadow-1); }
.calc .headline { text-align: start; }
.calc .headline .num, .calc .be-card .num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc .toggle-btn.warn-active.active[data-val="yes"] { background: var(--error); }

/* --- smaller states the scripts set: gain / loss, the row of the current year, tags in a table */
.calc :is(.pos) { color: var(--ok); }
.calc :is(.neg) { color: var(--error); }
.calc tr.dim td { color: var(--muted); }
.calc tbody tr:is(.receipt-row, .row-current) { background: var(--sand); }
.calc :is(.tag-receipt, .tag-spread) { margin: 4px 0 0; font-size: 0.9375rem; }
.calc .tag-spread { background: #EAF6EF; border-color: #C6E2D2; color: #145C37; }
.calc td:is(.col-a, .lead-a) { color: var(--blue-600); font-weight: 700; }
.calc td:is(.col-b, .lead-b) { color: var(--gold-ink); font-weight: 700; }
.calc td:is(.lead-a, .lead-b) { font-weight: 800; }
.calc .route-card { border-top: 5px solid var(--chart-a); }
.calc .route-card.route-b { border-top-color: var(--chart-b); }
.calc .r-value.tax { color: var(--error); }
.calc .route-card.route-b .route-row.total .r-value { color: var(--gold-ink); }
.calc .legend-item .legend-value { margin-inline-start: auto; font-weight: 800; color: var(--blue-800); white-space: nowrap; }
.calc .stat-item.accent { background: #fff; border-color: var(--blue-500); }
.calc .stat-item.accent .s-value { color: var(--blue-600); }
.calc .equality-notice.unequal { background: var(--sand); border-color: #E6DCC4; border-inline-start-color: var(--gold); }
.calc .small-btn { min-height: 48px; padding: 6px 14px; font-size: 1rem; }

/* --- "מאיזה מקור למשוך את האנונה": the vocabulary its script builds the results with */
.calc .headline { display: grid; gap: 18px; }
.calc .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; }
.calc .kv2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.calc .kv .k { font-size: 1rem; font-weight: 600; color: var(--on-dark-muted); }
.calc .kv .v { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: #fff; }
.calc .kv .v.small { font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.4; }
.calc .verdict { margin: 0; max-width: 62ch; color: #fff; font-size: 1.125rem; line-height: 1.7; }
.calc .notes { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; color: #fff; font-size: 1rem; line-height: 1.6; }
.calc .notes li { position: relative; padding-inline-start: 18px; }
.calc .notes li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }
.calc .headline .empty, .calc .headline .none { color: #fff; font-weight: 700; font-size: 1.1875rem; }
.calc .empty { color: var(--muted); font-weight: 600; }
.calc .none { font-weight: 700; font-size: 1.1875rem; }
.calc section.block { display: grid; gap: 14px; min-width: 0; }
.calc section.block > h2 { margin-bottom: 0; }
.calc section.block > .sub { margin: 0; }
.calc .be-card .t { font-size: 1rem; font-weight: 700; color: var(--muted); }
.calc .be-card .big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--blue-800); }
.calc .be-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 1rem; }
.calc .be-card dt { color: var(--muted); }
.calc .be-card dd { margin: 0; font-weight: 600; }
.calc .be-card:disabled { opacity: 0.55; cursor: default; }
.calc .chart-wrap { position: relative; }
.calc .legend span { display: inline-flex; align-items: center; gap: 8px; }
.calc .legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
.calc svg.chart { display: block; width: 100%; height: auto; direction: ltr; touch-action: pan-y; }
.calc .tooltip {
  position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 4px; min-width: 220px; padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: 1rem; line-height: 1.4; color: var(--ink);
}
.calc .tooltip[hidden] { display: none; }
.calc .tooltip .when { color: var(--muted); font-weight: 600; }
.calc .tooltip .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calc .tooltip .r span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.calc .tooltip .r i { width: 14px; border-top: 3px solid; }
.calc :is(td, th).n { text-align: end; font-variant-numeric: tabular-nums; }
.calc tr.hit td { background: var(--sand); font-weight: 700; color: var(--blue-800); }
.calc .pill { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1px solid currentColor; font-size: 0.9375rem; font-weight: 700; }
.calc .pill.a { color: var(--blue-600); }
.calc .pill.b { color: var(--gold-ink); }
.calc .pill.tie { color: var(--muted); }
.calc .strat { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.calc .strat h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--mist); font-size: 1.125rem; }
.calc .strat h3 i { display: inline-block; flex: none; width: 22px; border-top: 4px solid; }
.calc .strat dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); font-size: 1rem; }
.calc .strat :is(dt, dd) { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--grid); }
.calc .strat dt { color: var(--muted); }
.calc .strat dd { text-align: end; font-weight: 700; color: var(--blue-800); overflow-wrap: anywhere; }

/* enlarged text (the accessibility menu): figures may break and rows may fold rather than run out of their card */
html[data-a11y-size] .calc :is(.r-value, .hero-value, .hero-number, .be-number, .val, .value, .s-value, .t-value, .legend-value, .num, .big, .v, .stat-value) { white-space: normal; overflow-wrap: anywhere; }
html[data-a11y-size] .calc :is(.route-row, .legend-item, .computed, .grant-title, .inline-controls) { flex-wrap: wrap; }
html.a11y-large .calc :is(.field-grid, .fields-grid, .grid2, .grid3, .row2, .grant-grid, .alts-grid, .annuity-grid, .panels-grid, .routes-grid, .strat-grid, .be-grid, .secondary-grid, .stat-grid, .hero-stats, .hero-totals, .cards-grid, .age-info-box, .period-row, .layout) { grid-template-columns: minmax(0, 1fr) !important; }
html.a11y-large .calc :is(.field, .field-row) > :is(.calc-ctl, select, input, .calc-range) { max-width: none !important; }
html.a11y-large .calc .layout > .inputs { position: static; max-height: none; }
html.a11y-large .calc :is(.strat dl, .be-card dl) { grid-template-columns: minmax(0, 1fr); }
html.a11y-large .calc .strat dd { text-align: start; }

@media (min-width: 700px) {
  .calc :is(.card, .panel, .route-card) { padding: 30px 32px; }
  .calc :is(.field-grid, .fields-grid, .grid2, .row2, .alts-grid, .panels-grid, .routes-grid, .annuity-grid, .strat-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .calc :is(.grid3, .grant-grid, .be-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .calc .field.full { grid-column: 1 / -1; }
  /* a single field on its own row keeps the width of a column */
  .calc :is(.card, .panel, .adv-body, #normalSpreadFields) > :is(.field, .field-row):not(:has(.radio-row, .radios, .check-row, details, #grantsContainer)) > :is(.calc-ctl, select, input, .calc-range) { max-width: calc(50% - 12px); }
  /* ...unless the card is itself one of two side by side: then the field has the card's width */
  .calc :is(.panels-grid, .alts-grid, .routes-grid, .annuity-grid, .layout) :is(.field, .field-row) > :is(.calc-ctl, select, input, .calc-range) { max-width: none; }
  .calc :is(.secondary-grid, .stat-grid, .cards-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .calc :is(.hero-stats, .hero-totals) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calc .hero-box, .calc .headline { padding: 36px 36px; }
  .calc :is(.actions-row, .btn-row, .actions) > :is(.btn-primary, .primary) { flex: 0 1 auto; min-width: 240px; }
  .calc :is(.radio-row, .radios) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .calc :is(.field-grid, .fields-grid):has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the one calculator that is built as form + results side by side */
  .calc .layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .calc .layout > .inputs { position: sticky; top: calc(var(--header-nav) + 16px); max-height: calc(100vh - var(--header-nav) - 32px); overflow-y: auto; overscroll-behavior: contain; }
  .calc .layout .row2 { grid-template-columns: 1fr 1fr; }
  .calc .layout > .inputs :is(.radios, .radio-row) { grid-template-columns: 1fr; }
}

/* motion: a result that appears rises into place; the number that changed takes a beat of gold */
@keyframes calc-rise { from { opacity: 0; transform: translateY(14px); } }
.calc :is(.hero-box, .headline) { animation: calc-rise var(--t-slow) var(--ease-out) both; }
.calc :is(.results-area.visible, #resultsContent, .results-wrap) > :is(.secondary-grid, .stat-grid, .cards-grid, .card) { animation: calc-rise var(--t-slow) var(--ease-out) 80ms both; }
.calc .is-counting { color: var(--gold-light); }
.calc :is(.secondary-item, .stat-item, .stat-card) .is-counting { color: var(--blue-600); }
.calc :is(.bump, .pulse, .flash) { animation: calc-bump 260ms var(--ease-out); }
@keyframes calc-bump { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .calc *, .calc *::before, .calc *::after { animation: none !important; transition: none !important; }
}
@media print {
  .calc-step, .calc-range, .calc :is(.actions-row, .btn-row, .actions, .tabs) { display: none !important; }
}