/* Investment appraisal practice: blue-grey analysis paper, navy ink, and one copper accent for the payback point. The
   page's one motif is the zero line with a copper notch on it, where a cumulative cash flow turns positive. */
:root {
  --bg: #eef1f5; --paper: #ffffff; --ink: #14233a; --muted: #4c5a6e; --line: #cdd5e0; --line2: #97a3b4;
  --accent: #a3500c; --accent-ink: #ffffff; --accent-soft: #f8eadc; --neg: #9b2c2c; --pos: #1f6a43;
  --ok: #1d6b3a; --ok-soft: #e1f1e6; --bad: #a3261b; --bad-soft: #fbe5e2; --warn: #7d5300; --warn-soft: #fbf0d6;
  --head: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-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: 4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111824; --paper: #18212f; --ink: #e6ebf2; --muted: #a9b5c6; --line: #2e3a4c; --line2: #4a5a70;
    --accent: #f0a35a; --accent-ink: #1a1006; --accent-soft: #3a2a19; --neg: #ff9d92; --pos: #7fd6a2;
    --ok: #79d39a; --ok-soft: #1c3426; --bad: #ff9a8f; --bad-soft: #3d1f1c; --warn: #f0c46b; --warn-soft: #3a2f16;
  }
}
* { 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: 1040px; 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(--head); line-height: 1.2; letter-spacing: -0.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: the zero line with the payback notch */
.hero { padding: 24px 0 6px; }
@media (max-width: 600px) {
  .hero { padding-top: 14px; }
  .hero h1 { margin-bottom: 6px; }
  .setup { gap: 8px; margin-top: 10px; }
  .sheet { padding: 12px 12px 14px; }
  .q { padding-top: 10px; }
  .rules { margin-top: 4px; }
  /* payback style, number of problems and New set in one row, labels above, so the first problem starts sooner */
  .setup .setrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
  .setup .setrow .inline { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .setup .setrow [hidden] { display: none; }
  .setup .setrow #pr-row { grid-column: 1; }
  .setup .setrow #pr-row select { width: 100%; }
  .setup .setrow select { padding: 6px 4px 6px 8px; }
  .setup .setrow #count { width: 3.6em; }
  .setup .setrow #new { padding: 8px 12px; }
  .setup .setrow .inline:not(#pr-row) { grid-column: 2; }
  .setup .setrow #new { grid-column: 3; }
  .setup .setrow:has(#pr-row[hidden]) { grid-template-columns: auto auto minmax(0, 1fr); }
  .setup .setrow:has(#pr-row[hidden]) .inline { grid-column: 1; }
  .setup .setrow:has(#pr-row[hidden]) #new { grid-column: 2; }
}
@media (max-width: 380px) {
  .setup .setrow { grid-template-columns: auto auto minmax(0, 1fr); }
  .setup .setrow #pr-row { grid-column: 1 / -1; }
  .setup .setrow .inline:not(#pr-row) { grid-column: 1; }
  .setup .setrow #new { grid-column: 2; }
}
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 0 0 10px; padding-bottom: 10px; position: relative; display: inline-block; }
.hero h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }
.hero h1::before { content: ""; position: absolute; left: 62%; bottom: -5px; width: 3px; height: 12px; background: var(--accent); }
.lede { margin: 4px 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: 4px; }
.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: var(--r); white-space: nowrap; }
.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); box-shadow: inset 0 -3px 0 var(--accent); }
.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 16px; 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; max-width: 100%; }
.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: 44px; 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; background: var(--warn-soft); border-radius: var(--r); }
#store-note { overflow-wrap: anywhere; }
.note.info { background: var(--paper); border: 1px solid var(--line); }

/* the sheet */
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 16px; margin: 10px 0 18px; }
.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; gap: 8px; font-weight: 600; list-style: none; }
.rules summary::-webkit-details-marker, .work summary::-webkit-details-marker, .recent summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
/* display:flex drops the browser's triangle, so draw one: points right when closed, down when open */
.rules summary::before, .work summary::before, .recent summary::before, .faq summary::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; transition: transform 0.15s; }
.rules[open] > summary::before, .work[open] > summary::before, .recent[open] > summary::before, .faq[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .rules summary::before, .work summary::before, .recent summary::before, .faq summary::before { transition: none; } }
.rules ul { margin: 4px 0 8px; padding-left: 20px; max-width: 80ch; }
.rules li { margin: 0 0 4px; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 16px 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; gap: 10px; align-items: baseline; }
.qn { font-family: var(--mono); color: var(--accent-ink); background: var(--accent); border-radius: 3px; padding: 0 7px; font-size: 1rem; }
.scen, .task { margin: 0 0 10px; max-width: 75ch; }
.task { color: var(--muted); }

/* cash flow tables */
.fig { display: grid; gap: 10px; }
.twrap { overflow-x: auto; max-width: 100%; }
table.dt { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th, .dt td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: 400; }
.dt thead th { font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.dt .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.dt thead th.num { font-family: var(--sans); white-space: normal; }
.dt tbody th[scope="row"] { font-family: var(--mono); color: var(--muted); }
.dt tbody tr:first-child td, .dt tbody tr:first-child th { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.dt td.in { padding: 3px 6px; min-width: 8.5em; }
.dt tr.r-tot th, .dt tr.r-tot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 4px double var(--ink); }
.dt tbody tr.r-tot th { font-family: var(--sans); color: var(--ink); }
table.cf-exam td.num { min-width: 7em; }
.dt.agrid td.in, .dt.agrid td.kc { min-width: 12em; }
.dt.agrid tbody th[scope="row"] { font-family: var(--sans); color: var(--ink); font-weight: 600; }

input.cell { width: 100%; min-height: 44px; padding: 6px 8px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
input.cell.short { width: 6em; text-align: center; }
input.cell.mid { width: 6.5em; }
select.cell { min-width: 12em; }
.cell.is-right { border-color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
.cell.is-wrong, .cell.is-unread { border-color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.cell.is-close { border-color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }

/* answers under the table */
.answers { display: grid; gap: 8px; max-width: 640px; }
.arow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.alab { font-weight: 600; flex: 0 0 15em; }
@media (max-width: 520px) { .arow { display: grid; grid-template-columns: minmax(0, 1fr); } }
.aval { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aval input.cell:not(.short):not(.mid) { width: 9.5em; }
.u { color: var(--muted); }
.pbset { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.pbu { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pbu .u { min-width: 3.7em; }
@media (max-width: 400px) { input.cell.short { width: 4.8em; } }
.kv { font-family: var(--mono); font-weight: 700; }

/* tables that do not fit (fit.js measures them; screen only): each row becomes a block, each value labelled with its column */
@media screen {
  .twrap.rows { overflow-x: visible; }
  .twrap.rows table, .twrap.rows tbody { display: block; width: 100%; }
  .twrap.rows thead { display: none; }
  .twrap.rows tr { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .twrap.rows th, .twrap.rows td { border: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
  .twrap.rows td::before { content: attr(data-l); font: 600 1rem var(--sans); color: var(--muted); }
  .twrap.rows th[data-l="Year"]::before { content: "Year\00a0"; }
  .twrap.rows th[data-l="Year"] { justify-content: flex-start; font-weight: 700; color: var(--ink); }
  .twrap.rows td.in { min-width: 0; }
  .twrap.rows td.in > * { flex: 0 1 11em; min-width: 0; }
  .twrap.rows td.in .pbset { flex: 0 1 auto; justify-content: flex-end; }
  .twrap.rows tr.r-tot { border-top: 2px solid var(--ink); }
  .twrap.rows .agrid td { display: grid; grid-template-columns: 6em minmax(0, 1fr); column-gap: 6px; justify-items: end; }
  .twrap.rows .agrid td::before { white-space: nowrap; justify-self: start; }
  .twrap.rows .agrid td .pbset { justify-content: flex-end; }
}

/* feedback */
.fbwrap { margin: 6px 0; }
.fb { margin: 4px 0; padding: 6px 10px; border-radius: var(--r); background: var(--bad-soft); max-width: 75ch; }
.fb.right { background: var(--ok-soft); }
.fb.close { background: var(--warn-soft); }
.fb.empty { background: var(--paper); border: 1px solid var(--line); }
.cw { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.dt td.in .cw, .dt.agrid td .cw { display: flex; }
.dt td.in .cw > .cell { flex: 1 1 auto; min-width: 0; }
.mk { flex: none; width: 1.2em; text-align: center; font-weight: 700; font-size: 1.15rem; line-height: 1; }
.mk-right { color: var(--ok); }
.mk-close { color: var(--warn); }
.mk-wrong, .mk-unread { color: var(--bad); }
.qfoot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.work { margin: 4px 0 8px; }
.keyfig, .kfig { display: grid; gap: 12px; }
.steps { margin: 8px 0; padding-left: 20px; font-family: var(--mono); font-size: 1rem; max-width: 80ch; }
.steps li { margin: 3px 0; overflow-wrap: anywhere; }
.steps li.say { font-family: var(--sans); list-style: none; margin-left: -20px; }
.steps li.sh { font-weight: 700; margin-top: 12px; }

/* the cumulative chart in the key */
.chart { margin: 0; max-width: 420px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .zero { stroke: var(--ink); stroke-width: 1.5; }
.chart .bneg { fill: var(--neg); }
.chart .bpos { fill: var(--pos); }
.chart .bx { fill: var(--muted); font: 14px var(--mono); text-anchor: middle; }
.chart .pbline { stroke: var(--accent); stroke-width: 2.5; }
.chart figcaption { color: var(--muted); margin-top: 4px; }

.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); }

/* 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: 2px solid var(--ink); 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: 12mm; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #888; --line2: #444; --paper: #fff; --bg: #fff; --accent: #000; --neg: #555; --pos: #bbb; }
  body { background: #fff; color: #000; font: 10.5pt/1.35 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; border-bottom: 1.5pt solid #000; display: inline-block; padding-bottom: 2px; }
  .pmeta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; }
  .prules { margin: 4px 0 6px; padding-left: 14pt; font-size: 10pt; }
  .prules { columns: 2; column-gap: 16pt; }
  .prules li { margin: 0 0 2px; break-inside: avoid; }
  .psheet .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; flex-wrap: wrap; margin-bottom: 4pt; }
  .plabel { font-size: 10pt; margin: 0; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li { margin: 0 0 6pt; break-inside: avoid; }
  .pq > li.pq-exam { break-inside: auto; }
  .pq-exam .twrap { break-inside: avoid; }
  .pq-exam .pqh { break-after: avoid; }
  .pk > li { margin: 0 0 9pt; }
  .pk .dt th, .pk .dt td { padding-top: 1pt; padding-bottom: 1pt; }
  /* a fixed number of problems to a page (app.js PER_PAGE), so every copy of a class set takes the same pages */
  .pq > li.pnew, .pk > li.pnew { break-before: page; }
  .pqh h3, .pk h3 { font-size: 12pt; margin: 6px 0 2px; break-after: avoid; }
  .pscen, .task { margin: 0 0 6px; color: #000; }
  .fig, .kfig, .keyfig { display: block; }
  .fig > *, .kfig > * { margin-bottom: 6pt; }
  .twrap { overflow: visible; break-inside: avoid; }
  table.dt { font-size: 10pt; }
  .dt th, .dt td { padding: 2pt 6pt; border-bottom: 0.5pt solid #777; }
  .dt thead th { border-bottom: 1pt solid #000; color: #000; }
  .dt tbody tr:first-child td, .dt tbody tr:first-child th { background: none; }
  .dt td.in { min-width: 7em; height: 16pt; border: 0.5pt solid #777; }
  .pq .dt th, .pq .dt td { padding-top: 0.5pt; padding-bottom: 0.5pt; }
  /* narrow money columns (their headings wrap), so the task and the working get the width */
  .dt.cf-pbe thead th.num, .dt.cf-pbu thead th.num, .dt.cf-npv thead th.num { width: 21mm; }
  .dt.agrid td.in { min-width: 14em; }
  .pblank { display: inline-block; border-bottom: 0.75pt solid #000; height: 14pt; vertical-align: bottom; }
  .pblank.w { width: 8em; }
  .pblank.s { width: 3em; }
  .dt td.in .pblank { border: 0; }
  .answers { max-width: none; gap: 2pt; }
  .arow { border-bottom: 0; padding: 3pt 0; justify-content: flex-start; }
  .alab { min-width: 18em; }
  .pchoice { letter-spacing: 0.02em; }
  .pchoice::after { content: " (circle one)"; color: #333; font-size: 10pt; }
  .pwork { height: 26mm; border: 0.5pt dashed #999; margin-top: 4pt; background: repeating-linear-gradient(to bottom, transparent 0 20.25pt, #bbb 20.25pt 21pt); background-position: 0 16pt; background-repeat: repeat-y; background-origin: border-box; }
  .pwork::before { content: "Working"; font-size: 10pt; color: #444; padding: 1pt 4pt; display: block; background: #fff; height: 15pt; }
  .pq-exam .pwork { height: 72mm; }
  .pq-arr .pwork, .pq-npv .pwork { height: 22mm; }
  .pq-exam .pend { break-inside: avoid; }
  /* short problems: the table on the left, the task, answers and working beside it, so two or three fit a page */
  .pq-pbe .fig, .pq-pbu .fig, .pq-arr .fig, .pq-npv .fig { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14pt; align-items: start; }
  .pq-pbe .fig > .twrap, .pq-pbu .fig > .twrap, .pq-arr .fig > .twrap, .pq-npv .fig > .twrap { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .pq-pbe .fig > .task, .pq-pbu .fig > .task, .pq-arr .fig > .task, .pq-npv .fig > .task { grid-column: 2; grid-row: 1; }
  .pq-pbe .pend, .pq-pbu .pend, .pq-arr .pend, .pq-npv .pend { grid-column: 2; grid-row: 2; }
  .pq-pbe .alab, .pq-pbu .alab, .pq-arr .alab, .pq-npv .alab { min-width: 0; flex: 0 0 10.5em; }
  .pq-npv .dt td.in { min-width: 5.5em; }
  .pq-npv .alab { flex-basis: 13em; }
  .pq-arr .arow, .pq-npv .arow { padding: 0.5pt 0; }
  /* two projects: the four choices in two columns */
  .pq-exam .answers.choices { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14pt; }
  .pq-exam .choices .arow { display: block; }
  .pq-exam .choices .alab { display: block; min-width: 0; }
  .pk-exam .pkw .kfig > .twrap, .pk-exam .pkw .kfig > .answers { grid-area: auto; }
  .pk-exam .pkw .kfig { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16pt; align-items: start; }
  .pk-exam .kfig > .twrap, .pk-exam .kfig > .answers { margin: 0; }
  .pk-exam .choices .alab { min-width: 0; flex: 0 0 auto; margin-right: 8pt; }
  .pq-exam .arow { min-height: 21pt; padding: 1pt 0; }
  .pq-exam .dt.agrid td.in, .pq-exam .dt.agrid th { height: 21pt; }
  .steps { font-size: 10pt; margin: 4px 0; padding-left: 12pt; }
  .steps li { margin: 1pt 0; }
  .steps li.say { font-size: 10pt; margin-left: -12pt; }
  .steps li.sh { margin-top: 4pt; }
  .chart { max-width: 70mm; break-inside: avoid; }
  /* the key: the table and answers, the working beside them, and the chart (payback) on the right */
  .pk > li { break-inside: avoid; }
  .pkw { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "t s" "a s" ". s"; column-gap: 12pt; align-items: start; }
  .pk-pbe .pkw, .pk-pbu .pkw { grid-template-columns: max-content minmax(0, 1fr) 36mm; grid-template-areas: "t s c" "t s a" ". s ."; }
  .pk-pbe .pkw .kfig > .answers, .pk-pbu .pkw .kfig > .answers { margin-top: 6pt; }
  .pk-pbe .answers .arow, .pk-pbu .answers .arow { display: block; }
  .pk-arr .pkw { grid-template-areas: "a s" ". s"; }
  .pkw .keyfig, .pkw .kfig { display: contents; }
  .pkw .kfig > .twrap { grid-area: t; margin: 0; }
  .pkw .kfig > .answers { grid-area: a; margin: 4pt 0 0; }
  .pkw .kfig > .chart { grid-area: c; margin: 0; max-width: none; }
  .pkw > .steps { grid-area: s; margin: 0; padding-left: 12pt; }
  .pk-pbe .alab, .pk-pbu .alab, .pk-npv .alab, .pk-arr .alab { min-width: 0; flex: 0 0 auto; margin-right: 8pt; }
  /* two projects: the answers across the page, the working below in two columns, one problem to a page */
  .pk-exam .pkw { display: block; }
  .pk-exam .pkw > .steps { columns: 2; column-gap: 14pt; margin-top: 6pt; }
  .pk-exam .steps li { break-inside: avoid; }
  .chart .bx { font-size: 34px; transform: translateY(11px); } /* 10pt at 36 mm wide (340 units), clear of the bars */
  .chart svg { overflow: visible; margin-bottom: 2mm; }
  .chart figcaption { font-size: 10pt; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}