/* Calculator form and results. Mobile-first, minimum 44px touch targets, 16px inputs to stop
   iOS zoom-on-focus (PointsCompare lesson). */

/* margin: 0 auto so this centers itself regardless of what wraps it -- a bare <section> (no
   max-width of its own) would otherwise leave the form sitting at the left edge instead. */
.payroll-form { max-width: var(--max-content); margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
/* minmax(0, 1fr), not bare 1fr: a bare 1fr track's minimum is content-based ("auto"), so a
   <select> with a long option (e.g. "Semimonthly") can force its column wider than its share and
   push the last column outside the card. minmax(0, ...) lets the track shrink below that content
   width so all four columns stay equal and the row never overflows. */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
/* Reserve two lines' worth of height and bottom-align the text, so a label that wraps (a long
   one, or a narrow column) never pushes its own input lower than the fields beside it — every
   input in a row starts at the same y regardless of how many lines its label took. */
.field label {
  font-weight: 600; font-size: 0.9rem; line-height: 1.3;
  min-height: 2.6em; display: flex; align-items: flex-end;
}
.field input, .field select {
  font-size: 16px;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  min-height: 44px;
}

.more-options { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.more-options summary { cursor: pointer; font-weight: 600; list-style: none; min-height: 44px; display: flex; align-items: center; }
.more-options summary::-webkit-details-marker { display: none; }
.more-options summary span::before { content: '+ '; color: var(--color-accent); }
.more-options[open] summary span::before { content: '\2212 '; }
.checkbox-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-3) 0; }
.checkbox-field { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
/* flex-shrink: 0 -- without it a checkbox next to a long label (this row has both "Time
   tracking" and "Files federal and state payroll taxes for you") shrinks below its own 20px,
   so checkboxes end up visibly different sizes depending on their neighbor's text length. */
.checkbox-field input { width: 20px; height: 20px; flex-shrink: 0; }
/* The two derived checkboxes (multi-state, contractor payments) are display-only -- disabled on
   purpose, driven live from the Employees/Contractors/States fields above, not a separate choice.
   Muted text plus an inline note make that a status readout instead of a control that looks broken. */
.checkbox-field--derived { color: var(--color-ink-faint); align-items: flex-start; }
.checkbox-field--derived input { margin-top: 2px; }
.checkbox-field .derived-note { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-ink-faint); }

.btn-primary {
  display: block; width: 100%; margin-top: var(--space-5);
  /* Ink, not the accent — the accent is reserved for the number and the confidence mark. */
  background: var(--color-ink); color: var(--color-bg);
  border: none; border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 600; padding: var(--space-4);
  min-height: 48px; cursor: pointer;
}
.btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.3); }

.disclosure-inline { max-width: var(--max-content); font-size: 0.8rem; color: var(--color-ink-faint); margin: var(--space-3) auto; }

.results { max-width: var(--max-content); margin: var(--space-6) auto 0; }
.results-section-title {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint);
  margin: var(--space-6) 0 var(--space-3);
}
.results-empty { color: var(--color-ink-faint); }

.result-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.result-card.is-quote { border-style: dashed; }
.result-card.is-unfit { opacity: 0.75; }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.result-rank { font-family: var(--font-mono); color: var(--color-ink-faint); font-size: 0.85rem; }
.result-name { font-weight: 700; font-size: 1.05rem; }
.result-cost { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.result-cost-unit { font-size: 0.8rem; font-weight: 400; color: var(--color-ink-faint); }
.result-tier { color: var(--color-ink-soft); font-size: 0.92rem; margin: var(--space-2) 0; }

/* Dot plus text, no pill or fill — meaning is never carried by color alone, and Ledger
   reserves filled/bordered chips for the pricing-model badge, not this one. The dot is drawn
   with ::before in currentColor so it and the label always share exactly one color rule. */
.confidence-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.confidence-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.confidence-high { color: var(--color-accent); }
.confidence-medium { color: var(--color-warn); }
.confidence-low { color: var(--color-bad); }
.confidence-quote-only { color: var(--color-ink-faint); }
.confidence-reasons { font-size: 0.8rem; color: var(--color-ink-faint); margin: var(--space-2) 0 0; }

.breakdown { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.breakdown summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; list-style: none; min-height: 44px; display: flex; align-items: center; }
.breakdown summary::-webkit-details-marker { display: none; }
/* Same +/- convention as .more-options and .faq -- sits right against the text instead of
   being pushed to the far edge of the row, which is what made the earlier chevron easy to miss
   on a wide result card. */
.breakdown summary span::before { content: '+ '; color: var(--color-accent); }
.breakdown[open] summary span::before { content: '\2212 '; }
.breakdown-table { width: 100%; font-size: 0.85rem; margin-top: var(--space-2); border-collapse: collapse; }
.breakdown-table td { padding: var(--space-2) 0; vertical-align: top; border-bottom: 1px dotted var(--color-border); }
.breakdown-table .li-label { width: 40%; }
.breakdown-table .li-formula { display: block; color: var(--color-ink-faint); font-size: 0.8rem; margin-top: 2px; }
.breakdown-table .li-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.breakdown-table .li-source {
  display: block; font-size: 0.7rem; color: var(--color-ink-faint);
  border-bottom: 1px dotted var(--color-ink-faint); width: fit-content; margin-top: 2px;
}
.breakdown-total td {
  border-top: 1px solid var(--color-ink); border-bottom: none;
  font-weight: 700; font-size: 1rem; padding-top: var(--space-3);
}
.breakdown-extra { font-size: 0.8rem; color: var(--color-ink-faint); margin-top: var(--space-2); }

.alt-list, .elim-list { font-size: 0.85rem; color: var(--color-ink-soft); margin: var(--space-3) 0 0; padding-left: 0; list-style: none; }
.alt-list li, .elim-list li { padding: var(--space-1) 0; }

.assumptions { font-size: 0.8rem; color: var(--color-ink-faint); margin-top: var(--space-2); }
.promotion-note { font-size: 0.8rem; background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-3); }

.result-cta { display: inline-block; margin-top: var(--space-4); background: var(--color-ink); color: var(--color-bg); text-decoration: none; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-weight: 600; min-height: 44px; }

@media (min-width: 40rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}