/* Earned value practice: a project controls report. Cool grey graph paper, slate ink, one deep teal accent; condensed
   bold headings like a drawing title block, every figure in tabular mono. The S-curve keeps its own three line colours
   (planned blue, earned green, actual red), each also told apart by dash or marker so it reads in grey on paper. */
:root {
  --bg: #eef1f2; --paper: #ffffff; --ink: #15212a; --muted: #46525c; --line: #cfd6db; --line2: #7b8790;
  --accent: #0d5f63; --accent-ink: #ffffff; --accent-soft: #dcecec;
  --insert: #f4f7f8;
  --pv: #2b5fa3; --ev: #1d7a3e; --ac: #b0291f; --grid1: #8a959d; --grid2: #4f5b64;
  --ok: #1b6b37; --ok-soft: #e0f0e5; --bad: #a42519; --bad-soft: #fbe4e1; --warn: #745000; --warn-soft: #f7ecd0;
  --head: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, 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: 2px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11181d; --paper: #182128; --ink: #e5ebef; --muted: #aab6bf; --line: #2e3a43; --line2: #66737d;
    --accent: #5cc4c4; --accent-ink: #072022; --accent-soft: #163536;
    --insert: #1d2830;
    --pv: #7fb0f0; --ev: #6fd08f; --ac: #ff8f84; --grid1: #5f6d78; --grid2: #8d9ba6;
    --ok: #82d39f; --ok-soft: #173020; --bad: #ff9b8f; --bad-soft: #3d1f1b; --warn: #efc46a; --warn-soft: #382e15;
  }
}
* { 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: 1140px; 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.15; font-weight: 700; letter-spacing: 0.005em; }

/* hero */
.hero { padding: 22px 0 4px; }
.hero h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); margin: 0 0 8px; letter-spacing: -0.01em; }
.lede { margin: 4px 0 0; max-width: 62ch; color: var(--muted); }
.crumbs { margin: 14px 0 0; }
.crumbs a { font-weight: 600; }

/* setup */
.setup { margin: 14px 0 10px; display: grid; gap: 10px; }
.setup fieldset, .rules .names { border: 0; margin: 0; padding: 0; min-width: 0; }
.setup legend, .rules .names legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip 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; }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.setgrid { display: grid; gap: 10px 28px; }
@media (min-width: 900px) { .setgrid { grid-template-columns: auto auto; justify-content: start; } }
.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 { 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); }
@media (max-width: 600px) {
  .hero { padding-top: 12px; }
    .setup { gap: 6px; margin-top: 8px; }
  .chips { gap: 4px; }
  #levels, #names { display: grid; grid-template-columns: 1fr 1fr; }
  .chip span { padding: 6px 8px; white-space: normal; line-height: 1.2; }
  .sheet { padding: 12px 12px 14px; }
}

/* the sheet */
.sheet { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r); padding: 14px 18px 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.35rem; }
.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: 6px 0 2px; }
.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; }
.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; }
.rules[open] > summary::before, .work[open] > summary::before, .recent[open] > summary::before, .faq[open] > summary::before { transform: rotate(90deg); }
.rules ul { margin: 4px 0 8px; padding-left: 20px; max-width: 80ch; }
.rules li { margin: 0 0 4px; }
.rules .names { margin: 4px 0 12px; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 16px 0 6px; border-top: 1px solid var(--line2); margin-top: 12px; }
.q:first-child { margin-top: 6px; }
.qhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 0 0 6px; }
.qhead .see { font-weight: 600; }
.q h3 { margin: 0; font-size: 1.25rem; display: flex; gap: 10px; align-items: baseline; }
.qn { font-family: var(--mono); color: var(--accent); border: 2px solid var(--accent); border-radius: 2px; padding: 0 6px; font-size: 1rem; }
.scen { margin: 0 0 12px; max-width: 75ch; }

/* tables: ruled like a printed results table */
.twrap { max-width: 100%; margin: 0 0 12px; }
table.dt { border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dt caption { text-align: left; font-family: var(--head); font-weight: 700; font-size: 1.05rem; padding: 0 0 4px; }
.dt th, .dt td { padding: 6px 10px; text-align: left; vertical-align: middle; font-weight: 400; }
.dt thead th { font-weight: 700; border-bottom: 1px 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); }
.dt tbody th[scope="row"] { font-weight: 600; white-space: nowrap; }
.dt tr.tot th, .dt tr.tot td { border-top: 1px solid var(--line2); }
.dt td.in { padding: 4px 6px; }
.dt td.na { background: none; }
.dt td.kc { font-weight: 700; }
input.cell { min-height: 44px; padding: 6px 8px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; max-width: 100%; }
input.cell { width: calc(var(--w, 8) * 1ch + 22px); }
select.cell { max-width: min(100%, 30em); }
select.cell.long { width: min(100%, 42em); }
.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); }
.cell.is-own { border-color: var(--warn); border-style: dashed; box-shadow: inset 0 0 0 1px var(--warn); }

/* answers under the table */
.answers { display: grid; gap: 4px; max-width: 880px; }
.arow { display: grid; grid-template-columns: minmax(0, 17em) minmax(0, 1fr); align-items: center; justify-content: start; gap: 4px 16px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.alab { font-weight: 600; }
.aval { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-width: 0; max-width: 100%; }
.arow.asel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.asel .aval { display: flex; width: 100%; }
/* a choice: radio buttons with sentences that wrap */
.cwopts { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
.opt .mk { margin-left: auto; padding-left: 8px; }
.opts { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.opts.long { flex-direction: column; }
@media (max-width: 480px) { .opts { display: grid; grid-template-columns: minmax(0, 1fr); } }
.opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--paper); cursor: pointer; min-width: 0; }
.opt input.cell { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--ink); cursor: pointer; }
.opt span { min-width: 0; overflow-wrap: anywhere; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opts.is-right .opt:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); }
.opts.is-wrong .opt:has(input:checked), .opts.is-unread .opt:has(input:checked) { border-color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.opts.is-own .opt:has(input:checked) { border-color: var(--warn); border-style: dashed; }
.opts.is-close .opt:has(input:checked) { border-color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
@media (max-width: 640px) { .arow { grid-template-columns: minmax(0, 1fr); } }
.kv { font-family: var(--mono); font-weight: 700; }
.acon .kv { font-family: var(--sans); }

/* 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 { width: 100%; flex: 1 1 100%; }
  .twrap.rows table, .twrap.rows tbody { display: block; width: 100%; }
  .twrap.rows table.dt { border-bottom: 0; }
  .twrap.rows caption { display: block; }
  .twrap.rows thead { display: none; }
  .twrap.rows tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
  .twrap.rows tr.tot th, .twrap.rows tr.tot td { border-top: 0; }
  .twrap.rows tbody th[scope="row"] { grid-column: 1 / -1; }
  .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 th { justify-content: flex-start; font-weight: 700; color: var(--ink); }
  .twrap.rows td::before { content: attr(data-l); font: 600 1rem var(--sans); color: var(--muted); }
  .twrap.rows td.na { display: none; }
  .twrap.rows td.in { flex-wrap: nowrap; }
  .twrap.rows td.in .cw { margin-left: auto; }
}

/* the formula tables in the page text are stacked on narrow screens by CSS alone, so the page never paints wider than
   the screen before fit.js runs or with JavaScript off */
@media screen and (max-width: 560px) {
  .content .twrap { width: 100%; flex: 1 1 100%; }
  .content .twrap table, .content .twrap tbody { display: block; width: 100%; }
  .content .twrap table.dt { border-bottom: 0; }
  .content .twrap caption { display: block; }
  .content .twrap thead { display: none; }
  .content .twrap tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
  .content .twrap tr.tot th, .content .twrap tr.tot td { border-top: 0; }
  .content .twrap tbody th[scope="row"] { grid-column: 1 / -1; }
  .content .twrap th, .content .twrap td { border: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
  .content .twrap th { justify-content: flex-start; font-weight: 700; color: var(--ink); }
  .content .twrap td::before { content: attr(data-l); font: 600 1rem var(--sans); color: var(--muted); }
  .content .twrap td.na { display: none; }
  .content .twrap td.in { flex-wrap: nowrap; }
  .content .twrap td.in .cw { margin-left: auto; }
}

/* the S-curve */
.chart { margin: 0 0 12px; max-width: 620px; container-type: inline-size; }
.chart svg { display: block; width: 100%; height: auto; background: var(--paper); }
.chart .ch-tall { display: none; max-width: 400px; }
.vtog { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; cursor: pointer; }
.vtog input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.twrap.vt { margin: 0 0 14px; }
.atip { margin: 0 0 4px; color: var(--muted); }
.twrap.vt.rows td:empty { display: none; }
.vtt .mo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.twrap.vt.rows .vtt .mo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
@container (max-width: 520px) { .chart .ch-wide { display: none; } .chart .ch-tall { display: block; } }
.chart .g1 { stroke: var(--grid1); stroke-width: 1; }
.chart .g2 { stroke: var(--grid2); stroke-width: 1; }
.chart .ax { stroke: var(--ink); stroke-width: 1.5; }
.chart text { fill: var(--ink); font-family: var(--sans); }
.chart .tl { font-size: 14px; font-family: var(--mono); fill: var(--muted); }
.chart .at { font-size: 13px; fill: var(--muted); }
.chart .lb { font-size: 14px; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.chart .st { fill: var(--muted); font-weight: 600; }
.chart .bac { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 4; }
.chart .stat { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-pv { stroke: var(--pv); stroke-width: 2.5; stroke-dasharray: 9 6; }
.chart .c-ev { stroke: var(--ev); stroke-width: 3; }
.chart .c-ac { stroke: var(--ac); stroke-width: 2.5; }
.chart .m-ev { fill: var(--ev); }
.chart .m-ac { fill: var(--paper); stroke: var(--ac); stroke-width: 2; }
.chart .m-pv { fill: var(--pv); }
.chart .t-pv { fill: var(--pv); }
.chart .t-ev { fill: var(--ev); }
.chart .t-ac { fill: var(--ac); }
.legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; color: var(--muted); }
.lg-pv { color: var(--pv); } .lg-ev { color: var(--ev); } .lg-ac { color: var(--ac); }
.lg-pv, .lg-ev, .lg-ac { font-weight: 600; }

/* a chart problem on a wide screen: the chart stays in view beside the answers */
@media screen and (min-width: 1000px) {
  .qbody { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .qchart { position: sticky; top: 8px; }
  .qans .agroup:first-child { margin-top: 0; }
  .qans .agroup:first-child .agh { margin-top: 0; }
}

/* the work package table */
.dt td.prog { white-space: normal; min-width: 9em; }
.twrap:not(.rows) .pkt td.in { width: 1%; }

/* answer groups */
.agroup { margin: 8px 0 4px; }
.agh { margin: 6px 0 2px; font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.answers.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 25em), 1fr)); column-gap: 28px; max-width: none; }
.answers.grid .arow { grid-template-columns: minmax(0, 1fr) auto; }
.answers.grid .arow.asel { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }


/* feedback */
.fbwrap { margin: 6px 0; }
.fbl { margin: 4px 0; padding: 0 0 0 2.2em; max-width: 78ch; }
.fb { margin: 4px 0; padding: 6px 10px; border-radius: var(--r); background: var(--bad-soft); max-width: 78ch; }
.fbl .fb::marker { font-weight: 700; }
.fb.right { background: var(--ok-soft); }
.fb.close { background: var(--warn-soft); }
.fb.own { background: var(--paper); border: 1px dashed var(--warn); }
.fb.empty { background: var(--paper); border: 1px solid var(--line); }
.cw { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.cw > .cell { flex: none; }
.cw > select.cell { flex: 0 1 auto; min-width: 0; }
.dt td.in .cw { display: flex; justify-content: flex-end; }
.mk { flex: none; min-width: 1.5em; font-weight: 700; font-size: 1.1rem; line-height: 1; white-space: nowrap; }
.mn { font-size: 1rem; font-family: var(--mono); }
.mk-right { color: var(--ok); }
.mk-close, .mk-own { 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 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kpart { min-width: 0; }
.kh { margin: 8px 0 2px; font-weight: 700; }
.kq { display: none; }
.steps { margin: 4px 0 8px; padding-left: 2.6em; font-family: var(--mono); font-size: 1rem; max-width: 86ch; }
.steps li { margin: 3px 0; overflow-wrap: anywhere; }

.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--ink); }
.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 .when { display: block; color: var(--muted); }
.hint { color: var(--muted); }

/* content */
.content { max-width: 75ch; padding-bottom: 20px; }
.content h2 { font-size: 1.5rem; margin: 28px 0 8px; }
.content .dt { margin: 6px 0 10px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details p { margin: 0 0 12px; }
.sources { color: var(--muted); overflow-wrap: anywhere; }
footer { border-top: 2px solid var(--ink); padding: 18px 0 30px; color: var(--muted); }
.indep, .also { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.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, 560px); z-index: 20; pointer-events: none; transition: transform 0.2s; }
.toast.on { transform: translate(-50%, 0); }
.toast.top { top: 16px; bottom: auto; transform: translate(-50%, -140%); }
.toast.top.on { transform: translate(-50%, 0); }
@media (max-width: 600px) {
  .toast { left: 8px; right: 8px; bottom: 8px; max-width: none; text-align: center; transform: translateY(140%); }
  .toast.top { top: 8px; bottom: auto; transform: translateY(-140%); }
  .toast.on, .toast.top.on { transform: none; }
}
@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; --insert: #fff; --pv: #1f4f8f; --ev: #146030; --ac: #9a1f16; --grid1: #8f8f8f; --grid2: #555555; }
  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 { display: flex; justify-content: space-between; align-items: baseline; gap: 6pt 12pt; flex-wrap: wrap; margin-bottom: 4pt; }
  .ph h2 { margin: 4px 0 0; font-size: 15pt; }
  .pmeta { display: flex; gap: 14pt; margin: 0; }
  .prules { margin: 4px 0 6px; padding-left: 14pt; font-size: 10pt; columns: 2; column-gap: 18pt; }
  .prules li { margin: 0 0 2px; break-inside: avoid; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; }
  .pq > li { margin: 0 0 8pt; padding-top: 5pt; border-top: 1.2pt solid #000; break-inside: avoid; }
  .pk > li { margin: 0 0 8pt; padding-top: 4pt; border-top: 1pt solid #000; }
  .kpart { break-inside: avoid; }
  .pk > li:last-child, .pq > li:last-child { margin-bottom: 0; }
  /* the key on paper: the working lines carry every number, so the answer list is left out */
  .pkey .kans { display: none; }
  .pkey .dt th, .pkey .dt td { padding-top: 1pt; padding-bottom: 1pt; }
  .pq h3, .pk h3 { font-size: 12pt; margin: 0 0 3pt; break-after: avoid; }
  .scen { margin: 0 0 5pt; max-width: none; }
  .twrap, .chart { break-inside: avoid; margin: 0 0 5pt; }
  table.dt { font-size: 10pt; border-top: 1.2pt solid #000; border-bottom: 1.2pt solid #000; }
  .dt caption { font-size: 10pt; padding-bottom: 2pt; }
  .dt th, .dt td { padding: 2pt 7pt; }
  .dt thead th { border-bottom: 0.75pt solid #000; }
  .dt td.in { min-width: 4.5em; height: 18pt; }
  .pkt td, .pkt th { padding-top: 1pt; padding-bottom: 1pt; }
  .dt td.prog { min-width: 0; white-space: nowrap; }
  .pblank { display: inline-block; border: 0.75pt solid #000; height: 18pt; vertical-align: middle; }
  .answers { gap: 0; max-width: none; }
  .arow { display: flex; border-bottom: 0; padding: 0; min-height: 19pt; align-items: flex-end; gap: 8pt; grid-template-columns: none; }
  .arow .aval { margin-left: 0; }
  .arow.asel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2pt 14pt; padding-top: 3pt; }
  .psheet .arow.asel .alab::after { content: " (circle one)"; font-weight: 400; color: #333; }
  .popts { margin: 1pt 0 0; padding-left: 16pt; list-style: upper-alpha; columns: 2; column-gap: 14pt; }
  .acon .popts { columns: 1; }
  /* a two-option choice fits on its label's line */
  .arow.asel:has(.popts > li:nth-child(2):last-child) { display: flex; align-items: baseline; gap: 6pt 14pt; flex-wrap: wrap; }
  .popts:has(> li:nth-child(2):last-child) { display: flex; gap: 4pt 22pt; columns: auto; margin: 0; padding-left: 0; list-style-position: inside; }
  .popts li { margin: 0 0 1pt; break-inside: avoid; }
  .keyfig { display: block; }
  .kpart + .kpart { margin-top: 3pt; }
  .kh { margin: 2pt 0 1pt; font-size: 10pt; }
  .steps { font-size: 10pt; margin: 0; padding-left: 26pt; max-width: none; }
  .kq { display: inline; }
  .steps li { margin: 0.5pt 0; }
  .kpart .answers .arow { min-height: 0; display: block; padding: 1pt 0; }
  .kpart .alab::after { content: ":\00a0"; }
  .kpart .aval { display: inline; }
  .chart { max-width: 118mm; container-type: normal; }
  /* a chart problem on paper: the chart beside the readings, variances and status; the forecasts full width below */
  .psheet .qbody { display: grid; grid-template-columns: 96mm minmax(0, 1fr); gap: 0 12pt; align-items: start; }
  .psheet .qchart { grid-row: 1 / span 3; }
  .psheet .qans { display: contents; }
  .psheet .qans .agroup:nth-child(-n+3) { grid-column: 2; }
  .psheet .qans .agroup:nth-child(n+4) { grid-column: 1 / -1; }
  .psheet .qans .agroup:nth-child(-n+3) .answers.grid { grid-template-columns: 1fr; }
  .psheet .qans .agroup:first-child .agh { margin-top: 0; }
  .psheet .qchart .legend { gap: 0 8pt; }
  .chart .ch-wide { display: block !important; }
  .chart .ch-tall { display: none !important; }
  .pkey .chart { max-width: 100mm; }
  /* every problem, and every problem's key, fits on a page: keep each whole, so a page never starts mid-problem
     without its name or ends with a lone choice */
  .pk > li { break-inside: avoid; }
  /* every copy of a class set paginates the same: the copies have the same kinds in the same order (lib.js), and each
     kind of problem takes the same height (its tallest, measured over many sets and both term names), so the page
     breaks fall in the same places in every copy (tests/qa.mjs sweeps this on Letter and A4) */
  .pq > li.k-curve { min-height: 175mm; }
  .pq > li.k-table { min-height: 155mm; }
  .pq > li.k-interp { min-height: 108mm; }
  .pk > li.k-curve { min-height: 221mm; }
  .pk > li.k-table { min-height: 168mm; }
  .pk > li.k-interp { min-height: 57mm; }
  .steps li { break-inside: avoid; }
  .answers.grid .arow.asel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2pt 14pt; }
  .arow.asel .popts { display: flex; flex-wrap: wrap; gap: 2pt 18pt; columns: auto; margin: 0; padding-left: 0; list-style-position: inside; }
  .legend { font-size: 9pt; }
  .agh { font-size: 10.5pt; margin: 3pt 0 0; }
  .agroup { margin: 2pt 0; break-inside: avoid; }
  .answers.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16pt; }
  .answers.grid .arow { display: flex; justify-content: space-between; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}