/* Money Pro components. Composed from tokens only — no literals here.
   Accent-bearing rules read --mp-accent*, never a calculator-specific token. */

/* ---------- Layout ---------- */
.mp-main { max-width: var(--mp-container); margin: 0 auto; padding: 28px var(--mp-gutter) 40px;
  display: flex; flex-direction: column; gap: var(--mp-gap-stack); width: 100%; }
.mp-row { max-width: var(--mp-container); margin: 0 auto; padding: 14px var(--mp-gutter); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-grid-fields  { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-field), 1fr)); gap: var(--mp-gap-grid); }
.mp-grid-tiles   { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-tile), 1fr)); gap: var(--mp-gap-grid); align-items: start; }
.mp-grid-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-tile), 1fr)); gap: var(--mp-gap-slider); }
.mp-grid-work    { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-work), 1fr)); gap: var(--mp-gap-work); }
.mp-grid-cards   { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-card), 1fr)); gap: 14px; }
.mp-grid-legend  { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-legend), 1fr)); gap: 10px; }
/* Every grid/flex child holding text or an input needs this — it is what prevents horizontal scroll. */
.mp-min0 { min-width: 0; }

/* ---------- Card ---------- */
.mp-card { background: var(--mp-card); border: var(--mp-bw) solid var(--mp-border); border-radius: var(--mp-r-card);
  padding: var(--mp-pad-card); box-shadow: var(--mp-sh-card); display: flex; flex-direction: column; gap: var(--mp-gap-grid); }
.mp-card--flush { padding: 0; overflow: hidden; gap: 0; }
.mp-card--tight { padding: var(--mp-pad-card-tight); }
.mp-card__title { font-size: var(--mp-text-h2); font-weight: var(--mp-w-bold); }
.mp-card__head  { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-gap-tight); }
.mp-divide { border-top: var(--mp-bw) solid var(--mp-border); padding-top: var(--mp-gap-grid); }
/* Heavier than every other surface on purpose — it holds the explanation. */
.mp-note { background: var(--mp-note-bg); border: var(--mp-bw-note) solid var(--mp-note-border);
  border-radius: var(--mp-r-inset); padding: 15px 17px; box-shadow: var(--mp-sh-note);
  font-size: var(--mp-text-ui); line-height: 1.55; color: var(--mp-ink); }

/* ---------- Buttons ---------- */
.mp-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; min-height: var(--mp-h-ctrl); padding: 0 var(--mp-pad-btn);
  border-radius: var(--mp-r-ctrl); font-size: var(--mp-text-ui); font-weight: var(--mp-w-bold); }
.mp-btn--sm { min-height: var(--mp-h-ctrl-sm); padding: 0 16px; }
.mp-btn--xs { min-height: var(--mp-h-ctrl-xs); padding: 0 16px; font-size: var(--mp-text-meta); }
.mp-btn:active { transform: translateY(3px); }

.mp-btn--primary { background: var(--mp-primary-grad); color: #fff; box-shadow: var(--mp-sh-btn); }
.mp-btn--primary:hover { background: linear-gradient(180deg, #2568C4, var(--mp-primary-lift)); }
.mp-btn--primary:active { box-shadow: var(--mp-sh-btn-pressed); }

.mp-btn--secondary { background: var(--mp-secondary-grad); border: var(--mp-bw) solid var(--mp-secondary);
  color: var(--mp-secondary-ink); box-shadow: var(--mp-sh-btn-secondary); }

.mp-btn--outline { background: var(--mp-card); border: var(--mp-bw) solid var(--mp-primary);
  color: var(--mp-primary); box-shadow: var(--mp-sh-btn-outline); }
.mp-btn--outline.mp-btn--sm, .mp-btn--outline.mp-btn--xs { box-shadow: var(--mp-sh-btn-sm); }

.mp-btn--soft { background: var(--mp-primary-soft-grad); border: var(--mp-bw) solid var(--mp-primary);
  color: var(--mp-primary); box-shadow: var(--mp-sh-btn-sm); }

.mp-btn[disabled], .mp-btn--disabled { cursor: not-allowed; background: var(--mp-surface-disabled);
  border: var(--mp-bw) solid var(--mp-border-disabled); color: var(--mp-ink-disabled); box-shadow: none; transform: none; }

/* On the primary header band */
.mp-btn--onprimary { background: var(--mp-card); border: var(--mp-bw) solid #fff; color: var(--mp-primary); box-shadow: var(--mp-sh-btn-onprimary); }
.mp-btn--ghostprimary { border: var(--mp-bw) solid rgba(255,255,255,.45); color: #fff; font-weight: var(--mp-w-medium); box-shadow: inset 0 -2px 6px rgba(0,0,0,.18); }

/* ---------- Chip ---------- */
.mp-chip { display: inline-flex; align-items: center; white-space: nowrap; font-size: var(--mp-text-micro);
  font-weight: var(--mp-w-medium); padding: var(--mp-pad-chip); border-radius: var(--mp-r-chip);
  background: var(--mp-primary-soft); border: var(--mp-bw) solid var(--mp-primary); color: var(--mp-primary); }
.mp-chip--secondary { background: var(--mp-secondary-soft); border-color: var(--mp-secondary); color: var(--mp-secondary-ink); }
.mp-chip--positive { background: var(--mp-positive-grad); border-color: var(--mp-positive); color: var(--mp-positive); }

/* ---------- Header ---------- */
.mp-header { background: var(--mp-primary-grad); color: #fff; box-shadow: var(--mp-sh-header); }
.mp-header__logo { width: var(--mp-h-logo); height: var(--mp-h-logo); border-radius: var(--mp-r-card);
  background: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--mp-sh-logo); }
.mp-wordmark { font-weight: var(--mp-w-bold); font-size: var(--mp-wordmark); letter-spacing: var(--mp-track-wordmark); }
.mp-nav { max-width: var(--mp-container); margin: 0 auto; padding: 0 var(--mp-gutter) var(--mp-gap-grid);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-nav), 1fr)); gap: var(--mp-gap-nav); }
.mp-nav__item { display: grid; place-items: center; text-align: center; text-decoration: none;
  min-height: var(--mp-h-ctrl-sm); padding: 0 6px; border-radius: var(--mp-r-ctrl);
  font-size: var(--mp-text-meta); font-weight: var(--mp-w-medium); white-space: nowrap;
  background: rgba(255,255,255,.14); border: var(--mp-bw) solid rgba(255,255,255,.32); color: #fff; box-shadow: var(--mp-sh-nav); }
.mp-nav__item[aria-current="page"] { background: #fff; border-color: #fff; color: var(--mp-accent); box-shadow: var(--mp-sh-nav-active); }

/* ---------- Field ---------- */
.mp-field { display: flex; flex-direction: column; gap: var(--mp-gap-xs); min-width: 0; }
.mp-field__label { font-size: var(--mp-text-ui); font-weight: var(--mp-w-medium); }
.mp-field__well { display: flex; align-items: center; box-sizing: border-box; min-height: var(--mp-h-ctrl);
  border: var(--mp-bw) solid var(--mp-primary); border-radius: var(--mp-r-ctrl);
  background: var(--mp-well); box-shadow: var(--mp-sh-well); }
.mp-field__well--accent { border-color: var(--mp-accent); background: var(--mp-accent-soft); }
.mp-field__affix { padding: 0 12px; color: var(--mp-ink-muted); font-family: var(--mp-font-mono); font-weight: var(--mp-w-medium); }
.mp-field__input { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent;
  font-family: var(--mp-font-mono); font-size: var(--mp-text-input); font-weight: var(--mp-w-medium);
  height: var(--mp-h-input); padding: 0; }
.mp-field--error .mp-field__well { border-color: var(--mp-error); background: var(--mp-error-well); box-shadow: var(--mp-sh-well-error); }
.mp-field__error { font-size: var(--mp-text-meta); font-weight: var(--mp-w-medium); color: var(--mp-error); }
.mp-field--disabled .mp-field__well { border-color: var(--mp-border-disabled); background: var(--mp-surface-disabled); box-shadow: none; }
.mp-field--disabled .mp-field__input, .mp-field--disabled .mp-field__affix { color: var(--mp-ink-disabled); }

/* ---------- Slider ---------- */
.mp-slider { display: flex; flex-direction: column; gap: var(--mp-gap-xs); min-width: 0; }
.mp-slider__head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--mp-text-ui); }
.mp-slider__readout { font-family: var(--mp-font-mono); color: var(--mp-ink-subtle); white-space: nowrap; }
.mp-slider__ends { display: flex; justify-content: space-between; font-family: var(--mp-font-mono);
  font-size: var(--mp-text-axis); color: var(--mp-ink-subtle); }

/* ---------- Tiles ---------- */
.mp-tile { border-radius: var(--mp-r-tile); padding: var(--mp-pad-tile); }
.mp-tile--accent { background: linear-gradient(180deg, var(--mp-accent-soft), var(--mp-accent-soft-2));
  border: var(--mp-bw) solid var(--mp-accent); box-shadow: 0 8px 18px rgb(from var(--mp-accent) r g b / .26), inset 0 2px 0 rgba(255,255,255,.9); }
.mp-tile--neutral { background: var(--mp-neutral-tile-grad); border: var(--mp-bw) solid var(--mp-border-strong); box-shadow: var(--mp-sh-tile); }
.mp-tile__eyebrow { font-size: var(--mp-text-micro); font-weight: var(--mp-w-bold);
  text-transform: uppercase; letter-spacing: var(--mp-track-eyebrow); }
.mp-tile--accent .mp-tile__eyebrow, .mp-tile--accent .mp-tile__value { color: var(--mp-accent); }
.mp-tile__value { font-family: var(--mp-font-mono); font-size: var(--mp-text-tile); font-weight: var(--mp-w-bold);
  line-height: var(--mp-lh-tile); margin-top: var(--mp-gap-xs); font-variant-numeric: tabular-nums; }
.mp-tile__note { font-size: var(--mp-text-meta); color: var(--mp-ink-muted); margin-top: 4px; }

/* ---------- Composition bar ---------- */
.mp-bar { display: flex; height: var(--mp-h-bar); border: var(--mp-bw) solid var(--mp-border-strong);
  border-radius: var(--mp-r-inset); overflow: hidden; gap: 2px; box-shadow: var(--mp-sh-bar); }
.mp-bar__seg--a { background: var(--mp-accent); }
.mp-bar__seg--b { background: var(--mp-accent-tint); }
.mp-swatch { width: 13px; height: 13px; border-radius: var(--mp-r-swatch); flex: none; box-shadow: var(--mp-sh-swatch); }

/* ---------- Callouts ---------- */
.mp-callout { display: flex; gap: var(--mp-gap-tight); align-items: center; padding: 12px 14px;
  border-radius: var(--mp-r-inset); font-size: var(--mp-text-ui); }
.mp-callout--positive { background: var(--mp-positive-grad); border: var(--mp-bw) solid var(--mp-positive); box-shadow: var(--mp-sh-positive); }
.mp-callout--error { background: var(--mp-error-well); border: var(--mp-bw) solid var(--mp-error); box-shadow: var(--mp-sh-inset-top); }

/* ---------- Roll-up ---------- */
.mp-rollup { background: var(--mp-card); border: var(--mp-bw) solid var(--mp-border);
  border-radius: var(--mp-r-card); overflow: hidden; box-shadow: var(--mp-sh-card); }
.mp-rollup__header { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 100%;
  align-items: center; gap: var(--mp-gap-grid); padding: var(--mp-pad-card-tight); flex-wrap: wrap; }
.mp-rollup__titles { flex: 1; min-width: 200px; }
.mp-rollup__sub { font-size: var(--mp-text-ui); color: var(--mp-ink-muted); margin-top: 2px; }
.mp-rollup__toggle { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap;
  box-sizing: border-box; min-height: var(--mp-h-rollup); padding: 0 var(--mp-pad-btn);
  border: var(--mp-bw) solid var(--mp-primary); border-radius: var(--mp-r-ctrl);
  background: var(--mp-primary-grad); color: #fff; font-size: var(--mp-text-ui);
  font-weight: var(--mp-w-bold); box-shadow: 0 4px 0 var(--mp-primary-deep); }
.mp-rollup__chevron { transition: var(--mp-transition-chevron); }
.mp-rollup__header[aria-expanded="true"] .mp-rollup__chevron { transform: rotate(180deg); }
.mp-rollup__body { border-top: var(--mp-bw) solid var(--mp-border); padding: var(--mp-pad-card); }
/* SEO-bearing bodies stay in the DOM when closed. */
.mp-rollup__body[hidden] { display: none; }

/* ---------- Show the work ---------- */
.mp-formula { border-radius: var(--mp-r-inset); padding: var(--mp-pad-tile); font-family: var(--mp-font-mono);
  font-weight: var(--mp-w-bold); overflow-wrap: anywhere; }
.mp-formula--generic { background: var(--mp-neutral-tile-grad); border: var(--mp-bw) solid var(--mp-border-strong);
  font-size: 19px; line-height: 1.6; box-shadow: var(--mp-sh-block); }
.mp-formula--substituted { background: linear-gradient(180deg, var(--mp-accent-soft), var(--mp-accent-soft-2));
  border: var(--mp-bw) solid var(--mp-accent); color: var(--mp-accent); font-size: var(--mp-text-input); line-height: 1.7;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 6px 14px rgb(from var(--mp-accent) r g b / .26); }
.mp-steps { margin: 0; padding: 0; list-style: none; font-size: var(--mp-text-ui); }
.mp-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px;
  padding: 11px 0; border-bottom: var(--mp-bw-hair) solid var(--mp-rule); align-items: baseline; }
.mp-steps__n { font-family: var(--mp-font-mono); font-size: var(--mp-text-axis); font-weight: var(--mp-w-bold);
  color: #fff; background: var(--mp-primary); border-radius: var(--mp-r-badge); text-align: center; padding: 3px 0; }
.mp-steps__val { font-family: var(--mp-font-mono); font-size: var(--mp-text-ui); font-weight: var(--mp-w-medium);
  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Chart ---------- */
.mp-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-bar), 1fr));
  gap: 8px; align-items: end; height: var(--mp-h-chart); padding: 14px 12px 0; box-sizing: border-box;
  background: var(--mp-chart-bg); border: var(--mp-bw) solid var(--mp-border);
  border-radius: var(--mp-r-inset); box-shadow: var(--mp-sh-chart); }
.mp-chart__col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; }
.mp-chart__top  { background: var(--mp-accent-tint); border: var(--mp-bw) solid var(--mp-accent);
  border-bottom: 0; border-radius: var(--mp-r-bar-cap); box-sizing: border-box; }
.mp-chart__base { background: var(--mp-accent); border-radius: 0 0 var(--mp-r-badge) var(--mp-r-badge); }
.mp-chart__axis { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-bar), 1fr));
  gap: 8px; padding: 0 12px; font-family: var(--mp-font-mono); font-size: var(--mp-text-axis);
  color: var(--mp-ink-muted); text-align: center; }

/* ---------- Table ---------- */
.mp-table__head, .mp-table__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr; gap: var(--mp-gap-tight); }
.mp-table__head { padding: 12px 0; font-size: var(--mp-text-axis); font-weight: var(--mp-w-bold);
  text-transform: uppercase; letter-spacing: var(--mp-track-eyebrow); color: var(--mp-ink-muted);
  border-bottom: var(--mp-bw) solid var(--mp-border); }
.mp-table__row { padding: 10px 0; font-family: var(--mp-font-mono); font-size: var(--mp-text-ui);
  font-variant-numeric: tabular-nums; border-bottom: var(--mp-bw-hair) solid var(--mp-rule); }
.mp-table__row > :nth-child(n+2) { text-align: right; }
.mp-table__row > :nth-child(3) { color: var(--mp-accent); font-weight: var(--mp-w-medium); }

/* ---------- Glossary / FAQ / prose ---------- */
.mp-dl { margin: 0; padding: 10px var(--mp-pad-card) var(--mp-pad-card-tight);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mp-min-gloss), 1fr));
  gap: 0 32px; font-size: var(--mp-text-ui); line-height: 1.55; }
.mp-dl > div { padding: 12px 0; border-bottom: var(--mp-bw-hair) solid var(--mp-rule); }
.mp-dl dt { font-weight: var(--mp-w-bold); }
.mp-dl dd { margin: 2px 0 0; color: var(--mp-ink-muted); }
.mp-prose { font-size: var(--mp-text-lede); line-height: var(--mp-lh-prose);
  max-width: var(--mp-measure-prose); display: flex; flex-direction: column; gap: 14px; }
.mp-faq__q { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 100%;
  justify-content: space-between; align-items: center; gap: var(--mp-gap-grid);
  padding: 14px 0; font-size: var(--mp-text-body); font-weight: var(--mp-w-medium); }
.mp-faq__a { margin: 0 0 14px; font-size: var(--mp-text-body); line-height: 1.6;
  color: var(--mp-ink-muted); max-width: var(--mp-measure-answer); }

/* ---------- Related card ---------- */
.mp-related { text-decoration: none; color: var(--mp-ink); background: var(--mp-card);
  border: var(--mp-bw) solid var(--mp-border); border-top: var(--mp-bw-accent-top) solid var(--mp-accent);
  border-radius: var(--mp-r-card); padding: var(--mp-pad-card-tight); display: flex; flex-direction: column;
  gap: 10px; box-shadow: var(--mp-sh-card); }
.mp-related:hover { border-color: var(--mp-primary); }
.mp-related__cta { display: flex; align-items: center; justify-content: center;
  min-height: var(--mp-h-ctrl-sm); box-sizing: border-box; border: var(--mp-bw) solid var(--mp-accent);
  border-radius: var(--mp-r-ctrl); font-size: var(--mp-text-ui); font-weight: var(--mp-w-bold);
  color: var(--mp-accent); text-align: center; padding: 0 8px; }

/* ---------- Ad slot ---------- */
.mp-ad { display: flex; flex-direction: column; align-items: center; gap: var(--mp-gap-xs); }
.mp-ad__label { font-size: var(--mp-text-adlabel); letter-spacing: var(--mp-track-adlabel);
  text-transform: uppercase; color: var(--mp-ink-subtle); font-weight: var(--mp-w-medium); }
/* Height is reserved so ad load causes zero layout shift. */
.mp-ad__frame { width: 100%; border: var(--mp-bw) dashed var(--mp-dashed); border-radius: var(--mp-r-inset);
  background: var(--mp-card-inset); box-shadow: var(--mp-sh-well-soft); display: grid; place-items: center;
  color: var(--mp-ink-subtle); font-family: var(--mp-font-mono); font-size: var(--mp-text-micro); }
.mp-ad--leaderboard .mp-ad__frame { height: var(--mp-ad-leaderboard); }
.mp-ad--footer .mp-ad__frame { height: var(--mp-ad-footer); }
.mp-ad--anchor { position: fixed; inset: auto 0 0 0; z-index: 40; }
.mp-ad--anchor .mp-ad__frame { height: var(--mp-ad-anchor); border-radius: 0; }

/* ---------- Footer ---------- */
.mp-footer { background: var(--mp-card); border-top: var(--mp-bw) solid var(--mp-border); box-shadow: var(--mp-sh-footer); }
.mp-footer__inner { max-width: var(--mp-container); margin: 0 auto; padding: var(--mp-pad-card) var(--mp-gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--mp-gap-tight);
  font-size: var(--mp-text-meta); color: var(--mp-ink-muted); }