/*
 * pennsylvaniapaycheckcalculator.com: the look.
 * A desk and a pay stub: warm paper, ink-navy bands, the answer printed as an earnings statement in a
 * typewriter face, take-home pay in banknote green. Libre Franklin (after Benjamin Franklin, Philadelphia's
 * printer) for words, Courier Prime for money. Both under the SIL Open Font License (assets/fonts/OFL-*.txt).
 * Every word sits on a plain panel; text colours keep 7:1 or more on their panel.
 */

@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--ink: #0E1A2B;
	--ink-2: #3B4758;
	--page: #F7F4EE;
	--paper: #FFFFFF;
	--line: #D8D2C4;
	--line-2: #ECE7DC;
	--navy: #0F2A4A;
	--navy-2: #183B66;
	--on-navy: #FFFFFF;
	--on-navy-2: #D6E0EE;
	--gold: #F2B705;
	--green: #08573F;
	--green-tint: #E3F1EA;
	--red: #9B2C1A;
	--red-tint: #FBEAE6;
	--focus: #F2B705;
	--seg-fed: #0F2A4A;
	--seg-fica: #4F6D96;
	--seg-pa: #2C7A7B;
	--seg-local: #C27C0E;
	--seg-ded: #8A8F98;
	--seg-net: #08573F;
	--sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
	--mono: "Courier Prime", "Courier New", Courier, monospace;
	--radius: 10px;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.6 var(--sans); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--navy-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); border-radius: 4px; }
b, strong { font-weight: 700; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
small { font-size: .82em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 14px; border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }
.needs-js { display: none; }
.js .needs-js { display: revert; }
.js .peek.needs-js[hidden] { display: none !important; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---- The line that says what the site is not ---- */
.indep { background: var(--paper); border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.indep .wrap { padding-top: 7px; padding-bottom: 7px; }
.indep b { color: var(--ink); }

/* ---- Header ---- */
.site-head { background: var(--navy); color: var(--on-navy); border-bottom: 4px solid var(--gold); }
.site-head__row { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 4px 0; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-weight: 800; font-size: 1.12rem; line-height: 1.1; letter-spacing: -.01em; }
.brand__name span { display: block; font-weight: 600; font-size: .86rem; color: var(--on-navy-2); letter-spacing: .02em; }
.site-nav { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.site-nav a { display: block; color: var(--on-navy); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 12px 12px; border-bottom: 4px solid transparent; margin-bottom: -4px; }
.site-nav a:hover { background: var(--navy-2); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--paper); }
@media (min-width: 1100px) {
	.site-head__row { flex-wrap: nowrap; padding-top: 0; }
	.site-nav { flex: 1 1 auto; margin: 0; padding: 0; }
	.site-nav ul { justify-content: flex-end; }
	.site-nav a { padding: 22px 11px 20px; }
}

/* ---- Page head: the navy band with the title, summary and featured picture ---- */
.page-head { background: var(--navy); color: var(--on-navy); padding: 18px 0 26px; }
.page-head a { color: var(--on-navy); }
.page-head__title { font-size: 2rem; line-height: 1.12; margin: 6px 0 12px; max-width: 26ch; }
.page-head .lede { font-size: 1.12rem; line-height: 1.5; color: var(--on-navy); max-width: 62ch; margin-bottom: 10px; }
.page-head__meta { font-size: .88rem; color: var(--on-navy-2); margin: 0 0 4px; }
.kicker { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--on-navy-2); }
.crumbs li + li::before { content: "›"; padding: 0 8px; }
.crumbs [aria-current] { color: var(--on-navy); }
.page-head__top--pic { display: grid; gap: 18px; }
.page-head__top--pic .ppc-figure { margin: 0; }
@media (min-width: 1000px) {
	.page-head { padding: 26px 0 34px; }
	.page-head__title { font-size: 2.6rem; }
	.page-head__top--pic { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 40px; }
}

/* ---- Pictures ---- */
.ppc-figure { margin: 0 0 1.4em; }
.ppc-figure img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--paper); }
.page-head .ppc-figure img { border: 6px solid var(--paper); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.ppc-figure figcaption { font-size: .86rem; color: var(--ink-2); margin-top: 8px; }
.page-head .ppc-figure figcaption { color: var(--on-navy-2); }

/* ---- The desk: where the calculator sits ---- */
.desk { padding: 22px 0 30px; background: var(--page); border-bottom: 1px solid var(--line); }

.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.calc__fields, .calc__answer { min-width: 0; }
@media (min-width: 960px) {
	.calc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); align-items: start; gap: 32px; }
	.calc__answer { position: sticky; top: 16px; }
}
.group { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); min-width: 0; }
.group__title { display: flex; align-items: center; gap: 10px; float: left; width: 100%; padding: 0; margin: 0 0 14px; font-weight: 800; font-size: 1.08rem; }
.group__title + * { clear: left; }
.group__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--on-navy); font-size: .9rem; font-weight: 800; flex: none; }

.field { margin: 0 0 14px; min-width: 0; }
.field__label { display: block; font-weight: 700; font-size: .95rem; margin: 0 0 6px; }
.field__label small { font-weight: 500; color: var(--ink-2); }
.field__hint { font-size: .86rem; color: var(--ink-2); margin: 6px 0 0; }
.field__err { font-size: .9rem; color: var(--red); background: var(--red-tint); border-left: 4px solid var(--red); padding: 6px 10px; margin: 8px 0 0; border-radius: 0 6px 6px 0; }
.box { display: flex; min-width: 0; align-items: stretch; border: 2px solid var(--ink-2); border-radius: 8px; background: var(--paper); overflow: hidden; }
.box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.box__in { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; font: 600 1.08rem/1.2 var(--sans); color: var(--ink); padding: 12px; outline: none; }
.box__in:focus-visible { outline: none; box-shadow: none; }
.box__pre, .box__suf { display: grid; place-items: center; padding: 0 12px; background: var(--line-2); color: var(--ink); font-weight: 700; }
.box--select { position: relative; }
.box--select select { appearance: none; padding-right: 36px; cursor: pointer; }
.box--select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
[aria-invalid="true"] { }
.field:has([aria-invalid="true"]) .box { border-color: var(--red); }
.box__in:disabled { color: var(--ink-2); background: var(--line-2); }

.choice { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.choice__row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice__opt { position: relative; }
.choice__opt input { position: absolute; opacity: 0; inset: 0; }
.choice__opt span { display: block; padding: 10px 16px; border: 2px solid var(--ink-2); border-radius: 8px; font-weight: 700; cursor: pointer; background: var(--paper); }
.choice__opt input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.choice__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; margin: 0 0 12px; }
.tick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); }
.tick label { font-size: .96rem; font-weight: 600; cursor: pointer; }
.tick .field__hint { grid-column: 2; margin: 0; }

.row2, .row3 { display: grid; gap: 0 12px; }
@media (min-width: 480px) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row3 > :first-child { grid-column: 1 / -1; } }

.more { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; }
.more summary { cursor: pointer; font-weight: 700; color: var(--navy-2); padding: 4px 0 10px; list-style-position: outside; }
.more[open] summary { margin-bottom: 4px; }

.field--place { position: relative; }
.suggest { position: absolute; z-index: 30; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 12px 30px rgba(14, 26, 43, .22); max-height: 330px; overflow-y: auto; }
.suggest__item { padding: 9px 10px; border-radius: 6px; cursor: pointer; line-height: 1.35; }
.suggest__item small { display: block; color: var(--ink-2); }
.suggest__item.is-active, .suggest__item:hover { background: var(--green-tint); }
.choose { margin: 8px 0 0; padding-left: 20px; font-size: .95rem; }

.calc__go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn { font: 800 1rem var(--sans); color: var(--on-navy); background: var(--navy); border: 0; border-radius: 8px; padding: 13px 22px; cursor: pointer; }
.btn:hover { background: var(--navy-2); }
.calc__live { font-size: .9rem; color: var(--ink-2); }
.js .calc__go .btn { display: none; }
.calc__stale { font-size: .92rem; font-weight: 600; color: var(--red); background: var(--red-tint); padding: 8px 12px; border-radius: 8px; }
.is-stale .stub { opacity: .45; }

/* ---- The pay stub ---- */
.stub { position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 4px 4px var(--radius) var(--radius); padding: 22px 18px 18px; box-shadow: 0 1px 0 var(--line), 0 14px 34px rgba(14, 26, 43, .12); }
.stub::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 6px; background: radial-gradient(circle, var(--line) 2.2px, transparent 2.6px) 0 50% / 12px 6px repeat-x; }
.stub__head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px; }
.stub__kicker { font: 700 .74rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; }
.stub__pay { font: 400 .98rem/1.4 var(--mono); margin: 0; }
.stub__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.stub__table th, .stub__table td { padding: 7px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.stub__table th { text-align: left; font-weight: 600; padding-right: 10px; }
.stub__table thead th { font: 700 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.stub__table td { font-family: var(--mono); font-size: 1rem; }
.stub__table td + td { padding-left: 12px; }
.stub__row--gross th, .stub__row--gross td { font-weight: 700; }
.stub__row--deduction th { color: var(--ink-2); }
.stub__net th, .stub__net td { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 10px; font-weight: 800; font-size: 1.05rem; }
.stub__net td { font-weight: 700; }
.stub__year { color: var(--ink-2); }
.stub__net .stub__year { color: var(--ink); }
.stub__fine { margin: 6px 0 0; font-size: .82rem; color: var(--ink-2); }
.stub__check { margin: 16px 0 6px; padding: 14px 16px; background: var(--green-tint); border: 2px solid var(--green); border-radius: 8px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(8, 87, 63, .35); color: var(--ink); line-height: 1.3; }
.stub__check-label { display: block; font: 700 .76rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.stub__check-amount { font: 700 2.1rem/1.1 var(--mono); color: var(--green); letter-spacing: -.02em; }
.stub__check-freq { font-weight: 700; }
.stub__check-share { display: block; font-size: .9rem; color: var(--ink-2); margin-top: 2px; }
.stub__notes { margin: 12px 0 0; padding-left: 18px; font-size: .9rem; color: var(--ink); }
.stub__notes li + li { margin-top: 6px; }

@media (max-width: 420px) {
	.stub { padding: 20px 12px 14px; }
	.stub__table { font-size: .9rem; }
	.stub__table td { font-size: .92rem; }
	.stub__check-amount { font-size: 1.8rem; }
}
@media (max-width: 360px) {
	.stub { padding: 20px 9px 12px; }
	.stub__table td { font-size: .84rem !important; }
	.stub__table td + td { padding-left: 6px; }
	.stub__table th { padding-right: 6px; }
}
/* Where each dollar goes: one bar to scale, then its key. */
.split { margin-top: 14px; }
.split__title { font-weight: 700; font-size: .92rem; margin: 0 0 6px; }
.split__bar { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: var(--line-2); border: 1px solid var(--ink); }
.split__seg { display: block; height: 100%; min-width: 0; }
.split__seg + .split__seg { box-shadow: -1px 0 0 var(--paper); }
.split__keys { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; font-size: .88rem; }
.split__key { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.split__key b { font-family: var(--mono); }
.split__key small { color: var(--ink-2); }
.split__dot { width: 11px; height: 11px; border-radius: 3px; flex: none; transform: translateY(1px); }
.split__seg--fed, .split__key--fed .split__dot { background: var(--seg-fed); }
.split__seg--fica, .split__key--fica .split__dot { background: var(--seg-fica); }
.split__seg--pa, .split__key--pa .split__dot { background: var(--seg-pa); }
.split__seg--local, .split__key--local .split__dot { background: var(--seg-local); }
.split__seg--ded, .split__key--ded .split__dot { background: var(--seg-ded); }
.split__seg--net, .split__key--net .split__dot { background: var(--seg-net); }

/* The take-home bar at the foot of a phone's screen, while the boxes are in view and the stub is not. */
.peek { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--navy); color: var(--on-navy); border-top: 4px solid var(--gold); box-shadow: 0 -8px 20px rgba(0, 0, 0, .2); }
.peek__label { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-2); }
.peek__net { font: 700 1.35rem var(--mono); }
.peek__go { margin-left: auto; color: var(--on-navy); font-weight: 700; }
@media (min-width: 960px) { .peek { display: none !important; } }
@media (max-width: 959px) { html { scroll-padding-bottom: 80px; } }

/* ---- Article: text, with a reading map beside it on a wide screen ---- */
.article { padding-top: 26px; padding-bottom: 30px; }
.prose { max-width: 760px; min-width: 0; }
.prose h2 { margin-top: 1.8em; scroll-margin-top: 16px; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 0 0 1em; padding: 4px 0 4px 16px; border-left: 4px solid var(--gold); color: var(--ink); }
.map { margin: 0 0 22px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: .94rem; }
.map__title { font-weight: 800; margin: 0 0 6px; }
.map ol { margin: 0; padding-left: 1.2em; }
.map li + li { margin-top: 4px; }
.map a { text-decoration: none; }
.map a:hover { text-decoration: underline; }
@media (min-width: 1100px) {
	.article--map { display: grid; grid-template-columns: minmax(0, 760px) 290px; gap: 40px; justify-content: space-between; }
	.article--map .map { grid-column: 2; grid-row: 1; position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; }
	.article--map .prose { grid-column: 1; grid-row: 1; }
}

.answer { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 0 0 1.4em; }
.answer p:last-child { margin-bottom: 0; }
.example { background: var(--paper); border: 1px dashed var(--ink-2); border-radius: var(--radius); padding: 14px 16px; font-size: 1rem; }
.checked { margin: 2em 0 0; padding: 14px 16px; background: var(--green-tint); border-radius: var(--radius); font-size: .94rem; }
.checked p { margin: 0; }
.cite { font-size: .86rem; color: var(--ink-2); margin-top: 8px; }
.tbl-lede { margin: 0 0 10px; font-size: .95rem; color: var(--ink-2); }
.page-meta { font-size: .88rem; color: var(--ink-2); margin-top: 2em; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tbl caption { text-align: left; font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--line-2); }
.tbl th, .tbl td { padding: 9px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.tbl thead th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); position: sticky; top: 0; }
.tbl th small, .tbl td small { display: block; color: var(--ink-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tbody tr:hover { background: var(--line-2); }
.tbl--places th[scope="row"] { font-weight: 700; min-width: 170px; }
.tbl--take-home th[scope="row"] { font-family: var(--mono); font-weight: 700; }

/* The rate finder */
.finder { margin: 0 0 1.6em; }
.finder__row { display: flex; gap: 10px; }
.finder__row .box { flex: 1; }
.finder__status { font-size: .92rem; color: var(--ink-2); margin: 8px 0 12px; }

/* ---- Sections and cards ---- */
.section { padding: 34px 0; }
.section--deep { background: var(--navy); color: var(--on-navy); }
.section--deep .section__title { color: var(--on-navy); }
.section__title { font-size: 1.5rem; margin-bottom: 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; align-items: start; height: 100%; padding: 16px; background: var(--paper); color: var(--ink); text-decoration: none; border-radius: var(--radius); border: 1px solid var(--line); }
.card:hover { box-shadow: 0 0 0 3px var(--gold); }
.card__icon { grid-row: span 2; width: 48px; height: 48px; }
.card__title { font-weight: 800; font-size: 1.04rem; }
.card__text { font-size: .9rem; color: var(--ink-2); }

/* ---- Footer ---- */
.site-foot { background: var(--ink); color: #E8ECF2; padding: 34px 0 20px; font-size: .94rem; }
.site-foot a { color: #FFFFFF; }
.site-foot__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.site-foot__h { font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: #C8D0DC; margin: 0 0 10px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li + li { margin-top: 6px; }
.site-foot__small { font-size: .86rem; color: #C8D0DC; }
.site-foot__base { margin-top: 24px; padding-top: 14px; border-top: 1px solid #2A3A52; font-size: .84rem; color: #C8D0DC; }
.brand--foot { margin-bottom: 10px; }

.ad { margin: 20px auto; max-width: 1180px; padding: 0 16px; text-align: center; }
.ad__label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ---- Dark mode: the page goes dark; the stub stays paper, as a printed thing does ---- */
@media (prefers-color-scheme: dark) {
	:root { --page: #0B1524; --line: #2D3B50; --line-2: #18263A; --ink-2: #B8C2D0; color-scheme: dark; }
	body { color: #EEF2F7; }
	a { color: #9CC3FF; }
	.indep { background: #0B1524; color: #B8C2D0; border-color: #2D3B50; }
	.indep b { color: #FFFFFF; }
	.group, .map, .answer, .example, .card, .table-wrap, .tbl thead th { background: #111E31; color: #EEF2F7; }
	.box, .choice__opt span { background: #0B1524; border-color: #8D9BB0; }
	.box__in { color: #FFFFFF; }
	.box__pre, .box__suf { background: #18263A; color: #FFFFFF; }
	.box--select::after { border-color: #FFFFFF; }
	.choice__opt input:checked + span { background: #F2B705; border-color: #F2B705; color: #0E1A2B; }
	.suggest { background: #111E31; border-color: #8D9BB0; }
	.suggest__item.is-active, .suggest__item:hover { background: #18263A; }
	.checked { background: #10261F; }
	.example { border-color: #8D9BB0; }
	.tbl caption { background: #18263A; }
	.field__err, .calc__stale { background: #3A1610; color: #FFD9D0; border-color: #FF8A73; }
	.card { border-color: #2D3B50; }
	.site-foot { background: #050B14; }
	.stub { --ink: #0E1A2B; --ink-2: #3B4758; --line: #D8D2C4; --line-2: #ECE7DC; color: #0E1A2B; }
	.stub .split__key { color: #0E1A2B; }
}

/* ---- Motion and print ---- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
	.site-head, .site-nav, .peek, .calc__fields, .cards, .section--deep, .site-foot, .map, .ad { display: none !important; }
	body { background: #FFFFFF; }
	.page-head { background: #FFFFFF; color: #000000; padding: 0; }
	.page-head a, .page-head .lede, .page-head__meta { color: #000000; }
	.calc__grid { display: block; }
	.stub { box-shadow: none; border: 1px solid #000000; }
}

/* ---- The guides' parts: which rate, Philadelphia's steps, the glossary, the paycheck map ---- */
.calc--which { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 1.4em; }
.which { list-style: none; margin: 4px 0 12px; padding: 12px 14px; background: var(--green-tint); border-radius: 8px; }
.which li { padding-left: 0; }
.which li:last-child { font-weight: 700; }
.which li + li { margin-top: 6px; }
.chart, .mindmap { margin: 0 0 1.2em; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.chart svg, .mindmap svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { font: 500 12px var(--sans); fill: var(--ink-2); }
.chart .step { fill: none; stroke-width: 4; stroke-linejoin: round; }
.chart .step--res { stroke: var(--navy); }
.chart .step--non { stroke: var(--seg-local); }
.chart .lab { font: 700 13px var(--sans); }
.chart .lab--res { fill: var(--navy); }
.chart .lab--non { fill: #8A5600; }
.tbl--phila .is-now { background: var(--green-tint); font-weight: 700; }
.glossary { margin: 0 0 1.4em; padding: 0; }
.glossary dt { font-weight: 800; margin-top: 12px; }
.glossary dd { margin: 4px 0 0; padding-left: 14px; border-left: 3px solid var(--gold); }
.mindmap .link { fill: none; stroke-width: 3; }
.mindmap .link--fed { stroke: var(--seg-fed); }
.mindmap .link--fica { stroke: var(--seg-fica); }
.mindmap .link--pa { stroke: var(--seg-pa); }
.mindmap .link--local { stroke: var(--seg-local); }
.mindmap .link--ded { stroke: var(--seg-ded); }
.mindmap .link--net { stroke: var(--seg-net); stroke-width: 6; }
.mindmap .node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.mindmap .node--gross rect { fill: var(--navy); stroke: var(--navy); }
.mindmap .node--gross .node__t { fill: #FFFFFF; font-size: 20px; }
.mindmap .node--net rect { fill: var(--green-tint); stroke: var(--green); stroke-width: 3; }
.mindmap .node--net .node__t { fill: var(--green); font-size: 20px; }
.mindmap .node__t { font: 800 15px var(--sans); fill: var(--ink); }
.mindmap .node__s { font: 500 13px var(--sans); fill: var(--ink-2); }
.mindmap figcaption { font-size: .86rem; color: var(--ink-2); margin-top: 8px; }
.all-pages { padding-left: 1.2em; }
.all-pages li + li { margin-top: 10px; }
.download { font-weight: 700; }
@media (prefers-color-scheme: dark) {
	.calc--which, .chart, .mindmap { background: #111E31; }
	.which { background: #10261F; }
	.chart .step--res { stroke: #9CC3FF; }
	.chart .lab--res { fill: #9CC3FF; }
	.chart .lab--non { fill: #F2B705; }
	.mindmap .node rect { fill: #0B1524; stroke: #8D9BB0; }
	.mindmap .node__t { fill: #FFFFFF; }
	.mindmap .node__s { fill: #B8C2D0; }
	.mindmap .node--net rect { fill: #10261F; stroke: #4CC38A; }
	.mindmap .node--net .node__t { fill: #7EE2B0; }
	.tbl--phila .is-now { background: #10261F; }
}

/* ---- A county's local tax rates (/local-tax-rates/allegheny-county/) and the list of counties ---- */
.county__h { font-size: 1.4rem; margin: 0 0 14px; scroll-margin-top: 16px; }
.county__h + .fact-cards, .county__h + .county__jump { margin-top: 0; }
.county .county__h:not(:first-child) { margin-top: 30px; }
.fact-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
@media (min-width: 900px) { .fact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact-card { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--navy); border-radius: var(--radius); padding: 12px 16px 14px; }
.fact-card__title { font-size: 1.02rem; margin: 0 0 8px; }
.fact-card dl { margin: 0; }
.fact-card dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.fact-card dt:first-child { margin-top: 0; }
.fact-card dd { margin: 2px 0 0; font-size: .95rem; line-height: 1.45; }
.fact-card dd b { font-size: 1.06rem; font-variant-numeric: tabular-nums; }
.county__about { font-size: .98rem; max-width: 80ch; }
.county__jump ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.county__jump a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-weight: 700; text-decoration: none; }
.county__jump a:hover { box-shadow: 0 0 0 2px var(--gold); }
.tbl--county tbody tr { scroll-margin-top: 16px; }
.tbl--county tbody tr:target { background: var(--green-tint); box-shadow: inset 4px 0 0 var(--green); }
.tbl--county th[scope="row"] { font-weight: 700; min-width: 150px; }
.tbl--county td.lst { min-width: 230px; }
.tbl--county td.lst b { font-family: var(--mono); }
.tbl--county td.lst small { font-size: .8em; }
.county__go { white-space: nowrap; }
.county__go form { margin: 0; }
.county__go button { display: inline-block; padding: 6px 12px; border: 2px solid var(--navy); border-radius: 6px; background: var(--paper); color: var(--navy-2); font: 700 .9rem/1.3 var(--sans); cursor: pointer; }
.county__go button:hover { background: var(--navy); color: var(--on-navy); }
/* On a wide screen the county table fits the page, so it needs no scrolling box of its own, and its headings stay at the top of the screen while its rows scroll by. */
@media (min-width: 1000px) {
	.table-wrap--county { overflow: visible; }
	.tbl--county thead th { box-shadow: inset 0 -1px 0 var(--line); }
}
.county__csv { margin: 0 0 10px; }
.county__all { font-weight: 700; margin: 0; }
.tbl--counties td.num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.tbl--counties th, .tbl--counties td { padding: 8px 12px; }
.all-pages--counties { columns: 2 180px; column-gap: 24px; }
.all-pages--counties li + li { margin-top: 6px; }
/* On a phone, each row of these two tables is a card: no sideways scrolling to reach a rate. */
.tbl--county thead th.num, .tbl--counties thead th.num { font-family: var(--sans); }
@media (max-width: 699px) {
	.tbl--county, .tbl--counties, .tbl--county tbody, .tbl--counties tbody, .tbl--county caption, .tbl--counties caption { display: block; }
	.tbl--county thead, .tbl--counties thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.tbl--county tr, .tbl--counties tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
	.tbl--county th, .tbl--county td, .tbl--counties th, .tbl--counties td { display: block; padding: 0; border: 0; }
	.tbl--county th[scope="row"], .tbl--counties th[scope="row"] { grid-column: 1 / -1; min-width: 0; font-size: 1.04rem; }
	.tbl--county td.num, .tbl--counties td.num { text-align: left; white-space: normal; }
	.tbl--county td[data-label]::before, .tbl--counties td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font: 700 .68rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1px; }
	.tbl--county tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "name go" "sd sd" "res non" "lst lst"; }
	.tbl--county th[scope="row"] { grid-area: name; align-self: center; }
	.tbl--county .sd { grid-area: sd; font-size: .92rem; }
	.tbl--county .sd small { display: inline; margin-left: 6px; }
	.tbl--county .res { grid-area: res; }
	.tbl--county .non { grid-area: non; }
	.tbl--county .lst { grid-area: lst; min-width: 0; }
	.tbl--county .county__go { grid-area: go; align-self: start; justify-self: end; }
	.tbl--county .county__go button { padding: 6px 10px; font-size: .86rem; }
	.tbl--county td.res small { display: inline; margin-left: 6px; line-height: 1.4; }
	.tbl--county td.res small::after { content: " (municipal + school)"; }
}
@media (prefers-color-scheme: dark) {
	.fact-card, .county__jump a { background: #111E31; color: #EEF2F7; border-color: #2D3B50; }
	.fact-card { border-top-color: #9CC3FF; }
	.county__go button { background: #111E31; color: #9CC3FF; border-color: #9CC3FF; }
	.county__go button:hover { background: #9CC3FF; color: #0B1524; }
	.tbl--county tbody tr:target { background: #10261F; box-shadow: inset 4px 0 0 #4CC38A; }
}