/* print.css - every printed form (paper.mjs / paper-forms.mjs / paper-report.mjs / print-wht.mjs).
   Loaded on screen too (the designer preview is a shrunk real page), guarded by @media print for the parts that
   only make sense on paper. Class names: p-* generic paper parts, ck-* cheque fields, wht-* the 50-tawi certificate. */

/* ---------- tokens ---------- */
/* Redesigned 2026-09-22 to match the "ชุดเอกสารบัญชี BME" design canvas: a cleaner, flatter look (a coloured
   top edge instead of a thick header rule, tinted info cards, a rounded accent total band, a fixed-row item
   table) - see the canvas for the reference mockups (Main.dc.html = receipt/tax invoice, DeliveryInvoice.dc.html
   = tax invoice/delivery note). One deliberate deviation from the mockup: it links a Google Fonts IBM Plex Sans
   Thai; this project only ever ships fully self-hosted print fonts (vendor/print-fonts.css) so a printed form
   never depends on a live internet connection at print time - kept the existing Inter/Noto Sans Thai/Sarabun/
   Noto Serif Thai stacks (already vendored) rather than adding an unvendored font family.
   accent presets from the canvas: teal #0f5e5a (new default), navy #1f3f8f, rust #8a3b12, ink #1b1f24 - all
   still overridable per company (accentOf() in paper-parts.mjs: template accent > company brandColor > default). */
.paper{
  --ink:#1b1f24;--muted:#555d66;--rule:#c4c9cf;--hair:#e3e6e9;
  --accent:#0f5e5a;--wash:#eef3fa;--navy:#102a43;
  --font:'Inter','Noto Sans Thai',sans-serif;--fs:1;
  background:#fff;color:var(--ink);width:210mm;min-height:297mm;margin:0 auto 8mm;padding:8.5mm 12.7mm 16mm;
  border-top:2.1mm solid var(--accent);
  box-shadow:0 3px 15px #18243320;font:calc(9.5pt*var(--fs))/1.5 var(--font);position:relative;z-index:0;overflow:hidden;
  color-scheme:light;print-color-adjust:exact;-webkit-print-color-adjust:exact;
}
/* position:relative alone does NOT start a new stacking context (only position + a real z-index does) - without
   z-index:0 above, .p-wm's z-index:-1 escapes .paper entirely and can end up behind the *page*, not just behind
   this sheet's own content, which is why the watermark disappeared instead of merely sitting behind the total
   band. z-index:0 traps it: everything inside .paper now stacks only against its own siblings. */
.paper[data-theme=classic]{--font:'Noto Serif Thai','Inter',serif;--accent:#1f3f8f}
.paper[data-theme=formal]{--font:'Sarabun','Noto Sans Thai',sans-serif;--accent:#1b1f24}
.paper.cheque-paper{width:180mm;min-height:0;height:90mm;padding:0;border-top:0;margin:0 auto 8mm}
.paper *{box-sizing:border-box}
.paper table{width:100%;border-collapse:collapse;font:inherit}
.paper .n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.paper .n::after{content:")";visibility:hidden}
.paper .n.neg{color:inherit}

/* ---------- header ---------- */
/* the top-of-page accent bar (.paper's own border-top) carries the colour now, so this only needs a light
   divider under it - matching the canvas mockup's plain 1px #c4c9cf rule rather than a second accent line */
.p-head{display:grid;grid-template-columns:auto 1fr auto;gap:6mm;align-items:start;padding-bottom:4mm;border-bottom:.3mm solid var(--rule);margin-bottom:5mm}
.p-head.no-logo{grid-template-columns:1fr auto}
.p-brand{display:flex;gap:5mm;align-items:flex-start}
.p-logo{flex:none;display:flex;align-items:center;justify-content:flex-start;border-radius:2mm;overflow:hidden}
.p-logo--sm{width:14mm;height:14mm}.p-logo--md{width:18mm;height:18mm}.p-logo--lg{width:24mm;height:24mm}
.p-logo--img{width:auto;max-width:56mm;border-radius:0;overflow:visible}
.p-logo img,.p-logo svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.p-co-name{font:700 12pt/1.3 var(--font)}
.p-co-en{font:500 9pt/1.3 var(--font);color:var(--muted)}
.p-co-addr{font-size:calc(8.5pt*var(--fs));line-height:1.5;color:var(--muted);margin-top:.8mm}
.p-missing{color:#a12a2a}
.p-tb{text-align:right}
.p-title{margin:0;font:700 19pt/1.2 var(--font);letter-spacing:-.005em;color:var(--accent);white-space:nowrap}
.p-title--report{color:var(--navy);font-size:15pt}
/* CHQ-1e: a receipt whose cheque bounced - its word struck out, why under the title (the ink colour: it must read on a copy) */
.p-struck{text-decoration:line-through;text-decoration-thickness:.35mm;text-decoration-color:currentColor}
.p-titlenote{font-size:8pt;color:var(--ink);margin-top:1mm}
/* CHQ-1e (line C's review): a note's piece on one line - the line breaks between the pieces only */
.p-keep{white-space:nowrap}
.p-en{font:500 8pt/1.4 var(--font);letter-spacing:.14em;color:var(--muted);margin-top:1mm}
.p-sub{font:400 9pt/1.4 var(--font);color:var(--muted);margin-top:1mm}
/* rounded "pill" copy badge (ต้นฉบับ/สำเนา) - outlined in the accent colour, matching the canvas exactly */
.p-chip{display:inline-block;white-space:nowrap;margin-bottom:1.6mm;border:.4mm solid var(--accent);border-radius:999px;padding:.6mm 3.2mm;font:600 8.5pt/1.5 var(--font);color:var(--accent)}
.p-stamp{display:block}
.p-stamp .t-void{display:none}
.paper[data-status=void] .p-stamp .t-void{display:inline-block;margin-top:3mm;transform:rotate(-6deg);border:.6mm solid #a12a2a;outline:.3mm solid #a12a2a;outline-offset:1.2px;border-radius:1.5mm;color:#a12a2a;padding:1mm 5mm;font:700 15pt/1.15 var(--font);letter-spacing:.12em}
.paper[data-status=void] .t-void small{display:block;font:600 6.5pt/1.2 var(--font);letter-spacing:.2em}

/* ---------- meta strip / parties ---------- */
/* still used as-is by paper-forms.mjs's simpler forms (petty cash, pay-in, the generic operation sheet) - a
   plain tinted strip. paper.mjs's item-table documents no longer use it alone; see .p-parties below, which now
   places this same kind of info into a bordered card sitting beside the customer/vendor card. */
.p-meta{display:grid;grid-template-columns:repeat(var(--n,4),1fr);background:var(--wash);border-top:.9mm solid var(--accent);border-bottom:.3mm solid var(--rule);margin-bottom:5mm;break-inside:avoid}
.p-meta div{padding:2.4mm 3.4mm}
.p-meta div+div{border-left:.3mm solid var(--rule)}
.p-meta .k,.p-party .k,.p-note .k,.p-notes .k{display:block;font:500 7.5pt/1.3 var(--font);color:var(--muted);letter-spacing:.02em}
.p-meta .v{display:block;font:600 9.5pt/1.4 var(--font);font-variant-numeric:tabular-nums}
/* the customer/vendor card (left) and the document-meta card (right), side by side - what used to be two
   separate full-width strips (.p-meta above .p-parties) are now one row of two bordered cards, matching the
   canvas. .p-infocard is the shared box; --tint makes the right-hand (meta) card's background */
.p-parties{display:flex;gap:5mm;margin-bottom:5mm;align-items:stretch}
.p-infocard{border:.3mm solid var(--rule);border-radius:1.6mm;padding:2.6mm 3.6mm}
.p-infocard--meta{flex:none;width:58mm;background:var(--wash);display:grid;gap:.8mm;align-content:start}
/* .p-mrow, not the generic "row" - Tabler's own grid CSS has a ".row > *" rule (forces width:100% on any
   direct child of an element literally classed "row"), which silently broke this into two stacked full-width
   lines instead of a label/value pair sharing one line. print.css shares the page with the rest of the app's
   stylesheets (the designer preview is real app UI, not an isolated document), so a name this generic collides */
.p-infocard--meta .p-mrow{display:flex;justify-content:space-between;gap:3mm;font-size:8.5pt}
.p-infocard--meta .p-mrow .k{color:var(--muted)}
.p-infocard--meta .p-mrow .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
/* FD-1b-1 (NUM-2 rule 5): the number - the first row of every meta card - stays on one line, up to 20 characters */
.p-infocard--meta .p-mrow:first-child .v{white-space:nowrap}
.p-meta--no div:first-child .v{white-space:nowrap}
.p-party{flex:1 1 auto;min-width:0;border:.3mm solid var(--rule);border-radius:1.6mm;padding:2.6mm 3.6mm}
.p-party b{display:block;font:700 10.5pt/1.4 var(--font);margin-top:.5mm}
.p-party p{margin:.6mm 0 0;font-size:8.5pt;color:var(--muted);line-height:1.45}
/* the ใบสำคัญ/ใบวางบิล/เงินสดย่อย info box: same card as .p-party, but a fixed label column of label/value rows
   instead of a name+address paragraph - these forms describe who/what/why in short fields, not an address block */
.p-infocard--wide{flex:1 1 auto;min-width:0}
.p-vrow{display:flex;gap:2.6mm;font-size:8.5pt;margin-top:.9mm}
.p-vrow:first-child{margin-top:0}
.p-vrow .k{width:27mm;flex:none;color:var(--muted)}
.p-vrow .v{font-weight:600}
/* purchase order only: the delivery-address line under the vendor/meta row, plain text (no card - the canvas
   gives it none either) */
.p-shipto{display:flex;gap:2mm;font-size:8.5pt;margin:-1mm 0 3mm}
.p-shipto .k{color:var(--muted);flex:none}
.p-shipto .v{font-weight:600}
/* filled pill: which journal book a ใบสำคัญ posts to (สมุดรายวันรับเงิน · RV ...). Unlike .p-chip (outlined, the
   ต้นฉบับ/สำเนา mark on tax documents) this is solid fill - a voucher never shows both at once, so the two can
   never be confused for each other even though they occupy the same header slot. Both stay on one line: the
   header's company block would otherwise take the width of its long address line and squeeze the pill into two */
.p-badge{display:inline-block;white-space:nowrap;margin-bottom:1.6mm;background:var(--accent);color:#fff;border-radius:999px;padding:.6mm 3.2mm;font:600 8.5pt/1.5 var(--font)}
/* two equal-width cards side by side below a ใบสำคัญ's journal table: payment-method-or-balance-check, and
   attachments - unlike .p-parties (grow + fixed-width meta card), both boxes here grow equally */
.p-twobox{display:flex;gap:5mm;margin-top:4mm;break-inside:avoid}
.p-twobox>.p-infocard{flex:1 1 0;min-width:0}
.p-cardlabel{display:block;font:600 7.5pt/1.3 var(--font);color:var(--muted);margin-bottom:1.8mm}
.p-cardlabel small{font-weight:500;letter-spacing:.06em}
.p-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2mm 3mm;font-size:8.5pt}
.p-checkrow{display:flex;gap:4mm;flex-wrap:wrap;font-size:8.5pt}
.p-checkitem{display:inline-flex;align-items:center;gap:1.6mm;white-space:nowrap}
/* a checkbox a person still ticks by hand on the printed paper - the SVG tick only paints when checkHtml() was
   told this one applies; an empty .p-cb is a real blank box, not a missing icon */
.p-cb{display:inline-flex;flex:none;align-items:center;justify-content:center;width:3.6mm;height:3.6mm;border:.4mm solid var(--ink);border-radius:.6mm}
.p-cb svg{width:2.6mm;height:2.6mm;display:block;stroke:currentColor}
/* a blank rule for a detail no field on the document carries (cheque number, bank reference) - filled by hand,
   same idea as the signature lines */
.p-blank{display:inline-block;border-bottom:.3mm dotted var(--ink);min-width:22mm;height:1mm;vertical-align:bottom}
/* the credit/debit note's "เหตุผลในการออกเอกสาร" callout, beside the totals now (not a top strip repeating
   the original-invoice reference, which already prints in the meta card - see noteReference() in paper.mjs) */
.p-reasonbox{margin-bottom:2.4mm}
.p-reasonbox .k{display:block;font:600 7.5pt/1.3 var(--font);color:var(--muted)}
.p-reasonbox b{display:block;font:600 9.5pt/1.4 var(--font);color:var(--ink);margin-top:.5mm}

/* ---------- item table ---------- */
/* tinted header band between two accent rules, matching the canvas (its th: background:{{tint}};
   border-top:1.5px accent;border-bottom:1px accent) - {{tint}} there is the same accent-mixed-toward-white
   wash this file already computes as --wash (washOf() in print-kit.mjs) */
.p-items thead{display:table-header-group}
.p-items th{padding:2.4mm 2mm;background:var(--wash);border-top:.5mm solid var(--accent);border-bottom:.3mm solid var(--accent);font:600 8pt/1.3 var(--font);color:var(--ink);text-align:left;vertical-align:middle}
.p-items th.r,.p-items th.c{text-align:right}
.p-items th.c{text-align:center}
/* break-word, not anywhere: a code or amount never splits mid-number - a table too wide for the page is shrunk to fit
   instead (paginate.mjs), and only a single word longer than its whole column still breaks */
.p-items td{padding:2.6mm 2mm;border-bottom:.3mm solid var(--hair);vertical-align:top;overflow-wrap:break-word}
.p-items td.c{text-align:center}
.p-items tr{break-inside:avoid}
.p-items td b{font-weight:500}
.p-items td small{display:block;font-size:8pt;color:var(--muted);margin-top:.4mm}
/* the closing double rule belongs UNDER a grand total's own figures (accounting convention: this line is what
   says "nothing more adds to this"), not on top of the row - putting the thick double line on border-top
   (previous fix) separated the total from the data above but left it with no closing mark of its own below,
   the opposite of .p-statement's already-correct tr.total td.n (border-top:.3mm solid + border-bottom:.9mm
   double). Matched that exactly here: a plain thin rule above (separates from the accounts listed), the bold
   double rule below (closes the total) - both were previously .6mm/none and hard to read as a real total row */
.p-items tfoot td{border-top:.3mm solid var(--ink);border-bottom:.9mm double var(--ink);font-weight:700;padding-top:2.6mm;padding-bottom:1.4mm}
/* FD-2c (DD-147): a free layout over pages - the brought / carried forward line, the sum of the amounts as printed; apart from the totals */
.p-items tr.p-carry td{background:var(--wash);font-weight:600;border-bottom:.3mm solid var(--accent)}
.p-items tr.p-carry td:first-child{color:var(--muted)}
.p-journal .code{font-variant-numeric:tabular-nums;white-space:nowrap}
.p-h3{font:600 11pt var(--font);margin:5mm 0 2mm}
.p-kv th{text-align:left;font-weight:500;color:var(--muted);padding:1.4mm 3mm 1.4mm 0;white-space:nowrap;vertical-align:top}
.p-kv td{padding:1.4mm 0}

/* ---------- summary / totals ---------- */
.p-summary{display:grid;grid-template-columns:1fr 82mm;gap:9mm;margin-top:5mm;break-inside:avoid}
.p-note{font-size:8.5pt;color:var(--muted);line-height:1.55}
/* the amount-in-words callout (wordsBoxHtml() in paper.mjs) - a bordered/tinted box, not the small
   right-aligned line under the total this used to be; matches the canvas's boxed treatment */
.p-wordsbox{border:.3mm solid var(--rule);border-radius:1.6mm;padding:2.2mm 3.6mm;background:#f4f5f6;margin-bottom:2.4mm}
.p-wordsbox .k{display:block;font:600 7.5pt/1.3 var(--font);color:var(--muted)}
.p-wordsbox b{display:block;font:700 10pt/1.4 var(--font);color:var(--ink);margin-top:.5mm}
.p-pay b{color:var(--ink);font-weight:600}
.p-sum{display:grid;grid-template-columns:1fr auto;column-gap:5mm}
.p-sum .l{color:var(--muted);padding:1mm 0}
.p-sum .n{padding:1mm 0}
.p-after{margin-top:2mm;padding-top:2mm;border-top:.3mm dashed var(--rule)}
.p-band{margin-top:2.4mm;background:var(--accent);color:#fff;border-radius:1.6mm;padding:3mm 4mm;display:flex;justify-content:space-between;align-items:baseline;break-inside:avoid}
.p-band .lab{font:600 9.5pt/1.2 var(--font)}
.p-band .lab small{display:block;font:400 7.5pt/1.3 var(--font);opacity:.85}
.p-band .amt{font:700 15pt/1 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap}
.paper.is-eco .p-band{background:none;color:var(--accent);border-top:.6mm solid var(--accent);border-bottom:.3mm solid var(--accent);border-radius:0}
.p-words{margin-top:2mm;font-size:8.5pt;color:var(--muted);text-align:right}
.p-words--left{text-align:left;margin-top:2mm}

/* ---------- notes / signatures / footer ---------- */
.p-notes{margin-top:4mm;display:grid;gap:2mm;font-size:8.5pt;color:var(--muted);break-inside:avoid}
.p-notes p{margin:.5mm 0}
/* FD-1b-1: a company's own text block (paper-parts textBlockHtml) - its alignment, size and weight the designer's; a long word wraps */
.p-text{margin:3mm 0;font-size:9pt;line-height:1.5;overflow-wrap:anywhere;break-inside:avoid}
.p-text--sm{font-size:8pt}
.p-text--lg{font-size:11pt}
.p-text--center{text-align:center}
.p-text--right{text-align:right}
.p-text--bold{font-weight:700}
/* FD-2b (DD-143): a field of the document (paper-fields fieldHtml) - its label and value on a line, the text block's sizes; never a rule's marker */
.p-field{margin:1mm 0;font-size:9pt;line-height:1.4;overflow-wrap:anywhere;break-inside:avoid}
.p-field--sm{font-size:8pt}
.p-field--lg{font-size:11pt}
.p-field--center{text-align:center}
.p-field--right{text-align:right}
.p-field--bold{font-weight:700}
.p-field-l{color:var(--muted)}
/* FD-1b-2: a QR of a text or a link - black on white at its own size, never shrunk; an optional caption under it */
.p-qr{margin:3mm 0;display:flex;flex-direction:column;align-items:flex-start;gap:1mm;break-inside:avoid}
.p-qr--center{align-items:center}
.p-qr--right{align-items:flex-end}
.p-qr-code{flex:none}
.p-qr figcaption{font-size:8pt;color:var(--muted)}
/* FD-QR: the PromptPay QR with the amount owed - what a payer checks before paying under it, one line each; the designer's sample marks its
   place with a dashed box */
.p-payqr figcaption{display:flex;flex-direction:column;gap:.3mm;color:var(--ink)}
.p-payqr figcaption b{font-weight:700}
.p-payqr-box{display:flex;align-items:center;justify-content:center;text-align:center;font-size:8pt;color:var(--muted);outline:1px dashed var(--muted);outline-offset:-1px}
/* FD-1b-2: a company image (a stamp, a scanned signature, a second logo) in a box of its block's size - the picture kept in proportion inside;
   one the viewer may not see (or that is gone) keeps its place, outlined on screen and blank on paper (app.js marks it) */
.p-img{margin:3mm 0;display:flex;flex-direction:column;align-items:flex-start;gap:1mm;break-inside:avoid}
.p-img--center{align-items:center}
.p-img--right{align-items:flex-end}
.p-img-box{display:block;flex:none}
.p-img-pic{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.p-img figcaption{font-size:8pt;color:var(--muted)}
.p-img.is-missing .p-img-pic{visibility:hidden}
.p-img.is-missing .p-img-box{outline:1px dashed var(--muted);outline-offset:-1px}
@media print{.p-img.is-missing .p-img-box{outline:none}}
.p-legal{font-style:italic}
/* the delivery-note "goods received in good order" acknowledgment banner - canvas's dashed-border callout,
   sitting between the totals and the signature row */
.p-ack{margin-top:4mm;text-align:center;font:600 8.5pt/1.4 var(--font);color:var(--ink);border:.3mm dashed var(--rule);border-radius:1.6mm;padding:1.8mm;break-inside:avoid}
.p-signs{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:9mm;margin-top:14mm;break-inside:avoid}
.p-signs div{border-top:.3mm solid var(--rule);padding-top:1.4mm;font-size:8pt;color:var(--muted);text-align:center}
.p-foot{position:absolute;left:15mm;right:15mm;bottom:8mm;display:flex;justify-content:space-between;font-size:7.5pt;color:var(--muted)}

/* ---------- watermark ---------- */
/* z-index:-1 (not +1): .paper is position:relative, so this paints behind every ordinary in-flow element on the
   page (including the navy total band) instead of drawing on top of them - a positive z-index made the "ร่าง"
   text sit over the total figure and other text, which was unreadable. Behind an opaque fill the watermark is
   simply not visible there, which is the correct result: no need for a watermark inside an already-filled band. */
.p-wm{display:none}
.paper[data-status=draft] .p-wm,.paper[data-status=void] .p-wm,.paper[data-status=preview] .p-wm,.paper[data-copy=copy] .p-wm{display:grid;position:absolute;inset:0;place-items:center;pointer-events:none;z-index:-1}
.p-wm span{transform:rotate(-30deg);font:700 90pt/1 var(--font);letter-spacing:.06em;color:#d5d8dc;white-space:nowrap}

/* ---------- report / statement ---------- */
.p-head--report{border-bottom:.3mm solid var(--rule);align-items:end;margin-bottom:2mm}
.p-rh{text-align:center;flex:1}
.p-rh .p-co-name{font-size:11pt}
.p-unit{font-size:8.5pt;color:var(--muted);text-align:right;margin-bottom:2mm}
.p-scope{font-size:8pt;color:var(--muted);margin-bottom:3mm}
.p-report th{white-space:nowrap}
/* a two-row header (tableHtml()'s column groups, e.g. the trial balance's ยอดยกมา/ระหว่างงวด/คงเหลือ over a
   debit/credit pair): the accent rule belongs under the head as a whole, so only the LAST header row keeps it -
   a lone single-row header is both first and last, so :not(:last-child) never matches it and nothing changes there */
.p-report thead tr:not(:last-child) th{border-bottom:.3mm solid var(--rule)}
.p-report tr.subtotal td,.p-report tr.total td{font-weight:700}
.p-report tr.total td.n{border-top:.3mm solid var(--ink)}
/* a book of account's document-group bar (journalLines' kind:'heading' row) - a plain neutral tint, not the
   accent --wash the table head already uses, so the two read as different things at a glance */
.p-report tr.heading td{font-weight:700;background:#f4f5f6;border-bottom:.3mm solid var(--hair)}
/* the brought-forward row a per-account ledger opens with (kind:'opening' - แยกประเภทบัญชี) - a plain fact
   carried in from before the report's own date range, not a posted transaction this period, so it reads as a
   quieter note rather than an ordinary row */
.p-report tr.opening td{color:var(--muted);font-style:italic}
.p-report tfoot td{border-top:.6mm solid var(--ink)}
.p-report .tot-note td{border:0;font-size:7.5pt;color:var(--muted);font-weight:400;padding-top:0}
.p-statement thead th{font:500 8.5pt var(--font);color:var(--muted);padding:1.6mm 2mm;border-top:.6mm solid var(--ink);border-bottom:.3mm solid var(--ink);text-align:right}
.p-statement thead th:first-child{text-align:left}
.p-statement td{padding:1.1mm 2mm;vertical-align:baseline}
.p-statement tr.sec td{padding-top:3.2mm;font-weight:600}
.p-statement tr.sp td{padding:0;height:1mm}
.p-statement tr.subtotal td{font-weight:600}
.p-statement tr.subtotal td.n{border-top:.3mm solid var(--ink)}
.p-statement tr.total td{font-weight:700}
.p-statement tr.total td.n{border-top:.3mm solid var(--ink);border-bottom:.9mm double var(--ink);padding-top:1.4mm;padding-bottom:1.4mm}
.p-statement tr{break-inside:avoid}
/* a deduction/outflow row (the cash flow statement's working-capital decreases, interest paid, ...) - the shared
   .paper .n.neg is colour-neutral (an ordinary document's negative line, like a discount, is not alarming), but
   a financial statement is read like a formal accounting page where the bracket convention expects the accent */
.p-statement .n.neg{color:#a12a2a}
.p-checks{margin-top:5mm;display:flex;gap:6mm;flex-wrap:wrap;font-size:8pt}
.p-checks .ok{color:#1b6b3a}
.p-checks .bad{color:#a12a2a;font-weight:600}

/* ---------- cheque (pre-printed bank stock: no logo, no fills, mm-positioned) ---------- */
.cheque-paper{box-shadow:none!important}
.cheque-paper div{position:absolute;font:400 10.5pt/1.2 'Inter','Noto Sans Thai',sans-serif;color:#111}
.ck-words{white-space:normal}
/* scoped under .cheque-paper: the bare .ck-* selectors lost to the "font" shorthand above, so A/C PAYEE ONLY printed at
   10.5pt and wrapped onto two lines, and the amount was never bold */
.cheque-paper .ck-amount{font-weight:700;letter-spacing:.02em}
.cheque-paper .ck-ac{font-size:7.5pt;font-weight:600;letter-spacing:.04em;color:#333}
.cheque-paper .ck-no{font-size:8pt;color:#666}
/* ---------- cheque test sheet (chequeCalibrationHtml): light mm guides under the real field markup ---------- */
.ck-cal-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ck-cal-svg line,.ck-cal-svg rect{fill:none;stroke:#6b737b;stroke-width:.15}
.ck-cal-svg .ck-cal-edge{stroke:#1b1f24;stroke-width:.2}
.ck-cal-svg .ck-cal-box{stroke:#1f6feb;stroke-width:.25;stroke-dasharray:1 .6}
.ck-cal-svg .ck-cal-guide{stroke:#9aa1a8;stroke-dasharray:.6 .6;fill:#0000000a}
.ck-cal-svg text{fill:#5b6570;stroke:none;font-family:'Inter','Noto Sans Thai',sans-serif}
.paper.ck-cal-a4{padding:0;border-top:0}
.ck-cal-leaf{position:absolute}
.ck-cal-help{position:absolute;left:15mm;right:15mm;top:146mm;font:9pt/1.55 'Inter','Noto Sans Thai',sans-serif;color:#1b1f24}
.ck-cal-help ol{margin:1.5mm 0 0;padding-left:5mm}

/* ---------- monogram tile ---------- */
.p-mono-tile{display:block;width:100%;height:100%}

/* ---------- screen: the designer / preview stage shows a scaled real page ---------- */
/* stacked, not side-by-side: a tax invoice prints original+copy as TWO A4 sheets, and laying them out in a row
   would need ~1600mm of width - wider than any modal can reasonably hold. Stacking keeps the stage exactly one
   page wide (it only needs vertical scroll, which the modal already gives .modal-body) regardless of copy count. */
.paper-stage{padding:10mm;overflow:auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8mm;background:var(--bme-surface-3,#e8ecf1)}
/* hidden until app.js's fitPaperPreview() has measured it and set the right zoom - visibility:hidden (not
   display:none) keeps the box laid out so that measurement still works, it just is not painted. Without this, the
   sheet briefly renders at its full natural width the instant the print modal opens (before the deferred fit runs),
   which - being far wider than the designer-fields column next to it - visibly spills over that column for a
   frame or two: exactly the "overlap right as I open print preview" a user reported by watching it happen live,
   not from a settled screenshot. */
.paper-stage .paper{transform-origin:top center;flex:none;visibility:hidden}
.paper-stage[data-orientation="landscape"] .paper{width:297mm;min-height:210mm} /* the preview of an A4 landscape page */
.paper-stage.is-sized .paper{visibility:visible}
/* ---------- pages (paginate.mjs) ---------- */
/* one .p-sheet is one A4 page, the same size on screen and on paper (@page margin is 0: the sheet's own padding is
   the margin), so the preview shows exactly the pages that print */
.paper.p-sheet{height:297mm;min-height:0}
.paper.p-sheet.is-landscape{width:297mm;height:210mm}
/* FD-2a: a free layout's sheet - one page of its paper (--pw x --ph, paper-parts sheet()), its blocks in boxes placed in mm from the
   paper's corner (paper-layout.mjs). A form's own block (is-grow) takes at least its box's height, grows with its content and lies over
   the company's blocks; a company block is cut to its box. The accent edge of a flowing sheet is drawn over the top here (a border would
   move every box down); a box's first block keeps no outer margin of its own but the signatures', the room for the pen */
.paper.p-free{width:var(--pw);height:var(--ph);min-height:0;padding:0;border-top:0}
.paper.p-free::before{content:"";position:absolute;left:0;right:0;top:0;height:2.1mm;background:var(--accent)}
.paper.p-free.is-eco::before{display:none}
.paper-stage[data-orientation] .paper.p-free,.paper-stage .paper.p-free{width:var(--pw);height:var(--ph);min-height:0}
.p-box{position:absolute;z-index:1;overflow:hidden}
.p-box.is-grow{z-index:2;overflow:visible}
.p-box>:not(.p-signs){margin-top:0;margin-bottom:0}
.p-box>.p-foot{position:static;height:100%;align-items:flex-end}
/* measuring a flowing form for its free layout (FD-2a, paper.mjs input.measure): the signatures' wrapper holds their room for the pen as
   their box does - left to collapse, the 14 mm margin fell outside it and the box came out that much too short: the signatures past it,
   at a page's foot past the paper - every print of the layout a flow (line C's window before the round, 2026-10-07) */
.p-measure[data-block="signs"]{display:flow-root}
/* measuring only: a table's width with every cell on one line, and with every word kept whole */
table.p-fit-max{width:max-content!important;table-layout:auto!important}
table.p-fit-max th,table.p-fit-max td{white-space:nowrap!important}
table.p-fit-min{width:min-content!important;table-layout:auto!important}

/* ---------- print media ---------- */
@media print{
  :root,[data-bs-theme=dark]{color-scheme:light}
  html,body{height:auto;overflow:visible;background:#fff}
  body>*{display:none!important}
  body>#printArea{display:block!important}
  #printArea .paper{box-shadow:none;margin:0;width:auto;min-height:0}
  #printArea .paper+.paper{break-before:page}
  #printArea .paper.p-sheet{width:210mm;height:296.5mm}
  #printArea .paper.p-sheet.is-landscape{width:297mm;height:209.5mm}
  .paper-stage{padding:0}
  a{color:inherit;text-decoration:none}
}
/* FD-2a: a free layout prints one page of its own paper (pageCss: @page of that size) - a hair short, as an A4 sheet, never a blank page */
@media print{#printArea .paper.p-free{width:var(--pw);height:calc(var(--ph) - .5mm)}}