/* FinalPaycheckCheck — theme "Ledger"
   A pay-stub editorial system: bone paper, green-black ink, ledger green,
   and the red of a bookkeeper's stamp. Display type is a book serif
   (Palatino); every money figure and date is set in tabular monospace,
   the way a pay stub prints numbers — figures line up in columns and
   never jitter. Ruled double lines head the tables, like a ledger book.
   Deliberately unrelated to FreightVerdict's "Cab Light" (cab blues +
   amber) and IfICantSpeak's "Lamplight" (harbor ink + gold + Georgia).

   Cascade architecture (audited): flavor rules paint text on section
   descendants at (0,1,2); every light component re-paints its own text
   at (0,2,2)+ so a light panel can never inherit a dark section's ink;
   an explicit scoped color rule exists for every required element
   (h1,h2,h3,p,li,label,legend,small,button) in every flavor. */

:root{
  --ink:#1D2420;
  --ink-deep:#0F1512;
  --ink-soft:#48534C;
  --paper:#F7F5EE;
  --alt:#ECE9DE;
  --card:#FEFDF9;
  --line:#D6D0BE;
  --green:#1E5B44;
  --green-deep:#174734;
  --green-soft:#A9C6B6;
  --stamp:#B23A2E;
  --stamp-bg:#F8E9E2;
  --hero-help:#C9D4CC;
  --notice-bg:#F1EDDC;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
}

*{box-sizing:border-box}
html{font-size:19px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.62;
}
h1,h2,h3{font-family:var(--serif);line-height:1.2;color:var(--ink)}
h1{font-size:2.3rem;margin:.15em 0 .4em}
h2{font-size:1.62rem;margin:0 0 .55em}
h3{font-size:1.2rem;margin:0 0 .45em}
p{color:var(--ink)}
li{color:var(--ink)}
ul,ol{margin:0 0 1em;padding-left:1.35em}
li{margin-bottom:.4em}
a{color:var(--green)}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
section{padding:52px 0}
section.alt{background:var(--alt)}
section.dark{background:var(--ink-deep);color:var(--paper)}
section.hero{background:linear-gradient(165deg,#182720 0%,var(--ink-deep) 65%);color:var(--paper);padding:56px 0 44px}
section.alt h1,section.alt h2,section.alt h3,section.alt p,section.alt li{color:var(--ink)}
section.dark h1,section.dark h2,section.dark h3,section.dark p,section.dark li,
section.hero h1,section.hero h2,section.hero h3,section.hero p,section.hero li{color:var(--paper)}
section.alt a{color:var(--green)}
section.dark a,section.hero a{color:var(--green-soft)}
.tagline{font-size:1.15rem;max-width:34em}
.lede{font-size:1.12rem;max-width:38em}
.small{font-size:.88rem;color:var(--ink-soft)}
section.alt .small{color:var(--ink-soft)}
section.dark .small,section.hero .small{color:var(--hero-help)}
.fig{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stamp{
  display:inline-block;color:var(--stamp);border:2px solid var(--stamp);
  border-radius:6px;padding:2px 10px;font-weight:700;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.08em;transform:rotate(-1.2deg);
}
section.dark .stamp,section.hero .stamp{color:#E89A8D;border-color:#E89A8D}

/* ---------- wordmark lockup: ONE lockup, identical everywhere ---------- */
.wm{font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.005em;text-decoration:none;display:inline-block}
.wm .wm-1{color:var(--ink)}
.wm .wm-2{color:var(--green)}
.wm .wm-3{color:var(--stamp)}
.plate{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 18px;display:inline-block}

/* ---------- header / nav ---------- */
header{background:var(--paper);border-bottom:3px double var(--ink)}
.header-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:15px 0}
nav.main{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
nav.main a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.97rem;padding:6px 2px}
nav.main a:hover{color:var(--green);text-decoration:underline}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--green);color:var(--paper);
  font-weight:700;font-size:1.02rem;text-decoration:none;
  padding:14px 26px;border-radius:8px;border:2px solid var(--green-deep);
  cursor:pointer;font-family:inherit;line-height:1.3;
}
.btn:hover{background:var(--green-deep)}
button.btn{background:var(--green);color:var(--paper)}
section.alt a.btn,section.alt button.btn{background:var(--green);color:var(--paper)}
section.dark a.btn,section.dark button.btn,
section.hero a.btn,section.hero button.btn{background:var(--green);color:var(--paper)}
.card a.btn,.panel a.btn,.result a.btn,.lock-panel a.btn,.kitband a.btn,.stub a.btn,.notice a.btn{background:var(--green);color:var(--paper)}
.buyrow{margin:4px 0 12px}

/* ---------- kit band (homepage: directly under the hero. Checker page:
   only UNDER the completed tool — balance rule) ---------- */
.kitband{background:var(--alt);border-top:3px solid var(--green);border-bottom:1px solid var(--line);padding:30px 0}
.kitband h2{margin-bottom:.3em;color:var(--ink)}
.kitband p{color:var(--ink)}
.kitband .price{font-weight:700;color:var(--green)}

/* ---------- light components (identical in every flavor) ---------- */
.card,.panel,.notice,.result,.lock-panel,.stub{
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:26px 28px;margin:0 0 22px;
}
.card h1,.card h2,.card h3,.card p,.card li,.card a,
.panel h1,.panel h2,.panel h3,.panel p,.panel li,
.notice h1,.notice h2,.notice h3,.notice p,.notice li,
.result h1,.result h2,.result h3,.result p,.result li,
.lock-panel h1,.lock-panel h2,.lock-panel h3,.lock-panel p,.lock-panel li,
.stub h1,.stub h2,.stub h3,.stub p,.stub li{color:var(--ink)}
.panel a,.notice a,.result a,.lock-panel a,.stub a{color:var(--green)}
section.alt .card h1,section.alt .card h2,section.alt .card h3,section.alt .card p,section.alt .card li,
section.alt .panel h1,section.alt .panel h2,section.alt .panel h3,section.alt .panel p,section.alt .panel li,
section.alt .notice h1,section.alt .notice h2,section.alt .notice h3,section.alt .notice p,section.alt .notice li,
section.alt .result h1,section.alt .result h2,section.alt .result h3,section.alt .result p,section.alt .result li,
section.alt .lock-panel h1,section.alt .lock-panel h2,section.alt .lock-panel h3,section.alt .lock-panel p,section.alt .lock-panel li,
section.alt .stub h1,section.alt .stub h2,section.alt .stub h3,section.alt .stub p,section.alt .stub li,
section.dark .card h1,section.dark .card h2,section.dark .card h3,section.dark .card p,section.dark .card li,
section.dark .panel h1,section.dark .panel h2,section.dark .panel h3,section.dark .panel p,section.dark .panel li,
section.dark .notice h1,section.dark .notice h2,section.dark .notice h3,section.dark .notice p,section.dark .notice li,
section.dark .result h1,section.dark .result h2,section.dark .result h3,section.dark .result p,section.dark .result li,
section.dark .lock-panel h1,section.dark .lock-panel h2,section.dark .lock-panel h3,section.dark .lock-panel p,section.dark .lock-panel li,
section.dark .stub h1,section.dark .stub h2,section.dark .stub h3,section.dark .stub p,section.dark .stub li,
section.hero .card h1,section.hero .card h2,section.hero .card h3,section.hero .card p,section.hero .card li,
section.hero .panel h1,section.hero .panel h2,section.hero .panel h3,section.hero .panel p,section.hero .panel li,
section.hero .notice h1,section.hero .notice h2,section.hero .notice h3,section.hero .notice p,section.hero .notice li,
section.hero .result h1,section.hero .result h2,section.hero .result h3,section.hero .result p,section.hero .result li,
section.hero .lock-panel h1,section.hero .lock-panel h2,section.hero .lock-panel h3,section.hero .lock-panel p,section.hero .lock-panel li,
section.hero .stub h1,section.hero .stub h2,section.hero .stub h3,section.hero .stub p,section.hero .stub li{color:var(--ink)}
section.alt .card a,section.alt .panel a,section.alt .notice a,
section.alt .result a,section.alt .lock-panel a,section.alt .stub a,
section.dark .card a,section.dark .panel a,section.dark .notice a,
section.dark .result a,section.dark .lock-panel a,section.dark .stub a,
section.hero .card a,section.hero .panel a,section.hero .notice a,
section.hero .result a,section.hero .lock-panel a,section.hero .stub a{color:var(--green)}
section.alt .card a.btn,section.alt .panel a.btn,section.alt .notice a.btn,
section.alt .result a.btn,section.alt .lock-panel a.btn,section.alt .stub a.btn,
section.dark .card a.btn,section.dark .panel a.btn,section.dark .notice a.btn,
section.dark .result a.btn,section.dark .lock-panel a.btn,section.dark .stub a.btn,
section.hero .card a.btn,section.hero .panel a.btn,section.hero .notice a.btn,
section.hero .result a.btn,section.hero .lock-panel a.btn,section.hero .stub a.btn{background:var(--green);color:var(--paper)}
.lock-panel{border:2px dashed var(--green)}
.lockline{font-weight:700;color:var(--green)}
section.alt .lock-panel .lockline,section.dark .lock-panel .lockline,section.hero .lock-panel .lockline{color:var(--green)}
.notice{background:var(--notice-bg)}
.stub{border-left:3px dashed var(--line);border-radius:4px 12px 12px 4px}

/* ---------- the checker form ---------- */
form.tool{color:var(--ink)}
form.tool fieldset.q{
  border:1px solid var(--line);border-radius:10px;
  padding:20px 22px;margin:0 0 18px;background:transparent;
}
form.tool legend{font-weight:700;font-size:1.05rem;padding:0 6px;color:var(--ink)}
form.tool label{color:var(--ink)}
form.tool .qhelp{color:var(--ink-soft);font-size:.94rem;margin:.2em 0 .7em}
form.tool .opts{display:flex;flex-wrap:wrap;gap:10px 26px}
form.tool .opts label{
  font-size:1.02rem;display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--card);
}
form.tool .fld{margin:0 0 16px}
form.tool .fld label{display:block;font-weight:600;margin-bottom:5px}
form.tool select,form.tool input[type="date"],form.tool input[type="number"],form.tool input[type="text"]{
  font:inherit;font-size:1.02rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;width:100%;max-width:460px;
}
form.tool input[type="radio"]{width:21px;height:21px;accent-color:var(--green)}
section.alt form.tool{color:var(--ink)}
section.alt form.tool legend{color:var(--ink)}
section.alt form.tool label{color:var(--ink)}
section.alt form.tool .qhelp{color:var(--ink-soft)}
section.dark form.tool,section.hero form.tool{color:var(--paper)}
section.dark form.tool legend,section.hero form.tool legend{color:var(--paper)}
section.dark form.tool label,section.hero form.tool label{color:var(--paper)}
section.dark form.tool .qhelp,section.hero form.tool .qhelp{color:var(--hero-help)}
section.dark form.tool .opts label,section.hero form.tool .opts label{color:var(--ink);background:var(--card);border-color:var(--line)}
section.dark form.tool button.btn,section.hero form.tool button.btn{background:var(--green);color:var(--paper)}
section.alt form.tool button.btn{background:var(--green);color:var(--paper)}
.warn{
  background:var(--stamp-bg);color:var(--ink);border:1px solid var(--stamp);
  border-radius:10px;padding:14px 18px;margin:0 0 18px;font-weight:600;
}
section.alt .warn,section.dark .warn,section.hero .warn{color:var(--ink)}

/* ---------- verdict ---------- */
.result-total{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:2.1rem;font-weight:700;color:var(--ink);margin:0 0 .1em}
section.alt .result .result-total,section.dark .result .result-total,section.hero .result .result-total{color:var(--ink)}
.result .vrow{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;
  border-bottom:1px solid var(--line);padding:9px 0}
.result .vrow .vlab{color:var(--ink-soft)}
.result .vrow .vnum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}
section.alt .result .vrow .vlab,section.dark .result .vrow .vlab,section.hero .result .vrow .vlab{color:var(--ink-soft)}

/* ---------- grids / cards row ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.grid .card{margin:0}
.stategrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 10px}
.stategrid a{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.97rem;
}
.stategrid a:hover{border-color:var(--green);color:var(--green)}

/* ---------- ledger tables + kit worksheets ---------- */
table.ledger{width:100%;border-collapse:collapse;margin:0 0 22px;background:var(--card)}
table.ledger th,table.ledger td{border:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top;font-size:.97rem}
table.ledger th{background:var(--alt);color:var(--ink);font-weight:700;border-bottom:3px double var(--ink)}
table.ledger td.fill{height:44px}
table.ledger input[type="text"]{
  width:100%;border:none;border-bottom:1px solid var(--line);
  font:inherit;font-size:.97rem;background:transparent;color:var(--ink);padding:2px 0;
}
textarea.fillin{
  width:100%;min-height:96px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.97rem;background:var(--card);color:var(--ink);padding:10px 12px;
}
.checkline{list-style:none;padding-left:0}
.checkline li{padding-left:1.7em;position:relative}
.checkline li::before{content:"☐";position:absolute;left:0;color:var(--green);font-weight:700}
.railbox{
  background:var(--notice-bg);border:1px solid var(--green);border-radius:12px;
  padding:20px 24px;margin:0 0 24px;color:var(--ink);
}
.railbox p,.railbox li{color:var(--ink)}
.letter{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:26px 28px;font-size:.99rem;margin:0 0 22px;white-space:pre-wrap;
}
.letter .amt{font-family:var(--mono);font-weight:700}

/* ---------- footer ---------- */
footer{background:var(--ink-deep);color:var(--paper);padding:44px 0 34px;margin-top:0}
footer p,footer li{color:var(--paper)}
footer a{color:var(--green-soft)}
footer .plate a{color:var(--green)}
footer nav.foot{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0}
footer nav.foot a{text-decoration:none;font-weight:600}
.foot-note{font-size:.9rem;color:var(--hero-help)}

/* ---------- misc ---------- */
.crumb{font-size:.92rem;color:var(--ink-soft);margin-bottom:8px}
section.alt .crumb{color:var(--ink-soft)}
section.dark .crumb,section.hero .crumb{color:var(--hero-help)}
.kicker{font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:.82rem;color:var(--green);margin:0 0 .5em}
section.alt .kicker{color:var(--green)}
section.dark .kicker,section.hero .kicker{color:var(--green-soft)}
.rule{border:none;border-top:3px double var(--ink);margin:26px 0}
[hidden]{display:none !important}
.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 26px;margin:0 0 26px}
.toc a{color:var(--green)}
section.alt .toc a,section.dark .toc a,section.hero .toc a{color:var(--green)}

@media (max-width:760px){
  html{font-size:18px}
  h1{font-size:1.85rem}
  section{padding:38px 0}
  section.hero{padding:40px 0 30px}
  .header-in{gap:10px 16px;padding:12px 0}
  nav.main{gap:4px 16px;margin-left:0}
  nav.main a{font-size:.94rem;padding:8px 2px}
  .btn{padding:14px 22px}
  .result-total{font-size:1.7rem}
  table.ledger th,table.ledger td{padding:9px 8px;font-size:.92rem}
  table.ledger{display:block;overflow-x:auto}
}

@media print{
  header,footer,.noprint{display:none !important}
  body{background:#fff}
  section{padding:10px 0}
  .card,.panel,.notice,.result,.lock-panel,.railbox,.toc,.stub{border-color:#999;break-inside:avoid}
  table.ledger{break-inside:avoid}
}