/* ─────────────────────────────────────────────────────────────────────────
   SiteBrief — doc-print.css
   Shared print-ready stylesheet for all generated document types.
   Used by: work-brief, material-estimate, payment-schedule, snagging,
            (future) site-report, RAMS, test-certificate.

   Pairs with the canonical shell classes:
     .sheet.a5 / .sheet.a4   — page surfaces
     .head, .logo-mark, .proj — header block
     .doc-title, .doc-sub    — title + uppercase subtitle
     .sec, .sec-label        — section with fade-underline label
     .data                   — 2-col label/value grid (calculated values)
     .verify                 — italic grey "to be confirmed" copy
     .foot, .foot-disc       — locked s24 footer disclaimer + page mark

   Print: A5 + A4 supported, toggle via setSize() in host file.
   Logo: images/logo.png at 22/26mm (A5/A4) — LOCKED s24/s25.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --gm:#2DA87F;            /* SiteBrief green, mid */
  --gd:#1A6B4F;            /* deeper for text-on-light */
  --ink:#1A1A1A;
  --body:#333;
  --mute:#666;
  --hint:#888;
  --faint:#aaa;
  --rule:#E5E5E5;
  --page:#F4F2EC;          /* outside-page surface tone, web view only */
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
}
body{min-height:100vh;padding:24px 16px 80px}

/* ─── Web-view toolbar (hidden in print) ────────────────────── */
.toolbar{
  max-width:600px;margin:0 auto 18px;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;font-size:13px;
}
.toolbar-left{color:var(--mute)}
.toolbar-left strong{color:var(--ink);font-weight:500}
.toolbar-right{display:flex;gap:8px}

.tb-btn{
  font-family:inherit;font-size:12.5px;
  padding:8px 14px;border-radius:99px;
  border:0.5px solid var(--rule);background:#fff;color:var(--ink);
  cursor:pointer;transition:all .12s;font-weight:500;
}
.tb-btn:hover{border-color:var(--gm);color:var(--gd);background:#F5FBF8}
.tb-btn.primary{background:var(--gm);color:#fff;border-color:var(--gm)}
.tb-btn.primary:hover{background:var(--gd);border-color:var(--gd);color:#fff}

.tb-toggle{
  display:inline-flex;
  border:0.5px solid var(--rule);border-radius:99px;
  background:#fff;overflow:hidden;
}
.tb-toggle button{
  font-family:inherit;font-size:12px;
  padding:7px 14px;border:none;background:transparent;
  cursor:pointer;color:var(--mute);font-weight:500;
}
.tb-toggle button.on{background:var(--gm);color:#fff}

/* ─── Sheet (the "page") ────────────────────────────────────── */
.sheet{
  background:#fff;color:var(--body);
  margin:0 auto;position:relative;box-sizing:border-box;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  border-radius:2px;overflow:hidden;
}
/* Real-mm dimensions so print → correct page size automatically */
.sheet.a5{width:148mm;min-height:210mm;padding:14mm 14mm 22mm}
.sheet.a4{width:210mm;min-height:297mm;padding:18mm 20mm 28mm}

/* No top green strip — the 3px sub-header line under .head is the
   single green accent per page (s25 reframing). Keeps user's logo
   as the dominant top-of-page mark; SiteBrief signs off in footer. */

/* ─── Header: QR + project block + SiteBrief pill ──────────────
   s34 · Template v2.
   The header is now QR-left, project-right; the QR is the most
   *functional* element on the page (scan → live doc) so it earns
   the dominant slot. SiteBrief mark stays centred on the 3px green
   sub-header line — quiet signature, doesn't dominate.
   Pro/Elite tier later: company logo drops in above the QR via a
   .user-logo block (kept in the file but only rendered when present).
   "Your logo" placeholder retired — Reno/Free renders just QR+proj. */

.head{
  position:relative;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;padding-bottom:8mm;margin-bottom:8mm;
  border-bottom:3px solid var(--gm);  /* nav-style green sub-header */
}
.sheet.a4 .head{padding-bottom:9mm;margin-bottom:9mm}

/* SiteBrief wordmark — sits on the green line, centred horizontally.
   Real logo PNG (white pill on green border). Bottom anchored to .head's
   border, nudged down 50% of own height so the pill straddles the line.
   Logo is small here — a quiet signature, not a banner. */
.sb-mark{
  position:absolute;
  left:50%;bottom:0;
  transform:translate(-50%,50%);
  height:4mm;width:auto;
  z-index:2;
  display:inline-block;
}
.sheet.a4 .sb-mark{height:5mm}
.sb-mark img{display:block;height:100%;width:auto}

/* QR-in-header block (s34 · v2).
   Sits left in the header. Same .qr-img + .qr-label pattern as before,
   just relocated from the title-row. Slightly larger label since it's
   carrying more weight in this slot. */
.head .qr-block{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:2.5px;
}

/* User logo slot — Pro/Elite users upload a company logo → appears
   above the QR. Hidden on Reno/Free (no .user-logo element rendered).
   Max-height in mm so print scale stays predictable. */
.user-logo{
  display:inline-flex;align-items:center;
  height:10mm;max-width:38mm;
  margin-bottom:2mm;
  flex-shrink:0;
}
.sheet.a4 .user-logo{height:12mm;max-width:50mm;margin-bottom:3mm}
.user-logo img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;object-position:left center}

.proj{
  text-align:right;
  font-size:10px;line-height:1.5;
  color:var(--mute);
}
.sheet.a4 .proj{font-size:11.5px}
.proj-name{
  font-size:13.5px;color:var(--ink);font-weight:500;
  margin:0 0 3px;letter-spacing:-.2px;
}
.sheet.a4 .proj-name{font-size:16px}
.proj-meta{display:block}
.proj-meta span{color:var(--hint)}

/* ─── Document title (s41 · reconciled with style.css) ────────
   Was 16px/500 on screen, 21px/500 on A4 — which rendered as an
   oversized pale heading, NOT matching the work brief's tight
   14px/700 treatment in style.css. The two stylesheets disagreed,
   so any page loading doc-print.css got the big title. Aligned
   here to the work-brief look. Also zero the <h1> UA margins +
   force size/weight, since the payment/material/snagging wizards
   use <h1 class="doc-title"> (work brief uses <div>). */
.doc-title{
  font-size:14px;font-weight:700;
  margin:0 0 4px;letter-spacing:-.2px;color:var(--ink);
  line-height:1.25;
}
h1.doc-title{font-size:14px;font-weight:700;margin:0 0 4px}
.sheet.a4 .doc-title,
.sheet.a4 h1.doc-title{font-size:16px;font-weight:700;margin-bottom:6px}
.doc-sub{
  font-size:10.5px;color:var(--hint);
  margin:0 0 7mm;letter-spacing:.4px;text-transform:uppercase;
}
.sheet.a4 .doc-sub{font-size:12px}

/* ─── Doc strapline (s41) ───────────────────────────────────────
   The SEO/reference line under the title on payment, budget &
   snagging docs (e.g. "Typical UK kitchen renovation cost · 2026
   reference"). Was previously UNDEFINED — rendered as raw black
   browser-default text, which is the "messy title block" reported.
   Styled here as a small italic muted line so it sits quietly under
   the title like a dateline. Work brief has no strap (uses doc-sub
   only) so this never affects it. Sits BETWEEN title and doc-sub. */
.doc-strap{
  font-size:10px;color:var(--hint);font-style:italic;
  margin:0 0 5px;letter-spacing:.1px;line-height:1.35;font-weight:400;
}
.sheet.a4 .doc-strap{font-size:11.5px;margin-bottom:6px}

/* ─── Section + fade-underline label ────────────────────────── */
.sec{margin-bottom:6mm;font-size:10.5px;line-height:1.55;color:var(--body)}
.sheet.a4 .sec{margin-bottom:8mm;font-size:12px;line-height:1.65}

.sec-label{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--gm);font-weight:500;
  margin:0 0 5px;padding-bottom:6px;
  background-image:linear-gradient(to right,
    var(--gm) 0%, var(--gm) 78%, rgba(45,168,127,0) 100%);
  background-repeat:no-repeat;
  background-position:bottom left;
  background-size:62% 0.5px;
  display:block;
}
.sheet.a4 .sec-label{font-size:10.5px;padding-bottom:7px;background-size:55% 0.5px}

.sec p{margin:0 0 3px}
.sec p:last-child{margin-bottom:0}
/* s33: verify pushed further back — body dominates, verify whispers.
   Was #a8a8a0 / 8.5px (s31). Now #c4c2b8 / 8px on A5, 9px on A4 (was 9.5px). */
.verify{color:#c4c2b8;font-style:italic;font-size:8px;line-height:1.45}
.sheet.a4 .verify{font-size:9px}

/* s33: scope-chip pills — print equivalents of .sec-chips in style.css.
   Same paper/cream palette discipline: soft green tint that doesn't
   compete with body text. Caption uses monospace tone register to match
   .sec-label family. Sized one notch down from on-screen to suit the
   tighter line-height of print stock. */
.sec-chips{margin:6px 0 3px}
.sec-chips-caption{
  display:block;
  font-size:7.5px;color:#888780;
  font-family:'Courier New',monospace;letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.sheet.a4 .sec-chips-caption{font-size:8.5px}
.sec-chips-row{display:flex;flex-wrap:wrap;gap:3px}
.sec-chip{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;line-height:1.2;
  background:#E1F5EE;color:#0F6E56;
  padding:2px 7px 2px 5px;
  border-radius:99px;
  font-weight:500;
}
.sheet.a4 .sec-chip{font-size:10px;padding:3px 8px 3px 6px}
.sec-chip-tick{width:8px;height:8px;flex-shrink:0;color:#0F6E56}
.sheet.a4 .sec-chip-tick{width:9px;height:9px}

/* ─── Doc-title row (s34 · v2 · simplified) ─────────────────── */
/* Previously held the QR alongside .doc-title. QR is now in .head.
   Title row becomes a simple full-width title + sub block — same
   visual hierarchy, less competing furniture. */
.title-row{
  margin-bottom:7mm;
}
.sheet.a4 .title-row{margin-bottom:9mm}
.title-row .doc-title{margin-bottom:4px}
.title-row .doc-sub{margin-bottom:0}

/* QR block — shared between header (.head .qr-block) and (legacy)
   title-row. Real QR rendered into .qr-img by qrcode.js. Label sits
   below in muted hint colour.
   IMPORTANT: qrcode.js injects an inline-styled <canvas> at the size
   passed to its constructor. We override with CSS using !important so
   the QR always renders at the mm size we want, regardless of the
   render-resolution we passed for crispness. */
.qr-block{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:2.5px;
}
.qr-img{
  width:16mm;height:16mm;
  background:#fff;
  border:0.5px solid var(--rule);
  border-radius:2px;
  padding:0.5mm;
  box-sizing:border-box;
  overflow:hidden;
}
.sheet.a4 .qr-img{width:19mm;height:19mm;padding:0.7mm}
/* Force the qrcode.js-injected canvas/img to fill our box.
   !important because the lib sets explicit inline width/height attrs. */
.qr-img canvas,
.qr-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
}
.qr-label{
  font-size:7.5px;
  color:var(--hint);
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1.35;
  white-space:nowrap;
  text-align:center;
}
.sheet.a4 .qr-label{font-size:9px}
/* Domain second line — brand green, lowercase, sits under the
   "Join my project" call-to-action. s34 · v2 header caption. */
.qr-dom{
  display:block;
  color:var(--gm);
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
}

/* ─── Two-column data grid (calculated values) ──────────────── */
.data{
  display:grid;grid-template-columns:1fr auto;
  gap:3px 14px;font-variant-numeric:tabular-nums;margin:2px 0;
}
.data .lbl{color:var(--mute)}
.data .val{color:var(--ink);font-weight:500}

/* ─── Tables (.mtable used by Material estimate; .stable by
       Payment schedule). Same column system, slightly different
       weight to suit content. ─────────────────────────────────── */
.mtable, .stable{
  width:100%;border-collapse:collapse;
  font-size:9.5px;font-variant-numeric:tabular-nums;
  margin:3px 0 0;
}
.sheet.a4 .mtable, .sheet.a4 .stable{font-size:11px}

.mtable thead th, .stable thead th{
  text-align:left;font-weight:500;
  color:var(--gm);text-transform:uppercase;letter-spacing:.6px;
  font-size:8px;padding:0 0 4px;
  border-bottom:0.5px solid var(--rule);
}
.sheet.a4 .mtable thead th, .sheet.a4 .stable thead th{font-size:9px;padding-bottom:5px}
.mtable thead th.num, .stable thead th.num{text-align:right}

.mtable tbody td, .stable tbody td{
  padding:4px 6px 4px 0;
  border-bottom:0.5px solid #F2F2F2;
  vertical-align:top;color:var(--ink);
}
.stable tbody td{padding:5px 6px 5px 0}
.sheet.a4 .mtable tbody td{padding:5px 8px 5px 0}
.sheet.a4 .stable tbody td{padding:6px 8px 6px 0}

.mtable tbody td.num, .stable tbody td.num{
  text-align:right;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:500;
}
.mtable tbody td.mat, .stable tbody td.milestone{font-weight:500;color:var(--ink)}
.mtable tbody td.note, .stable tbody td.trigger{
  color:var(--mute);font-size:9px;
}
.sheet.a4 .mtable tbody td.note, .sheet.a4 .stable tbody td.trigger{font-size:10px}
.mtable tbody td.note{padding-left:0}

.stable tbody td.stage-no{color:var(--gm);font-weight:500;width:20px}

.mtable tbody tr:last-child td, .stable tbody tr:last-child td{border-bottom:none}

/* ─── Blurred price column (paid-tier feature gate) ─────────────
   Cells render the placeholder "£888.88" (or 3/5 — see API wire-up).
   2px blur + 5% gm tint = locked-but-unlockable visual signal.
   When a Reno+ user is detected, JS swaps the cell text to the real
   price and toggles `.unlocked` on the cell to remove blur/tint.
   user-select:none stops users copy-pasting the placeholder. */
.blur-price{
  background:rgba(45,168,127,0.05) !important;
  color:var(--ink);
  filter:blur(2px);
  user-select:none;
  -webkit-user-select:none;
}
.blur-price.unlocked{
  filter:none;
  user-select:auto;
  -webkit-user-select:auto;
}

/* ─── Upsell row (gate for locked features) ─────────────────────
   Reusable across doc types. Soft gm-tint band, 2px gm left border,
   matches the .sa-a treatment from style.css line 1252. */
.upsell-row{
  margin-top:4mm;
  padding:5px 9px;
  background:rgba(45,168,127,0.06);
  border-left:2px solid var(--gm);
  font-size:9.5px;
  line-height:1.45;
  color:var(--ink);
}
.sheet.a4 .upsell-row{margin-top:5mm;padding:7px 11px;font-size:11px}
.upsell-row .upsell-title{font-weight:500;display:block}
.upsell-row .upsell-cta{color:var(--gd);text-decoration:none;display:inline-block;margin-top:1px}
.upsell-row .upsell-cta:hover{text-decoration:underline}

.stable tfoot td{
  padding:6px 6px 0 0;font-weight:500;color:var(--ink);
  border-top:0.5px solid var(--ink);
}
.sheet.a4 .stable tfoot td{padding:8px 8px 0 0}
.stable tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ─── Snagging items ────────────────────────────────────────── */
.snag{
  display:grid;
  grid-template-columns:auto 14px 1fr auto;
  gap:6px 8px;padding:6px 0;
  border-bottom:0.5px solid #F2F2F2;align-items:start;
}
.sheet.a4 .snag{
  grid-template-columns:auto 16px 1fr 60mm auto;
  gap:8px 12px;padding:8px 0;
}
.snag:last-of-type{border-bottom:none}

.snag-ref{
  font-size:8.5px;color:var(--hint);
  font-variant-numeric:tabular-nums;letter-spacing:.4px;
  padding-top:1px;white-space:nowrap;
}
.sheet.a4 .snag-ref{font-size:10px}

.snag-box{
  width:11px;height:11px;
  border:1px solid var(--ink);border-radius:2px;
  margin-top:2px;background:#fff;
}
.sheet.a4 .snag-box{width:13px;height:13px;margin-top:3px}

.snag-body{font-size:9.5px;line-height:1.5;color:var(--ink)}
.sheet.a4 .snag-body{font-size:11px;line-height:1.55}
.snag-desc{display:block;font-weight:500}
.snag-loc{display:block;color:var(--mute);font-size:8.5px;margin-top:2px}
.sheet.a4 .snag-loc{font-size:10px;margin-top:3px}
.snag-trade{
  display:block;color:var(--gm);
  font-size:8.5px;margin-top:2px;
  letter-spacing:.3px;text-transform:uppercase;
}
.sheet.a4 .snag-trade{font-size:9.5px;margin-top:3px}

/* Photo placeholder — A4 only (would crowd A5) */
.snag-photo{display:none}
.sheet.a4 .snag-photo{
  display:flex;align-items:center;justify-content:center;
  width:60mm;height:38mm;
  background:#FAFAFA;border:0.5px dashed #D0D0D0;border-radius:2px;
  font-size:9px;color:var(--faint);
  letter-spacing:.4px;text-transform:uppercase;
}

.snag-prio{
  font-size:7.5px;letter-spacing:.5px;text-transform:uppercase;
  font-weight:500;padding:2px 6px;border-radius:99px;
  background:#F4F4F4;color:#1F2937;
  white-space:nowrap;margin-top:1px;
}
.sheet.a4 .snag-prio{font-size:8.5px;padding:3px 8px}
.snag-prio.hi{background:#FEF3E2;color:#B45309}
.snag-prio.md{background:#F4F4F4;color:#1F2937}
.snag-prio.lo{background:#F9F9F9;color:#6B7280}

/* ─── Summary chips (counts row) ────────────────────────────── */
.sum-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.sum-chip{
  font-size:9px;padding:3px 9px;border-radius:99px;
  background:#F4F4F4;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sheet.a4 .sum-chip{font-size:10px;padding:4px 11px}
.sum-chip strong{font-weight:500;color:var(--gm)}

/* ─── Footer — LOCKED s24 disclaimer block ──────────────────── */
.foot{
  position:absolute;bottom:8mm;left:14mm;right:14mm;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:14px;padding-top:5px;
  border-top:0.5px solid var(--rule);
  font-size:8px;color:var(--faint);line-height:1.45;
}
.sheet.a4 .foot{bottom:10mm;left:20mm;right:20mm;font-size:9px}
.foot-left{max-width:78%}
.foot-disc{color:var(--mute);margin:0 0 2px}
.foot-meta{color:var(--faint);margin:0}
.foot-right{text-align:right;flex-shrink:0}
.foot-mark{color:var(--gm);font-weight:500}

/* ─── Print: kill toolbar, page chrome, set page size ───────── */
@media print{
  @page{margin:0}
  body{padding:0;background:#fff}
  .toolbar{display:none}
  .sheet{
    box-shadow:none;border-radius:0;margin:0;
    page-break-after:always;
  }
  .sheet:last-child{page-break-after:auto}
}

/* Toggle classes — set by JS to flip @page size */
body.print-a5 .sheet.a4{display:none}
body.print-a4 .sheet.a5{display:none}

/* Default screen view: show A5 only (toggle via toolbar) */
body:not(.show-a4) .sheet.a4{display:none}
body.show-a4 .sheet.a5{display:none}

/* ═════════════════════════════════════════════════════════════
   s34 · Additions for Material estimate v2, Payment schedule v2,
   Snagging list v2. Doc-specific components only — none of these
   replace existing classes, they extend the system.
   ═════════════════════════════════════════════════════════════ */

/* ─── .framing-band — top-of-doc context strip ─────────────────
   Used by Payment schedule (Construction Act citation) and any other
   doc that needs to set legal/regulatory framing before the body.
   Sits inside .sec, just above the first .sec-label. Subtle, doesn't
   compete with the title row. */
.framing-band{
  padding:6px 9px;
  background:rgba(45,168,127,0.05);
  border-left:2px solid var(--gm);
  font-size:9px;line-height:1.45;color:var(--mute);
  margin-bottom:6mm;
}
.sheet.a4 .framing-band{font-size:10.5px;padding:8px 11px;margin-bottom:7mm}
.framing-band strong{color:var(--ink);font-weight:500}

/* ─── .red-flag — inline callout for risk signals ──────────────
   Payment schedule: "deposit above 10% is unusual" etc.
   Snagging: "out-of-tolerance" notices.
   Amber by default (cautionary, not alarming). One per section maximum
   or the page noise floor gets too high. */
.red-flag{
  display:flex;gap:5px;align-items:flex-start;
  padding:5px 8px;margin-top:4px;
  background:#FFF7E6;border-left:2px solid #D97706;
  font-size:8.5px;line-height:1.5;color:#854F0B;
}
.sheet.a4 .red-flag{font-size:10px;padding:6px 10px}
.red-flag-icon{flex-shrink:0;font-weight:600;font-size:9px}
.sheet.a4 .red-flag-icon{font-size:10.5px}

/* ─── .benchmark — per-m² band readout for Material estimate ───
   "Your build = £1,940/m². UK mid-spec = £1,600–£2,000".
   Lives below the .mtable, above the .verify line. Two-row block:
   user's number on top, comparator band underneath. */
.benchmark{
  margin:4px 0 0;
  padding:6px 10px;
  background:rgba(45,168,127,0.05);
  border-radius:2px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  font-size:9.5px;
}
.sheet.a4 .benchmark{font-size:11px;padding:8px 12px}
.benchmark-yours{color:var(--ink);font-weight:500}
.benchmark-band{color:var(--mute);font-variant-numeric:tabular-nums}
.benchmark-band strong{color:var(--gd);font-weight:500}

/* ─── Snagging additions (s34) ────────────────────────────────── */

/* NHBC functional/aesthetic tag — sits next to .snag-prio.
   Two states: functional (does-it-work, weightier) and aesthetic
   (does-it-look-right, lighter). Different palette to .snag-prio so
   readers parse them as separate axes, not one combined label. */
.snag-cat{
  font-size:7px;letter-spacing:.5px;text-transform:uppercase;
  font-weight:500;padding:2px 6px;border-radius:99px;
  white-space:nowrap;margin-top:1px;
  background:#EEF2FF;color:#3730A3;
}
.sheet.a4 .snag-cat{font-size:8px;padding:3px 8px}
.snag-cat.fn{background:#EEF2FF;color:#3730A3}    /* Functional */
.snag-cat.ae{background:#FCF4FF;color:#86198F}    /* Aesthetic */

/* Snag priority — reframe to NHBC ladder.
   .hi → "Defect" (must fix, fails warranty)
   .md → "Snag"   (should fix, within warranty)
   .lo → "Obs"    (note for reference)
   Keep existing background colors; the label text changes in the
   sample HTML and wizard render, not here. */

/* Sign-off block — homeowner + builder signature lines for snagging.
   Two side-by-side fields at the foot of the doc, just above .foot.
   Pure paper convention — a "We both agree this is the list" gesture. */
.signoff{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;margin-top:5mm;padding-top:5mm;
  border-top:0.5px solid var(--rule);
}
.sheet.a4 .signoff{gap:24px;margin-top:6mm;padding-top:6mm}
.signoff-field{display:flex;flex-direction:column;gap:1mm}
.signoff-label{
  font-size:7.5px;color:var(--gm);
  letter-spacing:.7px;text-transform:uppercase;font-weight:500;
}
.sheet.a4 .signoff-label{font-size:8.5px}
.signoff-line{
  border-bottom:0.5px solid var(--ink);
  height:8mm;
}
.sheet.a4 .signoff-line{height:10mm}
.signoff-hint{
  font-size:7.5px;color:var(--hint);
  letter-spacing:.3px;
  display:flex;justify-content:space-between;
}
.sheet.a4 .signoff-hint{font-size:9px}

/* ─── Stage trigger pill — Payment schedule v2 ─────────────────
   Each stage in .stable can carry a small pill in the trigger column
   that flags how the trigger is verified (BC sign-off, photo,
   weathertight, etc). Different from .snag-cat semantically — this is
   a verification marker, not a category. */
.trigger-pill{
  display:inline-block;
  font-size:7.5px;letter-spacing:.4px;text-transform:uppercase;
  padding:1px 6px;border-radius:99px;
  background:#F1FBF7;color:var(--gd);font-weight:500;
  margin-right:4px;
}
.sheet.a4 .trigger-pill{font-size:8.5px;padding:2px 7px}

/* ─── Checklist block — "before you sign" / "how to use" ────── */
.checklist{
  list-style:none;padding:0;margin:3px 0 0;
}
.checklist li{
  position:relative;padding:0 0 4px 16px;
  font-size:9.5px;line-height:1.5;color:var(--body);
}
.sheet.a4 .checklist li{font-size:11px;padding-left:18px;padding-bottom:5px}
.checklist li::before{
  content:'';
  position:absolute;left:0;top:4px;
  width:9px;height:9px;
  border:0.5px solid var(--gm);border-radius:2px;background:#fff;
}
.sheet.a4 .checklist li::before{width:11px;height:11px;top:5px}
.checklist li:last-child{padding-bottom:0}

/* ─── Spec band marker — Material estimate ─────────────────────
   Small inline pill next to .doc-title showing which spec band the
   estimate is calculated against (Standard/Good/Excellent). Gives
   the reader an instant context for the numbers below. */
.spec-pill{
  display:inline-block;
  font-size:8.5px;font-weight:500;
  letter-spacing:.4px;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;
  background:var(--gm);color:#fff;
  vertical-align:middle;margin-left:6px;
}
.sheet.a4 .spec-pill{font-size:10px;padding:3px 10px;margin-left:8px}