/* Bank Reconciliation Practice: a bank statement on the desk. Pale green security-paper ground, deep green ink and
   rules, figures in a mono face, and the auditor's red pencil for ticks and for the one accent that matters (the
   balance that has to agree). Square corners, thin rules, a strong left edge. On paper: black rules on white. */
:root {
  --bg: #e9efe9;
  --paper: #fbfdfb;
  --ink: #17231f;
  --muted: #4b5a55;
  --line: #c9d8d0;
  --rule: #2f6b57;
  --accent: #1d5c4a;
  --accent-ink: #ffffff;
  --accent-soft: #d6e8df;
  --pencil: #c0322b;
  --wash: #f1f6f2;
  --stripe: #f4f8f5;
  --ok: #1b6a3a;
  --ok-soft: #dcefe2;
  --close: #7a5300;
  --close-soft: #f6ead0;
  --bad: #a3271f;
  --bad-soft: #f8e1dd;
  --focus: #1b5fd0;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cond: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121816;
    --paper: #18201d;
    --ink: #e3ebe6;
    --muted: #a7b5ae;
    --line: #2d3a35;
    --rule: #6fbf9e;
    --accent: #7ccfac;
    --accent-ink: #0b1a14;
    --accent-soft: #1a3329;
    --pencil: #ff8a7f;
    --wash: #1c2622;
    --stripe: #1b2420;
    --ok: #8fd8a3;
    --ok-soft: #15301d;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --focus: #8ab8ff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- hero and setup ---------- */
.hero { padding: 22px 0 6px; border-bottom: 3px double var(--rule); margin-bottom: 14px; }
h1 { font-family: var(--cond); font-weight: 700; font-size: clamp(1.6rem, 4.6vw, 2.5rem); line-height: 1.12; margin: 0 0 6px; letter-spacing: -0.01em; max-width: 24ch; }
.lede { margin: 0 0 10px; color: var(--muted); max-width: 64ch; }
.setup { display: grid; gap: 10px; margin-bottom: 14px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: 0.92rem; color: var(--muted); padding: 0; margin-bottom: 4px; }
.seg, .lseg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); background: var(--paper); width: fit-content; max-width: 100%; }
.sg, .lg { position: relative; display: flex; }
.sg input, .lg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sg span, .lg span { display: flex; align-items: center; min-height: 44px; padding: 6px 13px; font-size: 0.95rem; border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.sg:last-child span, .lg:last-child span { border-right: 0; }
.lg b { font-family: var(--mono); margin-right: 6px; color: var(--muted); font-weight: 600; }
.sg input:checked + span, .lg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.lg input:checked + span b { color: var(--accent-ink); }
.sg input:focus-visible + span, .lg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.lvdesc { margin: 4px 0 0; font-size: 0.92rem; color: var(--muted); }
.course-note { margin: 0; font-size: 0.92rem; color: var(--muted); }
.setrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.95rem; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.inline { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.95rem; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 0; }
select { min-height: 44px; padding: 4px 8px; }
.btn { font: inherit; font-size: 0.97rem; min-height: 44px; padding: 8px 16px; border: 1px solid var(--accent); background: var(--paper); color: var(--accent); cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--accent-soft); }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { min-height: 40px; padding: 6px 14px; }
.link { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 10px 4px; min-height: 44px; }

/* ---------- notes ---------- */
.note { padding: 10px 12px; background: var(--bad-soft); border: 1px solid var(--bad); margin: 0 0 12px; }
.note.info { background: var(--accent-soft); border-color: var(--accent); }
#store-note { overflow-wrap: anywhere; }

/* ---------- the sheet ---------- */
.sheet { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--rule); padding: 14px 16px 16px; outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-family: var(--cond); font-size: 1.35rem; }
.code { font-family: var(--mono); letter-spacing: 0.06em; }
.sline { margin: 0; color: var(--muted); font-size: 0.95rem; }
.score { margin: 0 0 0 auto; font-size: 0.95rem; font-weight: 600; }
.rules { margin: 4px 0 10px; font-size: 0.95rem; }
.rules summary, .work summary, .recent summary, .faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 600; }
.rules ul { margin: 4px 0 8px; padding-left: 20px; color: var(--muted); }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 6px 0 16px; border-bottom: 3px double var(--line); }
.q:last-child { border-bottom: 0; }
.q h3 { font-family: var(--cond); font-size: 1.2rem; margin: 6px 0 4px; display: flex; gap: 8px; }
.qn { color: var(--pencil); font-family: var(--mono); }
.scen { margin: 0 0 6px; max-width: 75ch; }
.qnotes { margin: 0 0 8px; padding-left: 20px; font-size: 0.95rem; color: var(--muted); }
.stp { margin-top: 12px; }
.stp h4, .h4s { font-family: var(--cond); font-size: 1.05rem; margin: 6px 0 6px; display: flex; align-items: center; gap: 8px; }
.sn { display: inline-flex; width: 1.6em; height: 1.6em; align-items: center; justify-content: center; border: 1.5px solid var(--pencil); color: var(--pencil); font-family: var(--mono); font-size: 0.85rem; border-radius: 50%; }
.qhint { margin: 0 0 8px; font-size: 0.93rem; color: var(--muted); max-width: 75ch; }

/* ---------- documents ---------- */
.docs { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .docs { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } .docs > .twrap:has(.last) { grid-column: 1 / -1; } }
.twrap { overflow-x: auto; max-width: 100%; }
.tcap { margin: 0 0 4px; font-family: var(--cond); font-weight: 700; font-size: 1rem; color: var(--rule); }
table { border-collapse: collapse; }
.dt { width: 100%; font-size: 0.9rem; background: var(--paper); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.dt th, .dt td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.dt thead th { font-family: var(--cond); font-weight: 700; color: var(--rule); border-bottom: 1px solid var(--rule); font-size: 0.86rem; }
/* headers in the condensed face, not the figures' mono face, so a header never widens its column (fresh-eyes) */
.dt thead th.num { font-family: var(--cond); }
.dt tbody tr:nth-child(even) { background: var(--stripe); }
.dt .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dt .c-x { white-space: normal; min-width: 9em; }
.dt th.c-d, .dt td.c-d { font-weight: 400; }
.dt .c-k { width: 44px; text-align: center; padding: 0 2px; border-right: 1px solid var(--line); }
.dt .c-mk { color: var(--muted); padding-left: 0; }
.dt .r-bal { font-style: italic; }
.dt .r-bal th { font-weight: 400; }
.dt tfoot td, .dt tfoot th { border-top: 1px solid var(--rule); font-weight: 600; }
.doc.st td.c-n, .doc.cb td.c-n { font-family: var(--mono); font-size: 0.95em; color: var(--muted); }
/* the tick box: a red pencil tick when ticked */
.tick { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.tick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tick span { width: 22px; height: 22px; border: 1.5px solid var(--muted); background: var(--paper); position: relative; }
.tick input:checked + span { border-color: var(--pencil); }
.tick input:checked + span::after { content: ""; position: absolute; left: 6px; top: -4px; width: 7px; height: 16px; border: solid var(--pencil); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.tick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.tick.is-right span { background: var(--ok-soft); border-color: var(--ok); }
.tick.is-missing span { border: 2px dashed var(--bad); }
.tick.is-wrong span { background: var(--bad-soft); border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
.tk { color: var(--pencil); font-weight: 700; font-size: 1.1rem; }

/* ---------- the grid (ledger.js) ---------- */
.ledger-doc { margin: 0; }
.lhead { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; margin-bottom: 4px; }
.ltitle { margin: 0; font-family: var(--cond); font-weight: 700; color: var(--rule); }
.lmeta { margin: 0; font-size: 0.9rem; color: var(--muted); }
.lnote { margin: 0; font-size: 0.9rem; }
.lwrap { overflow-x: auto; max-width: 100%; }
.ledger { border-collapse: collapse; font-size: 0.92rem; background: var(--paper); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); min-width: 100%; }
.ledger th, .ledger td { border-bottom: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: middle; }
.ledger thead th { font-family: var(--cond); color: var(--rule); font-size: 0.86rem; white-space: nowrap; }
.ledger thead th.grp { text-align: center; border-bottom: 1px solid var(--rule); }
.ledger .gs { border-left: 2px solid var(--rule); }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td.c-x { min-width: 12em; }
.ledger td.c-d { white-space: nowrap; color: var(--muted); font-size: 0.86rem; }
.ledger tr.r-tot td { border-top: 1px solid var(--rule); font-weight: 600; }
.ledger tr.r-tot td.num { border-bottom: 3px double var(--rule); }
.ledger tr.g-tot td { background: var(--wash); }
.ledger td.in { padding: 2px 3px; }
.grid.g-uk td.c-x, .grid.g-us td.c-x, .grid.g-poc td.c-x { position: sticky; left: 0; background: var(--paper); z-index: 1; box-shadow: 1px 0 0 var(--line); }
.grid.g-uk td.c-d, .grid.g-us td.c-d, .grid.g-in td.c-d { display: none; }
.grid.g-uk th.c-d, .grid.g-us th.c-d, .grid.g-in th.c-d { display: none; }
@media (min-width: 700px) { .grid td.c-d, .grid th.c-d { display: table-cell !important; } .grid.g-uk td.c-x, .grid.g-us td.c-x, .grid.g-poc td.c-x { position: static; box-shadow: none; } }
.cell { width: 7.6em; min-width: 6.2em; min-height: 40px; padding: 4px 6px; text-align: right; font-family: var(--mono); font-size: 16px; border: 1px solid var(--line); background: var(--wash); }
.cell::placeholder { color: var(--muted); opacity: 0.55; font-size: 0.8em; }
.cell:focus { border-color: var(--accent); background: var(--paper); outline: 2px solid var(--focus); outline-offset: 0; }
.cell.is-right { border-color: var(--ok); background: var(--ok-soft); }
.cell.is-wrong, .cell.is-unread { border-color: var(--bad); background: var(--bad-soft); }
.cell.is-close { border-color: var(--close); background: var(--close-soft); }
.cell.is-missing { border: 2px dashed var(--bad); }
/* the item menu is see-through over the chosen line's words, which wrap, so the item reads in full on a phone */
.pickbox { position: relative; display: block; width: 100%; min-width: 11em; max-width: 26em; min-height: 44px; padding: 10px 26px 10px 8px; border: 1px solid var(--rule); background: var(--paper); font-size: 16px; line-height: 1.3; text-align: left; }
.pickbox::after { content: ''; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pickbox select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.pickbox:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pickshow { display: block; overflow-wrap: anywhere; }
.pickshow.none { color: var(--muted); }
.pickbox.is-right { border-color: var(--ok); background: var(--ok-soft); }
.pickbox.is-wrong, .pickbox.is-unread { border-color: var(--bad); background: var(--bad-soft); }
.sumlines { margin-top: 8px; display: grid; gap: 6px; max-width: 640px; }
.sl { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; border-bottom: 1px dotted var(--line); padding-bottom: 4px; }
.sll { font-size: 0.95rem; }
.sli .cell { width: 10em; }
.wline { display: inline-block; width: 9em; border-bottom: 1px solid #000; height: 1.3em; }

/* ---------- feedback, key ---------- */
.fbwrap { margin-top: 8px; }
.fb { margin: 4px 0; padding: 6px 10px; font-size: 1rem; border: 1px solid var(--line); background: var(--wash); max-width: 80ch; }
.fb.right { border-color: var(--ok); background: var(--ok-soft); }
.fb.wrong, .fb.unread, .fb.missing { border-color: var(--bad); background: var(--bad-soft); }
.fb.close { border-color: var(--close); background: var(--close-soft); }
.qfoot { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.work { margin-top: 6px; }
.keyfig { display: grid; gap: 14px; margin-top: 6px; grid-template-columns: minmax(0, 1fr); }
.keyfig > *, .docs > * { min-width: 0; }
.kdocs .docs { gap: 10px; }
.steps { margin: 10px 0 0; padding-left: 20px; font-size: 0.95rem; max-width: 80ch; }
.steps li { margin: 3px 0; }
.brs { max-width: 640px; }
.brs .c-x { white-space: normal; }
.brs tr.r-start td, .brs tr.r-start th, .brs tr.r-end td, .brs tr.r-end th { font-weight: 700; }
.brs tr.r-end td.num { border-bottom: 3px double var(--pencil); color: var(--pencil); }
.brs tr.r-gi th { padding-left: 22px; font-weight: 400; }
.brs thead { display: none; }
.je { max-width: 560px; }
.ubook .ledger td.c-x1, .ubook .ledger td.c-x2 { min-width: 10em; }
.ubook .ledger td.c-d1, .ubook .ledger td.c-d2 { white-space: nowrap; }

/* ---------- share, recent ---------- */
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.confirm { margin: 0; flex-basis: 100%; padding: 10px 12px; background: var(--bad-soft); border: 1px solid var(--bad); }
.share { margin: 16px 0 6px; }
.print-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.print-row label { display: inline-flex; align-items: center; gap: 8px; }
.share-out label { display: grid; gap: 4px; font-size: 0.95rem; }
.share-out input { width: 100%; min-height: 44px; padding: 6px 8px; font-family: var(--mono); }
.recent ul { list-style: none; padding: 0; margin: 4px 0; }
.recent li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 4px 0; }
.recent small { display: block; color: var(--muted); }
.hint { font-size: 0.9rem; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); background: var(--ink); color: var(--bg); padding: 10px 16px; max-width: min(92vw, 520px); font-size: 0.95rem; transition: transform 0.2s; z-index: 20; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- content and footer ---------- */
.content { max-width: 75ch; padding: 20px 0 10px; }
.content h2 { font-family: var(--cond); font-size: 1.4rem; margin: 26px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0 0 12px; }
.sources { font-size: 0.92rem; color: var(--muted); margin-top: 22px; }
footer { border-top: 3px double var(--rule); margin-top: 20px; padding: 14px 0 26px; font-size: 0.92rem; color: var(--muted); }
.indep { margin: 0 0 8px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.9; }
.sb-more a, .sb-credit a { color: var(--accent); }

/* ---------- phones ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .sheet { padding: 10px 10px 14px; margin: 0 -8px; border-left: 0; border-right: 0; }
  .seg { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .seg.two { grid-template-columns: repeat(2, 1fr); }
  .seg .sg span { width: 100%; border-bottom: 1px solid var(--line); }
  .seg .sg span { justify-content: center; padding: 6px 9px; font-size: 0.9rem; }
  .lseg { width: 100%; }
  .lseg .lg { flex: 1 1 45%; }
  .lseg .lg span { padding: 6px 9px; font-size: 0.9rem; width: 100%; border-bottom: 1px solid var(--line); }
  .score { margin-left: 0; flex-basis: 100%; }
  .dt { font-size: 0.8rem; }
  .dt th, .dt td { padding: 2px 2px; }
  .dt .c-x { min-width: 5.6em; }
  .dt thead th { white-space: normal; }
  .dt .c-k { width: 36px; }
  .dt .tick { width: 34px; }
  .dt .c-mk { padding-right: 0; }
  .ledger { font-size: 0.85rem; }
  .ledger td.c-x { min-width: 9em; max-width: 11em; }
  .cell { width: 6.4em; min-width: 5.6em; }
}
/* records that do not fit (fit.js measures, on screen only): side-by-side records are stacked first; if one still
   does not fit its box, every line of last month's list, the cash book and the statement or passbook shows on two
   lines, so every figure is in view without sideways scrolling. Line 1: tick, date, particulars, cheque no.; line 2:
   the amount named by its column (data-l from draw.js), then the balance with Cr/Dr. Same rows in the same order;
   records that fit, and paper, keep the ruled columns. */
@media screen {
  .docs.stack { grid-template-columns: minmax(0, 1fr); }
  .docs.rows .dt.doc, .docs.rows .dt.doc tbody, .docs.rows .dt.doc tfoot { display: block; width: 100%; }
  .docs.rows .dt.doc thead { display: none; }
  .docs.rows .dt.doc { font-size: 0.88rem; }
  .docs.rows .dt.doc tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; position: relative; min-height: 46px; padding: 5px 4px 5px 40px; border-bottom: 1px solid var(--line); }
  .docs.rows .dt.doc tr::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .docs.rows .dt.doc th, .docs.rows .dt.doc td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; width: auto; }
  .docs.rows .dt.doc th:empty, .docs.rows .dt.doc td:empty { display: none; }
  .docs.rows .dt.doc .c-k { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 38px; padding: 0; border: 0; text-align: center; }
  .docs.rows .dt.doc .tick { width: 38px; height: 44px; }
  .docs.rows .dt.doc .c-d { order: 1; flex: none; color: var(--muted); }
  .docs.rows .dt.doc .c-x { order: 2; flex: 1 1 0; min-width: 5em; }
  .docs.rows .dt.doc .c-n { order: 3; flex: none; }
  .docs.rows .dt.doc .c-dr, .docs.rows .dt.doc .c-cr, .docs.rows .dt.doc .c-a { order: 5; }
  .docs.rows .dt.doc .c-b { order: 6; margin-left: auto; }
  /* Cr/Dr sits in the row's last corner, after the balance, so it never wraps away from it */
  .docs.rows .dt.doc .c-mk { position: absolute; right: 4px; bottom: 5px; padding: 0; }
  .docs.rows .dt.doc.st:not(.us) .c-b { padding-right: 1.8em; }
  .docs.rows .dt.doc [data-l]::before { content: attr(data-l) " "; font-family: var(--sans); font-size: 0.86em; color: var(--muted); font-style: normal; }
  .docs.rows .dt.doc tfoot tr { border-top: 1px solid var(--rule); border-bottom: 0; }
}

/* ---------- print ---------- */
.print-root { display: none; }
@page { margin: 13mm 12mm; }
@media print {
  body { background: #fff; color: #000; font: 10.5pt/1.35 var(--sans); }
  main, footer, .skip, .toast { display: none !important; }
  .print-root { display: block; }
  :root { --paper: #fff; --ink: #000; --muted: #333; --line: #9a9a9a; --rule: #000; --wash: #fff; --stripe: #fff; --pencil: #000; }
  .pt { width: 100%; border-collapse: collapse; }
  .pt > thead td.prun { font-size: 8pt; color: #444; padding-bottom: 4px; text-align: right; }
  .psheet, .pkey { break-after: page; }
  .pkey:last-child { break-after: auto; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; margin-bottom: 4px; }
  .ph h2 { font-family: var(--cond); font-size: 16pt; margin: 0; }
  .ph p { margin: 0; font-size: 9.5pt; }
  .pmeta { display: flex; justify-content: space-between; margin: 6px 0; font-size: 10pt; }
  .plabel { font-size: 9pt; margin: 0 0 6px; }
  .pq, .pk { list-style: none; padding: 0; margin: 0; }
  .pq > li, .pk > li { break-before: page; padding-top: 2px; }
  .pq > li:first-child, .pk > li:first-child { break-before: auto; }
  .pq h3, .pk h3 { font-family: var(--cond); font-size: 12pt; margin: 4px 0 2px; }
  .pscen { margin: 0 0 4px; }
  .qnotes { margin: 0 0 4px; padding-left: 16px; font-size: 9pt; color: #000; }
  .docs { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 8px; align-items: start; }
  .docs > .twrap:has(.last) { grid-column: 1 / -1; }
  .twrap, .ledger-doc { break-inside: avoid; }
  .doc.st .c-x { min-width: 7.5em; }
  /* the passbook has two more columns (Chq. no., Cr./Dr.): its header fitted A4 only with these (fresh-eyes) */
  .doc.st.in .c-x { min-width: 6em; }
  .docs:has(table.st.in) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .doc.st.in th.c-mk { font-size: 7pt; padding-left: 1pt; padding-right: 0; }
  .twrap, .lwrap { overflow: visible; }
  .tcap, .ltitle { color: #000; font-size: 9.5pt; margin: 0 0 2px; }
  .dt, .ledger { font-size: 8.4pt; border-top: 1.2pt solid #000; border-bottom: 1.2pt solid #000; width: 100%; }
  .dt th, .dt td, .ledger th, .ledger td { padding: 1.5pt 3pt; border-bottom: 0.5pt solid #888; color: #000; }
  .dt thead th, .ledger thead th { color: #000; font-size: 8pt; white-space: normal; }
  .dt .c-x { min-width: 0; white-space: normal; }
  .dt .c-k { width: 18pt; }
  .dt tbody tr, .ledger tbody tr { break-inside: avoid; }
  .doc, .grid, .brs, .ubook, .je { break-inside: avoid; }
  .pbox { display: inline-block; width: 9pt; height: 9pt; border: 0.8pt solid #000; }
  .tk { color: #000; }
  .pgrid { margin-top: 8px; break-inside: avoid; }
  .grid td.c-d, .grid th.c-d { display: table-cell !important; }
  .grid.blank tbody td { height: 16pt; }
  .grid.blank td.num, .grid.blank th.num { width: 20mm; min-width: 20mm; }
  .doc.st .c-n, .doc.cb .c-n { font-size: 7.5pt; }
  .ledger td.c-d { font-size: 8pt; }
  .grid td.c-x { min-width: 0; position: static; box-shadow: none; }
  .sumlines { max-width: none; }
  .sl { border-bottom: 0; }
  .wline { width: 30mm; }
  .keyfig { display: block; }
  .keyfig > * { margin-bottom: 8px; }
  .kdocs .docs { gap: 6px; }
  .steps { font-size: 9.5pt; padding-left: 14px; break-inside: avoid; break-before: avoid; }
  .brs tr.r-end td.num { border-bottom: 2pt double #000; color: #000; }
  .ledger .gs { border-left: 1pt solid #000; }
}