/* ------------------------------------------------------------------ base */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e3e8ee;
  --line-strong: #cbd5e1;
  --accent: #0f4c81;
  --accent-ink: #0b3a63;
  --accent-soft: #e9f1f8;
  --good: #15803d;
  --good-soft: #e8f5ec;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --bad: #b91c1c;
  --bad-soft: #fdecec;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }

/* ---------------------------------------------------------------- header */
header.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 56px;
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.brand { display: flex; align-items: center; gap: 12px; }
/* the wordmark is brand navy, which would vanish on the navy bar */
.brand img { height: 19px; width: auto; filter: brightness(0) invert(1); }
.brand span { font-size: 12px; color: #b9d3e8; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.28); }

nav.tabs { display: flex; gap: 2px; margin-left: auto; }
nav.tabs button {
  background: transparent; border: 0; color: #c9dcec; cursor: pointer;
  padding: 7px 13px; border-radius: 7px; font-size: 13px; font-weight: 500;
}
nav.tabs button:hover { background: rgba(255,255,255,.1); color: #fff; }
nav.tabs button[aria-selected="true"] { background: rgba(255,255,255,.17); color: #fff; }

.status { font-size: 12px; color: #b9d3e8; min-width: 92px; text-align: right; }
.status.busy { color: #ffd88a; }
.status.err { color: #ffb4b4; }

/* ----------------------------------------------------------------- shell */
main { padding: 18px; max-width: 1680px; margin: 0 auto; }
.tabpanel[hidden] { display: none; }

.calc-grid {
  display: grid; gap: 18px;
  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1000px) { .calc-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 13px 15px 0;
}
.card-body { padding: 13px 15px 15px; }

aside.sidebar { position: sticky; top: 74px; display: grid; gap: 14px; max-height: calc(100vh - 92px); overflow: auto; padding-right: 2px; }
aside.sidebar::-webkit-scrollbar { width: 8px; }
aside.sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

/* One column: the sidebar stacks above the results, so it must stop being a
   pinned panel — sticky plus a viewport max-height would park it over them.
   This has to sit after the rule it overrides, not next to the grid switch. */
@media (max-width: 1000px) {
  aside.sidebar { position: static; max-height: none; overflow: visible; }
}

/* ----------------------------------------------------------------- forms */
.field { display: grid; gap: 4px; margin-bottom: 11px; }
.field:last-child { margin-bottom: 0; }
.field > label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 11px; color: var(--faint); }

input[type="text"], input[type="number"], select, textarea {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--surface); outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="color"] { width: 100%; height: 32px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: #f2c9c9; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------- item selector */
.itemlist { display: grid; gap: 1px; max-height: 300px; overflow: auto; margin: -3px -4px; padding: 3px 4px; }
/* Flex, not a fixed grid: a row may or may not carry a colour swatch — the
   hand-priced systems and the order documents have none — and a grid column
   for a swatch that is not there squeezed their labels down to one letter. */
.itemrow {
  display: flex; gap: 8px; align-items: center;
  padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.itemrow:hover { background: var(--surface-2); }
.itemrow input { margin: 0; accent-color: var(--accent); flex: none; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.itemrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemrow .pr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; flex: none; }
.itemrow.off { opacity: .45; }

.selectbar { display: flex; gap: 6px; margin-bottom: 8px; }

/* -------------------------------------------------------------- results  */
.summary {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.summary .kv { display: grid; gap: 1px; }
.summary .kv b { font-size: 15px; font-variant-numeric: tabular-nums; }
.summary .kv span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.warnings { display: grid; gap: 6px; margin-bottom: 14px; }
.warn-line {
  padding: 9px 13px; border-radius: 8px; font-size: 13px;
  background: var(--warn-soft); color: #92400e; border: 1px solid #f3ddb8;
}
.warn-line.error { background: var(--bad-soft); color: #991b1b; border-color: #f2c9c9; }

.variant-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.variant {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s;
}
.variant:hover { border-color: var(--line-strong); }
.variant.unfit { border-color: #f0c9c9; background: linear-gradient(#fffafa, var(--surface) 60px); }
.variant.unfit .vfig { opacity: .55; }
.variant.unfit .vprice b { color: var(--muted); }
.blockers { margin-top: 7px; display: grid; gap: 2px; font-size: 11.5px; color: var(--bad); }
.blockers .need { color: var(--warn); font-weight: 600; }
td .per { display: block; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.variant.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }

.variant .vhead { padding: 12px 14px 10px; }
.variant .vtitle { display: flex; align-items: center; gap: 8px; }
.variant .vtitle h4 { font-size: 14px; }
.variant .vhint { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.variant .vhead { display: flex; flex-direction: column; }
.variant .vstats { margin-top: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.pill {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--bg); color: var(--muted); white-space: nowrap;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad  { background: var(--bad-soft); color: var(--bad); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

.vfig { background: repeating-conic-gradient(#f1f4f7 0% 25%, #fff 0% 50%) 50%/12px 12px; padding: 10px; border-block: 1px solid var(--line); }
.vfig svg { display: block; width: 100%; height: auto; }

.vstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 11px 14px 0; }
.vstats .s b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.vstats .s span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 10px 14px 0; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.vprice {
  margin-top: 11px; padding: 11px 14px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--surface-2);
}
.vprice b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vprice small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* --------------------------------------------------------------- detail  */
.detail { margin-top: 18px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); align-items: start; }
@media (max-width: 1240px) { .detail { grid-template-columns: 1fr; } }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; padding: 7px 9px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.grid td { padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid tbody tr:hover { background: var(--surface-2); }

.totals { display: grid; gap: 6px; font-size: 13px; }
.totals .t { display: flex; justify-content: space-between; gap: 12px; }
.totals .t span { color: var(--muted); }
.totals .t b { font-variant-numeric: tabular-nums; }
.totals .sep { border-top: 1px solid var(--line); margin: 4px 0; }
.totals .big { font-size: 17px; }
.totals .big b { font-size: 20px; letter-spacing: -.02em; }

.margin-box { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line-strong); }
.margin-box .hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.margin-box .hdr h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.secfig { max-width: 620px; margin: 0 auto; }
.legend { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; font-size: 12px; }
.legend .l { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; }

.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ item admin */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

dialog {
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 0;
  box-shadow: 0 20px 60px rgba(15,23,42,.25); max-width: 560px; width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(15, 23, 42, .38); }
dialog .dhead { padding: 15px 18px; border-bottom: 1px solid var(--line); }
dialog .dbody { padding: 16px 18px; max-height: 68vh; overflow: auto; }
dialog .dfoot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); border-radius: 0 0 12px 12px; }


/* ------------------------------------------------------ tube settler additions */
h2 { font-size: 16px; }
h4.section {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 18px 0 8px;
}
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
label.inline input { accent-color: var(--accent); }

.dropzone {
  display: grid; gap: 2px; place-items: center; text-align: center;
  padding: 16px 12px; border: 1.5px dashed var(--line-strong); border-radius: 9px;
  cursor: pointer; background: var(--surface-2);
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone b { font-size: 13px; color: var(--ink); }
.dropzone span { font-size: 11.5px; color: var(--muted); }

.warn-line.demo { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; margin-top: 10px; font-size: 12px; line-height: 1.5; }

.variant .vtitle .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }

.vruns { display: grid; gap: 1px; padding: 10px 12px 0; }
.runbtn {
  display: grid; gap: 1px; text-align: left; width: 100%;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; cursor: pointer;
}
.runbtn:hover { background: var(--surface-2); }
.runbtn.on { background: var(--accent-soft); border-color: #c3d9ea; }
.runbtn b { font-size: 12.5px; color: var(--ink); }
.runbtn span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.runbtn .flag { font-style: normal; font-size: 11px; font-weight: 600; }
.runbtn .flag.bad { color: var(--bad); }
.runbtn .flag.warn { color: var(--warn); }

.totals .t.good b { color: var(--good); }
.totals .t.bad b { color: var(--bad); }

table.grid tr.muted td { color: var(--faint); }
table.grid input.cell {
  width: 92px; padding: 4px 6px; text-align: right; font-size: 12.5px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
}
table.grid input.cell:hover { border-color: var(--line-strong); background: var(--surface); }
table.grid input.cell:focus { border-color: var(--accent); background: var(--surface); }
.sheetlines { display: grid; gap: 1px; margin-top: 4px; }
.sheetlines span { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ----------------------------------------------------------------- print */
#print-root { display: none; }

.small { font-size: 11.5px; }
td.small { line-height: 1.35; }
.inline-field { margin-bottom: 0; min-width: 160px; }
.inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.inline input { accent-color: var(--accent); margin: 0; }

/* Hand-priced systems: the checkbox opens a price field underneath it, so the
   estimator types the figure where they turned the item on. */
.manualrow { border-radius: 6px; padding: 1px 2px; }
.manualrow.on { background: var(--surface-2); padding-bottom: 6px; }
.manualprice { display: flex; gap: 6px; align-items: center; padding: 2px 8px 0 26px; }
.manualprice input { flex: 1; min-width: 0; }

.totals .t.warn b { color: var(--warn); }

/* Bought-in items typed in by hand: one row per line, the same shape as the
   scope list above it so the sidebar still reads as one column. */
.customrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.customrow input[type="text"]:first-child { flex: 3; min-width: 0; }
.customrow input[type="number"] { flex: 1; min-width: 54px; }
.customrow input[data-f="unit"] { flex: 1; min-width: 46px; }
.customrow button { flex: none; }

/* The support system in the drawing legend — the same grey the plan uses. */
.legend .sw.sup { background: #475569; opacity: .45; }

#orders-table tr.on { background: var(--surface-2); }
.secfig + .hint { margin-top: 6px; }

@media print {
  @page { size: A4 portrait; margin: 14mm 13mm; }
  body { background: #fff; font-size: 10.5pt; }
  header.topbar, main, dialog { display: none !important; }
  #print-root { display: block; }

  .p-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0f4c81; padding-bottom: 5mm; margin-bottom: 5mm; }
  .p-logo { font-size: 14pt; font-weight: 700; color: #0f4c81; letter-spacing: -.01em; }
  .p-logo img { display: block; height: 7mm; width: auto; margin-bottom: 2.5mm; }
  .p-logo small { display: block; font-size: 8pt; font-weight: 400; color: #475569; letter-spacing: .02em; margin-top: 1px; }
  .p-meta { text-align: right; font-size: 9pt; color: #334155; line-height: 1.35; }
  .p-meta b { color: #0f172a; }

  .p-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-bottom: 5mm; }
  .p-parties h5 { font-size: 8pt; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin: 0 0 3px; font-weight: 600; }

  .p-section-title { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 600; margin: 0 0 3mm; }
  .p-fig { border: 1px solid #cbd5e1; border-radius: 3px; padding: 3mm; margin-bottom: 5mm; page-break-inside: avoid; }
  /* Cap the diagram so a single-variant quote still lands on one A4 sheet;
     the SVG letterboxes inside the box rather than distorting. */
  .p-fig svg { display: block; width: 100%; height: auto; max-height: 76mm; margin: 0 auto; }
  .p-legend { display: flex; flex-wrap: wrap; gap: 2mm 6mm; margin-top: 3mm; font-size: 8.5pt; }
  .p-legend .l { display: flex; align-items: center; gap: 2mm; }
  .p-legend .sw { width: 3mm; height: 3mm; border-radius: 1px; }

  table.p-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-bottom: 5mm; }
  table.p-table th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; color: #475569; border-bottom: 1.2pt solid #0f4c81; padding: 2mm 1.5mm; }
  table.p-table td { padding: 1.5mm 1.5mm; border-bottom: .4pt solid #e2e8f0; }
  table.p-table .r { text-align: right; font-variant-numeric: tabular-nums; }
  table.p-table tr { page-break-inside: avoid; }

  .p-totals { margin-left: auto; width: 76mm; font-size: 9.5pt; }
  .p-totals .t { display: flex; justify-content: space-between; padding: .6mm 0; }
  .p-totals .t span { color: #475569; }
  .p-totals .t b { font-variant-numeric: tabular-nums; }
  .p-totals .grand { border-top: 1.2pt solid #0f4c81; margin-top: 1.5mm; padding-top: 1.5mm; font-size: 11.5pt; }
  .p-internal { margin-top: 6mm; padding: 3mm; border: .8pt dashed #b45309; border-radius: 2px; font-size: 9pt; color: #92400e; page-break-inside: avoid; }

  .p-parties .sub { color: #64748b; font-size: 9pt; }
  .p-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm; margin-bottom: 5mm; font-size: 9.5pt; }
  .p-specs > div { display: flex; justify-content: space-between; gap: 4mm; border-bottom: .3pt solid #e2e8f0; padding-bottom: 1mm; }
  .p-specs span { color: #64748b; }
  .p-secfig { max-width: 110mm; margin: 0 auto; }
  .p-fig-title { font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin-bottom: 2mm; }
  .p-terms { margin-top: 6mm; page-break-inside: avoid; }
  .p-term { display: grid; grid-template-columns: 34mm 1fr; gap: 3mm; font-size: 8.5pt; padding: .8mm 0; border-bottom: .3pt solid #eef2f6; }
  .p-term span { color: #64748b; text-transform: uppercase; letter-spacing: .04em; font-size: 7.5pt; padding-top: .4mm; }
  .p-term b { font-weight: 400; color: #334155; }
  .p-foot { margin-top: 8mm; padding-top: 3mm; border-top: .4pt solid #cbd5e1; font-size: 8.5pt; color: #64748b; }
  .p-note { margin-bottom: 5mm; font-size: 9.5pt; }

  .p-figtext { font-size: 8pt; color: #475569; margin-top: 2mm; line-height: 1.35; }

  /* The purchase order and its confirmation.
     This is not our layout to design: it is the client's own form, the one
     they fill in by hand today, so the type is theirs (Times, 11 pt), the
     headings are underlined where theirs are, and the two signature blocks
     sit where theirs sit. Only the values change. */
  .po { font-family: "Times New Roman", Times, serif; font-size: 11pt; line-height: 1.32; color: #000; }
  .po b { font-weight: 700; }
  .po-logo { height: 7mm; width: auto; display: block; margin-bottom: 5mm; }
  .po-title { text-align: center; font-size: 12pt; font-weight: 700; margin: 0 0 7mm; letter-spacing: .01em; }
  .po-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-bottom: 6mm; }
  .po-label { font-weight: 700; margin-bottom: 3mm; }
  .po-rows { margin-bottom: 5mm; }
  .po-row { display: grid; grid-template-columns: 46mm 1fr; gap: 4mm; padding: .3mm 0; }
  .po-row > span { font-weight: 700; text-decoration: underline; }
  .po-u { font-weight: 700; text-decoration: underline; }
  .po-sentence { text-align: justify; margin: 0 0 5mm; }
  .po-scope { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 0 0 5mm; }
  .po-scope th { text-align: left; border-bottom: .8pt solid #000; padding: 1.2mm 1.5mm; font-size: 9.5pt; }
  .po-scope td { padding: 1mm 1.5mm; border-bottom: .3pt solid #999; vertical-align: top; }
  .po-scope .r { text-align: right; }
  .po-lump { margin: 0 0 5mm; }
  .po-payment { text-align: justify; margin: 0 0 5mm; }
  .po-conditions { font-weight: 700; text-align: justify; margin: 0 0 5mm; }
  .po-note { margin: 0 0 6mm; }
  .po-heading { margin: 0 0 2mm; }
  .po-docs { margin: 0 0 6mm; padding-left: 12mm; }
  .po-docs li { padding: .4mm 0; }
  .po-witness { margin: 0 0 9mm; }
  .po-sign { page-break-inside: avoid; }
  .po-sign-row { display: grid; grid-template-columns: 85mm 55mm; gap: 12mm; margin-bottom: 8mm; }
  .po-line { border-bottom: .8pt solid #000; height: 8mm; }
  .po-sign b { display: block; font-weight: 700; }
  .po-sign span { display: block; }

  .p-sheets { font-family: var(--mono); font-size: 7.5pt; color: #64748b; margin-top: .6mm; }
  .p-notes { margin-top: 5mm; page-break-inside: avoid; }
  .p-notes ol { margin: 0; padding-left: 6mm; font-size: 8.5pt; color: #334155; }
  .p-notes li { padding: .5mm 0; }
}