/* Practice management guides and calculators. Builds on succession.css (loaded first). Works at 375px. */

.prac .kicker { margin-bottom: 8px; }

/* Calculator form */
.prac-form { max-width: 820px; }
.prac-form textarea { width: 100%; font-family: var(--sans); line-height: 1.5; }
.prac-form select { width: 100%; max-width: 100%; }
.prac-form .notice ul { margin: 8px 0 0; padding-left: 20px; }
.prac-fieldset { margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 16px; }
.prac-fieldset legend { padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Results */
.prac-result { max-width: 820px; padding-top: 32px; border-top: 1px solid var(--ink); }
.prac-big { margin: 0; font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.prac-big span { font-weight: 400; color: var(--muted); font-size: 0.5em; }
.prac-sentence { max-width: 680px; margin: 8px 0 12px; font-size: 18px; color: var(--ink-2); }
.prac-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 32px; margin: 0 0 16px; }
.prac-totals > div { display: grid; gap: 4px; align-content: start; }
.prac-totals .prac-big { font-size: 38px; }
.prac-total-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.prac-total-note { font-size: 14px; color: var(--ink-3); }

.prac-table { width: 100%; margin: 12px 0 28px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.prac-table caption { padding: 0 0 8px; text-align: left; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.prac-table th, .prac-table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-3); }
.prac-table thead th { border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.prac-table tbody th, .prac-table tfoot th { font-weight: 600; color: var(--ink); }
.prac-table tfoot th, .prac-table tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; color: var(--ink); }
.prac-table .prac-current th, .prac-table .prac-current td { background: var(--accent-tint); }
.succ-table-wrap { overflow-x: auto; }

.prac-reference ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.prac-reference li { margin: 8px 0; }
.prac-reference a[href^="#src-"] { font-size: 0.8em; text-decoration: none; vertical-align: 0.15em; }

@media (max-width: 640px) {
  .prac-big { font-size: 40px; }
  .prac-totals .prac-big { font-size: 32px; }
  .prac-table { display: block; max-width: 100%; overflow-x: auto; font-size: 14px; }
  .prac-table th, .prac-table td { padding-right: 10px; }
  .prac-fieldset { padding: 14px 14px 16px; }
}