/* Paycheck calculators: shared by the Maryland and Indiana pages, so keep the
   two copies identical (tests.js checks). Scoped to .ftb-tool-pc, every value
   a token. Inputs, labels, option rows, messages, buttons and focus rings come
   from core.css and the theme. Page CSS budget: see section 10. */

/* minmax(0,1fr), not the implicit auto column: a select's minimum width is its
   longest option, and an auto column let it push the form 30px past the card
   at 360px (found in live testing, 2026-09-25). */
.ftb-tool-pc .ftb-pc-layout{display:grid;gap:var(--ftb-space-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .ftb-tool-pc .ftb-pc-layout{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
  .ftb-tool-pc .ftb-pc-out{position:sticky;top:calc(var(--ftb-header-h) + var(--ftb-space-4))}
}
.ftb-tool-pc .ftb-pc-set{margin:0 0 var(--ftb-space-4);padding:var(--ftb-space-4) var(--ftb-space-5);min-width:0;
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);background:var(--ftb-surface)}
.ftb-tool-pc legend{padding:0 var(--ftb-space-2);font-weight:var(--ftb-fw-bold)}
.ftb-tool-pc .ftb-pc-grid{display:grid;gap:0 var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.ftb-tool-pc .ftb-field{margin-bottom:var(--ftb-space-4);min-width:0}
.ftb-tool-pc [aria-invalid=true]{border-color:var(--ftb-error)}
.ftb-tool-pc .ftb-pc-more summary{display:flex;align-items:center;min-height:var(--ftb-tap);cursor:pointer;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-primary)}

/* Results. Height reserved so the first paint never shifts the page. */
.ftb-tool-pc .ftb-pc-card{min-height:calc(var(--ftb-space-24) * 4);padding:var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius-lg);background:var(--ftb-surface);box-shadow:var(--ftb-shadow)}
.ftb-tool-pc .ftb-pc-h{margin:0;font-size:var(--ftb-text-base);font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
.ftb-tool-pc .ftb-pc-net{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-3xl);font-weight:var(--ftb-fw-bold);
  line-height:1.1;color:var(--ftb-success);font-variant-numeric:tabular-nums}
.ftb-tool-pc .ftb-pc-bar{display:flex;height:var(--ftb-space-3);margin-top:var(--ftb-space-4);overflow:hidden;
  border-radius:var(--ftb-radius-full);background:var(--ftb-surface-2)}
.ftb-tool-pc .ftb-pc-bar span{flex:0 0 auto}
.ftb-tool-pc .ftb-pc-sw{display:inline-block;width:var(--ftb-space-3);height:var(--ftb-space-3);
  margin-inline-end:var(--ftb-space-2);border-radius:var(--ftb-radius-full)}
.ftb-tool-pc .is-net{background:var(--ftb-success)}
.ftb-tool-pc .is-fed{background:var(--ftb-primary)}
.ftb-tool-pc .is-fica{background:var(--ftb-cat-converters)}
.ftb-tool-pc .is-state{background:var(--ftb-cat-business)}
.ftb-tool-pc .is-local{background:var(--ftb-cat-datetime)}
.ftb-tool-pc .is-pre{background:var(--ftb-cat-compliance)}
.ftb-tool-pc .is-post{background:var(--ftb-text-subtle)}

.ftb-tool-pc .ftb-pc-table{width:100%;margin-top:var(--ftb-space-3);border-collapse:collapse;
  font-size:var(--ftb-text-sm);font-variant-numeric:tabular-nums}
.ftb-tool-pc .ftb-pc-table th,.ftb-tool-pc .ftb-pc-table td{padding:var(--ftb-space-2) var(--ftb-space-1);
  border-bottom:1px solid var(--ftb-border);text-align:end;white-space:nowrap}
.ftb-tool-pc .ftb-pc-table th:first-child{text-align:start;white-space:normal;font-weight:var(--ftb-fw-medium)}
.ftb-tool-pc .ftb-pc-table thead th{color:var(--ftb-text-muted)}
.ftb-tool-pc .ftb-pc-table .is-total>*{font-weight:var(--ftb-fw-bold)}
.ftb-tool-pc .ftb-pc-steps{margin:0;padding-inline-start:var(--ftb-space-5);font-size:var(--ftb-text-sm);
  line-height:var(--ftb-lh-snug)}
.ftb-tool-pc .ftb-pc-steps li+li{margin-top:var(--ftb-space-2)}
.ftb-tool-pc .ftb-pc-note{margin:var(--ftb-space-5) 0 0;font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}

@media (max-width:479px){
  .ftb-tool-pc .ftb-pc-set,.ftb-tool-pc .ftb-pc-card{padding:var(--ftb-space-4)}
}