/* /secret-santa-budget only. Loaded after styles/site.css; use its tokens. See docs/WRITERS.md. */

/* Table text is ours, not typed names: wrap at spaces only, never mid-word. */
.page-body table th, .page-body table td { overflow-wrap: normal; word-break: normal; }

.budgets th[scope="row"] { width: 22%; }
.budgets th:last-child, .budgets td:last-child { min-width: 6.5rem; }
.budgets td:last-child { font-weight: 600; }
.budgets td.none { color: var(--muted); font-style: italic; }
.source-note { margin: -0.25rem 0 0; }

/* The savings calculator: a card tag laid under the table. */
.calc {
  margin: 1.5rem 0 0.5rem; padding: 16px;
  background: var(--tag); color: var(--ink);
  border: 1px solid var(--tag-edge); border-radius: 6px;
  box-shadow: 0 1px 0 var(--edge), 0 14px 22px -18px var(--shadow);
}
@media (min-width: 560px) { .calc { padding: 20px 24px; } }
.calc-title { font: 600 1.3rem/1.2 var(--serif); margin: 0 0 0.75rem; color: var(--ink); }
.calc-fields { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 480px) { .calc-fields { grid-template-columns: 1fr 1.4fr; } }
.calc-money .select { flex: none; width: 4.6rem; }
.calc-money .select select { width: 100%; }
.calc input[aria-invalid="true"] { border-color: var(--warn-ink); }

.page-body .calc-table { margin: 0.5rem 0 0.75rem; background: var(--field); font-variant-numeric: tabular-nums; }
.calc-table thead td { border-bottom: 1px solid var(--line-strong); }
.calc-table th[scope="col"] { width: 36%; }
.calc-table td { font-weight: 600; }
.calc-table td:last-child { color: var(--accent); }
.calc-saved { font: 600 1.1rem/1.4 var(--serif); margin: 0 0 0.25rem; }
.calc .actions { margin-top: 0.5rem; }
.calc .help { margin: 0.75rem 0 0; }
a.button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .calc-table td:last-child { color: var(--link); }
}
:root[data-theme="dark"] .calc-table td:last-child { color: var(--link); }

/* With scripting off the calculator can't recalculate: its worked example
   (8 people at $25) still reads as a table, but the fields go. */
@media (scripting: none) {
  .calc-fields { display: none; }
}

@media print {
  .calc { box-shadow: none; border: 1px solid #999; }
  .calc .actions, .calc-fields { display: none; }
}