/* ============================================================================
   Calculator page — page-specific rules only.
   Base layer (tokens, container, hero, .calculator, .data-table, footer,
   reveal/motion) is the shared ../../assets/css/style.css, loaded first and
   used verbatim — see DESIGN.md. Everything below is additive, using the
   same tokens/BEM conventions.
   ========================================================================== */

/* ---------- Allocation breakdown (inside .calculator__result) ---------- */
.allocation {
  position: relative;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border-strong);
}
.allocation__title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 var(--s2);
}
.allocation__note {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-muted);            /* on champagne: 6.0:1, per DESIGN.md */
  margin: 0 0 var(--s4);
}
#allocation-table thead th { font-size: 0.875rem; }
#allocation-table td:nth-child(2),
#allocation-table th:nth-child(2) { white-space: nowrap; }
#allocation-table td:nth-child(3),
#allocation-table th:nth-child(3) {
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* ---------- Sources list (mirrors seating-planner's .contrast-list pattern) ---------- */
.contrast-list {
  padding-left: 1.3em;
  color: var(--ink);
}
.contrast-list li { margin-bottom: var(--s3); }

/* ---------- FAQ (mirrors seating-planner's unstyled-.faq → styled .faq__item pattern) ---------- */
.faq__item {
  border-bottom: 1px solid var(--border);
  padding: var(--s4) 0;
}
.faq__item:last-child { border-bottom: none; }
.faq__question {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 600;
  margin: 0 0 var(--s2);
  color: var(--heading);
}
.faq__answer {
  margin: 0;
  color: var(--ink-muted);
}