/* Control accounts practice: a cool sage ledger paper, oxblood ink for the accent (an auditor's red tick), serif
   headings, tabular figures, and the double rule that sits under an account's totals used as the page's one motif. */
:root {
  --bg: #e9eeea; --paper: #fbfcfa; --ink: #1c2422; --muted: #55625e; --line: #c4cec9; --line2: #9fada7;
  --accent: #8c2331; --accent-ink: #ffffff; --accent-soft: #f4e3e5; --dr: #23534a; --cr: #6d3a12;
  --ok: #1d6b3a; --ok-soft: #e1f1e6; --bad: #a3261b; --bad-soft: #fbe5e2; --warn: #8a5a00; --warn-soft: #fbf0d6;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 6px;
  --mk-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d6b3a' stroke-width='2.4'%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='%23a3261b' stroke-width='2.4'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E");
  --mk-missing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a5a00' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14191a; --paper: #1c2324; --ink: #e5ece9; --muted: #a3b2ad; --line: #34403f; --line2: #4d5c5a;
    --accent: #e58a95; --accent-ink: #1b0f11; --accent-soft: #3b2226; --dr: #8fd0c2; --cr: #e7b58a;
    --ok: #79d39a; --ok-soft: #1c3426; --bad: #ff9a8f; --bad-soft: #3d1f1c; --warn: #f0c46b; --warn-soft: #3a2f16;
    --mk-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2379d39a' stroke-width='2.4'%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='%23ff9a8f' stroke-width='2.4'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E");
    --mk-missing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f0c46b' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='5.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: 16px/1.55 var(--sans); }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 9; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; }

/* hero: the double rule under the title */
.hero { padding: 22px 0 8px; }
.hero h1 { font-size: clamp(1.6rem, 4.6vw, 2.35rem); margin: 0 0 8px; display: inline-block; padding-bottom: 6px; border-bottom: 4px double var(--accent); }
.lede { margin: 6px 0 0; max-width: 62ch; color: var(--muted); }

/* setup */
.setup { margin: 14px 0 10px; display: grid; gap: 10px; }
.setup fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.setup legend { font-weight: 700; 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: flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line2); background: var(--paper); border-radius: 999px; white-space: nowrap; }
.step span { border-radius: var(--r); }
.step b { font-family: var(--mono); margin-right: 6px; color: var(--muted); }
.chip input:checked + span, .step input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step input:checked + span b { color: var(--paper); }
.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; align-items: center; }
.inline { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); }
select { min-height: 44px; padding: 6px 10px; }
.btn { font: inherit; min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 600; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 40px; padding: 6px 14px; }
.btn:hover { filter: brightness(0.96); }
.link { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.note { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--r); }
.note.info { border-color: var(--line2); background: var(--paper); }

/* the sheet */
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 16px; margin: 10px 0 18px; border-top: 4px solid var(--ink); }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sheet-head h2 { margin: 0; font-size: 1.3rem; }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.lvname { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--muted); }
.score { margin: 0; color: var(--muted); }
.rules { margin: 8px 0 4px; }
.rules summary, .work summary, .recent summary, .faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.rules ul { margin: 4px 0 8px; padding-left: 20px; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.q:first-child { border-top: 0; }
.q h3 { margin: 4px 0 6px; font-size: 1.15rem; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.q h3 .see { margin-left: auto; font: 600 1rem var(--sans); white-space: nowrap; padding: 10px 0; }
.qn { font-family: var(--mono); color: var(--paper); background: var(--accent); border-radius: 4px; padding: 0 7px; font-size: 1rem; }
.scen { margin: 0 0 10px; max-width: 75ch; }
.qhint { color: var(--muted); margin: 6px 0; }

/* data tables */
.fig { display: grid; gap: 14px; }
.twrap { overflow-x: auto; }
.tcap { font-weight: 700; margin: 0 0 4px; }
table.dt { border-collapse: collapse; width: 100%; font-size: 1rem; }
.dt th, .dt td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.dt thead th { font-weight: 700; font-size: 0.9rem; color: var(--muted); border-bottom: 2px solid var(--line2); }
.dt thead th.num { font-family: var(--sans); white-space: normal; }
.dt .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt tfoot th, .dt tfoot td { font-weight: 700; border-top: 2px solid var(--line2); }
table.data { max-width: 640px; }
.givens { display: grid; gap: 8px; max-width: 640px; }
.given { margin: 0; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); }
.given b { font-family: var(--mono); white-space: nowrap; }
.errs { margin: 0; padding-left: 22px; max-width: 75ch; }
.errs li { margin: 0 0 6px; }

/* accounts on screen: Item, Dr, Cr */
.books { display: grid; gap: 16px; }
@media (min-width: 900px) { .q-ctrl .books { grid-template-columns: 1fr 1fr; align-items: start; } }
.ledger-doc { min-width: 0; }
.lhead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 4px; }
.ltitle { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.lwrap { overflow-x: auto; }
table.ledger { border-collapse: collapse; width: 100%; font-size: 1rem; }
.ledger th, .ledger td { border-bottom: 1px solid var(--line); padding: 4px 6px; vertical-align: middle; }
.ledger thead th { font-size: 0.9rem; color: var(--muted); font-weight: 700; text-align: left; }
.ledger thead th.grp { text-align: center; color: var(--ink); border-bottom: 2px solid var(--line2); }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td.gs, .ledger th.gs { border-left: 2px solid var(--line2); }
.grid col.k-d, .grid col.k-c { width: 8.4em; }
.grid td.in { padding: 3px 4px; }
.grid .c-x { line-height: 1.3; }
.grid tr.r-cd td, .grid tr.r-bd td { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.grid tr.r-tot td { border-bottom: 4px double var(--ink); font-weight: 700; }
.grid tr.r-cd .c-x, .grid tr.r-tot .c-x, .grid tr.r-bd .c-x { font-style: italic; }
input.cell { width: 100%; min-height: 44px; padding: 6px 8px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* a mark is a tick, a cross or a ring (an empty cell that needs an amount), not only a colour */
input.cell.is-right { border-color: var(--ok); background-color: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
input.cell.is-wrong, input.cell.is-unread { border-color: var(--bad); background-color: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
input.cell.is-missing { border-color: var(--warn); border-style: dashed; background-color: var(--warn-soft); }
input.cell:is(.is-right, .is-wrong, .is-unread, .is-missing) { background-repeat: no-repeat; background-position: 4px center; background-size: 15px; padding-left: 22px; }
input.cell.is-right { background-image: var(--mk-right); }
input.cell.is-wrong, input.cell.is-unread { background-image: var(--mk-wrong); }
input.cell.is-missing { background-image: var(--mk-missing); }
table.dt.rgrid { max-width: 560px; }
table.dt.rgrid td.in { padding: 3px 4px; width: 9.5em; }
table.dt.rgrid tr.r-tot th, .rgrid tr.r-tot td { border-bottom: 4px double var(--ink); }
table.dt.rgrid .r-given td { font-family: var(--mono); }

/* phones: each item gets its own line, Dr and Cr cells below it, each labelled */
@media (max-width: 560px) {
  .grid table.ledger, .grid table.ledger tbody { display: block; }
  .grid table.ledger thead, .grid colgroup { display: none; }
  .grid table.ledger tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .grid table.ledger td { border: 0; padding: 0; display: block; }
  .grid table.ledger td.c-x { grid-column: 1 / -1; padding: 0 0 4px; }
  .grid table.ledger td.in { display: flex; align-items: center; gap: 6px; }
  .grid table.ledger td.in::before { font: 700 0.9rem var(--sans); color: var(--muted); min-width: 1.6em; }
  .grid table.ledger td.c-d::before { content: "Dr"; color: var(--dr); }
  .grid table.ledger td.c-c::before { content: "Cr"; color: var(--cr); }
  .grid table.ledger td.gs { border-left: 0; }
  .grid tr.r-tot { border-bottom: 4px double var(--ink) !important; }
  .grid tr.r-tot td { border: 0 !important; }
  /* room for the longest amount (R130 512) plus its mark at 320 px */
  .grid table.ledger tr { column-gap: 6px; }
  .grid table.ledger td.in { gap: 4px; }
  .grid table.ledger td.in::before { min-width: 0; }
  .grid input.cell { padding-right: 4px; }
}
@media (max-width: 400px) { .sheet { padding-left: 10px; padding-right: 10px; } }

/* reconciliation table on phones: the error's label on its own line, the two corrections below it, each labelled */
@media (max-width: 560px) {
  table.dt.rgrid, table.dt.rgrid tbody { display: block; }
  table.dt.rgrid thead { display: none; }
  table.dt.rgrid tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  table.dt.rgrid th, table.dt.rgrid td { border: 0; padding: 0; display: flex; align-items: center; gap: 6px; width: auto; }
  table.dt.rgrid th { grid-column: 1 / -1; padding-bottom: 4px; }
  table.dt.rgrid td::before { font: 700 0.9rem var(--sans); color: var(--muted); min-width: 3.6em; }
  table.dt.rgrid td.c-c::before { content: "Control"; }
  table.dt.rgrid td.c-l::before { content: "List"; }
  table.dt.rgrid td.num { justify-content: space-between; }
  table.dt.rgrid td.in { width: auto; min-width: 0; padding: 0; flex-direction: column; align-items: stretch; gap: 2px; }
  table.dt.rgrid td.in input { flex: 1; min-width: 0; }
  table.dt.rgrid tr.r-tot { border-bottom: 4px double var(--ink) !important; }
}
.tstack { display: none; }
@media screen and (max-width: 600px) {
  .tpair { display: none; }
  .tstack { display: grid; gap: 10px; }
  .tside table.ledger { min-width: 0; }
  .tside tr.r-tot td.num { border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); font-weight: 700; }
}

/* feedback */
.fbwrap { margin: 6px 0; }
.fb { margin: 4px 0; padding: 6px 10px; border-radius: var(--r); background: var(--bad-soft); }
.fb.right { background: var(--ok-soft); }
.fb.missing { background: var(--warn-soft); }
.fb.sum { background: var(--paper); border: 1px solid var(--line2); }
.fblist { margin: 6px 0 0; padding-left: 1.8em; }
.fblist li.fb { margin: 4px 0; }
.qfoot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.work { margin: 4px 0 8px; }
.keyfig { display: grid; gap: 14px; }
.keyfig .lwrap { border: 1px solid var(--line); border-radius: var(--r); }
.tacct table.ledger { min-width: 600px; }
.tacct .c-dx1, .tacct .c-dx2 { min-width: 9em; }
.tacct tr.r-tot td.num { border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); font-weight: 700; }
.tacct td.blank { height: 1.9em; }
.ledger td.c-dt1, .ledger td.c-dt2 { white-space: nowrap; }
.steps { margin: 8px 0; padding-left: 20px; font-family: var(--mono); }
.steps li { margin: 3px 0; overflow-wrap: anywhere; }
.satable .num, .stmt .num { min-width: 5.5em; }
.stmt tr.r-tot th, .satable tr.r-tot th { font-weight: 700; }
.stmt tr.r-tot td.num, .satable tr.r-tot td.num { border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); font-weight: 700; }

.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.confirm { flex-basis: 100%; margin: 0; padding: 10px; background: var(--warn-soft); border-radius: var(--r); }
.save-hint { flex-basis: 100%; margin: 0; color: var(--muted); }

/* print and share */
.share { margin: 0 0 24px; }
.print-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.print-row label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; flex-wrap: wrap; }
.share-out label { display: grid; gap: 4px; font-weight: 600; }
.share-out input { width: 100%; min-height: 44px; padding: 6px 10px; font-family: var(--mono); }
.recent { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 12px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 6px 0; }
.recent small { display: block; color: var(--muted); font-size: 1rem; }
.hint { color: var(--muted); }
.setup .hint { margin: -4px 0 0; }

/* content */
.content { max-width: 75ch; padding-bottom: 20px; }
.content h2 { font-size: 1.35rem; margin: 26px 0 8px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0 0 12px; }
.sources { color: var(--muted); }
footer { border-top: 4px double var(--line2); padding: 18px 0 30px; color: var(--muted); }
.sb-footer p { margin: 6px 0; }
.sb-more a { color: var(--muted); }
.sb-credit a { color: var(--accent); }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); max-width: min(92vw, 520px); z-index: 20; pointer-events: none; transition: transform 0.2s; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
[hidden] { display: none !important; }
.print-root { display: none; }

/* ---------- print ---------- */
@page { margin: 14mm 12mm; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #888; --line2: #444; --paper: #fff; --bg: #fff; --accent: #000; }
  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: 8pt; color: #333; padding-bottom: 4px; border-bottom: 0.5pt solid #888; }
  .ph h2 { margin: 4px 0 0; font-size: 15pt; border-bottom: 3px double #000; display: inline-block; padding-bottom: 2px; }
  .ph p { margin: 2px 0 6px; font-size: 9pt; }
  .pmeta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; }
  .plabel { font-size: 9pt; margin: 0 0 6px; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li, .pk > li { margin: 0 0 10px; }
  .pq > li + li { break-before: page; }
  /* the key runs on: a short key (a South African table) shares a page, and no problem's key is split */
  .pk > li { break-inside: avoid; }
  /* the blank accounts go together on the next page, with rows tall enough to write in (21pt, about 7.5 mm) */
  .psheet .books:has(.tacct) { break-before: page; }
  .pcont { margin: 0 0 4pt; font: 700 11pt var(--serif); }
  .pqh h3, .pk h3 { font-size: 12pt; margin: 6px 0 2px; }
  .pscen { margin: 0 0 6px; }
  .fig { display: block; }
  .fig > * { margin-bottom: 8px; }
  .twrap, .ledger-doc, .givens { break-inside: avoid; }
  .books { display: block; }
  .books > * { margin-top: 8px; }
  .lwrap, .twrap { overflow: visible; }
  table.dt, table.ledger { font-size: 9.5pt; width: 100%; }
  .dt th, .dt td, .ledger th, .ledger td { padding: 1.8pt 4pt; border-bottom: 0.5pt solid #777; }
  table.data { max-width: none; width: 70%; }
  .data .num, .list .num { width: 6em; }
  .givens { max-width: none; }
  .given { border: 0.5pt solid #777; padding: 3pt 6pt; }
  .errs { padding-left: 16pt; }
  .tacct table.ledger { min-width: 0; table-layout: fixed; }
  .tacct col.k-dt1, .tacct col.k-dt2 { width: 11%; }
  .tacct col.k-fo1, .tacct col.k-fo2 { width: 6%; }
  .tacct col.k-am1, .tacct col.k-am2 { width: 13%; }
  .tacct td.gs, .tacct th.gs { border-left: 1pt solid #000; }
  .tacct td.blank { height: 14pt; }
  .tacct.blank tbody td, .stmt.blank tbody th, .stmt.blank tbody td, .satable.blank tbody th, .satable.blank tbody td { height: 21pt; vertical-align: bottom; }
  .tacct tr.r-tot td.num, .stmt tr.r-tot td.num, .satable tr.r-tot td.num { border-top: 0.75pt solid #000; border-bottom: 2.5pt double #000; }
  .ltitle { font-size: 11pt; }
  .keyfig { display: block; }
  .keyfig > * { margin-bottom: 8px; }
  .keyfig .lwrap { border: 0; }
  .steps { font-size: 8.5pt; margin: 4px 0; }
  .satable, .stmt { width: 70%; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}