:root {
  --ink: #1c2430;
  --muted: #5a6572;
  --line: #d8dde3;
  --accent: #1d5fae;
  --bg-soft: #f4f6f8;
  --warn-bg: #fdf3e0;
  --warn-line: #e4c87f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  background: #fff;
}
main { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
header h1 { font-size: 1.7rem; margin: 0 0 6px; }
.sub { color: var(--muted); margin: 0 0 4px; max-width: 60ch; }
.asof { color: var(--muted); font-size: 0.85rem; margin: 0 0 20px; }

form { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: var(--bg-soft); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
label { display: block; font-size: 0.9rem; font-weight: 600; }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  font-size: 1rem; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
details { margin-top: 16px; }
summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; margin-bottom: 12px; }
.hint { color: var(--muted); font-size: 0.85rem; }
button {
  margin-top: 18px; padding: 11px 22px; font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--accent); border: 0; border-radius: 6px; cursor: pointer;
}
button:hover { background: #184c8c; }

#results { margin-top: 28px; }
.banner {
  border: 1px solid var(--warn-line); background: var(--warn-bg);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
}
.totals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.stat {
  flex: 1 1 110px; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; background: #fff; text-align: center;
}
.stat-num { display: block; font-size: 1.3rem; font-weight: 700; }
.stat-label { display: block; font-size: 0.78rem; color: var(--muted); }
.fmla-line { font-weight: 600; }
.assumption, .track-note { color: var(--muted); font-size: 0.9rem; }

table.timeline { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.timeline th, table.timeline td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.timeline th { border-bottom: 2px solid var(--line); }
table.timeline td.num, table.timeline th.num { text-align: right; white-space: nowrap; }

.state-box { border: 1px solid var(--line); border-radius: 8px; padding: 6px 18px 14px; margin-top: 24px; background: var(--bg-soft); }
.state-box h2 { font-size: 1.15rem; }
.program h3 { margin-bottom: 2px; font-size: 1rem; }
.program p { margin: 4px 0; }
.source, .asof { color: var(--muted); font-size: 0.85rem; }
.verify { border-left: 3px solid var(--warn-line); padding-left: 10px; }
.error { color: #a12622; font-weight: 600; }

footer { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 14px; }
.disclaimer { color: var(--muted); font-size: 0.85rem; max-width: 75ch; }

/* Print / save-the-plan view.
   Screen: the inputs summary is hidden and only the print button shows.
   Print: the form, buttons, and the by-state nav disappear; what remains
   is the plan itself - inputs, totals, timeline, state rules, the rules
   as-of line, and the page-footer disclaimer. */
.print-only { display: none; }
.print-row { margin: 0 0 14px; }
.print-row button { margin-top: 0; }
@media print {
  form, button, nav.bystate, .no-print { display: none !important; }
  .print-only { display: block; }
  body { color: #000; background: #fff; }
  main { max-width: none; padding: 0; }
  header .sub { display: none; }
  #results { margin-top: 12px; }
  .banner, .stat, .state-box { background: #fff; }
  .stat, .state-box { border-color: #999; }
  .plan-inputs ul { margin: 6px 0 14px; padding-left: 18px; }
  table.timeline { font-size: 0.85rem; }
  table.timeline thead { display: table-header-group; }
  table.timeline th, table.timeline td { border-bottom: 1px solid #bbb; }
  a { color: #000; text-decoration: none; }
}
@media (max-width: 640px) {
  table.timeline th:nth-child(2), table.timeline td:nth-child(2) { display: none; }
}

/* State pages + by-state nav */
.crumb { color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; }
.cta {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px 14px; margin: 18px 0; background: #fff;
}
.faq dt { font-weight: 600; margin-top: 14px; }
.faq dd { margin: 4px 0 0; }
.bystate { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 14px; }
.bystate h2 { font-size: 1.15rem; }
.statelist { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.statelist li { margin: 2px 0; }