/* Billing */
.hero--intro { max-width: 640px; gap: 18px; }
.budget__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin: 0; }
.budget__percent { font-family: var(--serif); font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.budget__bar { position: relative; height: 4px; max-width: 640px; border-radius: 2px; background: var(--line); }
.budget__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--used, 0%); border-radius: 2px; background: var(--ink); }
.budget__note { max-width: 60ch; font-size: 14px; }

.invoices { overflow-x: auto; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.invoice-table th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; padding: 0 0 10px 16px; border-bottom: 1px solid var(--ink); }
.invoice-table th:first-child { padding-left: 0; }
.invoice-table td { padding: 18px 16px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.invoice-table td:first-child { padding-left: 0; }
.invoice-table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.invoice-table .invoice-table__amount { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-table__date { font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.invoice-table__period { color: var(--ink-soft); }
.invoice-table__actions .text-link + .text-link { margin-left: 16px; }
.invoice-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); white-space: nowrap; }
.invoice-status__dot { width: 7px; height: 7px; border-radius: 999px; box-sizing: border-box; flex: none; border: 1.5px solid var(--ink-faint); }
.invoice-status--paid .invoice-status__dot { border: 0; background: var(--green); }
.invoice-status--overdue { color: var(--red-ink); }
.invoice-status--overdue .invoice-status__dot { border: 0; background: var(--red); }
.invoices__terms { margin: 24px 0 0; }

/* On a phone, each invoice is two lines: date and amount, then period and status. */
@media (max-width: 560px) {
  .budget__percent { font-size: 44px; }
  .budget__bar { height: 6px; border-radius: 3px; }
  .invoice-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .invoice-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date amount" "period status" "period actions"; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .invoice-table td { padding: 0; border: 0; }
  .invoice-table__date { grid-area: date; font-family: var(--sans); font-size: 15px; font-weight: 500; }
  .invoice-table td.invoice-table__amount { grid-area: amount; font-size: 15px; }
  .invoice-table__period { grid-area: period; font-size: 13px; color: var(--ink-faint); }
  .invoice-table__status { grid-area: status; text-align: right; font-size: 13px; }
  .invoice-table td.invoice-table__actions { grid-area: actions; font-size: 13px; }
  .invoice-table__actions .text-link { font-size: 13px; }
}
.billing-details__note { margin: 16px 0 0; }
.billing-details__note:first-child { margin-top: 0; }