/**
 * The monthly-budget calculator. Reads only from tokens.css.
 *
 * A page of money, so it is set like one: tabular figures throughout, and the
 * two numbers that matter given a column of their own rather than buried in a
 * sentence.
 */

.v2-af-top {
  background: var(--surface-warm);
  border-block-end: 1px solid var(--rule);
  padding-block: var(--s-6);
}
.v2-af-top h1 { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.05; margin-block: var(--s-3) 0; }
.v2-af-top .v2-lede { margin-block: var(--s-3) var(--s-5); max-width: 62ch; font-size: var(--t-md); }

.v2-af-form {
  display: grid; gap: var(--s-4); align-items: start;
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
@media (min-width: 780px) { .v2-af-form { grid-template-columns: repeat(4, minmax(140px, 1fr)); } }
.v2-af-field { display: grid; gap: var(--s-2); min-width: 0; }
.v2-af-field > label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-dim);
}
.v2-af-input { display: flex; }
.v2-af-input > span {
  display: grid; place-items: center; padding-inline: var(--s-3);
  border: 1px solid var(--rule); border-inline-end: 0;
  border-start-start-radius: var(--radius); border-end-start-radius: var(--radius);
  background: var(--surface-warm); color: var(--ink-dim); font-size: var(--t-sm);
}
.v2-af-input > input {
  flex: 1; min-width: 0; min-height: 44px; padding-inline: var(--s-3);
  border: 1px solid var(--rule);
  border-start-end-radius: var(--radius); border-end-end-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-base); font-variant-numeric: tabular-nums;
}
.v2-af-field.is-primary .v2-af-input > input { font-size: var(--t-lg); font-weight: 600; }
.v2-af-field select {
  min-height: 44px; width: 100%; padding-inline: var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: var(--t-sm);
}
.v2-af-input > input:focus-visible, .v2-af-field select:focus-visible { border-color: var(--accent); }
.v2-af-hint { font-size: var(--t-xs); color: var(--ink-dim); line-height: 1.5; }
.v2-af-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: end; }
@media (min-width: 780px) { .v2-af-actions { grid-column: 1 / -1; } }

.v2-af-body { padding-block: var(--s-6) var(--s-16); }
.v2-af-count {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-block-end: var(--s-3); border-block-end: 1px solid var(--rule);
}
.v2-af-count p { font-size: var(--t-base); color: var(--ink-body); }
.v2-af-count b { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); }
.v2-af-count span { color: var(--ink-dim); }

.v2-af-list { display: grid; }
.v2-af-list.is-muted { opacity: .88; }
.v2-af-row {
  display: grid; gap: var(--s-3); padding-block: var(--s-4);
  border-block-end: 1px solid var(--rule);
}
@media (min-width: 660px) {
  .v2-af-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); align-items: start; }
  .v2-af-why { grid-column: 1 / -1; }
}
.v2-af-what { min-width: 0; display: grid; gap: 3px; }
.v2-af-what h3 { font-size: var(--t-base); font-weight: 600; line-height: 1.35; }
.v2-af-what h3 a { color: var(--ink); }
.v2-af-what h3 a:hover { color: var(--accent); text-decoration: none; }
.v2-af-where { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: var(--t-sm); }
.v2-af-code {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px var(--s-2); border-radius: 2px;
  background: var(--surface-warm); color: var(--ink-dim);
}
.v2-af-facts, .v2-af-when { font-size: var(--t-xs); color: var(--ink-dim); }
.v2-af-when { color: var(--accent); }

.v2-af-terms { display: flex; gap: var(--s-6); margin: 0; }
.v2-af-terms > div { display: grid; gap: 2px; }
.v2-af-terms dt {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.v2-af-terms dd { margin: 0; }
/**
 * A figure and a note are set differently on purpose. It is what stops an
 * advance quoted as a percentage from ever looking like a price.
 */
.v2-af-terms dd.is-figure { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); white-space: nowrap; }
.v2-af-terms dd.is-note { font-size: var(--t-sm); color: var(--ink-dim); }

.v2-af-why {
  display: grid; gap: 3px; padding: var(--s-2) var(--s-3);
  border-inline-start: 2px solid var(--live);
  background: var(--surface-warm); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-xs); line-height: 1.5; color: var(--ink-body);
}
.v2-af-unknown { margin-block-start: var(--s-10); }
.v2-af-unknown h2 { font-family: var(--font-display); font-size: var(--t-xl); margin-block-end: var(--s-2); }
.v2-af-unknown-lede { font-size: var(--t-sm); color: var(--ink-dim); max-width: 64ch; margin-block-end: var(--s-3); }
.v2-af-disclaimer { margin-block-start: var(--s-8); font-size: var(--t-xs); color: var(--ink-dim); max-width: 74ch; line-height: 1.6; }

/* Page wrapper. */
.v2-af { display: block; }