/* Figures for the smooth-budgeting article. The site is dark-only, so the
   Figma frames (light iOS) are re-keyed onto a dark viz surface. Accent is the
   app's green, lifted a step so it holds up against #141414. */

#article-content .incomeviz,
#article-content .incomeviz p,
#article-content .incomeviz li,
#article-content .calc,
#article-content .calc p,
#article-content .calc li,
#article-content .stackbar,
#article-content .stackbar p,
#article-content .stackbar li {
  font-family: var(--article-sans);
  letter-spacing: 0;
}

.incomeviz,
.calc,
.stackbar {
  --viz-surface: #141414;
  --viz-card: #1d1d1b;
  --viz-line: #2c2c29;
  /* Label ladder from the app's Colors.xcassets, dark appearance:
     Label/Primary #fff, Label/Secondary #bdbdc7. --viz-dim keeps the app's
     cool tone at a brightness the calculator's supporting text still needs. */
  --viz-label: #ffffff;
  --viz-muted: #bdbdc7;
  --viz-dim: #8a8a94;
  --viz-accent: #8d9c7b;
  --viz-bar: #c7c7c7;
  background: var(--viz-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
}

#article-content .viz-title {
  color: var(--viz-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

/* --- take-home split into committed / savings / spending ---
   The app's Stacked Bar (light iOS) re-keyed onto the dark viz surface:
   chart-secondary, labels/tertiary and accent become bar, dim and accent. */

#article-content .stackbar-total {
  color: var(--viz-label);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
}

.stackbar-track {
  display: grid;
  gap: 2px;
  height: 28px;
}

.stackbar-seg {
  border-radius: 4px;
}

/* Two classes deep so these win over the shared .viz-swatch fill below. */
.stackbar-committed,
.viz-swatch.stackbar-committed { background: var(--viz-bar); }
.stackbar-saving,
.viz-swatch.stackbar-saving { background: var(--viz-dim); }
.stackbar-spending,
.viz-swatch.stackbar-spending { background: var(--viz-accent); }

#article-content .stackbar-keys {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

#article-content .stackbar-keys li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--viz-label);
  border-bottom: 1px solid var(--viz-line);
}

#article-content .stackbar-keys li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.stackbar-name {
  flex: 1;
  padding-right: 12px;
}

.stackbar-eg {
  color: var(--viz-dim);
  font-size: 0.82rem;
}

.stackbar-value {
  font-variant-numeric: tabular-nums;
  color: var(--viz-muted);
}

.stackbar-value-lead {
  color: var(--viz-accent);
  font-weight: 600;
}

/* --- income bars vs. steady line --- */

.incomeviz-plot {
  position: relative;
  height: 168px;
}

#article-content .incomeviz-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 6px;
}

#article-content .incomeviz-bars li {
  margin: 0;
  height: var(--h);
  background: var(--viz-bar);
  border-radius: 3px 3px 0 0;
}

/* The budget line sits over the bars — it is the point of the figure, so it
   wins the z-order rather than hiding behind them. */
.incomeviz-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px solid var(--viz-accent);
  z-index: 1;
}

.incomeviz-line-lean {
  border-top-style: dashed;
  border-top-color: var(--viz-dim);
}

.incomeviz-tag {
  position: absolute;
  right: 0;
  bottom: 5px;
  background: var(--viz-surface);
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--viz-accent);
  white-space: nowrap;
}

.incomeviz-line-lean .incomeviz-tag {
  color: var(--viz-dim);
  bottom: auto;
  top: 5px;
}

#article-content .incomeviz-months {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}

#article-content .incomeviz-months li {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--viz-muted);
}

#article-content .viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--viz-label);
}

.viz-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.viz-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--viz-bar);
}

.viz-swatch-line {
  width: 16px;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 2px solid var(--viz-accent);
}

.viz-swatch-dash {
  border-top-style: dashed;
  border-top-color: var(--viz-dim);
}

/* Each shortfall leads with its claim, then the explanation underneath. Items
   need more air between them now that each one is two blocks tall. */
#article-content .shortfalls li {
  margin-bottom: 18px;
}

#article-content .shortfalls li strong {
  display: block;
  margin-bottom: 2px;
}

/* --- the calculator --- */

.calc-block + .calc-block {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--viz-line);
}

#article-content .calc-label {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

#article-content .calc-sub {
  color: var(--viz-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 5px 0 0;
}

#article-content .calc-hint {
  color: var(--viz-dim);
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* Every field keeps a visible box at rest — the calculator only works if the
   reader can tell at a glance that it's a form and not a rendered figure. */
.calc input[type="text"] {
  font-family: var(--article-sans);
  background: #101010;
  border: 1px solid var(--viz-line);
  border-radius: 7px;
  color: var(--text);
  padding: 5px 8px;
  min-width: 0;
}

.calc input[type="text"]:hover {
  border-color: var(--viz-dim);
}

.calc input:focus {
  outline: none;
  border-color: var(--viz-accent);
}

/* Boxes sit on a shared bottom edge — the amount is much taller than the
   switches, and baselines would leave the switches floating mid-field. */
.calc-money {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Both switches wrap together onto a second line rather than the amount losing
   digits when the row is too narrow for all three controls. */
.calc-switches {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
}

/* The box goes round the currency symbol and the amount together, so the whole
   thing reads as one field rather than a stray $ next to an input. */
.calc-money-field {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex: none;
  background: #101010;
  border: 1px solid var(--viz-line);
  border-radius: 9px;
  padding: 0px 16px;
}

.calc-money-field:hover {
  border-color: var(--viz-dim);
}

.calc-money-field:focus-within {
  border-color: var(--viz-accent);
}

.calc-money .calc-currency {
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 700;
}

/* Scoped past `.calc input[type="text"]` above, which would otherwise win */
.calc .calc-money input,
.calc .calc-money input:hover,
.calc .calc-money input:focus {
  font-size: 1.7rem;
  font-weight: 700;
  /* Tracks the digits where supported, so the $ never drifts away from the
     number; the max-width keeps it sane where it isn't. */
  field-sizing: content;
  min-width: 2ch;
  max-width: 8ch;
  padding: 2px 0;
  text-align: right;
  background: none;
  border-color: transparent;
}

/* The period switch is a native <select> under a custom caret — the menu,
   keyboard and mobile picker come free, and only the closed state needs
   styling. It carries the same box as the inputs so it reads as changeable. */
.calc-period {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.calc-period::after {
  content: "\25BE";
  position: absolute;
  right: 9px;
  color: var(--viz-dim);
  font-size: 0.75rem;
  pointer-events: none;
}

.calc-period select {
  font-family: var(--article-sans);
  appearance: none;
  -webkit-appearance: none;
  background: #101010;
  border: 1px solid var(--viz-line);
  color: var(--viz-muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 7px;
  /* Renders the open menu dark to match the card it drops out of */
  color-scheme: dark;
}

.calc-period select:hover {
  color: var(--text);
  border-color: var(--viz-dim);
}

.calc-period select:focus-visible {
  outline: 1px solid var(--viz-dim);
  outline-offset: 1px;
}

.calc-tax {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--viz-line);
}

/* No remove button on this row — it isn't one of the reader's items */
.calc-taxrow .calc-row-head {
  grid-template-columns: 1fr max-content;
}

.row-name-static {
  border: 1px solid transparent;
  padding: 5px 8px;
}

/* --- out-of-scope rows --- */

#article-content .calc-rows {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#article-content .calc-rows li {
  margin: 0;
  background: var(--viz-card);
  border: 1px solid var(--viz-line);
  border-radius: 10px;
  padding: 12px 14px 14px;
}

.calc-row-head {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  align-items: center;
  gap: 8px;
}

.calc-row-head .row-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.calc-row-head .row-amount {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: right;
  width: 8ch;
}

.row-remove {
  background: none;
  border: none;
  color: var(--viz-dim);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 2px;
  cursor: pointer;
}

.row-remove:hover {
  color: var(--text);
}

.row-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  margin: 16px 0 0;
  background: var(--viz-line);
  cursor: pointer;
}

.row-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text);
  border: none;
}

.row-slider::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text);
  border: none;
}

.row-scale {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--viz-dim);
}

.row-scale .row-pct {
  text-align: center;
  color: var(--viz-accent);
}

.calc-add {
  font-family: var(--article-sans);
  background: none;
  border: 1px dashed var(--viz-line);
  border-radius: 10px;
  color: var(--viz-muted);
  font-size: 0.85rem;
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  cursor: pointer;
}

.calc-add:hover {
  border-color: var(--viz-accent);
  color: var(--text);
}

/* --- result --- */

.calc-result {
  text-align: center;
}

#article-content .calc-result-value {
  color: var(--text);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}

#article-content .calc-result-value .calc-result-per {
  font-size: 1rem;
  font-weight: 400;
  color: var(--viz-muted);
  letter-spacing: 0;
}

#article-content .calc-result-year {
  color: var(--viz-dim);
  font-size: 0.85rem;
  margin: 8px 0 0;
}

#article-content .calc-breakdown {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  background: var(--viz-card);
  border: 1px solid var(--viz-line);
  border-radius: 10px;
  text-align: left;
}

#article-content .calc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--viz-muted);
  border-bottom: 1px solid var(--viz-line);
}

#article-content .calc-breakdown li:last-child {
  border-bottom: none;
  color: var(--text);
  font-weight: 700;
}

#article-content .calc-breakdown li:last-child .calc-breakdown-value {
  color: var(--viz-accent);
}

#article-content .viz-caption,
#article-content .calc-note {
  color: var(--viz-dim);
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 16px 0 0;
  text-align: left;
}

@media (max-width: 560px) {
  .incomeviz,
  .calc,
  .stackbar {
    padding: 18px 16px 14px;
  }
  .incomeviz-plot {
    height: 130px;
  }
  #article-content .incomeviz-bars,
  #article-content .incomeviz-months {
    gap: 3px;
  }
  #article-content .incomeviz-months li {
    font-size: 0.64rem;
  }
  /* Name gets the full first line; amount and remove share the second */
  .calc-row-head {
    grid-template-columns: 1fr max-content;
  }
  .calc-row-head .row-name {
    grid-column: 1 / -1;
  }
  .calc-row-head .row-amount {
    justify-self: start;
    text-align: left;
  }
  /* The tax row has no remove button and a short fixed label — it still fits
     on one line, so it keeps the two-column head. */
  .calc-taxrow .calc-row-head .row-name {
    grid-column: auto;
  }
  .calc-taxrow .calc-row-head .row-amount {
    justify-self: end;
    text-align: right;
  }
  #article-content .calc-result-value {
    font-size: 1.9rem;
  }
}