/* =========================================================
   STANDOUT — State paycheck calculator (Cluster E) styles.
   Standalone, isolated stylesheet loaded AFTER tools.css only on the
   paycheck pages. Kept separate (not appended to tools.css) so it parses
   independently and can't be affected by other tools' rules.
   Scoped .pc-* so it never cross-wires. Semantic tokens only (zero
   hardcoded hex) → inherits light + dark automatically. Mobile-first; the
   result box is reserved server-side so live updates never shift layout.
   ========================================================= */

.pc-amount-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-2); }
.pc-amount-row input,
.pc-amount-row select { width: 100%; }
.pc-opt { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 400; }
/* Every figure in the tool uses the body font (matching .conv-value across the
   suite) with tabular numerals so columns line up and nothing reads as a
   different typeface. Inputs included so typed amounts match the output. */
.pc-tool .tool-field input,
.pc-tool .tool-field select { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Hero — the dominant result, reserved server-side so it never shifts. */
.pc-hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: var(--color-primary-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
.pc-hero-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-hero-net {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 46px);
  line-height: 1.05;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.pc-hero-sub { font-size: var(--text-sm); color: var(--text-muted); }

/* Breakdown — 3 columns: label / per year / per paycheck. */
.pc-breakdown { display: flex; flex-direction: column; margin-top: var(--s-2); }
.pc-bd-head,
.pc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: baseline;
}
.pc-bd-head {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.pc-row {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.pc-row[hidden] { display: none; }
.pc-row .conv-label { font-size: var(--text-sm); color: var(--text); }
.pc-bd-head .num,
.pc-row .num {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text);
  text-align: right;
  min-width: 86px;
}
.pc-row.is-none .num { color: var(--text-faint); }
.pc-row.is-total {
  border-bottom: 0;
  border-top: 2px solid var(--color-primary);
  margin-top: 2px;
  padding-top: var(--s-3);
}
.pc-row.is-total .conv-label { font-weight: 700; }
.pc-row.is-total .num {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-md);
}

.pc-effrate {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: var(--s-3) 0 0;
  line-height: 1.5;
}
.pc-privacy { color: var(--text-faint); }

/* Compare-two-states hook. */
.pc-compare {
  margin-top: var(--s-4);
  border-top: 1px dashed var(--hairline-2);
  padding-top: var(--s-4);
}
.pc-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.pc-compare-toggle:hover,
.pc-compare-toggle[aria-expanded="true"] { border-color: var(--color-primary); }
.pc-compare-hint { color: var(--text-faint); font-weight: 400; font-size: var(--text-xs); }
.pc-compare-panel { margin-top: var(--s-4); }
.pc-compare-panel[hidden] { display: none; }
.pc-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.pc-compare-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.pc-compare-state {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.pc-compare-net {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-primary);
  line-height: 1.1;
}
.pc-compare-period { font-size: var(--text-xs); color: var(--text-faint); }
.pc-verdict {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--bg-soft);
  color: var(--text);
}
.pc-verdict.up { background: color-mix(in oklab, var(--tool-pass) 12%, var(--surface)); color: var(--tool-pass); }
.pc-verdict.down { background: color-mix(in oklab, var(--tool-warn) 14%, var(--surface)); color: var(--tool-warn); }

@media (max-width: 420px) {
  .pc-bd-head,
  .pc-row { gap: var(--s-2); }
  .pc-bd-head .num,
  .pc-row .num { min-width: 0; }
  .pc-compare-grid { grid-template-columns: 1fr; }
}