/* The five-step flow: progress, choices, actions and shared helpers. */
.lede { font-size: 18px; line-height: 28px; }
.muted { color: var(--text-2); font-size: 14px; line-height: 20px; }
:where(.page, .estimator-admin) .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ticks { padding-left: var(--s4); margin: 0 0 var(--s4); }
.ticks li { margin-bottom: var(--s2); }
/* Public pages: a drawn tick in front of each line instead of a bullet. */
.public .ticks { list-style: none; padding: 0; }
.public .ticks li { position: relative; padding-left: var(--s5); }
.public .ticks li::before { content: ""; position: absolute; left: 6px; top: 5px; width: 6px; height: 12px; border: solid var(--blue-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.progress { margin-bottom: var(--s4); }
.progress__label { margin: 0 0 var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; }
.progress__track { height: 8px; background: var(--border); border-radius: var(--r-control); overflow: hidden; }
.progress__fill { height: 100%; background: var(--blue); }
.progress__fill--1 { width: 20%; }
.progress__fill--2 { width: 40%; }
.progress__fill--3 { width: 60%; }
.progress__fill--4 { width: 80%; }
.progress__fill--5 { width: 100%; }

.page--wide { max-width: 960px; }

/* The question steps sit on one soft card, so each screen feels like a single place. On phones the card melts into the page. */
.page--step { max-width: 720px; margin: var(--s5) auto var(--s6); padding: var(--s5); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-tile); box-shadow: var(--shadow-2); }
.page--step.page--wide { max-width: 1000px; }
@media (max-width: 767px) { .page--step { margin: 0; padding: var(--s4) var(--s3) var(--s6); border: 0; border-radius: 0; box-shadow: none; } }
.form--wide { max-width: 640px; }
.form--wide input[type="number"], .form--wide select { max-width: 280px; }

.choices { border: 0; padding: 0; margin: var(--s3) 0 0; display: flex; flex-direction: column; gap: var(--s2); }
.choices legend { font-weight: 600; margin-bottom: var(--s2); padding: 0; }
.choice {
  display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer;
  padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--r-control);
  font-weight: 400; margin-top: 0;
}
.choice:has(input:checked) { border: 2px solid var(--charcoal); padding: calc(var(--s2) - 1px) calc(var(--s3) - 1px); }
.choice input { margin-top: 5px; accent-color: var(--charcoal); }
.choice--check { margin-top: var(--s2); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.form .actions .btn, .form--wide .btn { margin-top: 0; }

.table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; }
.table th, .table td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { font-size: 14px; line-height: 20px; color: var(--text-2); }