/* Club accounts practice. Look: a club treasurer's minute book. Warm cream paper, bottle-green ruling ink, a green
   cloth spine on the sheet, totals marked with a pale straw highlighter, double rules under final totals, tabular
   figures for every amount. */
:root {
  --bg: #f4f1e8; --paper: #fffdf7; --ink: #1b2420; --muted: #4b564f; --line: #d6d2c2; --line2: #8f927f;
  --accent: #1f5a3d; --accent-ink: #fff; --hi: #f3e7b3; --soft: #edf1e6; --spine: #1f5a3d;
  --right: #1d6b3c; --wrong: #a3261c; --close: #7a5300; --info: #1f5a3d;
  --mk-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d6b3c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); --mk-wrong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3261c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); --mk-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a5300' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 2.5v7M8 13v.5'/%3E%3C/svg%3E");
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Cambria, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 3px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16; --paper: #18221d; --ink: #e8ece6; --muted: #b0bab2; --line: #2f3c35; --line2: #5d6b62;
    --accent: #8fd3ad; --accent-ink: #0d1612; --hi: #4a4318; --soft: #1f2b25; --spine: #2f7a55;
    --right: #6fd394; --wrong: #ff8f80; --close: #f0c060; --info: #8fd3ad;
    --mk-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236fd394' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); --mk-wrong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff8f80' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); --mk-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f0c060' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 2.5v7M8 13v.5'/%3E%3C/svg%3E");
  }
}
* { 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); }
a { color: var(--accent); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 9; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; }

.hero { padding: 26px 0 6px; }
.hero h1 { font-size: clamp(1.6rem, 4.6vw, 2.3rem); margin: 0 0 8px; }
.lede { margin: 0 0 6px; max-width: 66ch; font-size: 1.06rem; }

/* setup */
.setup { margin: 12px 0 14px; }
fieldset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
legend { font-weight: 650; margin-bottom: 6px; }
.chips, .steps-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip, .step { position: relative; }
.chip input, .step input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span, .step span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 13px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--paper); font-size: 1rem; }
.chip input:checked + span, .step input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip input:focus-visible + span, .step input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.setrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.inline { display: inline-flex; align-items: center; gap: 8px; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); min-height: 44px; padding: 6px 8px; max-width: 100%; }
.btn { font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1.5px solid var(--accent); background: var(--paper); color: var(--accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 42px; padding: 6px 14px; }
.link { font: inherit; background: none; border: 0; padding: 8px 2px; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 44px; }
.note { padding: 10px 12px; background: var(--paper); border: 1px solid var(--wrong); border-radius: var(--r); margin: 8px 0; }
.note.info { border-color: var(--info); }
[hidden] { display: none !important; }

/* the sheet: a ruled pad */
.sheet { background: var(--paper); border: 1px solid var(--line2); box-shadow: inset 6px 0 0 var(--spine); padding: 16px 18px 14px 24px; margin: 10px 0 18px; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; border-bottom: 1px solid var(--line2); padding-bottom: 6px; }
.sheet-head h2 { margin: 0; font-size: 1.25rem; }
.code { font-family: var(--mono); letter-spacing: .06em; color: var(--accent); }
.lvname { font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--muted); }
.score { margin: 0; color: var(--muted); }
.rules { margin: 8px 0; }
.rules summary, details.work summary, .recent summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent); }
.rules ul { margin: 4px 0 8px; padding-left: 20px; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.q h3 { font-size: 1.15rem; margin: 4px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.qn { font-family: var(--mono); color: var(--accent); }
.qtext { max-width: 72ch; }
.scen { margin: 0 0 8px; }

/* the club's figures and the notes */
.info-wrap { margin: 4px 0 10px; max-width: 34rem; }
.info-wrap.wide { max-width: 42rem; }
.rpinfo { margin: 6px 0 10px; max-width: 60rem; }
.rpinfo .tcap { margin-top: 0; }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; container-type: normal; }
.docs.stack { grid-template-columns: 1fr; }
.rpinfo .info-wrap { margin: 0; max-width: none; }
.dt tr.pad th, .dt tr.pad td { border-bottom: 0; }
.dt.b2 .amt { width: 9rem; white-space: normal; }
table.dt { border-collapse: collapse; width: 100%; }
.dt caption { text-align: left; font-weight: 650; padding-bottom: 4px; }
.dt th, .dt td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.dt thead th { color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.dt .amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 7.5rem; padding-right: 4px; }
.dt tfoot th, .dt tfoot td { border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 650; }
.adjn { max-width: 72ch; margin: 6px 0 10px; }
.adj { margin: 0; padding-left: 1.6em; }
.adj li { margin: 2px 0; }
.tcap { font-weight: 650; margin: 6px 0 4px; }

/* the statements */
.forms { display: grid; gap: 18px; margin: 14px 0 6px; container-type: inline-size; }
table.st { border-collapse: collapse; width: 100%; }
.st caption, .acct figcaption { text-align: left; padding-bottom: 6px; }
.st-t { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.08rem; }
.st-s { display: block; color: var(--muted); }
.st th, .st td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: middle; }
.st thead th { color: var(--muted); font-weight: 600; font-size: 1rem; border-bottom: 1.5px solid var(--ink); }
.st .amt { text-align: right; width: 9.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st.v.c3 .amt { width: 9rem; }
.st tr.h th { font-weight: 650; padding-top: 10px; border-bottom: 0; }
.st tr.pad th, .st tr.pad td { border-bottom: 0; padding: 0; }
.st tr.sub td.amt:not(.nil) { border-top: 1.5px solid var(--ink); }
.st tr.tot th { font-weight: 650; }
.st tr.tot td.amt:not(.nil), .st tfoot tr.tot td.amt:not(.nil) { border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); background: var(--hi); font-weight: 650; }
.st.v { max-width: 46rem; }
.st.lg { max-width: 40rem; }
/* a line label never gets narrower than this on screen: below it the table is cut off and fit.js puts the words above
   the amounts instead */
.st th[scope="row"] { min-width: 12rem; }
.acct.tl .st.t th[scope="row"] { min-width: 0; }
.dt th[scope="row"] { min-width: 10rem; }
.st td.amt { min-width: 9rem; }
.twrap.rows td.amt { min-width: 0; }
.twrap.rows th[scope="row"] { min-width: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acct { margin: 0; }
.acct .docs + .docs { margin-top: 14px; }
.acct .docs.stack { grid-template-columns: 1fr; }
@container (max-width: 720px) { .acct .docs { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rpinfo .docs { grid-template-columns: 1fr; } .rpinfo .docs .twrap + .twrap { margin-top: 12px; } }
.st.t .drcr th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 0; }
.acct .side.s1 table.st { border-left: 0; }
.st.t th[scope="row"] { overflow-wrap: anywhere; }
.st td.amt.out { color: var(--muted); }
.cell { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
input.cell { text-align: right; padding: 6px 6px; }
select.cell { padding: 6px 4px; }
.cell.is-right { border-color: var(--right); box-shadow: inset 0 0 0 1px var(--right); }
.cell.is-wrong, .cell.is-unread { border-color: var(--wrong); box-shadow: inset 0 0 0 1px var(--wrong); }
.cell.is-missing, .cell.is-close { border-color: var(--close); box-shadow: inset 0 0 0 1px var(--close); border-style: dashed; }
.cell.is-right, .cell.is-wrong, .cell.is-unread, .cell.is-missing, .cell.is-close { background-repeat: no-repeat; background-position: 5px center; background-size: 15px; }
input.cell.is-right, input.cell.is-wrong, input.cell.is-unread, input.cell.is-missing, input.cell.is-close { padding-left: 24px; }
select.cell.is-right, select.cell.is-wrong, select.cell.is-missing, select.cell.is-close { padding-left: 24px; }
.cell.is-right { background-image: var(--mk-right); }
.cell.is-wrong, .cell.is-unread { background-image: var(--mk-wrong); }
.cell.is-missing, .cell.is-close { background-image: var(--mk-close); }
/* an item menu: the menu is see-through over the chosen item's words, so a long item wraps instead of being cut off */
.pickbox { position: relative; display: block; min-height: 44px; padding: 9px 28px 9px 8px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--paper) no-repeat 5px center / 15px; font-weight: 400; line-height: 1.3; }
.pickbox::after { content: ''; position: absolute; right: 11px; 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; opacity: 0; margin: 0; cursor: pointer; }
.pickbox:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.pickshow { display: block; overflow-wrap: anywhere; }
.pickshow.none { color: var(--muted); }
.pickbox.is-right { border-color: var(--right); box-shadow: inset 0 0 0 1px var(--right); background-image: var(--mk-right); padding-left: 25px; }
.pickbox.is-wrong, .pickbox.is-unread { border-color: var(--wrong); box-shadow: inset 0 0 0 1px var(--wrong); background-image: var(--mk-wrong); padding-left: 25px; }
.pickbox.is-missing, .pickbox.is-close { border-color: var(--close); border-style: dashed; box-shadow: inset 0 0 0 1px var(--close); background-image: var(--mk-close); padding-left: 25px; }
.fblist { margin: 6px 0 0; padding-left: 1.8em; }
.fblist li.fb { margin: 4px 0; }
.fb.sum { border-color: var(--wrong); }
.twrap { overflow-x: auto; max-width: 100%; }

/* fitted layouts (fit.js): a table that would be cut off shows each line on two lines, the words above the amounts,
   each amount still in its own column */
.twrap.rows table, .twrap.rows tbody, .twrap.rows thead, .twrap.rows tfoot { display: block; width: 100%; }
.twrap.rows caption { display: block; }
.twrap.rows tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.twrap.rows .c3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* a two-column statement in the key, its lines shown words above figures: both amount columns are right-aligned at
   the right, so the figures of each column line up under each other */
.twrap.rows .st.v.c2.key tr { grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) minmax(0, 7.5rem); }
.twrap.rows .st.v.c2.key tr > td:nth-of-type(1) { grid-column: 2; }
.twrap.rows .st.v.c2.key tr > td:nth-of-type(2) { grid-column: 3; }
.twrap.rows .st.v.c2.key thead th.amt:nth-of-type(2) { grid-column: 2; }
.twrap.rows .st.v.c2.key thead th.amt:nth-of-type(3) { grid-column: 3; }
.twrap.rows .l1 tr { grid-template-columns: minmax(0, 1fr); }
.twrap.rows th, .twrap.rows td { display: block; border: 0 !important; width: auto !important; padding: 0 2px; }
.twrap.rows th[scope="row"], .twrap.rows tr.h th, .twrap.rows .drcr th { grid-column: 1 / -1; }
.twrap.rows .st.v thead th:first-child, .twrap.rows .st.lg thead tr:not(.caprow) th:first-child, .twrap.rows .dt thead th:first-child { display: none; }
.twrap.rows .st.t thead th:first-child { grid-column: 1 / -1; }
/* the receipts and payments and the income and expenditure accounts use one amount column a side on screen: the
   first, never used, is left out */
.acct:not(.tl) .st.t tr > td:nth-child(2), .acct:not(.tl) .st.t thead tr:not(.drcr) > th:nth-child(2) { display: none; }
.twrap.rows .acct:not(.tl) .st.t td.amt, .acct:not(.tl) .twrap.rows .st.t td.amt, .acct:not(.tl) .twrap.rows .st.t thead th.amt { grid-column: 2; }
.twrap.rows .l1 thead { display: none; }
.twrap.rows .l1.rps thead { display: block; }
.twrap.rows .dt.rps thead th:first-child { display: block; }
.twrap.rows tr.pad { display: none; }
.twrap.rows tr.tot td.amt:not(.nil) { border-top: 1.5px solid var(--ink) !important; border-bottom: 3px double var(--ink) !important; }
.twrap.rows tr.sub td.amt:not(.nil) { border-top: 1.5px solid var(--ink) !important; }
.twrap.rows input.cell { padding: 6px 4px; }
.twrap.rows thead th.amt { white-space: normal; }
.twrap.rows.snug .c3 { display: grid; grid-template-columns: repeat(3, auto); }
.twrap.rows.snug .c3 caption { grid-column: 1 / -1; }
.twrap.rows.snug .c3 thead, .twrap.rows.snug .c3 tbody, .twrap.rows.snug .c3 tfoot { display: contents; }
.twrap.rows.snug .c3 tr { grid-column: 1 / -1; grid-template-columns: subgrid; }
.twrap.rows.snug .c3 td.amt { min-width: max-content; }
.twrap.rows.snug .c3 tr { column-gap: 4px; }
.twrap.rows.snug .c3 thead th.amt { hyphens: auto; overflow-wrap: anywhere; }
.twrap.stair .c3 tr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.twrap.stair .c3 td.nil { display: none; }
.twrap.stair .c3 .amt:nth-child(2) { grid-column: 1 / span 3; }
.twrap.stair .c3 .amt:nth-child(3) { grid-column: 2 / span 3; }
.twrap.stair .c3 .amt:nth-child(4) { grid-column: 3 / span 3; }

/* feedback */
.fbwrap { margin: 8px 0 0; }
.fb { margin: 4px 0; padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--soft); }
.fb.right { border-color: var(--right); }
.fb.wrong, .fb.unread { border-color: var(--wrong); }
.fb.missing, .fb.close { border-color: var(--close); }
.qfoot { margin-top: 8px; }

/* the key */
details.work { margin-top: 8px; }
.keyfig .forms { margin-top: 6px; }
.steps { margin: 4px 0 8px; padding-left: 20px; }
.steps li { margin: 2px 0; font-variant-numeric: tabular-nums; }

.sheet-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px; }
.confirm { flex-basis: 100%; margin: 0; padding: 8px 10px; background: var(--soft); border: 1px solid var(--close); border-radius: var(--r); }
.save-hint { flex-basis: 100%; margin: 0; color: var(--muted); }
.share { margin: 0 0 22px; }
.print-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.print-row label { display: grid; gap: 2px; }
.share-out label { display: grid; gap: 2px; }
.share-out input { width: 100%; font-family: var(--mono); }
.share-out p { margin: 6px 0 0; }
.sheet-head .see { font-weight: 600; }
/* the worked example on the page */
.ex { width: 100%; max-width: 34rem; border-collapse: collapse; margin: 6px 0 10px; }
.ex th, .ex td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.ex thead th { font-weight: 600; border-bottom: 1.5px solid var(--ink); padding-top: 12px; }
.ex .amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex tr.tot th, .ex tr.tot td { font-weight: 650; }
.ex tr.tot td { border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); }
.recent ul { list-style: none; padding: 0; margin: 4px 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.recent small { display: block; color: var(--muted); font-size: 1rem; }
.hint { color: var(--muted); margin: 6px 0; }

/* content below the tool */
.content { max-width: 72ch; padding-bottom: 20px; }
.content h2 { font-size: 1.35rem; margin: 26px 0 8px; }
.content .twrap { margin: 8px 0 12px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 10px 0; font-weight: 600; min-height: 44px; }
.faq p { margin: 0 0 12px; }
.sources { color: var(--muted); }

footer { border-top: 1px solid var(--line2); padding: 16px 0 28px; color: var(--muted); font-size: 1rem; }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); max-width: min(92vw, 520px); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); transition: transform .2s; z-index: 10; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.print-root { display: none; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .sheet { padding: 12px 8px; }
  .chip span, .step span { padding: 6px 10px; }
}

@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --line2: #555; --paper: #fff; --bg: #fff; --accent: #000; --hi: #fff; }
  @page { margin: 11mm 13mm; }
  body { background: #fff; color: #000; font: 10pt/1.3 var(--sans); }
  main, footer, .skip, .toast { display: none !important; }
  .print-root { display: block; }
  .psheet, .pkey { break-after: page; }
  .pkey:last-child, .psheet:last-child { break-after: auto; }
  table.pt { width: 100%; border-collapse: collapse; }
  .pt > thead .prun { font-size: 10pt; color: #333; padding-bottom: 4px; border-bottom: 0.5pt solid #888; }
  .ph h2 { margin: 4px 0 0; font-size: 15pt; }
  .ph p { margin: 2px 0 6px; font-size: 10pt; }
  .pmeta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; }
  .plabel { font-size: 10pt; margin: 0 0 6px; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li + li, .pk > li + li { break-before: page; }
  .pqh h3, .pk h3 { font-size: 12pt; margin: 6px 0 4px; break-after: avoid; }
  .scen { margin: 0 0 5px; }
  .twrap { overflow: visible; }
  .info-wrap { max-width: 120mm; margin: 2pt 0 6pt; }
  .infopair { display: flex; gap: 8mm; align-items: flex-start; }
  .infopair > .info-wrap { flex: 1 1 0; min-width: 0; max-width: none; }
  .infopair > .info-wrap.wide { flex-grow: 1.5; }
  .dt { font-size: 10pt; }
  .dt caption { font-size: 10pt; }
  .dt th, .dt td { padding: 1pt 4pt 1pt 0; border-bottom: 0.5pt solid #999; }
  .dt .amt { width: 25mm; }
  .info-wrap.wide { max-width: 150mm; }
  .dt.b2 .amt { width: 34mm; }
  .rp-wrap { max-width: none; }
  .dt.rp4 { table-layout: fixed; }
  .dt.rp4 .amt { width: 22mm; }
  .dt.rp4 .cr0 { border-left: 1pt solid #000; padding-left: 4pt; }
  .dt.rp4 tbody tr { break-inside: avoid; }
  .st.lg { max-width: 150mm; }
  /* the title row spans every column, so a fixed layout would split the columns evenly: auto keeps the words wide */
  .st.v.paper, .st.lg.paper { table-layout: auto; }
  .st.paper .caprow .st-s { font-size: 10pt; }
  .st.lg .amt { width: 30mm; }
  .sheet { box-shadow: none; }
  .adjn { margin: 4pt 0 8pt; break-inside: avoid; }
  .adj { font-size: 10pt; }
  .forms { display: block; container-type: normal; }
  .forms > * { margin: 0 0 10pt; }
  table.st { font-size: 10pt; }
  .st.v { max-width: none; width: 100%; table-layout: fixed; }
  .st.v .amt { width: 24mm; }
  .st.v.c3 .amt { width: 24mm; }
  .st caption, .acct figcaption { padding-bottom: 3pt; break-after: avoid; }
  .st-t { font-size: 12pt; }
  .st thead th { font-size: 10pt; }
  .st th, .st td { padding: 1pt 4pt; border-bottom: 0.5pt solid #bbb; }
  .st tr { break-inside: avoid; }
  .st tr.h th { padding-top: 4pt; }
  .psheet .st th, .psheet .st td { height: 21pt; vertical-align: bottom; }
  .psheet .st thead th { height: auto; }
  .st td.blank, .st th.blank { height: 21pt; border-bottom: 0.5pt solid #555; }
  .st tr.pad th, .st tr.pad td { height: 21pt; }
  .st tr.tot td.amt:not(.nil) { background: none; }
  .st.paper .caprow th { text-align: left; font-weight: 400; border-bottom: 0; padding: 0 0 3pt; }
  .wnotes { break-inside: avoid; }
  .st.paper tbody tr:nth-child(-n+4) { break-before: avoid; }
  .st.paper tr.h { break-after: avoid; }
  .st.paper tbody tr:nth-last-child(-n+5) { break-before: avoid; }
  .st thead th.amt { white-space: normal; vertical-align: bottom; }
  .st tfoot { display: table-row-group; }
  .acct figcaption { display: block; }
  .steps { font-size: 10pt; margin: 4px 0; }
  .wnotes .tcap { break-after: avoid; }
  .steps li { break-inside: avoid; }
  /* the working in two columns, so a key with long working still fits beside its last statement */
  .pk .steps { columns: 2; column-gap: 8mm; padding-left: 14pt; }
  .pk .steps li { margin: 0 0 2pt; }
  .pkey .st, .pkey .steps { line-height: 1.2; }
  .pkey .st th, .pkey .st td { padding-top: 0.5pt; padding-bottom: 0.5pt; }
  .st.tp { width: 100%; table-layout: fixed; }
  .st.tp col.ca { width: 19mm; }
  .st.tp .cr0 { border-left: 1pt solid #000; padding-left: 4pt; }
  .st.tp th.h { font-weight: 650; padding-top: 4pt; }
  .st.tp td.amt.sub:not(.nil) { border-top: 1.5px solid #000; }
  .st.tp td.amt.tot:not(.nil), .st.tp tfoot td.amt:not(.nil) { border-top: 1.5px solid #000; border-bottom: 3px double #000; font-weight: 650; }
  .st.tp .drcr th { text-align: left; border-bottom: 0; }
  .st.tp th.tot, .st.tp tr.tot th { font-weight: 650; }
  .acct.paper { break-inside: avoid; }
  .tp-wrap + .tp-wrap { margin-top: 10pt; }
  /* the income and expenditure and the receipts and payments accounts use one amount column a side: the first,
     never used, is closed up and the second is wide enough for "(88,888,888)" */
  .st.tp:not(.tl) col:nth-child(2), .st.tp:not(.tl) col:nth-child(5) { width: 1mm; }
  .st.tp:not(.tl) col:nth-child(3), .st.tp:not(.tl) col:nth-child(6) { width: 27mm; }
  .st.tp:not(.tl) tr > :nth-child(2):is(td, th.amt), .st.tp:not(.tl) tr:not(.drcr) > :nth-child(5):is(td, th.amt) { padding: 0; font-size: 0; }
  .st.tp td.amt { padding-right: 5pt; }
  .st.tp.tl col.ca { width: 24mm; }
  .st.tp.tl col.cg { width: 3mm; }
  .st.tp.tl td.tgap { border: 0 !important; padding: 0; height: auto; }
  .st.tp.tl .cr0 { padding-left: 4pt; }
  .st.tp.tl tr.h th { padding-top: 6pt; }
  .pkey .st.tp.tl tr.h th { padding-top: 3pt; }
  /* a ledger key fits one page for some sets and not others: its working always starts page 2, so every version of a
     class set prints the same number of pages */
  .pk.lv-ledger .wnotes { break-before: page; }
  /* the exam worksheet: the problem, then the bar trading and the income and expenditure accounts, then the balance
     sheet, each on its own page, whatever the problem's length */
  .pq.lv-exam .forms > .stmt-wrap:has(> [data-form="bar"]), .pq.lv-exam .forms > .stmt-wrap:has(> [data-form="bs"]) { break-before: page; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}