/* Cash Book Practice: a manila cash book. Buff ledger paper, petrol-blue ink and accent, an ochre double rule down the
   Dr / Cr fold and under the column heads, figures in a mono face, book-face serif headings. Contra lines carry a
   faint ochre wash. On paper: black rules on white, each problem kept whole. */
:root {
  --bg: #f1ead8;
  --paper: #fffcf3;
  --ink: #1c2126;
  --muted: #4f5359;
  --line: #ddd3bb;
  --edge: #8a8170;
  --accent: #1f4f66;
  --accent-ink: #ffffff;
  --accent-soft: #dce8ec;
  --rule: #a8730f;
  --wash: #f6ecd2;
  --info: #1f4f66;
  --ok: #1d6a37;
  --ok-soft: #dcefe0;
  --close: #7a5300;
  --close-soft: #f6ead0;
  --bad: #a3271f;
  --bad-soft: #f8e1dd;
  --focus: #1b5fd0;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 2px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191d;
    --paper: #1d2126;
    --ink: #e8e4da;
    --muted: #b0aa9c;
    --line: #343a40;
    --edge: #6f6a5f;
    --accent: #8cc3dc;
    --accent-ink: #0d1d25;
    --accent-soft: #1d3340;
    --rule: #d9a441;
    --wash: #2a2618;
    --info: #8cc3dc;
    --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: 1180px; 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; }

.hero { padding: 18px 0 4px; max-width: 820px; margin-top: 8px; border-bottom: 4px double var(--rule); }
h1 { font: 700 clamp(1.75rem, 4.8vw, 2.6rem)/1.08 var(--serif); margin: 0 0 8px; letter-spacing: -0.01em; }
.lede { margin: 0 0 10px; color: var(--muted); max-width: 64ch; }
h2 { font: 700 1.35rem/1.2 var(--serif); margin: 0 0 10px; }

/* settings */
.setup { margin: 14px 0 4px; }
.work-area { min-width: 0; }
@media (min-width: 1000px) {
  .setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
  .setup .levels-f { flex: 1 1 560px; margin: 0; }
  .setup .units-f { flex: 0 0 320px; margin: 0; }
  .setup .aat-note { flex: 1 1 100%; margin: 0; }
}
fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; max-width: 440px; }
.sg, .lg { position: relative; display: block; cursor: pointer; }
.sg + .sg { border-left: 1px solid var(--edge); }
.sg input, .lg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sg > span { display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%; padding: 4px 6px; text-align: center; font-size: 0.95rem; font-weight: 650; background: var(--paper); }
.sg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.lseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
@media (min-width: 700px) { .lseg { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lseg[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lg > span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; height: 100%; padding: 4px 8px; border: 1px solid var(--edge); border-bottom-width: 3px; border-radius: var(--r); background: var(--paper); font-size: 0.9rem; font-weight: 600; line-height: 1.15; }
.lg b { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.lg input:checked + span { border-color: var(--rule); background: var(--wash); box-shadow: inset 0 -3px 0 var(--rule); }
.sg input:focus-visible + span, .lg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.aat-note { font-size: 1rem; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
.aat-note[hidden] { display: none; }
.setrow { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 600; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; }
select { max-width: 100%; }
.btn { font: inherit; font-weight: 650; min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { padding: 6px 14px; }
.btn:hover { filter: brightness(0.95); }
.link { font: inherit; background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.rules { margin: 12px 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-size: 0.93rem; }
.rules > summary { cursor: pointer; font-weight: 650; padding: 10px 12px; min-height: 44px; }
.rules ul { margin: 0; padding: 0 12px 10px 30px; color: var(--muted); max-width: 80ch; }
.rules li { margin: 0 0 6px; }

.note { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--close); background: var(--close-soft); overflow-wrap: anywhere; border-radius: var(--r); }
.note.info { border-color: var(--info); background: var(--paper); }
.note .link { min-height: 0; padding: 0; font-weight: 600; }

/* the sheet */
.sheet { margin: 12px 0 0; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--edge); padding-bottom: 4px; }
.sheet-head h2 { margin: 0; font-size: 1.2rem; }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.lvname { font: 500 0.9rem var(--sans); color: var(--muted); margin-left: 4px; }
.score { margin: 0; font-size: 0.95rem; color: var(--muted); }
.practice { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.qs { list-style: none; margin: 0; padding: 0; }
.q { border-bottom: 1px solid var(--line); padding: 22px 0 10px; }
.q h3 { font: 700 1.15rem/1.25 var(--serif); margin: 0 0 4px; }
.q h3 .qn { color: var(--accent); margin-right: 6px; font-family: var(--mono); font-size: 1rem; }
.q .scen { margin: 0 0 10px; max-width: 74ch; }
.qhint { margin: 6px 0 8px; font-size: 0.9rem; color: var(--muted); max-width: 74ch; }

/* the list of transactions */
.fig { margin: 0 0 6px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.twrap { overflow-x: auto; max-width: 100%; }
.tcap { margin: 0 0 3px; font-weight: 650; font-size: 0.88rem; color: var(--muted); }
.dt { border-collapse: collapse; background: var(--paper); font-size: 0.93rem; border: 1px solid var(--line); }
.dt th, .dt td { padding: 5px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dt thead th { font-size: 0.8rem; color: var(--muted); font-weight: 650; border-bottom: 3px double var(--rule); vertical-align: bottom; }
.dt .num { text-align: right; }
.dt td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt tbody th { font-weight: 500; white-space: nowrap; }
.txt-list { max-width: 760px; width: 100%; }
.txt-list td.c-x { min-width: 12em; }
.pc-list td.c-v { font-family: var(--mono); font-size: 0.88rem; }

/* the ruled book */
.ledger-doc { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); max-width: 100%; }
.lhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 8px 10px 6px; border-bottom: 1px solid var(--line); }
.ltitle { margin: 0; font: 700 1rem var(--serif); color: var(--accent); flex: 0 0 auto; }
.lmeta { margin: 0; font-size: 0.9rem; }
.lmeta span { color: var(--muted); }
.lwrap { overflow-x: auto; max-width: 100%; }
.lwrap:focus-visible { outline-offset: -3px; }
table.ledger { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.ledger th, .ledger td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.ledger thead th { font-size: 0.78rem; font-weight: 650; color: var(--muted); text-align: center; vertical-align: bottom; }
.ledger thead tr:last-child th { border-bottom: 3px double var(--rule); }
.ledger thead th.grp { color: var(--ink); font-size: 0.85rem; border-bottom: 1px solid var(--line); border-left: 3px double var(--rule); }
.ledger thead th[rowspan] { border-bottom: 3px double var(--rule); text-align: left; }
.ledger .gs { border-left: 3px double var(--rule); }
.ledger td.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.ledger td.txt { font-size: 0.88rem; }
.ledger td.c-x { white-space: normal; min-width: 8em; max-width: 13em; }
.ledger .c-d { position: sticky; left: 0; background: var(--paper); z-index: 1; box-shadow: 1px 0 0 var(--line); font-size: 0.86rem; }
.ledger thead .c-d { z-index: 2; }
.ledger td.in { padding: 3px 3px; }
.ledger tr.contra td { background: var(--wash); }
.ledger tr.contra td.c-d { background: var(--wash); }
.ledger tr.r-cd td, .ledger tr.r-o td { border-bottom: 1px solid var(--edge); }
.ledger tr.r-tot td, .ledger tr.r-gt td { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; }
.ledger tr.r-tot td.c-x, .ledger tr.r-gt td.c-x { font-weight: 650; color: var(--muted); }
input.cell { font-family: var(--mono); text-align: right; padding: 5px 5px; min-height: 40px; width: 6.4em; }
.cbook.in input.cell, .cbgrid.in input.cell { width: 6.8em; }
input.cell.is-right { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); background: var(--ok-soft); }
input.cell.is-wrong, input.cell.is-unread, input.cell.is-missing { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); background: var(--bad-soft); }
input.cell.is-close { border-color: var(--close); box-shadow: inset 0 0 0 1px var(--close); background: var(--close-soft); }
.key .ledger td.num { background: transparent; }
.cbook .ledger td.c-dx1, .cbook .ledger td.c-dx2 { white-space: normal; min-width: 7em; }
.pbook .ledger td.c-x, .pcgrid .ledger td.c-x { min-width: 10em; }
.vno { display: block; font-size: 0.78rem; color: var(--muted); font-family: var(--mono); }

/* the AAT analysed cash book in the key and on paper: the debit side above the credit side */
.an-book { display: grid; gap: 10px; }

/* checking and the key */
.cellfb { max-width: 74ch; margin: 0 0 6px; }
.qfoot { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.qfoot .fb { margin: 0; }
.fbwrap:empty { display: none; }
.fb { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r); max-width: 74ch; }
.fb.right { background: var(--ok-soft); color: var(--ok); }
.fb.close { background: var(--close-soft); color: var(--close); }
.fb.wrong, .fb.unread, .fb.missing { background: var(--bad-soft); color: var(--bad); }
.fb.more { color: var(--muted); padding: 2px 10px; }
.work { margin-top: 4px; min-width: 0; }
.work > summary { cursor: pointer; color: var(--muted); font-size: 0.93rem; padding: 10px 0; min-height: 44px; display: flex; align-items: center; list-style: none; }
.work > summary::-webkit-details-marker { display: none; }
.work > summary::before { content: "+"; margin-right: 6px; font-weight: 700; font-family: var(--mono); }
.work[open] > summary::before { content: "−"; }
.keyfig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 10px; }
.steps { list-style: disc; margin: 2px 0 10px; padding-left: 1.4em; font-size: 0.93rem; overflow-wrap: anywhere; max-width: 80ch; }
.sheet-foot { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 0; }
.confirm { flex: 1 1 100%; margin: 0; padding: 10px 12px; border: 1px solid var(--close); border-radius: var(--r); background: var(--close-soft); }
.confirm[hidden] { display: none; }

.share { margin: 10px 0 8px; }
.print-row { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; }
.print-row label, .share-out label { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; font-weight: 600; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; border-top: 1px solid var(--line); }
.recent summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 4px 0; }
.recent small { display: block; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 8px 0 10px; }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 160%); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); width: max-content; max-width: min(36rem, calc(100vw - 32px)); transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* content */
.content { padding: 22px 0 8px; max-width: 800px; }
.content h2 { margin-top: 30px; }
.content p { max-width: 68ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.faq details p { margin: 0 0 12px; }
.sources { font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; margin-top: 22px; }

footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 16px 0 28px; color: var(--muted); font-size: 0.92rem; }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--ink); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 600px) {
  .hero { padding-top: 6px; margin-top: 6px; }
  .q .scen { font-size: 0.97rem; }
  .ledger th, .ledger td { padding: 3px 4px; }
  .dt th, .dt td { padding: 4px 6px; }
  .txt-list td.c-x { min-width: 0; }
}
/* phones: the date and details stay in view while the amount columns scroll under them */
@media screen and (max-width: 700px) {
  .cbgrid .ledger .c-d, .pcgrid .ledger .c-d { width: 4.4rem; min-width: 4.4rem; max-width: 4.4rem; white-space: normal; font-size: 0.8rem; }
  .cbgrid .ledger .c-x, .pcgrid .ledger .c-x { position: sticky; left: 4.4rem; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--edge); min-width: 6.6rem; max-width: 6.6rem; font-size: 0.8rem; line-height: 1.25; overflow-wrap: anywhere; }
  .cbgrid .ledger thead .c-x, .pcgrid .ledger thead .c-x { z-index: 2; }
  .ledger tr.contra td.c-x { background: var(--wash); }
  input.cell { width: 5.8em; }
}
/* tablets and up: a wide book (a petty cash book with six analysis columns, or a three-column book at 768 px) also
   scrolls in its box, so the details stay beside the date there too (QA 2026-10-26: they slid under the date) */
@media screen and (min-width: 701px) {
  .cbgrid .ledger .c-d, .pcgrid .ledger .c-d { width: 5rem; min-width: 5rem; max-width: 5rem; }
  .cbgrid .ledger .c-x, .pcgrid .ledger .c-x { position: sticky; left: 5rem; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--edge); }
  .cbgrid .ledger thead .c-x, .pcgrid .ledger thead .c-x { z-index: 2; }
  .ledger tr.contra td.c-x { background: var(--wash); }
}
@media screen and (max-width: 360px) {
  .lg > span { padding: 4px 4px; font-size: 0.82rem; }
  .sg > span { font-size: 0.85rem; }
}

/* print: worksheet and key only, black on white */
.print-root { display: none; }
@page { margin: 0.45in 0.45in; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #888; --paper: #fff; --edge: #444; --rule: #000; --wash: #fff; --accent: #000; }
  body { background: #fff; color: #000; font: 10pt/1.36 var(--sans); }
  main, footer, .toast, .skip { display: none !important; }
  .print-root { display: block; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8pt var(--sans); color: #444; text-align: right; padding-bottom: 5pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2pt solid #000; margin-bottom: 4pt; }
  .ph h2 { font: 700 14pt var(--serif); margin: 0; }
  .ph p { margin: 0; font-size: 9pt; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 2pt 0 3pt; }
  .plabel { margin: 0 0 3pt; font-size: 8.5pt; font-style: italic; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li { padding: 5pt 0 4pt; break-inside: avoid; page-break-inside: avoid; }
  .pq > li + li { break-before: page; page-break-before: always; }
  .pk > li { break-inside: avoid; page-break-inside: avoid; }
  .pqh { break-after: avoid; page-break-after: avoid; }
  .pq h3, .pk h3 { font: 700 11pt var(--serif); margin: 0 0 2pt; }
  .pq .pscen { margin: 0 0 4pt; line-height: 1.3; }
  .fig { display: block; margin: 0 0 6pt; }
  .fig > * + * { margin-top: 7pt; }
  .twrap, .lwrap { overflow: visible; }
  .dt { font-size: 8.2pt; line-height: 1.22; width: 100%; border: 0; table-layout: fixed; }
  .tcap { color: #000; font-size: 8.5pt; margin: 0 0 2pt; }
  .dt th, .dt td { padding: 0.8pt 4pt; border: 0.6pt solid #888; }
  .dt thead th { color: #000; border-bottom: 2pt double #000; font-size: 8pt; }
  .txt-list th.c-d { width: 9%; } .txt-list th.c-a { width: 11%; }
  .pc-list th.c-v { width: 8%; }
  .ledger-doc { border: 0.9pt solid #000; border-radius: 0; }
  .lhead { padding: 3pt 5pt; border-bottom: 0.6pt solid #000; gap: 1pt 14pt; }
  .ltitle { font-size: 9.5pt; color: #000; }
  .lmeta { font-size: 8.5pt; }
  .lmeta span { color: #333; }
  table.ledger { font-size: 7.8pt; table-layout: fixed; }
  .ledger th, .ledger td { padding: 1.6pt 2.5pt; border: 0.5pt solid #777; white-space: normal; overflow-wrap: anywhere; }
  .ledger thead th { font-size: 7.2pt; color: #000; }
  .ledger thead tr:last-child th, .ledger thead th[rowspan] { border-bottom: 2.2pt double #000; }
  .ledger .gs, .ledger thead th.grp { border-left: 2.2pt double #000; }
  .ledger .c-d { position: static; box-shadow: none; }
  .ledger td.num { white-space: nowrap; }
  table.ledger tr { break-inside: avoid; page-break-inside: avoid; }
  table.ledger tbody td { height: 14pt; }
  .ledger tr.r-tot td, .ledger tr.r-gt td { border-top: 0.9pt solid #000; border-bottom: 2.2pt double #000; }
  /* the cash book on paper: Date, Details, (L.F.), Discount, Cash, Bank on each side */
  .cbook col.k-dt1, .cbook col.k-dt2 { width: 7%; }
  .cbook col.k-dx1, .cbook col.k-dx2 { width: 15%; }
  .cbook col.k-lf1, .cbook col.k-lf2 { width: 3.6%; }
  .cbook.t-single col.k-dx1, .cbook.t-single col.k-dx2 { width: 25%; }
  .cbook .ledger td.c-dt1, .cbook .ledger td.c-dt2 { font-size: 7.2pt; white-space: nowrap; }
  .cbook .ledger td.c-dx1, .cbook .ledger td.c-dx2 { font-size: 7.2pt; min-width: 0; }
  .an-book { display: block; }
  .an-book .ledger-doc + .ledger-doc { margin-top: 6pt; }
  .ledger thead th.c-d, .ledger thead th.c-x { font-size: 7.2pt; }
  .cbook.an-side table.ledger tbody td { height: 11.6pt; padding-top: 1pt; padding-bottom: 1pt; }
  .cbook.an-side col.k-d { width: 8%; } .cbook.an-side col.k-x { width: 18%; }
  .cbook.an-side .lhead { padding: 1.5pt 5pt; }
  .cbook.an-side .ledger thead th { padding-top: 1pt; padding-bottom: 1pt; }
  .pq-cb .fig > * + * { margin-top: 4pt; }
  .pq .pscen { font-size: 9.4pt; }
  .cbook.an-side .ledger td.c-x { font-size: 7.4pt; min-width: 0; } .cbook.an-side .ledger td.c-d { font-size: 7.4pt; white-space: nowrap; }
  .pbook col.k-r { width: 8.5%; } .pbook col.k-dt { width: 6.5%; } .pbook col.k-x { width: 17%; } .pbook col.k-vn { width: 4.5%; } .pbook col.k-t { width: 8%; }
  .ledger thead th.grp { font-size: 8pt; }
  .ledger td.c-lf1, .ledger td.c-lf2, .ledger td.c-vn { font-size: 7.4pt; text-align: center; }
  .pc-list td.c-v { font-size: 8.2pt; }
  .pbook .ledger td.c-x { font-size: 7.2pt; min-width: 0; }
  .pbook .ledger td.c-dt { font-size: 7.2pt; white-space: nowrap; }
  .pq .ledger-doc, .pq .twrap { break-inside: avoid; page-break-inside: avoid; }
  .pkey { break-before: page; page-break-before: always; }
  .pk > li { padding: 4pt 0 5pt; }
  .pk .keyfig { margin: 2pt 0 4pt; gap: 6pt; }
  .pk .ledger-doc { break-inside: avoid; page-break-inside: avoid; }
  .pk h3 { break-after: avoid; page-break-after: avoid; }
  .pk .steps { margin: 0 0 2pt; padding-left: 13pt; font-size: 8.4pt; line-height: 1.28; }
  .pk .steps li { break-inside: avoid; page-break-inside: avoid; }
}