/* Critical Path Practice: a planner's sheet of squared paper. Warm off-white ground with a faint grid in the setup
   strip, graphite ink, a slab-serif heading face, and one vermilion accent: the colour of the critical path, which
   also marks actions and question numbers (drawn as small network nodes). Networks, tables and charts stay black on
   white in both themes, as on paper. On paper everything is black on white. */
:root {
  --bg: #f6f4ee;
  --paper: #ffffff;
  --ink: #1c1e24;
  --muted: #535965;
  --line: #d9d5ca;
  --edge: #767c87;
  --accent: #b2361a;
  --accent-ink: #ffffff;
  --accent-soft: #f8e6df;
  --link: #9c2f16;
  --grid: rgba(28, 30, 36, 0.06);
  --ok: #17663a;
  --ok-soft: #ddefe3;
  --close: #7a5300;
  --close-soft: #f6ecd2;
  --bad: #9b1d3d;
  --bad-soft: #f7e0e6;
  --focus: #1b5fc2;
  --head: Rockwell, "Rockwell Nova", "Roboto Slab", "Zilla Slab", "DejaVu Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 4px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181c;
    --paper: #202228;
    --ink: #e8e6e1;
    --muted: #aeb2ba;
    --line: #363a43;
    --edge: #737985;
    --accent: #f08a68;
    --accent-ink: #1d0b05;
    --accent-soft: #3a2119;
    --link: #f5a184;
    --grid: rgba(232, 230, 225, 0.05);
    --ok: #8adca6;
    --ok-soft: #14301f;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9bb4;
    --bad-soft: #3a1823;
    --focus: #8fb8ff;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
a { color: var(--link); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.15; font-weight: 700; }

/* ---------- title: a short critical path runs under it ---------- */
.topnav { display: flex; gap: 4px 16px; flex-wrap: wrap; padding: 10px 0 0; font-size: 16px; }
.topnav a { min-height: 32px; display: inline-flex; align-items: center; }
.topnav [aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }
.hero { padding: 6px 0 12px; }
.hero h1 { font-size: clamp(27px, 4.6vw, 42px); margin: 0 0 4px; letter-spacing: -0.01em; max-width: 26ch; }
.cpath { display: block; width: 210px; height: 16px; margin: 4px 0 8px; color: var(--accent); }
.lede { margin: 0; max-width: 66ch; }
.crumbs { font-size: 16px; margin: 0; color: var(--muted); }

/* ---------- controls: one strip of squared paper ---------- */
.tool { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.setup { background: var(--paper); border: 1px solid var(--line); padding: 10px 12px 2px; border-radius: var(--r);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.ctl { display: grid; gap: 8px 10px; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto; grid-template-areas: "board level count new"; align-items: end; }
.f-board { grid-area: board; } .f-level { grid-area: level; } .f-count { grid-area: count; } .f-new { grid-area: new; }
/* one course only (Hungarian page): the other controls start at the left */
.ctl:has(.f-board[hidden]) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "level count new ."; }
.fld { display: grid; gap: 2px; min-width: 0; }
.fld span { font: 600 16px var(--sans); color: var(--muted); }
.fld select { width: 100%; }
.more { display: flex; flex-wrap: wrap; gap: 0 22px; }
.more details[open] { flex-basis: 100%; }
.more details > fieldset, .more details > div { background: var(--paper); padding: 8px 10px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font: 600 16px var(--sans); color: var(--muted); padding: 0; margin-bottom: 4px; }
.tdet summary, .rules summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; display: list-item; }
.tsum { font-weight: 400; color: var(--muted); font-size: 16px; }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; padding-top: 4px; }
.tg { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-height: 44px; background: var(--paper); }
.tg input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.tg b { display: block; font-weight: 600; font-size: 16px; }
.tg small { display: block; color: var(--muted); font-size: 16px; line-height: 1.3; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; max-width: 100%; }
.btn { font: 600 16px var(--sans); min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 16px; }
.link { font: inherit; background: none; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.rl { margin: 4px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.45; }
.rl li { margin: 0 0 4px; }

/* ---------- the sheet ---------- */
.note { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--bad); background: var(--bad-soft); font-size: 16px; border-radius: var(--r); }
#store-note { overflow-wrap: anywhere; }
.note.info { border-color: var(--focus); background: var(--paper); }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.sheet-head h2 { font-size: 28px; margin: 6px 0 0; }
.code { font-family: var(--mono); letter-spacing: 0.06em; }
.score { margin: 0; color: var(--muted); font-size: 16px; }
.sline { margin: 2px 0 10px; color: var(--muted); font-size: 16px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.q { border-top: 2px solid var(--ink); padding: 12px 0 18px; min-width: 0; }
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.q h3 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 10px; }
/* the question number in a small node */
.qn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font: 700 16px var(--sans); flex: none; }
.scen { margin: 6px 0 8px; max-width: 75ch; }
.figview { min-width: 0; }
.drawnote { margin: 8px 0 0; color: var(--muted); font-size: 16px; max-width: 70ch; }
.qparts { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 0 0; }
.zoom { min-height: 40px; padding: 4px 12px; white-space: nowrap; }

/* ---------- drawings and tables: black on white, like paper, in both themes ---------- */
.docwrap { display: grid; gap: 12px; justify-items: start; color: #1c1e24; max-width: 100%; min-width: 0; }
.tw { max-width: 100%; overflow-x: auto; }
table.doc { border-collapse: collapse; background: #fff; color: #1c1e24; font-size: 16px; font-variant-numeric: tabular-nums; border: 1.5px solid #1c1e24; }
table.doc th, table.doc td { border: 1px solid #b9b6ad; padding: 5px 10px; text-align: center; vertical-align: middle; }
table.doc thead th { background: #efede6; font-size: 16px; font-weight: 600; }
table.doc tbody th { font-weight: 700; }
/* a drawing keeps its own size and scrolls sideways inside its box when the screen is narrower */
.figbox { max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid #cfccc2; border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.figin { display: grid; gap: 8px; padding: 4px; width: max-content; min-width: 100%; }
svg.doc { display: block; background: #fff; max-width: none; height: auto; }
.figbox { container-type: inline-size; justify-self: stretch; width: 100%; }
.qs svg.net, .qs svg.gantt, .qs svg.hist { width: max(100cqw - 10px, 560px); max-width: calc(var(--w) * 1.2px); }
.qs .zoomed svg.net, .zoomed svg.net, .zoomed svg.gantt, .zoomed svg.hist { width: calc(var(--w) * 1.25px); max-width: none; }
.ar, .dm, .ae { stroke: #1c1e24; stroke-width: 1.7; }
.dm { stroke-dasharray: 6 4; }
.ah, .ahd { fill: #1c1e24; }
.ar.crit, .ae.crit { stroke: #b2361a; stroke-width: 3; }
.ah.crit { fill: #b2361a; }
.cm { stroke: #b2361a; stroke-width: 2.4; }
.nd, .ab { fill: #fff; stroke: #1c1e24; stroke-width: 1.7; }
.nd.crit, .ab.crit { stroke: #b2361a; stroke-width: 2.8; }
.nx { stroke: #1c1e24; stroke-width: 1.2; }
svg.doc text { font-family: "Helvetica Neue", Arial, sans-serif; fill: #1c1e24; text-anchor: middle; font-size: 14px; }
.al { font-weight: 700; font-size: 15px !important; }
.ad { font-size: 14.5px !important; }
.nn { font-weight: 700; }
.nn.n2 { font-size: 12px !important; letter-spacing: -0.5px; }
.ne, .nl { font-size: 13.5px !important; }
.nb { fill: #b2361a !important; font-style: italic; font-weight: 700; font-family: Georgia, serif !important; font-size: 15px !important; }
.c-id { font-weight: 700; font-size: 19px !important; }
.c-tf { fill: #555 !important; }
.gl { font-weight: 700; }
.gt, .hy { font-size: 12px !important; fill: #444 !important; }
.hy { text-anchor: end !important; }
.gg { stroke: #ddd9cf; stroke-width: 1; }
.gg.g5 { stroke: #b9b6ad; }
.gb { fill: #3b3f48; }
.gb.crit { fill: #b2361a; }
.gf { fill: #fff; stroke: #3b3f48; stroke-width: 1.4; stroke-dasharray: 4 3; }
.hb { fill: #8d93a0; stroke: #3b3f48; stroke-width: 1; }

/* answer boxes */
.part { border: 0; margin: 0; padding: 0; min-width: 0; }
.part .prompt, .part legend { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 4px; color: var(--ink); }
.ain { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ain input { width: 7em; max-width: 100%; font-variant-numeric: tabular-nums; }
.ain input.letters { width: 9em; text-transform: uppercase; }
.ain .unit { color: var(--muted); }
.ticks { display: flex; flex-wrap: wrap; gap: 6px; }
.tick { display: flex; gap: 8px; align-items: center; min-height: 44px; min-width: 58px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; font-weight: 700; background: var(--paper); }
.tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.part.is-right input[inputmode] { border-color: var(--ok); background: var(--ok-soft); }
.part.is-wrong input[inputmode] { border-color: var(--bad); background: var(--bad-soft); }
.part.is-close input[inputmode], .part.is-unread input[inputmode] { border-color: var(--close); background: var(--close-soft); }
.part.is-right .ticks { outline: 2px solid var(--ok); outline-offset: 3px; }
.part.is-wrong .ticks { outline: 2px solid var(--bad); outline-offset: 3px; }
.part.is-close .ticks { outline: 2px solid var(--close); outline-offset: 3px; }
.fb { margin: 4px 0 0; font-size: 16px; line-height: 1.4; padding: 4px 8px; }
.fb.right { color: var(--ok); background: var(--ok-soft); }
.fb.wrong { color: var(--bad); background: var(--bad-soft); }
.fb.close, .fb.unread { color: var(--close); background: var(--close-soft); }
.qfoot { display: flex; gap: 10px; align-items: center; }
details.work { margin-top: 2px; border-top: 1px dashed var(--line); padding-top: 4px; }
details.work summary { cursor: pointer; color: var(--link); min-height: 44px; display: flex; align-items: center; font-weight: 600; }
details.work .figview { margin: 6px 0 8px; }
.ans { margin: 8px 0 2px; }
.steps { margin: 0 0 4px; padding-left: 20px; color: var(--muted); font-size: 16px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 6px; padding-top: 12px; border-top: 2px solid var(--ink); }
.ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--accent-soft); padding: 6px 10px; }
.share { margin: 16px 0 6px; }
.print-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.print-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; max-width: 100%; }
.print-row select { max-width: 100%; min-width: 0; }
.share-out label { display: grid; gap: 4px; font-weight: 600; margin-top: 8px; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); padding: 4px 12px; }
.recent summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.recent small { display: block; color: var(--muted); font-size: 16px; }
.hint { color: var(--muted); font-size: 16px; margin: 0; }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(150%); background: var(--ink); color: var(--bg); padding: 10px 16px; width: max-content; max-width: min(92vw, 520px); box-sizing: border-box; font-size: 16px; pointer-events: none; transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- content ---------- */
.content { max-width: 72ch; padding: 26px 0 20px; }
.content h2 { font-size: 27px; margin: 26px 0 6px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.faq p { margin: 0 0 12px; }
.sources { font-size: 16px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 16px 0 28px; font-size: 16px; color: var(--muted); }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.print-root { display: none; }

.qparts .part.alone { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .qparts { grid-template-columns: 1fr 1fr 1fr; gap: 12px 22px; }
  .qparts .qfoot, .qparts details.work, .qparts .part.wide { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "board board" "level level" "count new"; }
  .ctl:has(.f-board[hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "level level" "count new"; }
}
@media (max-width: 479px) {
  .qparts { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .qparts .qfoot, .qparts details.work, .qparts .part.wide, .qparts .part:has(.letters) { grid-column: 1 / -1; }
  .ain input { width: 5.2em; }
  .part .prompt, .part legend { font-size: 16px; }
}
@media (min-width: 480px) and (max-width: 899px) {
  .qparts { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .qparts .qfoot, .qparts details.work, .qparts .part.wide { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 26px; }
  .cpath { width: 150px; margin: 2px 0 6px; }
  .lede { font-size: 16px; line-height: 1.45; }
  .q h3 { font-size: 20px; }
  .sheet-head h2 { font-size: 24px; }
  .sheet-head { gap: 4px 10px; }
  .qn { width: 30px; height: 30px; font-size: 16px; }
  table.doc { font-size: 16px; }
  table.doc th, table.doc td { padding: 4px 6px; }
  table.doc.alloc th, table.doc.alloc td { padding: 4px 3px; }
  table.doc.alloc td { min-width: 2.6em; }
  table.doc thead th { font-size: 16px; }
  .tdet summary, .rules summary { min-height: 40px; padding: 8px 0; }
  .rules .tsum { display: none; }
  .more { gap: 0 18px; }
  .topnav { padding-top: 6px; gap: 0 14px; }
  .topnav a { min-height: 30px; }
  .hero { padding-bottom: 8px; }
}
/* below about 600 px every drawing is wider than its box (it keeps at least 560 px so the numbers stay legible) */
@media screen and (max-width: 599px) {
  .crumbs { display: none; } /* the nav above marks the page you are on */
  .q:first-child > .figview > .docwrap::after { content: "Swipe the drawing sideways to see all of it."; font-size: 16px; color: var(--muted); margin-top: -8px; }
  .q:first-child > .figview > .docwrap:not(:has(.figbox))::after { content: none; }
  .q:first-child > .figview > .docwrap:has(svg.gnet)::after { content: none; }
  .q:first-child > .figview > .docwrap:has(svg.gnet.wd)::after { content: "Swipe the drawing sideways to see all of it."; }
}
@media screen and (max-width: 359px) {
  .q:first-child > .figview > .docwrap:has(svg.gnet)::after { content: "Swipe the drawing sideways to see all of it."; }
}
@media (max-width: 359px) {
  .ain input { width: 4.4em; }
}

/* networks pages: weighted graphs, flow networks and allocation tables */
.qs svg.gnet { width: max(100cqw - 10px, calc(var(--w) * 0.78px)); max-width: calc(var(--w) * 1.3px); }
.zoomed svg.gnet, .qs .zoomed svg.gnet { width: calc(var(--w) * 1.4px); max-width: none; }
/* a flow question's capacities and flow side by side on a wide screen */
@media screen and (min-width: 900px) {
  .qs:not(.zoomed) .figin:has(> svg.gnet + svg.gnet) { grid-template-columns: 1fr 1fr; align-items: start; }
  .qs:not(.zoomed) .figin:has(> svg.gnet + svg.gnet) > svg.gnet { width: max(calc(50cqw - 14px), calc(var(--w) * 0.78px)); max-width: calc(var(--w) * 1px); }
}
.ge { stroke: #1c1e24; stroke-width: 1.8; }
.ge.tr { stroke-width: 4.5; }
.ge.tx { stroke-width: 2.4; stroke-dasharray: 8 6; }
.glegend { margin: 6px 0 0; color: var(--ink); }
.ge.hl { stroke: #b2361a; stroke-width: 5; }
.gh { fill: #1c1e24; }
.gv { fill: #fff; stroke: #1c1e24; stroke-width: 2; }
.gn { font-weight: 700; font-size: 17px !important; }
.gwb { fill: #fff; }
.gwt { font-size: 16.5px !important; font-variant-numeric: tabular-nums; }
.gx { font-style: italic; font-weight: 700; font-family: Georgia, serif !important; fill: #b2361a !important; font-size: 17px !important; }
.cutl { fill: none; stroke: #1c1e24; stroke-width: 2.2; stroke-dasharray: 9 5; }
.cutl.kc { stroke: #b2361a; stroke-width: 3; }
.cutt { font-style: italic; font-size: 14px !important; }
.cutt.cs { text-anchor: start !important; }
.cutt.ce { text-anchor: end !important; }
table.doc.alloc td { min-width: 3.2em; }
table.doc.alloc td.alc { font-weight: 700; outline: 2.5px solid #b2361a; outline-offset: -4px; }
table.doc.alloc td.cv { background: #e4e1d8; }
table.doc caption { caption-side: top; text-align: left; font-weight: 600; padding: 2px 0 6px; color: var(--ink); background: var(--bg); }
.qhead:has(.see) { flex-wrap: wrap; }
.see { margin-left: auto; color: var(--link); text-underline-offset: 2px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.ain input.w-path { width: 12em; }
.ain input.w-set { width: 9em; }
.ain input.w-one { width: 6em; }
.ain input.w-edges { width: 20em; }
.ticks.choices .tick { font-weight: 600; }
@media (max-width: 479px) {
  .ain input.w-path, .ain input.w-set { width: 12em; }
  .ain input.w-edges { width: 100%; }
}

/* ---------- print ---------- */
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --edge: #555; }
  @page { margin: 12mm 12mm; }
  body { background: #fff; color: #000; font: 10.5pt/1.36 var(--sans); }
  main, footer, .toast, .skip, .topnav { display: none !important; }
  .print-root { display: block; }
  svg, table.doc, thead th, .pdraw { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8.5pt var(--sans); color: #444; padding-bottom: 5pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; border-bottom: 2pt solid #000; margin-bottom: 4pt; }
  .ph h2 { font: 700 17pt var(--head); margin: 0; white-space: nowrap; }
  .ph p { margin: 0; font-size: 9pt; text-align: right; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 4pt; }
  .pround { margin: 0 0 4pt; font-size: 8.4pt; line-height: 1.3; border: 0.8pt solid #000; padding: 3pt 6pt; }
  .pround ul { margin: 0; padding-left: 11pt; columns: 2; column-gap: 7mm; }
  .pround li { break-inside: avoid; margin: 0 0 1pt; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; orphans: 1; widows: 1; }
  .pq > li, .pk > li { padding: 6pt 0 7pt; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pq h3, .pk h3 { font: 700 12pt var(--head); margin: 0 0 2pt; }
  .pscen { margin: 0 0 4pt; font-size: 10pt; }
  .figbox { border: 0; overflow: visible; background: none; }
  .figin { padding: 0; width: auto; min-width: 0; }
  .pfig .docwrap, .pkfig .docwrap { display: grid; gap: 3mm; }
  .pfig svg.doc, .pkfig svg.doc { width: calc(var(--w) * 0.62pt); max-width: 100%; height: auto; }
  table.doc.wide th, table.doc.wide td { padding: 1.5pt 3pt; min-width: 6mm; }
  table.doc.wide tbody th { text-align: left; background: #eee; font-size: 8.6pt; white-space: nowrap; }
  .tw { overflow: visible; }
  table.doc { font-size: 9.4pt; border-width: 1pt; }
  table.doc th, table.doc td { padding: 1.5pt 5pt; border-color: #777; }
  table.doc thead th { font-size: 8.6pt; background: #eee; }
  .ar.crit, .ae.crit, .cm, .nd.crit, .ab.crit { stroke: #000; }
  .ah.crit { fill: #000; }
  .gb.crit { fill: #000; }
  .gb { fill: #888; }
  .nb { fill: #000 !important; }
  .pdraw { height: 58mm; width: 100%; border: 0.8pt solid #000; background-image: radial-gradient(#888 0.7pt, transparent 0.8pt); background-size: 5mm 5mm; background-position: 2.5mm 2.5mm; margin-top: 3mm; }
  .pdraw.grid { height: 58mm; background-image: linear-gradient(#bbb 0.5pt, transparent 0.5pt), linear-gradient(90deg, #bbb 0.5pt, transparent 0.5pt); background-size: 5mm 5mm; }
  .pparts { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 6mm; row-gap: 3pt; font-size: 9.8pt; margin-top: 3pt; }
  .pparts .pp { break-inside: avoid; }
  .pparts .pp p { margin: 0; }
  .pparts .pp.wide { grid-column: 1 / -1; }
  .pbox { white-space: nowrap; margin-right: 2.5mm; }
  .pline { margin: 5pt 0 2pt !important; }
  .uline { display: inline-block; width: 26mm; border-bottom: 0.8pt solid #000; }
  .pkey { break-before: page; page-break-before: always; }
  .psheet + .psheet { break-before: page; page-break-before: always; }
  .pkey + .pkey { break-before: page; page-break-before: always; }
  table.pkt { width: 100%; border-collapse: collapse; font-size: 8.8pt; table-layout: fixed; margin-top: 3pt; }
  table.pkt td { border-top: 0.5pt solid #bbb; padding: 1.5pt 4pt; vertical-align: top; }
  table.pkt td.pkq { width: 30%; }
  table.pkt td.pka { width: 16%; font-weight: 700; }
  .pnet .pround { font-size: 10pt; }
  .pnet .pparts { font-size: 10.5pt; row-gap: 5pt; }
  .pnet .pline { margin: 13pt 0 2pt !important; }
  .pnet .uline { width: 34mm; }
  .pnet .uline.long { width: 100%; max-width: 120mm; }
  .pnet .pparts .pp.wide .pline { display: flex; }
  .pnet table.pkt { font-size: 10pt; }
  .pnet .pfig svg.gnet, .pnet .pkfig svg.gnet { width: calc(var(--w) * 0.66pt); }
  .pnet .pline { white-space: nowrap; }
  .glegend { color: #000; }
  /* the capacities and the flow side by side when both fit at a scale that keeps labels at 10pt or more; else stacked */
  .pnet .figin:has(> svg + svg) { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .pnet .figin:has(> svg + svg) > svg.gnet { width: calc(var(--w) * 0.61pt); height: auto; }
  .pnet table.doc { font-size: 10.5pt; }
  .pnet table.doc thead th, .pnet table.doc caption { font-size: 10pt; }
  .pnet table.doc caption { background: none; padding: 0 0 2pt; }
  .pnet table.doc.alloc td.cv { background: #ddd; }
  .pnet table.doc.alloc td.alc { outline-color: #000; }
  .pnet .pkfig .docwrap:has(table.alloc) { grid-template-columns: repeat(auto-fill, minmax(70mm, 1fr)); }
  .ge.hl, .cutl.kc { stroke: #000; }
  .gx { fill: #000 !important; }
}