/* J6 design system — components. Values come ONLY from tokens.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--font-size-base);
  line-height: var(--line-height);
}
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary);
  color: var(--color-on-primary); padding: var(--space-2) var(--space-4); z-index: 10;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
/* Header / nav */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.wordmark { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-ink); text-decoration: none; }
.wordmark .brand-slot { color: var(--color-primary-dark); }
/* Brand mark (B6): the Sigma tile next to the wordmark. Colours are
   the design tokens (the same pair as the favicon/social cards);
   the theme-color meta in the templates carries --color-primary. */
.brand-mark { width: 30px; height: 30px; vertical-align: -8px; margin-right: var(--space-2); }
.brand-mark .bm-bg { fill: var(--color-primary); }
.brand-mark .bm-fg { fill: none; stroke: var(--color-on-primary); }
.main-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.main-nav a { color: var(--color-primary-dark); text-decoration: none; font-weight: 600; }
.main-nav a:hover { text-decoration: underline; }
/* Hero and cards */
.hero { background: var(--color-surface); padding: var(--space-12) 0; }
.hero h1 { font-size: var(--font-size-2xl); margin: 0 0 var(--space-3); }
.hero p { max-width: 44rem; color: var(--color-ink-muted); font-size: var(--font-size-lg); }
.pillar-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); padding: var(--space-8) 0; }
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-6); }
.card h2, .card h3 { margin-top: 0; }
.card a { color: var(--color-primary-dark); font-weight: 600; }
/* Calculator layout */
.calc-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding: var(--space-8) 0; }
@media (min-width: 60rem) { .calc-layout { grid-template-columns: 22rem 1fr; } }
.calc-form { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); }
.calc-form .field { margin-bottom: var(--space-4); }
.calc-form label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.calc-form select, .calc-form input {
  width: 100%; padding: var(--space-2) var(--space-3); font: inherit;
  border: 1px solid var(--color-ink-muted); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-ink);
  /* E1 (audit 2026-10-26): real tap height >= 44px (was ~37px) */
  min-height: 2.75rem;
}
.field-help { color: var(--color-ink-muted); font-size: var(--font-size-sm); margin: var(--space-1) 0 0; }
.field-error { color: var(--color-danger); font-size: var(--font-size-sm); font-weight: 600; margin: var(--space-1) 0 0; }
.calc-form [hidden] { display: none; }
.demo-note { font-size: var(--font-size-sm); color: var(--color-ink-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
/* Result panel */
.result-panel h2 { margin-top: 0; }
/* E2: brief highlight of the freshly updated result (narrow viewports,
   applied by site.js only after a user-driven change) */
@keyframes resultFlash {
  0% { box-shadow: 0 0 0 3px var(--color-primary); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.result-panel.result-updated { animation: resultFlash 1.2s ease-out; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) {
  .result-panel.result-updated { animation: none; }
}
.stacked-bar { height: 2rem; border-radius: var(--radius-sm); overflow: hidden; margin: var(--space-4) 0 var(--space-2); }
/* E5: bars are inline SVG (attribute widths, no inline styles);
   segment colours are fills here, backgrounds on the legend swatches */
.bar-svg { display: block; width: 100%; height: 100%; }
rect.seg-net { fill: var(--bar-net); } rect.seg-federal { fill: var(--bar-federal); }
rect.seg-fica { fill: var(--bar-fica); } rect.seg-state { fill: var(--bar-state); }
rect.seg-local { fill: var(--bar-local); } rect.seg-other { fill: var(--bar-other); }
rect.seg-wages { fill: var(--bar-wages); } rect.seg-benefits { fill: var(--bar-benefits); }
rect.seg-pretax { fill: var(--bar-pretax); }
rect.seg-gross { fill: var(--bar-wages); } rect.seg-regular { fill: var(--bar-wages); }
rect.seg-overtime { fill: var(--bar-other); } rect.seg-double { fill: var(--bar-local); }
rect.diff-fill { fill: var(--color-primary); }
.scenario .val { font-size: 1.25rem; font-weight: 700; }
.page-top { padding-top: var(--space-12); }
.seg-net { background: var(--bar-net); } .seg-federal { background: var(--bar-federal); }
.seg-fica { background: var(--bar-fica); } .seg-state { background: var(--bar-state); }
.seg-local { background: var(--bar-local); } .seg-other { background: var(--bar-other); }
.seg-wages { background: var(--bar-wages); } .seg-benefits { background: var(--bar-benefits); }
.seg-pretax { background: var(--bar-pretax); }
.seg-gross { background: var(--bar-wages); } .seg-regular { background: var(--bar-wages); }
.seg-overtime { background: var(--bar-other); } .seg-double { background: var(--bar-local); }
.bar-legend { list-style: none; margin: 0 0 var(--space-4); padding: 0; font-size: var(--font-size-sm); }
.bar-legend li { display: inline-block; margin-right: var(--space-4); }
.sw { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: var(--space-1); vertical-align: -1px; }
/* B4: wide data tables (the salary ladder) scroll inside their
   own region on narrow screens instead of overflowing the page;
   the region is focusable so keyboard users can scroll it. */
.tblwrap { overflow-x: auto; }
.tblwrap table.lines { margin: 0; }
table.lines { width: 100%; border-collapse: collapse; }
table.lines th, table.lines td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.lines td.amount, table.lines th.amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lines tr.total td { font-weight: 700; border-top: 2px solid var(--color-ink); }
details.expl { margin-top: var(--space-1); }
details.expl summary {
  cursor: pointer; color: var(--color-primary-dark); font-size: var(--font-size-sm); font-weight: 600;
  /* E1: the clickable zone is a real 44px tall; the padding grows the
     hit area and the negative margins cancel the layout shift, so the
     visible design does not move (was a ~22px zone). */
  display: inline-block; box-sizing: border-box; min-height: 2.75rem;
  padding: 0.8rem 0.25rem 0.8rem 0; margin: -0.8rem -0.25rem -0.55rem 0;
}
details.expl .expl-body { font-size: var(--font-size-sm); color: var(--color-ink-muted); padding: var(--space-2) 0; }
details.expl .src { font-size: var(--font-size-sm); }
.totals-strip { display: flex; flex-wrap: wrap; gap: var(--space-6); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin: var(--space-4) 0; }
.totals-strip .big { font-size: var(--font-size-xl); font-weight: 700; display: block; }
/* Comparator */
.comparator { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: var(--space-4) 0; }
.comparator .scenario { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.comparator .scenario h3 { margin-top: 0; font-size: var(--font-size-base); }
.diff-bar { height: 1rem; background: var(--color-surface-strong); border-radius: var(--radius-sm); overflow: hidden; }
/* Guides index cards (B8) */
.guide-cards { list-style: none; padding-left: 0; }
.guide-cards .guide-card { margin: var(--space-4) 0; }
.guide-card p { margin: var(--space-2) 0; }
/* Article system (B10): taxonomy line on guides, archive
   navigation on the guides index, search results. */
.guide-taxonomy { margin-top: 0; }
.archive-cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.archive-cols ul { list-style: none; padding-left: 0; margin: var(--space-2) 0; }
.archive-cols li { margin: var(--space-1) 0; }
.search-form .field { max-width: 34rem; }
.search-results { list-style: none; padding-left: 0; }
.search-results li { margin: var(--space-6) 0; }
.search-results p { margin: var(--space-1) 0; }
/* Info boxes */
.box { border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; }
.box-sources { background: var(--color-surface); border: 1px solid var(--color-border); }
.box-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning-ink); }
.box h2, .box h3 { margin-top: 0; }
.stamp { font-weight: 700; }
.btn {
  display: inline-block; background: var(--color-primary); color: var(--color-on-primary);
  border: 0; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6);
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  /* E1: guaranteed >= 44px tap height */
  min-height: 2.75rem;
}
.btn:hover { background: var(--color-primary-dark); }
.btn[disabled] { background: var(--color-ink-muted); cursor: not-allowed; }
/* Article */
.breadcrumb { font-size: var(--font-size-sm); color: var(--color-ink-muted); padding: var(--space-4) 0 0; }
.breadcrumb a { color: var(--color-primary-dark); }
article.guide { max-width: 46rem; padding-bottom: var(--space-8); }
article.guide h1 { font-size: var(--font-size-2xl); }
/* Email signup (J8) */
.email-signup { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; }
.email-signup h2 { margin-top: 0; font-size: var(--font-size-lg); }
.email-signup .field { margin-bottom: var(--space-3); max-width: 26rem; }
.email-signup label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.email-signup input[type="email"] {
  width: 100%; padding: var(--space-2) var(--space-3); font: inherit;
  border: 1px solid var(--color-ink-muted); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-ink);
  /* E1: real tap height >= 44px */
  min-height: 2.75rem;
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Affiliate slots and reserve banner (J8) */
.affiliate-slot h2 { font-size: var(--font-size-lg); }
.reserve-banner { margin-top: var(--space-4); }
/* Footer */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: var(--space-12); }
.footer-brand { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-ink); margin: 0 0 var(--space-3); }
.footer-brand .brand-slot { color: var(--color-primary-dark); }
.site-footer .wrap { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; }
.site-footer a { color: var(--color-primary-dark); }
.fineprint { color: var(--color-ink-muted); font-size: var(--font-size-sm); }
/* Print fallback (J8) — the designed print layout kept as the repli if
   the on-device PDF cannot be produced: form and chrome hidden, the
   full result (explanations opened by site.js on beforeprint) prints
   cleanly. */
@page { margin: 16mm; }
@media print {
  .site-header, .site-footer, .calc-form, .breadcrumb,
  #pdf-download, .affiliate-slot, .email-signup { display: none !important; }
  .calc-layout { display: block; padding: 0; }
  .wrap { max-width: none; padding: 0; }
  body { font-size: 11pt; }
  table.lines tr, .box, .scenario { break-inside: avoid; }
  details.expl .expl-body { padding-bottom: 0; }
  a { color: inherit; text-decoration: none; }
}