/* =========================================================
   Best Finance Calculator — Article pages (/guides/…)
   ---------------------------------------------------------
   Loaded ONLY by individual article pages. Every rule is scoped
   under .article-body, so no existing page can be affected and
   the site's design and structure stay exactly as they were.
   Colours, radii, spacing and fonts all reuse existing tokens —
   this file introduces no new design language, only the prose
   typography that long-form articles need.
   ========================================================= */

/* Article pages use the SAME two-column grid as the rest of the site
   (main column + 315px sidebar). The grid comes from style.css —
   nothing is overridden here. */

/* ---------- Byline / meta stamp under the title ---------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.article-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 5px 12px;
}
.article-stamp i { color: var(--blue); font-size: 11px; }

/* ---------- Table of contents ---------- */
.article-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  margin-top: 4px;
}
@media (max-width: 620px) { .article-toc { grid-template-columns: 1fr; } }

.article-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--blue);
  padding: 5px 0;
  line-height: 1.45;
}
.article-toc a:hover { text-decoration: underline; }
.article-toc a i { font-size: 10px; color: var(--gray-400); flex-shrink: 0; }

/* ---------- Prose ----------
   The global reset (* { margin: 0 } and ul { list-style: none }) strips
   paragraph spacing and list bullets, so long-form prose has to restore
   them. Scoped here, so nothing else on the site changes. */
.article-section { scroll-margin-top: 86px; }   /* clears the sticky header */
.article-section + .article-section { margin-top: 26px; }

.article-section h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 9px;
}
.article-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 16px 0 6px;
}
.article-section p {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 11px;
}
.article-section p:last-child { margin-bottom: 0; }
.article-section a { color: var(--blue); font-weight: 500; }
.article-section a:hover { text-decoration: underline; }
.article-section strong { color: var(--gray-700); font-weight: 600; }

.article-section ul,
.article-section ol {
  padding-left: 20px;
  margin: 0 0 12px;
}
.article-section ul { list-style: disc; }
.article-section ol { list-style: decimal; }
.article-section li {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 6px;
}
.article-section li::marker { color: var(--gray-400); }

/* ---------- Highlighted callout ---------- */
.article-callout {
  display: flex;
  gap: 11px;
  background: #eaf4fd;
  border: 1px solid #d3e7f7;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 13px 15px;
  margin: 14px 0;
}
.article-callout i { color: var(--blue); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.article-callout p { font-size: 13px; line-height: 1.7; margin: 0; color: var(--gray-600); }

/* Amber variant for warnings / common mistakes. */
.article-callout.callout-warn { background: #fff8e8; border-color: #f2dfae; border-left-color: #e0a80f; }
.article-callout.callout-warn i { color: #c88a05; }

/* Green variant for key takeaways. */
.article-callout.callout-tip { background: #edf9f3; border-color: #cfead9; border-left-color: var(--lime); }
.article-callout.callout-tip i { color: var(--lime-dark); }

/* ---------- Worked example / comparison table ---------- */
.article-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 13px;
}
.article-table th,
.article-table td {
  border: 1px solid var(--gray-200);
  padding: 9px 11px;
  text-align: left;
  line-height: 1.6;
  vertical-align: top;
}
.article-table th {
  background: var(--gray-50);
  color: var(--navy);
  font-weight: 600;
}
.article-table td { color: var(--gray-600); }
/* Tables are the one element that cannot reflow on a narrow phone, so
   let the container scroll rather than forcing a horizontal page scroll. */
.article-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Amortization schedule + chart ----------
   Used only by /amortization-calculator/. The schedule itself reuses
   .article-table and .article-table-wrap above, so these rules add only
   what that page genuinely needs: an empty-state row, tighter cells for a
   six-column table, and the inline-SVG chart frame. Every colour, radius
   and spacing value is an existing token — no new design language. */
.amort-table { font-size: 12.5px; }
.amort-table th,
.amort-table td { padding: 7px 9px; white-space: nowrap; }
.amort-table tbody th { font-weight: 600; text-align: right; }
.sched-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}
.amort-chart-wrap {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 10px 8px;
  margin: 4px 0 10px;
}
/* min-height matches the SVG's height attribute so the card does not
   collapse (and then jump) before the chart is drawn. */
.amort-chart { width: 100%; min-height: 260px; }
.amort-chart svg { display: block; width: 100%; height: auto; }
.amort-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 6px 2px 2px;
}
.amort-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--gray-600);
}
.amort-swatch { width: 16px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.amort-swatch.sw-interest { background: #e8833a; }
.amort-swatch.sw-principal { background: #2bb673; }

/* ---------- Down-payment quick-pick buttons + table marker ----------
   Used only by /down-payment-calculator/. Reuses existing tokens, radii
   and colours — no new design language, and nothing else is affected. */
.dp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.dp-quick-btn {
  flex: 1 1 auto;
  min-width: 58px;
  padding: 7px 10px;
  font: 600 12.5px inherit;
  color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.dp-quick-btn:hover { border-color: var(--lime); color: var(--lime-dark); }
.dp-quick-btn.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: #fff;
}
.dp-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}

/* ---------- Retirement table marker + empty state ----------
   Used only by /retirement-calculator/. Mirrors the .dp-yours marker and
   the .sched-empty row above so the two tables look identical; no new
   tokens, colours or spacing values are introduced. */
.ret-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.ret-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- 401(k) table marker + empty state ----------
   Used only by /401k-calculator/. Identical to the .ret-yours and
   .ret-empty rules above so the tables match; no new tokens. */
.k401-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.k401-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Roth IRA table marker + empty state ----------
   Used only by /roth-ira-calculator/. Identical to the .k401-yours and
   .k401-empty rules above so the tables match; no new tokens. */
.roth-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.roth-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Social Security table marker + three-up benefit row ----------
   Used only by /social-security-calculator/. .ssa-yours matches the
   .roth-yours marker above. .ssa-ages is a simple three-column strip
   built from existing tokens — no new colours or radii. */
.ssa-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.ssa-ages {
  display: flex;
  gap: 8px;
  margin: 10px 0 2px;
}
.ssa-age-box {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 10px 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.ssa-age-box .ssa-age-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 3px;
}
.ssa-age-box .ssa-age-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700);
}
.ssa-age-box.is-full {
  border-color: var(--lime);
  background: #f3fbf7;
}
.ssa-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Savings mode switch + table empty state ----------
   Used only by /savings-calculator/. The two radios are visually hidden
   and their labels styled as a segmented control, reusing the same
   tokens, radius and lime accent as .dp-quick-btn elsewhere in this file
   so nothing new enters the design language. */
.sav-modes {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}
.sav-modes input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.sav-mode-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sav-mode-label:hover { border-color: var(--lime); color: var(--lime-dark); }
.sav-modes input[type="radio"]:checked + .sav-mode-label {
  background: var(--lime);
  border-color: var(--lime);
  color: #fff;
}
/* Keyboard users must still see focus even though the input is hidden. */
.sav-modes input[type="radio"]:focus-visible + .sav-mode-label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Marks the "this page" row in the comparison table, matching
   .roth-yours / .ssa-yours on their own pages. */
.sav-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.sav-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- CD calculator markers ----------
   Used only by /cd-calculator/. .cd-yours matches .sav-yours / .ssa-yours
   above; .cd-penalty-box reuses the .total-loan-box spacing and radius
   with the warning tint already used by .article-callout, so no new
   colour enters the design language. */
.cd-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.cd-penalty-box {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fdf1e7;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 10px;
}
.cd-penalty-box .cd-pen-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  color: #b8651b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cd-penalty-box .cd-pen-label {
  font-size: 12px;
  color: #8a5420;
  font-weight: 500;
}
.cd-penalty-box .cd-pen-value {
  font-size: 16px;
  font-weight: 800;
  color: #b8651b;
  line-height: 1.2;
}
.cd-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Inflation calculator markers ----------
   Used only by /inflation-calculator/. .inf-modes reuses the exact
   segmented-control pattern already defined for .sav-modes above, and
   .inf-power-box reuses the .total-loan-box geometry with the blue
   token, so nothing new enters the design language. */
.inf-modes {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}
.inf-modes input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.inf-mode-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.inf-mode-label:hover { border-color: var(--lime); color: var(--lime-dark); }
.inf-modes input[type="radio"]:checked + .inf-mode-label {
  background: var(--lime);
  border-color: var(--lime);
  color: #fff;
}
/* Keyboard users must still see focus even though the input is hidden. */
.inf-modes input[type="radio"]:focus-visible + .inf-mode-label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.inf-yours {
  font-weight: 600;
  font-size: 11px;
  color: var(--lime-dark);
  white-space: nowrap;
}
.inf-power-box {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #e8f1fb;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 10px;
}
.inf-power-box .inf-pow-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.inf-power-box .inf-pow-label {
  font-size: 12px;
  color: #2c5a8a;
  font-weight: 500;
}
.inf-power-box .inf-pow-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
}
.inf-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Budget calculator ----------
   Used only by /budget-calculator/. The preset buttons reuse the same
   pill geometry and lime accent as .sav-mode-label above; the three-up
   bucket strip reuses the .ssa-ages pattern. No new tokens. */
.bud-presets {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bud-preset {
  flex: 1 1 0;
  min-width: 86px;
  text-align: center;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bud-preset:hover { border-color: var(--lime); color: var(--lime-dark); }
.bud-preset.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: #fff;
}
.bud-preset:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.bud-buckets {
  display: flex;
  gap: 8px;
  margin: 10px 0 2px;
}
.bud-bucket {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 10px 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.bud-bucket .bud-bucket-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 3px;
}
.bud-bucket .bud-bucket-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700);
}
.bud-bucket .bud-bucket-share {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
/* Shown only when the three percentages do not total 100. */
.bud-split-warning {
  margin: 10px 0 0;
  padding: 9px 11px;
  background: #fdf1e7;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #8a5420;
}
/* Scoped to a table cell so these beat `.article-table td`, which sets a
   grey colour at the same-or-higher specificity (0,0,1,1 vs 0,0,1,0). */
.article-table td.bud-ok   { color: var(--lime-dark); font-weight: 600; }
.article-table td.bud-over { color: #b8651b; font-weight: 600; }
/* .bd-dot is sized with width/height, which an inline <span> ignores. In
   the results card its parent is a flex container so the dot is
   blockified automatically; inside a table cell it is not, so it would
   render at zero size and vanish. */
.article-table .bd-dot {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.bud-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Net worth calculator ----------
   Used only by /net-worth-calculator/. The two-up totals strip reuses
   the .bud-buckets geometry; .nw-group-head labels the asset and
   liability column groups inside the form. No new tokens. */
.nw-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.nw-group-head:first-child { margin-top: 0; }
.nw-group-head i { color: var(--lime-dark); }
.nw-group-head.is-debt i { color: #b8651b; }
.nw-totals {
  display: flex;
  gap: 8px;
  margin: 10px 0 2px;
}
.nw-total {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 10px 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.nw-total .nw-total-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 3px;
}
.nw-total .nw-total-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700);
}
.nw-empty {
  text-align: center !important;
  white-space: normal !important;
  padding: 22px 14px !important;
  color: var(--gray-500);
  font-size: 13px;
}

/* ---------- Key-takeaways list ---------- */
.article-takeaways {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 15px 17px;
}
.article-takeaways ul { list-style: none; padding-left: 0; margin: 0; }
.article-takeaways li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 8px;
}
.article-takeaways li:last-child { margin-bottom: 0; }
.article-takeaways li i { color: var(--lime); font-size: 12px; margin-top: 4px; flex-shrink: 0; }

/* ---------- Inline call-to-action to a calculator ---------- */
.article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 16px 0;
}
.article-cta h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.article-cta p { font-size: 13px; color: var(--gray-600); margin: 0; }
.article-cta .article-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  /* An <a> inherits the body's 1.58 line-height, which would make this
     taller than the site's other buttons. */
  line-height: normal;
  border-radius: 8px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.article-cta .article-cta-btn:hover { background: var(--blue-dark); }

/* ---------- "Read next" cards at the end ---------- */
.article-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
@media (max-width: 760px) { .article-more { grid-template-columns: 1fr; } }

.article-more-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  padding: 13px 14px;
  transition: border-color 0.2s, background 0.2s;
}
.article-more-card:hover { background: #fff; border-color: var(--blue); }
.article-more-card .am-ico {
  width: 33px;
  height: 33px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.article-more-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
  line-height: 1.4;
}
.article-more-card span span {
  display: block;
  font-size: 11.5px;
  color: var(--gray-500);
  line-height: 1.55;
}

/* ---------- Mid-article 728x90 slot ----------
   The second leaderboard sits INSIDE the prose .content-card, between two
   .article-section blocks. Those sections are spaced by
   `.article-section + .article-section { margin-top: 26px }`, but that
   adjacent-sibling rule no longer matches once an ad element separates
   them — so the ad supplies the breathing room itself, and a hairline
   rule above it makes clear the advert is not part of the article text.
   Scoped to .article-body, so no other page is affected. */
.mid-article-ad {
  margin: 28px 0;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}