/* Page-specific styles for intestacy-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The page uses the shared
   two-column layout (.layout-split): the form left, the results right. */

  /* ---------- intestacy-calculator (scoped) ---------- */

  /* The line above the relatives' boxes saying when they matter. */
  .calc-shell p.hint.fold-note { display: block; margin: 0 0 12px; }

  /* Who gets what: a short note under each name, in the table. */
  .calc-shell .who-table .who-note { display: block; font-weight: 400; font-size: var(--text-fine); color: var(--ink-soft); margin-top: 2px; }
  .calc-shell .who-table td { width: 7em; white-space: nowrap; }

  /* The doughnut's key, one colour per group of relatives. */
  .calc-shell .legend-dot.k-spouse { background: var(--brand); }
  .calc-shell .legend-dot.k-children { background: var(--accent); }
  .calc-shell .legend-dot.k-grand { background: var(--warn); }
  .calc-shell .legend-dot.k-parents { background: var(--growth); }
  .calc-shell .legend-dot.k-siblings { background: var(--loan); }
  .calc-shell .legend-dot.k-nephews { background: var(--base); }
  .calc-shell .legend-dot.k-crown { background: var(--danger); }