@font-face { font-family: "Plex Condensed"; src: url("fonts/plex-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #eef1ea;          /* ledger paper, green-grey */
  --paper: #fbfcf8;       /* the entry sheet */
  --ink: #1b2420;
  --muted: #4e5a54;
  --rule: #d3dccf;        /* ledger ruling */
  --rule-strong: #7d8c83; /* input borders, 3:1 */
  --margin: #c2362b;      /* ledger margin line, mismatches */
  --bad: #a92c22;
  --bad-soft: #fbe7e4;
  --ok: #1f6a43;
  --ok-soft: #e1f0e5;
  --warn: #7a4f1d;
  --warn-soft: #f6ead6;   /* kraft deposit bag */
  --btn: #1b2420;
  --btn-ink: #ffffff;
  --focus: #1c5fa8;
  --head: "Plex Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121715; --paper: #1a201d; --ink: #e8ede9; --muted: #a8b5ad; --rule: #2e3833; --rule-strong: #6f7f76;
    --margin: #ff8f84; --bad: #ff9c92; --bad-soft: #3a1f1c; --ok: #86d3a5; --ok-soft: #173326; --warn: #e2b57a; --warn-soft: #33281a;
    --btn: #e8ede9; --btn-ink: #121715; --focus: #8cbcf0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
a { color: var(--focus); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.15; }
h1 { font-size: 2.1rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.55rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: 8px 12px; z-index: 5; }
.skip:focus { left: 8px; }

.topbar { border-bottom: 1px solid var(--rule); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 600 1.25rem var(--head); }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: 10px 0; }
.topbar nav a:hover { color: var(--ink); text-decoration: underline; }

.hero { max-width: 720px; padding: 22px 0 6px; }
.lede { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 62ch; }

/* ---------- tool ---------- */
.tool { max-width: 720px; margin: 16px 0 8px; }
.setup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .who label { font-size: .92rem; font-weight: 600; }
input, select { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 9px 10px; min-height: 44px; width: 100%; min-width: 0; }
input[aria-invalid] { border-color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
input::placeholder { color: var(--muted); opacity: .8; }
.more { grid-column: 1 / -1; }
.more summary, details.sub summary { cursor: pointer; color: var(--muted); padding: 8px 0; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.more summary::-webkit-details-marker, details.sub summary::-webkit-details-marker { display: none; }
.more summary::before, details.sub summary::before { content: "+"; font: 600 1.1rem var(--head); width: 1em; }
.more[open] summary::before, details.sub[open] summary::before { content: "−"; }
.more-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-bottom: 6px; }

.tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 2px solid var(--ink); scroll-margin-top: 8px; }
.tabs [role=tab] { flex: 1 1 0; font: 600 1.02rem var(--head); color: var(--muted); background: transparent; border: 1px solid var(--rule); border-bottom: 0;
  border-radius: 6px 6px 0 0; padding: 10px 6px; min-height: 48px; cursor: pointer; }
.tabs [role=tab][aria-selected=true] { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 0 2px 0 var(--paper); }
.tick { color: var(--ok); }
.panel { background: var(--paper); border: 1px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; padding: 14px 16px 18px; }

.who { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-bottom: 4px; }
.hint { color: var(--muted); margin: 6px 0 4px; font-size: .95rem; }

/* ledger tables: ruled rows, red margin before the amount column */
.ledger { width: 100%; border-collapse: collapse; margin-top: 14px; font-variant-numeric: tabular-nums; }
.ledger thead th { font: 600 .95rem var(--head); color: var(--muted); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--rule-strong); }
.ledger thead th:first-child { font-size: 1.1rem; color: var(--ink); }
.ledger thead th:last-child, .ledger td.amt { text-align: right; }
.ledger tbody th { text-align: left; font-weight: 600; padding: 3px 6px; width: 36%; }
.ledger tbody th label { display: block; }
.ledger tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.ledger td { padding: 3px 6px; border-bottom: 1px solid var(--rule); }
.ledger tbody th { border-bottom: 1px solid var(--rule); }
.ledger td:nth-child(2) { width: 30%; }
.ledger td.amt { border-left: 3px double var(--margin); white-space: nowrap; }
.ledger input.qty { text-align: right; max-width: 7.5em; }
.ledger tfoot th, .ledger tfoot td { padding: 6px; font-weight: 700; text-align: left; }
.ledger tfoot td.amt { text-align: right; border-bottom: 0; }
details.sub { margin-top: 10px; border-top: 1px solid var(--rule); }
.field.inline { margin: 4px 0 8px; max-width: 22rem; }

.checks h3 { margin-top: 18px; }
.ck-head, .ck-list li { display: grid; grid-template-columns: 5.5rem 1fr 7.5rem 2.75rem; gap: 6px; align-items: center; }
.ck-head { font: 600 .9rem var(--head); color: var(--muted); }
.ck-head span:nth-child(3) { text-align: right; }
.ck-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ck-amt { text-align: right; }
.ck-del { width: 44px; height: 44px; border: 1px solid var(--rule); background: transparent; color: var(--muted); border-radius: 6px; font-size: 1.3rem; cursor: pointer; }
.ck-del:hover { color: var(--bad); border-color: var(--bad); }
.ck-total { text-align: right; margin: 6px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .ck-head { display: none; }
  .ck-list { gap: 10px; }
  .ck-list li { grid-template-columns: 5rem 1fr 2.75rem; grid-template-areas: "no amt del" "from from from"; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .ck-list .ck-no { grid-area: no; } .ck-list .ck-amt { grid-area: amt; } .ck-list .ck-from { grid-area: from; } .ck-list .ck-del { grid-area: del; }
}
/* column heads show on wider screens; the No. and Amount placeholders stand in for them on phones */
@media (min-width: 480px) { .ck-no::placeholder, .ck-amt::placeholder { color: transparent; } }

.ctotal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding-top: 10px; border-top: 3px double var(--ink); }
.ctotal span { font: 600 1.1rem var(--head); }
.ctotal strong { font: 600 1.7rem var(--head); margin-left: auto; font-variant-numeric: tabular-nums; }
.ctotal small { flex-basis: 100%; text-align: right; color: var(--muted); font-size: .9rem; }
.row-btns, .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.btn { font: 600 1rem var(--body); min-height: 46px; padding: 10px 18px; border-radius: 6px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn.quiet { border-color: transparent; color: var(--muted); text-decoration: underline; padding-inline: 6px; }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: .95rem; margin-top: 8px; }
.link { font: inherit; background: none; border: 0; padding: 6px 2px; color: var(--focus); text-decoration: underline; cursor: pointer; min-height: 44px; }
.examples { color: var(--muted); margin: 10px 0 0; font-size: .95rem; }

/* compare */
.status { border-left: 6px solid var(--rule-strong); padding: 10px 14px; background: var(--bg); border-radius: 0 6px 6px 0; }
.status p { margin: 0; }
.status .st-head { font: 600 1.35rem var(--head); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.status.ok { border-color: var(--ok); background: var(--ok-soft); }
.status.bad { border-color: var(--bad); background: var(--bad-soft); }
.status.warn { border-color: var(--warn); background: var(--warn-soft); }
.status.wait { border-color: var(--warn); }
.difflist { margin: 6px 0 0; padding-left: 1.2em; }
.difflist li { margin: 2px 0; }
.tbl-fit { overflow-x: auto; }
.sbs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.sbs th, .sbs td { padding: 5px 6px; border-bottom: 1px solid var(--rule); text-align: right; }
.sbs th[scope=row], .sbs thead th:first-child { text-align: left; }
.sbs tr.off { background: var(--bad-soft); }
.sbs tr.off th::after { content: " differs"; color: var(--bad); font-weight: 600; font-size: .8em; }
.sbs tfoot th, .sbs tfoot td { font-weight: 700; border-top: 2px solid var(--ink); }
.dim { color: var(--muted); font-size: .9em; margin-left: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; cursor: pointer; }
label.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--ink); }
.fund-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.fund-list li { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 2.75rem; gap: 6px; align-items: center; }
.fund-amt, .fund-rest { text-align: right; }
.fund-rest { padding: 9px 11px; font-variant-numeric: tabular-nums; font-weight: 600; border-bottom: 1px dashed var(--rule-strong); }
.fund-rest.neg { color: var(--bad); }
.sum { width: 100%; max-width: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sum th { text-align: left; font-weight: 400; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.sum td { text-align: right; padding: 5px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.sum.after { margin-top: 14px; }
.sum tr.sumline th, .sum tr.sumline td { border-top: 2px solid var(--ink); }
.sum tr.big th, .sum tr.big td { font: 600 1.2rem var(--head); }
.sum tr.short td { color: var(--bad); }
.sum tr.over td { color: var(--warn); }
.sum tr.even td { color: var(--ok); }
.warnline { color: var(--bad); font-weight: 600; margin: 8px 0 0; }
.toast { min-height: 0; margin: 8px 0 0; }
.toast.on { padding: 8px 12px; background: var(--ink); color: var(--bg); border-radius: 6px; }
.toast .link { color: inherit; }

/* ---------- content ---------- */
.content { max-width: 70ch; padding-bottom: 24px; }
.content p { margin: 0 0 1rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; min-height: 44px; }
.faq details p { margin: 0 0 14px; }
.sources { color: var(--muted); font-size: .95rem; margin-top: 1.6rem; }
.nojs { padding: 12px; background: var(--warn-soft); }

footer { border-top: 1px solid var(--rule); margin-top: 24px; padding: 18px 0 28px; color: var(--muted); font-size: .95rem; }
footer a { color: var(--ink); }
.sb-footer p { margin: 0 0 8px; }

@media (max-width: 560px) {
  h1 { font-size: 1.75rem; }
  .hero { padding-top: 16px; }
  .lede { font-size: 1rem; }
  .more-in, .grid2 { grid-template-columns: 1fr; }
  .panel { padding: 12px 10px 16px; }
  .tabs [role=tab] { font-size: .95rem; padding: 8px 4px; }
  .ledger tbody th { width: 34%; }
  .topbar nav a:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- printed sheet ---------- */
.print-sheet { display: none; }
@page { margin: 12mm 12mm 12mm; }
@media print {
  :root { --ink: #111; --muted: #444; }
  html, body { background: #fff !important; color: #111; font: 10pt/1.35 var(--body); }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; color: #111; }
  .print-sheet h2, .print-sheet h3 { font-family: var(--head); margin: 0; }
  .ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; border-bottom: 1.5pt solid #111; padding-bottom: 2.5mm; }
  .ps-head h2 { font-size: 18pt; }
  .ps-org { margin: 1mm 0 0; font-size: 11pt; }
  .ps-meta { display: grid; grid-template-columns: auto auto; gap: 1mm 6mm; margin: 0; font-size: 9.5pt; }
  .ps-meta div { display: flex; gap: 2mm; align-items: baseline; }
  .ps-meta dt { color: #444; white-space: nowrap; }
  .ps-titles { flex: 1 1 auto; min-width: 0; }
  .ps-meta { flex: 0 0 auto; }
  .ps-meta dd { margin: 0; font-weight: 600; min-width: 28mm; }
  .blank { display: inline-block; min-width: 30mm; border-bottom: .6pt solid #555; height: 1em; }
  .ps-status { margin: 2.5mm 0 0; font-weight: 700; padding: 1.5mm 3mm; border: .8pt solid #111; }
  .ps-status.bad { border-width: 1.6pt; }
  .ps-body { display: grid; grid-template-columns: 58% 1fr; gap: 6mm; margin-top: 3.5mm; align-items: start; }
  .ps-count { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 9.5pt; }
  .ps-count th, .ps-count td { border: .5pt solid #888; padding: .5mm 1.6mm; height: 5mm; }
  .ps-count thead th { background: #f0f0f0; font-weight: 700; text-align: center; font-size: 9pt; }
  .ps-count tr.ps-who th { background: #fff; font-size: 9.5pt; text-align: center; }
  .ps-count tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
  .ps-count tbody th small { font-weight: 400; color: #444; font-size: 7.5pt; }
  .ps-count td { text-align: right; }
  .ps-count col.c-d { width: 28%; } .ps-count col.c-q { width: 12%; } .ps-count col.c-a { width: 24%; }
  .ps-count tr.subt th, .ps-count tr.subt td { font-weight: 700; background: #f6f6f6; }
  .ps-count tr.grand th, .ps-count tr.grand td { font-weight: 700; font-size: 10.5pt; border-top: 1.5pt solid #111; }
  .ps-count tbody + tbody tr:first-child th, .ps-count tbody + tbody tr:first-child td { border-top: 1.2pt solid #111; }
  .ps-count tr.off th::after { content: " differs"; font-weight: 700; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .03em; }
  .ps-count tr.off td { font-weight: 700; text-decoration: underline; }
  .ps-box { margin-bottom: 5mm; break-inside: avoid; }
  .ps-box h3 { font-size: 11.5pt; border-bottom: 1pt solid #111; padding-bottom: .8mm; margin-bottom: 1mm; }
  .ps-sum { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .ps-sum.after { margin-top: 3mm; }
  .ps-sum th { text-align: left; font-weight: 400; padding: 1.1mm 0; border-bottom: .5pt solid #aaa; }
  .ps-sum td { text-align: right; padding: 1.1mm 0 1.1mm 2mm; border-bottom: .5pt solid #aaa; white-space: nowrap; }
  .ps-sum td .blank { min-width: 24mm; }
  .ps-sum tr.rule th, .ps-sum tr.rule td { border-top: 1pt solid #111; }
  .ps-sum tr.strong th, .ps-sum tr.strong td { font-weight: 700; }
  .ps-note { font-size: 8.5pt; color: #444; margin: 1mm 0 0; }
  .ps-frame { width: 100%; border-collapse: collapse; }
  .ps-frame > thead { display: table-header-group; }
  .ps-frame > thead > tr > td { padding: 0 0 3.5mm; }
  .ps-frame > tbody > tr > td, .ps-frame > thead > tr > td { padding-left: 0; padding-right: 0; vertical-align: top; }
  .ps-frame .ps-status { margin-top: 0; }
  .ps-frame .ps-body { margin-top: 0; }
  .ps-frame .ps-status + .ps-body { margin-top: 3mm; }
  .ps-cklist { margin-top: 4mm; }
  .ps-cklist h3 { font-size: 11pt; margin-bottom: 1.2mm; break-after: avoid; }
  .ps-ckcols { break-inside: avoid; }
  .ps-ckcols + .ps-ckcols { margin-top: 4mm; }
  .ps-cont { grid-column: 1 / -1; margin: 0; font-size: 9pt; font-weight: 600; }
  .ps-cklist h3 small { font-weight: 400; font-family: var(--body); font-size: 8.5pt; }
  .ps-ckcols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2mm 6mm; }
  .ps-checks { width: 100%; border-collapse: collapse; font-size: 9pt; font-variant-numeric: tabular-nums; }
  .ps-checks th, .ps-checks td { border: .5pt solid #888; padding: .6mm 1.6mm; height: 5.2mm; text-align: left; }
  .ps-checks th { background: #f0f0f0; font-size: 8.5pt; }
  .ps-checks th:last-child, .ps-checks td:last-child { text-align: right; width: 28%; }
  .ps-checks th:first-child, .ps-checks td:first-child { width: 20%; }
  .ps-checks tr { break-inside: avoid; }
  .ps-sigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7mm; margin-top: 9mm; break-inside: avoid; }
  .ps-sigsum { grid-column: 1 / -1; margin: 0 0 -3mm; font-weight: 700; }
  .ps-box.long { break-inside: auto; }
  .ps-sum tr { break-inside: avoid; }
  .ps-sigs + .ps-cklist { margin-top: 8mm; }
  .sig-line { border-bottom: .8pt solid #111; height: 9mm; }
  .sig p { margin: 1mm 0 0; font-size: 9pt; }
  .sig .sig-sub { color: #444; font-size: 8pt; margin: 0; }
  .ps-foot { grid-column: 1 / -1; margin: 1mm 0 0; font-size: 8.5pt; color: #444; }
}