/* ============================================================================
   ToolBench — advanced-emi.css
   Advanced EMI Calculator only. Loaded via the registry's 'css' key
   alongside calc.css, which already supplies .field/.fieldgrid/.inp/.result*/
   .panel/.opt/.disclaimer — none of that is redeclared here.

   Tokens come from site.css; .card/.btn/.chips/.tabs/.seg come from tools.css.
   All CSS for this site lives in assets/css/ — no <style> blocks, no
   style="" attributes.
   ============================================================================ */

/* ------------------------------------------------------------- amortization -- */
.amort-table{width:100%;margin:16px 0 0;border-collapse:collapse;font-size:14px}
.amort-table th,.amort-table td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--paper-line)}
.amort-table th:first-child,.amort-table td:first-child{text-align:left}
.amort-table th{
  font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-light);background:var(--paper);
}
.amort-year-row{cursor:pointer;background:#fff}
.amort-year-row:hover{background:var(--paper)}
.amort-year-row td{font-weight:600;color:var(--ink)}
.amort-year-row .twig{margin-right:6px;color:var(--blueprint)}
.amort-month-row td{font:400 13px/1.5 var(--mono);color:var(--slate);background:var(--paper)}
.amort-month-row td:first-child{padding-left:28px}
.amort-scroll{overflow-x:auto}
.amort-note{margin:10px 0 0;font-size:12.5px;color:var(--slate-light)}

/* ------------------------------------------------------------------- chart --- */
.chart-block{margin:18px 0 0}
.chart-svg{display:block;width:100%;height:auto;max-height:280px}
.chart-bar-principal{fill:var(--success)}
.chart-bar-interest{fill:var(--amber)}
.chart-balance-line{fill:none;stroke:var(--blueprint-light);stroke-width:2}
.chart-year-label{font:400 9px var(--mono);fill:var(--slate-light);text-anchor:middle}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--slate)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-swatch{display:inline-block;width:11px;height:11px;border-radius:2px}
.chart-swatch.is-principal{background:var(--success)}
.chart-swatch.is-interest{background:var(--amber)}
.chart-swatch.is-balance{background:var(--blueprint-light);border-radius:50%;width:9px;height:9px}

/* -------------------------------------------------------------- prepayment --- */
.prepay-grid{display:grid;gap:12px 16px;grid-template-columns:1fr;margin:0 0 6px}
@media (min-width:576px){.prepay-grid{grid-template-columns:1fr 1fr}}
.compare-cards{display:grid;gap:1px;margin:16px 0 0;background:rgba(127,209,224,.15);border-radius:var(--radius);overflow:hidden}
@media (min-width:576px){.compare-cards{grid-template-columns:1fr 1fr}}
.compare-card{padding:16px;background:var(--ink-soft)}
.compare-card h3{margin:0 0 10px;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blueprint-light)}
.compare-card.is-before dd{color:var(--slate-light-ink)}
.compare-card.is-after h3{color:var(--amber-hi)}
.compare-stat{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(127,209,224,.12);font-size:13.5px}
.compare-stat:last-child{border-bottom:0}
.compare-stat dt{margin:0;color:var(--slate-light-ink)}
.compare-stat dd{margin:0;font:500 14px/1.4 var(--display);color:#fff}
.savings-banner{
  margin:16px 0 0;padding:14px 16px;text-align:center;
  background:rgba(76,175,125,.09);border:1px solid rgba(76,175,125,.4);border-radius:var(--radius);
}
.savings-banner b{display:block;font:700 22px/1.2 var(--display);color:var(--success-ink)}
.savings-banner span{font-size:13px;color:var(--slate)}

/* --------------------------------------------------------------- comparison -- */
.scenario-card{
  margin:0 0 12px;padding:16px;background:#fff;
  border:1px solid var(--paper-line);border-radius:var(--radius);position:relative;
}
.scenario-card.is-error{border-color:rgba(192,57,43,.4)}
.scenario-remove{position:absolute;top:10px;right:10px}
.scenario-result{
  margin:12px 0 0;padding:12px;background:var(--paper);border-radius:var(--radius);
  display:grid;gap:8px;grid-template-columns:repeat(3,1fr);text-align:center;
}
.scenario-result div b{display:block;font:600 16px/1.2 var(--display);color:var(--ink)}
.scenario-result div span{display:block;margin-top:2px;font:400 10px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--slate-light)}
.scenario-best{outline:2px solid var(--success);outline-offset:2px}

/* ------------------------------------------------------------------- print --- */
@media print{
  .nav,footer,.faq,.related,.privacy,.tabs,.jbar,.calc-actions,.disclaimer,
  .btn,.scenario-remove,.crumb{display:none !important}
  .card{border:0;padding:0}
  .amort-table{font-size:12px}
  .chart-svg{max-height:220px}
}