/* Netwage: one stylesheet. Tokens and rules are documented in DESIGN.md. */
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #16241B;
  --paper: #FBFCFA;
  --greenbar: #E2EFE3;
  --ledger: #0B5B3A;
  --debit: #9A2A1C;
  --carbon: #4E5C53;
  --link: #1C4F86;
  --rule: rgba(22, 36, 27, .25);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --radius: 3px;
  --measure: 44rem;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
  font-variant-numeric: tabular-nums;
}
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 900px) { main.wrap { max-width: 52rem; } }

a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ledger); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s2); background: var(--paper); padding: var(--s2) var(--s3); z-index: 10; }

h1, h2, h3 { line-height: 1.15; font-weight: 650; margin: 0; }
h1 { font-size: 1.75rem; margin: var(--s4) 0 var(--s4); letter-spacing: -.01em; }
h2 { font-size: 1.375rem; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 1.125rem; margin: var(--s5) 0 var(--s2); }
@media (min-width: 768px) { h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } }
p, ul, ol, dl { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--s1); }
.small, caption, .fine { font-size: .875rem; color: var(--carbon); }
.intro { font-size: 1.125rem; }
.note { margin-top: var(--s4); }
code { font-family: var(--mono); font-size: .9em; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-top: var(--s3); padding-bottom: var(--s3); max-width: 52rem; }
.wordmark { font-weight: 750; font-size: 1.25rem; color: var(--ledger); text-decoration: none; letter-spacing: -.02em; }
.site-header nav { display: flex; gap: var(--s4); }
.site-header nav a { color: var(--ink); font-weight: 550; }
.site-footer { margin-top: var(--s8); border-top: 3px double var(--ink); padding: var(--s6) 0 var(--s7); font-size: .9375rem; }
.site-footer .wrap { max-width: 52rem; }
.footer-cols { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
@media (min-width: 600px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }

/* Breadcrumbs: separators are generated, not part of link text */
.crumbs ol { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; font-size: .875rem; color: var(--carbon); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; padding: 0 var(--s2); color: var(--carbon); }
.crumbs a { color: var(--carbon); }

/* Answer block: the hero of every result page */
.answer { background: var(--greenbar); padding: var(--s5) var(--s4); margin: 0 calc(-1 * var(--s4)); }
@media (min-width: 600px) { .answer { margin: 0; padding: var(--s5); } }
.answer-lead { font-size: 1.125rem; margin-bottom: var(--s3); }
.answer-keep { margin: 0; font-weight: 600; }
.figure { font-size: clamp(2.5rem, 11vw, 4rem); font-weight: 750; line-height: 1; color: var(--ledger); margin: var(--s1) 0 0; letter-spacing: -.02em; }
.figure-unit { font-size: 1.125rem; margin: var(--s1) 0 var(--s4); }
.answer-more { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--s5); row-gap: var(--s2); margin: 0 0 var(--s4); }
.answer-more dt { font-size: .8125rem; color: var(--carbon); }
.answer-more dd { margin: 0; font-size: 1.25rem; font-weight: 650; }
@media (max-width: 380px) { .answer-more { grid-template-columns: repeat(2, auto); } }
.state-tag { display: flex; align-items: center; gap: var(--s2); font-weight: 550; margin: 0 0 var(--s5); }
.state-code { display: inline-block; border: 2px solid var(--ink); padding: 0 var(--s1); font: 700 .8125rem/1.5 var(--mono); text-decoration: none; min-width: 2.2em; text-align: center; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); font-size: .9375rem; }
caption { text-align: left; padding-bottom: var(--s2); }
th, td { padding: var(--s2) var(--s2); text-align: left; vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: .8125rem; font-weight: 600; color: var(--carbon); border-bottom: 1px solid var(--ink); vertical-align: bottom; }
tbody th { font-weight: 500; }
.num { text-align: right; white-space: nowrap; }
.net { color: var(--ledger); font-weight: 600; }
.debit { color: var(--debit); }
.periods tbody tr:nth-child(odd), .hours tbody tr:nth-child(odd), .compare tbody tr:nth-child(odd), .brackets tbody tr:nth-child(odd), .params tbody tr:nth-child(odd) { background: var(--greenbar); }
.periods th, .periods td, .hours th, .hours td, .compare th, .compare td, .brackets th, .brackets td, .params th, .params td { padding-left: var(--s2); padding-right: var(--s2); }
tr.current th, tr.current td { font-weight: 700; }
@media (max-width: 599px) { .hide-sm { display: none; } table { font-size: .875rem; } th, td { padding: var(--s2) var(--s1); } }

/* Pay stub: sits on paper below the perforation */
.stub-wrap { background: var(--paper); border-top: 2px dashed var(--ink); margin: 0 calc(-1 * var(--s4)) calc(-1 * var(--s5)); padding: var(--s2) var(--s4) var(--s4); }
@media (min-width: 600px) { .stub-wrap { margin: 0 calc(-1 * var(--s5)) calc(-1 * var(--s5)); padding: var(--s2) var(--s5) var(--s4); } }
.stub { margin: 0; }
.stub caption { padding: var(--s2) 0; }
.stub th, .stub td { padding: 6px var(--s2); border-bottom: 1px solid var(--rule); }
.stub thead th { border-bottom: 1px solid var(--ink); }
.stub tbody th { font-weight: 450; }
.stub code { display: inline-block; min-width: 3.6em; font-size: .75rem; color: var(--carbon); }
.stub .line-tax td, .stub .line-pretax td { color: var(--debit); }
.stub .line-gross th, .stub .line-gross td { font-weight: 650; }
.stub tfoot th, .stub tfoot td { border-top: 3px double var(--ink); border-bottom: 0; font-weight: 750; color: var(--ledger); font-size: 1rem; padding-top: var(--s3); }
.stub tfoot code { color: var(--ledger); }

/* Afford / facts lists */
.afford, .facts { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); border-top: 1px solid var(--ink); }
.afford > div, .facts > div { display: contents; }
.afford dt, .afford dd, .facts dt, .facts dd { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.afford dd { text-align: right; font-weight: 650; }
.facts { grid-template-columns: minmax(8rem, 12rem) 1fr; }
.facts dt { color: var(--carbon); padding-right: var(--s3); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
.faq details:first-of-type { border-top: 1px solid var(--ink); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: var(--s2) 0 0; }

/* Related links */
.related-cols { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .related-cols { grid-template-columns: repeat(3, 1fr); } }
.related h3 { margin-top: 0; font-size: 1rem; }
.related ul { list-style: none; padding: 0; }
.link-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s1) var(--s4); }
.link-grid li { display: flex; flex-direction: column; margin-bottom: var(--s2); }
.link-grid.dense { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0 var(--s3); }
.link-grid.dense li { margin: 0; }
.all-links summary { cursor: pointer; font-weight: 600; margin: var(--s3) 0; }

/* Forms */
.calc-form { border: 1px solid var(--ink); padding: var(--s4); margin: 0 0 var(--s5); }
.calc-form fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); }
.calc-form legend, .calc-form label, .search-form label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--s1); }
.radios { display: flex; gap: var(--s5); margin-bottom: var(--s3); }
.radios label { display: flex; align-items: center; gap: var(--s2); font-weight: 450; margin: 0; min-height: 44px; }
.radios input { width: 1.25rem; height: 1.25rem; accent-color: var(--ledger); }
input:not([type="radio"]), select, textarea {
  width: 100%; min-height: 48px; padding: var(--s2) var(--s3);
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--carbon); border-radius: var(--radius);
}
input[aria-invalid="true"] { border: 2px solid var(--debit); }
.field-error { color: var(--debit); font-size: .875rem; margin: var(--s1) 0 0; }
.row { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
@media (min-width: 600px) { .row { grid-template-columns: 1fr 1fr; } }
.field { min-width: 0; }
.more summary { cursor: pointer; margin: var(--s2) 0 var(--s3); color: var(--link); text-decoration: underline; }
button {
  min-height: 48px; padding: var(--s2) var(--s5);
  font: 650 1rem var(--font); color: #fff; background: var(--ledger);
  border: 2px solid var(--ledger); border-radius: var(--radius); cursor: pointer;
}
button:hover { background: #084A2F; }
button.secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.search-row { display: flex; gap: var(--s2); }
.search-row input { flex: 1; }
.try .calc-form { margin-top: 0; }

/* Code, badge */
.code { font-family: var(--mono); font-size: .8125rem; background: #fff; border: 1px solid var(--rule); padding: var(--s3); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
textarea.code { min-height: 8rem; }
.badge { display: inline-block; padding: 6px 10px; border: 2px solid var(--ledger); background: var(--greenbar); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.badge span { font-weight: 400; color: var(--carbon); }

/* Prose pages */
.prose h2 { font-size: 1.375rem; margin-top: var(--s6); }
.prose table { margin-top: var(--s3); }

/* Sources */
.sources { margin-top: var(--s7); border-top: 1px solid var(--ink); font-size: .9375rem; }
.sources h2 { font-size: 1.125rem; margin-top: var(--s4); }

/* Ads: reserved height so fills never shift content */
.ad { min-height: 280px; margin: var(--s6) 0; display: flex; align-items: center; justify-content: center; }
.ad .adsbygoogle { display: block; width: 100%; }
@media (min-width: 768px) { .ad { min-height: 250px; } }

/* Consent banner (rendered by consent.js only where consent is required) */
.consent { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 3px double var(--ink); padding: var(--s4); z-index: 20; }
.consent-inner { max-width: 52rem; margin: 0 auto; display: grid; gap: var(--s3); }
.consent p { margin: 0; font-size: .9375rem; }
.consent-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.consent-actions button { flex: 1 1 8rem; }

/* Print: the answer and stub on one page */
@media print {
  @page { margin: 1.5cm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header nav, .crumbs, .ad, form, .faq, .related, .try, .site-footer, .consent, .note, #states, section[aria-labelledby="afford-h"], section[aria-labelledby="hours-h"] { display: none !important; }
  .answer, .stub-wrap { background: #fff; border-color: #000; padding: 12pt; margin: 0; }
  .figure, .net, .stub tfoot th, .stub tfoot td { color: #000; }
  .debit, .stub .line-tax td { color: #000; }
  .periods tbody tr:nth-child(odd) { background: #e6e6e6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  .sources { page-break-before: avoid; }
  main::after { content: "Printed from " attr(data-url); display: block; margin-top: 12pt; font-size: 9pt; }
}
.ot { display: block; font-weight: 400; }
@media (max-width: 599px) { .brackets .num { white-space: normal; } .brackets td.num { min-width: 5.5em; } }