/* Figures and article-specific prose styles (.verdict) for the zero-based vs.
   smooth article. Same dark viz surface as the smooth-budgeting figures with a
   neutral gray ladder, restated here so the page doesn't depend on that
   article's stylesheet.

   Two row-labelled tables: .compare-grid puts the methods in columns,
   .buckets-grid puts them in rows. */

#article-content .compare,
#article-content .compare p,
#article-content .compare div {
  font-family: var(--article-sans);
  letter-spacing: 0;
}

.compare {
  --viz-surface: #141414;
  --viz-line: #2a2a2a;
  --viz-label: #ffffff;
  --viz-muted: #d9d9d9;
  --viz-dim: #9a9a9a;
  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;
}

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

.compare-grid {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) 1.15fr 1.15fr;
}

/* Row rules run unbroken across the grid, so column spacing is padding, not gap */
.compare-grid > div:not(:nth-child(3n)) {
  padding-right: 18px;
}

/* The methods are the columns here, so the heads carry the white label
   treatment and the row labels step back to gray */
#article-content .compare-head {
  color: var(--viz-label);
  font-size: 0.9rem;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--viz-line);
}

#article-content .compare-label,
#article-content .compare-cell {
  font-size: 0.9rem;
  line-height: 1.4;
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--viz-line);
}

#article-content .compare-label {
  color: var(--viz-dim);
  font-weight: 500;
}

#article-content .compare-cell {
  color: var(--viz-muted);
}

/* Last row of three */
#article-content .compare-grid > :nth-last-child(-n + 3) {
  border-bottom: 0;
}

@media (max-width: 620px) {
  .compare {
    padding: 18px 16px 14px;
  }

  /* Three columns stop fitting here, so each row becomes a block and the
     column headers move onto the cells that need them. Children run 3 heads,
     then label/zero-based/smooth per row, which is what the nth-child math
     below is counting. */
  .compare-grid {
    grid-template-columns: 1fr;
  }

  #article-content .compare-head {
    display: none;
  }

  #article-content .compare-label {
    border-bottom: 0;
    padding: 18px 0 0;
  }

  /* The first row's label — children 1-3 are the hidden headers */
  #article-content .compare-grid > div:nth-child(4) {
    padding-top: 0;
  }

  #article-content .compare-cell {
    border-bottom: 0;
    padding: 8px 0 0;
  }

  .compare-grid > div:nth-child(3n + 2)::before,
  .compare-grid > div:nth-child(3n)::before {
    display: block;
    color: var(--viz-label);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 3px;
  }

  .compare-grid > div:nth-child(3n + 2)::before {
    content: "Zero-based";
  }

  .compare-grid > div:nth-child(3n)::before {
    content: "Smooth";
  }

  /* Rule between rows, not between a row's own two cells */
  #article-content .compare-grid > div:nth-child(3n) {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--viz-line);
  }

  #article-content .compare-grid > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* --- where each expense lives ---
   Transposed from the comparison above: methods are the rows, the three
   containers are the columns, and the cells hold examples. */

#article-content .buckets-grid div {
  font-family: var(--article-sans);
  letter-spacing: 0;
}

.buckets-grid {
  display: grid;
  grid-template-columns: minmax(84px, 0.7fr) 1fr 1fr 1.1fr;
}

.buckets-grid > div:not(:nth-child(4n)) {
  padding-right: 18px;
}

#article-content .buckets-head {
  color: var(--viz-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--viz-line);
}

#article-content .buckets-label,
#article-content .buckets-cell {
  font-size: 0.9rem;
  line-height: 1.4;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--viz-line);
}

#article-content .buckets-label {
  color: var(--viz-label);
  font-weight: 600;
}

#article-content .buckets-cell {
  color: var(--viz-muted);
}

#article-content .buckets-cell-empty {
  color: var(--viz-dim);
}

/* Last row of four */
#article-content .buckets-grid > :nth-last-child(-n + 4) {
  border-bottom: 0;
}

@media (max-width: 620px) {
  /* Each method becomes a block, with the column headers moved onto its cells.
     Children run 4 heads, then label/monthly/yearly/sinking per method. */
  .buckets-grid {
    grid-template-columns: 1fr;
  }

  #article-content .buckets-head {
    display: none;
  }

  #article-content .buckets-label {
    border-bottom: 0;
    padding: 20px 0 0;
  }

  /* The first method's label — children 1-4 are the hidden headers */
  #article-content .buckets-grid > div:nth-child(5) {
    padding-top: 0;
  }

  #article-content .buckets-cell {
    border-bottom: 0;
    padding: 9px 0 0;
  }

  .buckets-grid > div:nth-child(4n + 2)::before,
  .buckets-grid > div:nth-child(4n + 3)::before,
  .buckets-grid > div:nth-child(4n)::before {
    display: block;
    color: var(--viz-dim);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }

  .buckets-grid > div:nth-child(4n + 2)::before { content: "Monthly budget"; }
  .buckets-grid > div:nth-child(4n + 3)::before { content: "Yearly budget"; }
  .buckets-grid > div:nth-child(4n)::before { content: "Sinking fund"; }

  /* Rule between methods, not between one method's own cells */
  #article-content .buckets-grid > div:nth-child(4n) {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--viz-line);
  }

  #article-content .buckets-grid > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* --- situation verdicts ---
   The method each situation calls for, set off from the prose at the end of
   its paragraph. */

#article-content .verdict {
  font-family: var(--article-sans);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  white-space: nowrap;
  margin-left: 0.3em;
}

#article-content .verdict::before {
  content: "\2192\00a0";
}