/*
 * The document paper: an invoice or estimate as the client sees it, in one of four layouts (Classic, Bold, Sidebar,
 * Overlay). Ported from the "Document paper" block of docs/mocks/app/assets/css/billgrid.css (the design source of
 * truth; keep the two in step), markup in fragments/document-paper.html.
 *
 * Deliberately unlayered and scoped by .paper alone, with no page wrapper in any selector: the owner's page, the
 * client's page, the branding preview and the PDF (which inlines this file as it is) all draw the same sheet. Unlayered
 * so no @layer rule of a page can lose to a legacy global rule. No @font-face and no url() here: the web declares the
 * fonts in document-paper-fonts.css, and the PDF renderer resolves the same families from its image.
 *
 * The sheet pins its own palette (see the .paper rule below), so it only needs radii and type sizes from the tokens.
 */
.paper { --shadow-paper:0 1px 2px rgba(40,32,16,.05), 0 18px 50px rgba(40,32,16,.10); }
[data-theme="dark"] .paper { --shadow-paper:0 1px 2px rgba(0,0,0,.4), 0 20px 55px rgba(0,0,0,.5); }
.paper { position:relative; background:var(--bg-panel); border:1px solid var(--sheet-edge); border-radius:var(--r-lg); box-shadow:var(--shadow-paper); overflow:hidden; container-type:inline-size; container-name:paper; }
.paper .paper-pad { padding:26px var(--pad-x) 30px; }

/* ---- shared pieces ---- */
.paper .ph-logo { width:48px; height:48px; border-radius:12px; background:var(--doc-brand); color:var(--doc-brand-ink); font-family:var(--doc-serif); font-weight:700; font-size:25px; display:grid; place-items:center; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
/* An uploaded logo keeps its own shape: marks up to 56px high, wordmarks up to 180px wide. */
.paper .ph-logo-img { display:block; width:auto; height:auto; max-width:180px; max-height:56px; object-fit:contain; flex-shrink:0; }
/* The logo on a brand fill (Overlay) sits on a white plate, so any upload stays legible on any color. */
.paper .dp-plate { display:grid; place-items:center; flex-shrink:0; padding:7px 10px; border-radius:12px; background:#fff; }
.paper .dp-plate.letter { width:48px; height:48px; padding:0; font-family:var(--doc-serif); font-weight:700; font-size:25px; }
.paper .dp-plate img { display:block; height:38px; width:auto; max-width:160px; object-fit:contain; }
/* A near-square logo (is-square: aspect 0.8 to 1.25, read from the saved logo's header) sits on a square tile with equal padding. */
.paper .dp-plate.is-square { width:56px; height:56px; padding:8px; }
.paper .dp-plate.is-square img { width:100%; height:100%; max-width:none; object-fit:contain; }
/* An opaque one (is-opaque: no transparency) is its own rounded tile, shown whole; a hairline keeps a pale edge from dissolving into white. */
.paper .dp-plate.is-square.is-opaque { width:auto; height:auto; padding:0; background:none; }
.paper .dp-plate.is-square.is-opaque img { width:auto; height:56px; max-width:70px; border-radius:12px; }
.paper .dp-plate.is-square.is-opaque img, .paper .ph-logo-img.is-square.is-opaque { outline:1px solid color-mix(in srgb, var(--ink) 12%, transparent); outline-offset:-1px; }
.paper .ph-logo-img.is-square.is-opaque { border-radius:10px; }
.paper .party-label, .paper .doc-table > thead > tr > th, .paper .doc-foot > * > h4, .paper .total-box .tb-l, .paper.layout-bold .tk-kn, .paper .lo-kind, .paper .doc-label, .paper .doc-pay-h { font-feature-settings:"case"; }
.paper .party-label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); font-weight:700; margin-bottom:5px; }
.paper .party-name { text-wrap:balance; font-family:var(--doc-serif); font-size:18px; font-weight:600; color:var(--ink); line-height:1.25; }
.paper .addr { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.6; margin-top:5px; }
.paper .addr .taxid { color:var(--text-soft); }
.paper .doc-no { font-size:var(--fs-body); color:var(--text-muted); }
.paper .summary-block { max-width:72ch; margin-top:18px; font-size:var(--fs-body); color:var(--text); line-height:1.6; }
.paper .tax-flag { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); font-size:9.5px; font-weight:700; vertical-align:1px; }
.paper .dt-item .tax-flag { margin-left:6px; }
.paper .tax-foot { font-size:12px; color:var(--text-soft); margin-top:9px; display:flex; align-items:center; gap:6px; }
.paper .tax-foot .tax-flag { vertical-align:0; }

.paper .table-scroll { margin-top:22px; overflow-x:auto; }
.paper .doc-table { width:100%; border-collapse:collapse; min-width:480px; font-size:var(--fs-body); }
/* A rule, not a fill, under the head: it survives a mono laser printer and costs no toner. */
.paper .doc-table > thead > tr > th { color:var(--text-muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:9px var(--cell-x); text-align:left; border-bottom:1px solid var(--border-strong); }
.paper .doc-table > thead > tr > th.tar { text-align:right; }
.paper .doc-table > tbody > tr > td { padding:14px var(--cell-x); border-bottom:1px solid var(--border-soft); vertical-align:top; }
.paper .doc-table > tbody > tr > td.tar { text-align:right; max-width:13em; overflow-wrap:break-word; }
.paper .doc-table .c-cost, .paper .doc-table .c-qty { color:var(--text-muted); }
.paper .doc-table .c-calc { display:none; }
.paper .dt-item { min-width:7em; font-weight:600; color:var(--ink); }
.paper .dt-desc { color:var(--text-muted); line-height:1.55; }
/* Rich text: item descriptions, the summary, notes and terms. This is what Quill writes after HtmlSanitizer's relaxed safelist:
   p, br, b/strong, i/em, u, strike, sub/sup, small, a, ul/ol/li, dl, h1-h6, blockquote, q, cite, pre/code, hr,
   img and tables (inline style and width/height attributes survive, so images and tables are clamped to the column). */
.paper :is(.dt-desc, .summary-block, .ft-body) > :first-child { margin-top:0; }
.paper :is(.dt-desc, .summary-block, .ft-body) > :last-child { margin-bottom:0; }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(p, ul, ol, dl, blockquote, pre, table, hr) { margin:.55em 0 0; }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(h1, h2, h3, h4, h5, h6) { margin:.9em 0 .25em; font-size:1em; font-weight:700; line-height:1.3; color:var(--ink); text-transform:none; letter-spacing:0; }
.paper :is(.dt-desc, .summary-block, .ft-body) h1 { font-size:1.4em; }
.paper :is(.dt-desc, .summary-block, .ft-body) h2 { font-size:1.25em; }
.paper :is(.dt-desc, .summary-block, .ft-body) h3 { font-size:1.12em; }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(ul, ol) { padding-left:1.4em; }
.paper :is(.dt-desc, .summary-block, .ft-body) li { margin:.15em 0; }
.paper :is(.dt-desc, .summary-block, .ft-body) li :is(ul, ol) { margin-top:.15em; }
.paper :is(.dt-desc, .summary-block, .ft-body) dt { font-weight:700; color:var(--text); }
.paper :is(.dt-desc, .summary-block, .ft-body) dd { margin:0 0 0 1.4em; }
.paper :is(.dt-desc, .summary-block, .ft-body) blockquote { padding:2px 0 2px 12px; border-left:3px solid var(--border); color:var(--text-muted); }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(pre, code) { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; }
.paper :is(.dt-desc, .summary-block, .ft-body) pre { padding:8px 10px; border:1px solid var(--border-soft); border-radius:var(--r-sm); background:var(--sand-50); white-space:pre-wrap; }
.paper :is(.dt-desc, .summary-block, .ft-body) :not(pre) > code { padding:1px 4px; border-radius:4px; background:var(--sand-50); }
.paper :is(.dt-desc, .summary-block, .ft-body) hr { border:0; border-top:1px solid var(--border); }
.paper :is(.dt-desc, .summary-block, .ft-body) a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(b, strong) { font-weight:700; color:var(--text); }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(strike, s) { text-decoration:line-through; }
.paper :is(.dt-desc, .summary-block, .ft-body) small { font-size:.85em; }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(sub, sup) { font-size:.75em; line-height:0; }
/* Bootstrap's reboot (the web only) positions sub/sup and scrolls pre; the sheet prints the browser's own. */
.paper :is(.dt-desc, .summary-block, .ft-body) :is(sub, sup) { position:static; }
.paper :is(.dt-desc, .summary-block, .ft-body) sub { vertical-align:sub; }
.paper :is(.dt-desc, .summary-block, .ft-body) sup { vertical-align:super; }
.paper :is(.dt-desc, .summary-block, .ft-body) pre { overflow:visible; }
.paper :is(.dt-desc, .summary-block, .ft-body) img { display:inline-block; max-width:100%; max-height:320px; width:auto; height:auto; object-fit:contain; vertical-align:middle; }
.paper :is(.dt-desc, .summary-block, .ft-body) table { border-collapse:collapse; max-width:100%; font-size:.94em; }
.paper :is(.dt-desc, .summary-block, .ft-body) :is(th, td) { padding:4px 8px; border:1px solid var(--border); text-align:left; vertical-align:top; }
.paper :is(.dt-desc, .summary-block, .ft-body) th { background:var(--sand-50); font-weight:700; color:var(--text); }
.paper :is(.dt-desc, .summary-block, .ft-body) caption { caption-side:bottom; padding-top:4px; font-size:.9em; color:var(--text-soft); }
.paper .dt-desc > br:first-child { display:none; }
/* A plain summary typed before it was rich text keeps its line breaks; rich text breaks only where its tags do. */
.paper .summary-block:not(.is-rich) { white-space:pre-line; }
.paper .dt-amt { font-weight:700; color:var(--ink); }

.paper .doc-totals { margin:18px 0 0 auto; width:max-content; min-width:min(340px, 100%); max-width:100%; font-size:var(--fs-body); }
.paper .dtot { display:flex; justify-content:space-between; align-items:center; padding:6px var(--cell-x); color:var(--text-muted); }
.paper .dtot .v { flex:none; max-width:70%; overflow-wrap:break-word; color:var(--text); }
.paper .dtot > :first-child { min-width:0; margin-right:12px; }
/* A header total is one figure and never breaks: --fig-size while it fits its room, smaller when it does not. --fig is its
   length in characters (the markup's); a figure runs at most .53em a character (a digit .5em; the rial's sign, the widest the registry prints, more). */
.paper [data-doc-total] { --fig-room:calc(100cqi - 2 * var(--pad-x)); white-space:nowrap; font-size:min(var(--fig-size), var(--fig-room) / (var(--fig, 1) * .53)); }
/* The ledger's last row, Total (USD) or Balance due: the serif over a structural ink rule, no fill. */
.paper .dtot:is(.final, .balance) { flex-wrap:wrap; column-gap:12px; margin-top:8px; padding:12px var(--cell-x) 4px; border-top:2px solid var(--ink); font-family:var(--doc-serif); font-size:20px; font-weight:600; color:var(--ink); }
.paper .dtot:is(.final, .balance) > :first-child { white-space:nowrap; margin-right:0; }
.paper .dtot:is(.final, .balance) .v { max-width:100%; margin-left:auto; color:var(--ink); font-size:22px; }
/* A late fee names its rule beneath the label (DocumentTotalsView note), as an adjustment (a payment, credit, refund or
   credit note under the Total) names its detail; a discount is neutral ink with a minus. A void's stamp is the body's first line. */
.paper .dtot:is(.fee, .adj) { align-items:flex-start; }
.paper .dtot .dt-l { display:flex; flex-direction:column; min-width:0; }
.paper .paper-stamp { display:flex; justify-content:flex-end; margin-bottom:6px; }
.paper .dtot .dt-note { margin-top:2px; font-size:12px; color:var(--text-soft); line-height:1.4; }
/* The PDF's way back to the client page (PaperView.online): what the client can do there, beside the totals. */
.paper .doc-payrow { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:18px 28px; }
.paper .doc-pay { flex:1 1 160px; max-width:300px; margin-top:24px; padding:2px 0 2px 14px; border-left:2px solid var(--ink); font-size:var(--fs-sm); line-height:1.5; }
.paper .doc-pay-h { font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.paper .doc-pay-url { display:inline-block; margin-top:3px; color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
/* Sidebar's narrow main column: the ledger takes only its own width beside the block; past that the block wraps above it. */
.paper.layout-sidebar .doc-payrow .doc-totals { min-width:0; }

.paper .doc-foot { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:28px; padding-top:22px; border-top:1px solid var(--border-soft); }
.paper .doc-foot > * > h4 { line-height:inherit; margin:0 0 7px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); font-weight:700; }
.paper .doc-foot .ft-body { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.65; }
.paper .doc-foot .ft-body strong { color:var(--text); }
.paper .paper-tail { text-align:center; padding:16px; border-top:1px solid var(--border-soft); font-size:var(--fs-sm); color:var(--text-soft); }
.paper .paper-tail a { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
/* BillGrid's mark at the foot of a free generator PDF (GeneratorPaper.BILLGRID_MARK): a colophon in BillGrid's own gold,
   whatever the invoice's brand color; the name in the serif's small caps, then the address. */
.paper .paper-tail:has(.bg-mark) { padding:18px 16px 20px; }
.paper .paper-tail a.bg-mark { display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); font-weight:400; text-decoration:none; }
.paper .bg-mark__tile { display:grid; place-items:center; width:16px; height:16px; border-radius:4px; background:var(--doc-mark); color:var(--doc-mark-ink); font-family:var(--doc-serif); font-size:11px; font-weight:700; line-height:1; }
.paper .bg-mark__name { font-family:var(--doc-serif); font-size:13px; font-weight:600; font-variant-caps:all-small-caps; letter-spacing:.14em; color:var(--ink); }
.paper .bg-mark__sep { width:18px; height:1px; background:var(--border-soft); }
.paper .bg-mark__url { font-size:10.5px; letter-spacing:.04em; color:var(--text-soft); }

/* The paper is a sheet: it keeps its light palette in dark mode (uploaded logos and brand colors are made for
   white), so its tokens are pinned here. Rules and helper text are dark enough for a mono laser printer: row rules
   1.7:1 and panel rules 2.2:1 on white, --border-strong (under the table head) 3.8:1, --text-soft 5.8:1. */
.paper { --doc-sans:"Inter Web", "Inter", "BG Symbols Web", "BG Symbols", "Noto Sans Arabic Web", "Noto Sans Arabic", "Noto Sans Hebrew Web", "Noto Sans Hebrew", "Noto Sans Thai Web", "Noto Sans Thai", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --doc-serif:"Source Serif 4 Web", "Source Serif 4", "BG Symbols Web", "BG Symbols", "Noto Sans Arabic Web", "Noto Sans Arabic", "Noto Sans Hebrew Web", "Noto Sans Hebrew", "Noto Sans Thai Web", "Noto Sans Thai", Georgia, "Times New Roman", serif;
  font-family:var(--doc-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-optical-sizing:auto; color-scheme:light; color:var(--text); overflow-wrap:anywhere; text-wrap:pretty; font-variant-numeric:tabular-nums lining-nums; --bg-panel:#fff; --ink:#28241c; --text:#2b2720; --text-muted:#5f5745; --text-soft:#6d6452; --border:#b9ae96; --border-soft:#cfc5ae; --border-strong:#8c826c; --sheet-edge:#e6dfd0; --doc-mark:#9a7b43; --doc-mark-ink:#faf6ea; --sand-50:#f8f5ee; --overdue-fg:#b1482a;
  --gold:#9a7b43; --gold-soft:#f3ead2; }
/* Bidi: user text is dir=auto (document-paper.js); every amount stays left-to-right and isolated, so a currency sign in Arabic letters, or an Arabic name beside an amount, never reorders the figures. */
.paper .tar, .paper .dt-amt, .paper .c-calc, .paper .dtot .v, .paper .dts .v, .paper .ps-amt, .paper .tb-a, .paper .tk-a, .paper .ls-a, .paper .lo-a { direction:ltr; unicode-bidi:isolate; }

/* Brand hooks: a company's brand color replaces the gold accents on the document only.
   --doc-brand is a fill that white/ink text (--doc-brand-ink, set by BGBrand.applyTo) reads on at 4.5:1; the gold
   default is nudged 8% darker for that. .branded derives from it, in one form (the color with its lightness held):
   the tint (fixed lightness, so text on it always reads; chroma half the color's, held between .035 and .06 so every
   hue shows, but never above the color's own, so a gray stays gray) and
   the edge (lightness capped at .62, so a pale color still draws a line at 3:1 on white). */
.paper { --doc-brand:color-mix(in srgb, var(--gold) 92%, #000); --doc-brand-soft:var(--gold-soft); --doc-brand-edge:var(--doc-brand); --doc-brand-ink:#fff; --pad-x:34px; --cell-x:12px; --bar-x:12px; }
.paper.branded { --doc-brand-soft:oklch(from var(--doc-brand) .92 min(c, clamp(.035, calc(c * .5), .06)) h); --doc-brand-edge:oklch(from var(--doc-brand) min(l, .62) c h); }

/* ---- Classic: a letterhead rule (the layout's one use of the brand color), the sender and the title on the first row;
   under a rule, the client and the total, set like a ledger's sum over a double rule, with the due date ---- */
.paper.layout-classic { background-image:linear-gradient(var(--doc-brand-edge), var(--doc-brand-edge)); background-size:100% 4px; background-repeat:no-repeat; }
.paper.layout-classic .paper-pad { padding-top:30px; }
.paper .ph-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; }
.paper .ph-from { display:flex; gap:14px; align-items:flex-start; }
.paper.wide .ph-from { flex-direction:column; gap:12px; }
.paper .ph-title { text-align:right; }
.paper .ph-title .doc-label { font-family:var(--doc-serif); font-size:26px; font-weight:500; color:var(--ink); line-height:1; letter-spacing:.14em; text-transform:uppercase; }
.paper .ph-title .doc-no { margin-top:7px; }
.paper .ph-dates { margin-top:8px; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }
.paper .ph-dates .lbl { color:var(--text-soft); }
.paper .ph-dates b { color:var(--ink); font-weight:600; }
.paper .ph-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 28px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border-soft); }
.paper .ph-for { flex:1 1 16em; min-width:0; }
.paper .total-box { margin-left:auto; text-align:right; }
.paper .total-box .tb-l { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--text-soft); }
.paper .total-box .tb-a { display:inline-block; font-family:var(--doc-serif); --fig-size:30px; font-weight:600; line-height:1.05; color:var(--ink); margin-top:3px; padding-bottom:3px; border-bottom:3px double var(--ink); }
.paper .total-box .tb-due { margin-top:7px; font-size:var(--fs-sm); color:var(--text-muted); }
.paper .total-box .tb-due b { font-weight:700; margin-left:3px; color:var(--ink); }

/* ---- Bold (the Ticket): a slim brand bar of facts, then on white the sender and the total as the one large figure.
   The bar is the only fill; the logo never touches it, so it needs no plate. The body is the shared one. ---- */
.paper.layout-bold .tk-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:3px 26px; padding:11px var(--pad-x); background:var(--doc-brand); color:var(--doc-brand-ink); font-size:var(--fs-sm); }
.paper.layout-bold .tk-kn { display:flex; flex-wrap:wrap; gap:0 .6em; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.paper.layout-bold .tk-dts { display:flex; flex-wrap:wrap; gap:3px 22px; }
.paper.layout-bold .tk-dts b { font-weight:700; margin-left:5px; }
.paper.layout-bold .tk-pad { padding-top:30px; }
.paper.layout-bold .tk-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 28px; }
.paper.layout-bold .tk-co { flex:1 1 16em; display:flex; align-items:center; gap:14px; min-width:0; }
.paper.layout-bold .tk-name { font-family:var(--doc-serif); font-size:19px; font-weight:600; color:var(--ink); line-height:1.2; text-wrap:balance; }
.paper.layout-bold .tk-tot { margin-left:auto; text-align:right; }
.paper.layout-bold .tk-tot .party-label { margin-bottom:2px; }
.paper.layout-bold .tk-a { display:block; font-family:var(--doc-serif); --fig-size:46px; font-weight:600; line-height:1.05; color:var(--ink); }
.paper.layout-bold .tk-parties { display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; margin-top:26px; }

/* ---- Sidebar: every fact in a white column closed by a brand edge, ending on the total ---- */
.paper.layout-sidebar { --cell-x:0px; --bar-x:14px; }
.paper.layout-sidebar .ls-grid { display:grid; grid-template-columns:200px minmax(0,1fr); }
.paper.layout-sidebar .ls-side { border-right:3px solid var(--doc-brand-edge); padding:28px 22px 28px 26px; display:flex; flex-direction:column; gap:20px; container-type:inline-size; }
.paper.layout-sidebar .ls-from { margin-top:14px; }
.paper.layout-sidebar .ls-v { font-weight:600; color:var(--ink); }
.paper.layout-sidebar .ls-gap { margin-top:10px; }
.paper.layout-sidebar .ls-tt { margin-top:auto; padding-top:16px; border-top:2px solid var(--ink); }
.paper.layout-sidebar .ls-a { display:block; font-family:var(--doc-serif); --fig-size:30px; --fig-room:100cqi; font-weight:600; color:var(--ink); line-height:1.1; margin-top:2px; }
.paper.layout-sidebar .ls-main { padding:28px 32px; min-width:0; }
.paper.layout-sidebar .ls-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.paper.layout-sidebar .ls-title .doc-label { font-family:var(--doc-serif); font-size:30px; font-weight:600; color:var(--ink); line-height:1; }
.paper.layout-sidebar .ls-title .doc-no { color:var(--text-soft); }
.paper.layout-sidebar .table-scroll { overflow:visible; }

/* ---- Overlay: a slim tinted band, the header on a card floating across its lower edge (the parties and the total,
   then a strip of dates), the totals on a card too ---- */
.paper.layout-overlay .lo-band { padding:14px var(--pad-x) 44px; background:var(--doc-brand-soft); color:var(--ink); box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--doc-brand) 22%, transparent); }
.paper.layout-overlay .lo-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px; }
.paper.layout-overlay .lo-co { display:flex; gap:10px; align-items:center; font-family:var(--doc-serif); font-size:17px; font-weight:600; }
.paper.layout-overlay .dp-plate.letter { width:38px; height:38px; border-radius:10px; font-size:20px; background:var(--doc-brand); color:var(--doc-brand-ink); }
.paper.layout-overlay .dp-plate img { height:30px; }
.paper.layout-overlay .dp-plate.is-square { width:46px; height:46px; padding:6px; }
.paper.layout-overlay .dp-plate.is-square img { height:100%; }
.paper.layout-overlay .dp-plate.is-square.is-opaque { width:auto; height:auto; padding:0; }
.paper.layout-overlay .dp-plate.is-square.is-opaque img { height:46px; max-width:58px; border-radius:10px; }
.paper.layout-overlay .lo-kn { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.paper.layout-overlay .lo-kind { font-family:var(--doc-serif); font-size:26px; line-height:1; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.paper.layout-overlay .lo-no { color:var(--text-muted); }
.paper.layout-overlay .lo-float, .paper.layout-overlay .lo-totcard { position:relative; z-index:1; background:var(--bg-panel); border-radius:var(--r-lg); box-shadow:0 18px 40px -12px rgba(40,30,10,.28), 0 2px 6px rgba(40,30,10,.08), 0 0 0 1px var(--border-soft); }
.paper.layout-overlay .lo-float { margin:-28px var(--pad-x) 0; }
.paper.layout-overlay .lo-parties { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px 24px; padding:12px 20px 10px; }
.paper.layout-overlay .lo-parties .party-label { margin-bottom:2px; }
.paper.layout-overlay .lo-parties .party-name { font-size:16px; }
.paper.layout-overlay .lo-parties .addr { font-size:12.5px; line-height:1.4; margin-top:2px; }
.paper.layout-overlay .lo-tt { display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding-left:22px; border-left:1px solid var(--border-soft); text-align:right; }
.paper.layout-overlay .lo-a { font-family:var(--doc-serif); --fig-size:32px; --fig-room:calc(100cqi - 2 * var(--pad-x) - 64px); line-height:1.05; font-weight:600; color:var(--ink); }
.paper.layout-overlay .lo-strip { padding:7px 20px; border-top:1px solid var(--border-soft); }
.paper.layout-overlay .lo-dl { display:flex; flex-wrap:wrap; gap:2px 18px; font-size:var(--fs-sm); color:var(--text-muted); }
.paper.layout-overlay .lo-dl b { color:var(--ink); font-weight:600; margin-left:4px; }
.paper.layout-overlay .lo-pad { padding-top:10px; }
.paper.layout-overlay .summary-block { margin-top:8px; }
.paper.layout-overlay .table-scroll { margin-top:14px; }
.paper.layout-overlay .lo-totcard { margin:16px 0 0 auto; width:max-content; min-width:min(360px, 100%); max-width:100%; overflow:hidden; }
.paper.layout-overlay .lo-totcard .doc-totals { margin:0; width:auto; }
.paper.layout-overlay .lo-totcard .dtot { padding-left:var(--bar-x); padding-right:var(--bar-x); }
.paper.layout-overlay .lo-totcard .dtot:first-child:not(.final):not(.balance) { padding-top:12px; }
.paper.layout-overlay .lo-totcard .dtot:is(.final, .balance) { margin:6px 0 0; padding-top:12px; padding-bottom:12px; }
.paper.layout-overlay .lo-totcard .dtot:first-child:is(.final, .balance) { margin-top:0; border-top:0; }

/* What the paper can carry before the app feeds it (the mock keeps these beside the features): section titles, the
   payment schedule, the void stamp. */
.paper .doc-table tbody tr.dt-section td { padding:20px 12px 8px; border-bottom:1px solid var(--border); }
.paper .doc-table tbody tr.dt-section:first-child td { padding-top:12px; }
.paper .dts { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--doc-serif); font-size:16px; font-weight:600; color:var(--ink); }
.paper .dts .v { font-family:var(--doc-sans); font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); max-width:13em; overflow-wrap:break-word; }
.paper .ps-paper { margin-top:18px; }
.paper .ps-paper h4 { line-height:inherit; margin:0 0 6px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.paper .ps-paper table { width:100%; border-collapse:collapse; font-size:var(--fs-ui); }
.paper .ps-paper td { padding:5px 0; border-top:1px solid var(--border-soft); }
.paper .ps-paper td:last-child { text-align:right; }
.paper .ps-paper + .dtot { margin-top:6px; }
.paper .cr-void-stamp { display:inline-block; margin:14px 4px 0 0; padding:4px 12px; border:2px solid var(--overdue-fg); border-radius:var(--r-sm); color:var(--overdue-fg); font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; transform:rotate(-4deg); opacity:.85; pointer-events:none; }
@container paper (max-width:540px) {
  .paper .doc-table tbody tr.dt-section { display:block; padding:18px 0 6px; border-bottom:1px solid var(--border); }
  .paper .doc-table tbody tr.dt-section td { display:block; padding:0; border:0; }
  .paper .doc-table tbody tr.dt-section + tr { border-top:0; }
}

/* ---- items as two-line rows: always in Sidebar, below 600px in every layout ---- */
.paper.layout-sidebar .doc-table { min-width:0; margin-top:0; }
.paper.layout-sidebar .doc-table > thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.paper.layout-sidebar .doc-table > tbody > tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 20px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
.paper.layout-sidebar .doc-table > tbody > tr:first-child { border-top:1px solid var(--border); }
.paper.layout-sidebar .doc-table > tbody > tr > td { padding:0; border:0; white-space:normal; }
.paper.layout-sidebar .doc-table .dt-amt { grid-column:2; grid-row:1; }
.paper.layout-sidebar .doc-table .dt-desc { grid-column:1; grid-row:2; }
.paper.layout-sidebar .doc-table .c-cost, .paper.layout-sidebar .doc-table .c-qty { display:none; }
.paper.layout-sidebar .doc-table .c-calc { display:block; grid-column:2; grid-row:2; text-align:right; font-size:var(--fs-sm); color:var(--text-soft); max-width:14em; overflow-wrap:break-word; }

@container paper (max-width: 600px) {
  .paper > * { --pad-x:18px; --cell-x:0px; --bar-x:14px; }
  .paper .paper-pad { padding-top:20px; padding-bottom:22px; }
  .paper .doc-foot { grid-template-columns:1fr; gap:20px; }
  .paper .table-scroll { overflow:visible; }
  .paper .doc-table { min-width:0; margin-top:0; }
  .paper .doc-table > thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .paper .doc-table > tbody > tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
  .paper .doc-table > tbody > tr:first-child { border-top:1px solid var(--border); }
  .paper .doc-table > tbody > tr > td { padding:0; border:0; white-space:normal; }
  .paper .doc-table .dt-amt { grid-column:2; grid-row:1; }
  .paper .doc-table .dt-desc { grid-column:1; grid-row:2; }
  .paper .doc-table .c-cost, .paper .doc-table .c-qty { display:none; }
  .paper .doc-table .c-calc { display:block; grid-column:2; grid-row:2; text-align:right; font-size:var(--fs-sm); color:var(--text-soft); max-width:14em; overflow-wrap:break-word; }
  .paper .doc-totals { width:100%; }
  .paper .dtot:is(.final, .balance) { font-size:18px; }
  .paper .dtot:is(.final, .balance) .v { font-size:20px; }
  .paper .doc-payrow { flex-direction:column; align-items:stretch; gap:0; }
  .paper .doc-pay { order:1; flex:none; margin-top:18px; }

  .paper .ph-head { grid-template-columns:1fr; gap:16px; }
  .paper .ph-title { order:-1; text-align:left; }
  .paper .ph-row { flex-direction:column; align-items:stretch; gap:16px; margin-top:16px; padding-top:16px; }
  .paper .ph-for { flex:none; }
  .paper .total-box { order:-1; margin-left:0; text-align:left; }
  .paper .total-box .tb-a { --fig-size:28px; }
  .paper .ph-title .doc-label { font-size:23px; }
  .paper.layout-classic .paper-pad { padding-top:24px; }

  .paper.layout-bold .tk-bar, .paper.layout-bold .tk-dts { flex-direction:column; gap:2px; }
  .paper.layout-bold .tk-pad { padding-top:22px; }
  .paper.layout-bold .tk-top { flex-direction:column; align-items:flex-start; gap:16px; }
  .paper.layout-bold .tk-co { flex:none; max-width:100%; }
  .paper.layout-bold .tk-name { font-size:17px; }
  .paper.layout-bold .tk-tot { margin-left:0; text-align:left; }
  .paper.layout-bold .tk-a { --fig-size:38px; }
  .paper.layout-bold .tk-parties { grid-template-columns:1fr; gap:16px; margin-top:20px; }

  /* The column becomes a rail down the left of the facts, ending on the total, before the work. */
  .paper.layout-sidebar .ls-grid { grid-template-columns:1fr; }
  .paper.layout-sidebar .ls-side { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 16px; margin:20px var(--pad-x) 0; padding:2px 0 4px 14px; border-right:0; border-left:3px solid var(--doc-brand-edge); }
  .paper.layout-sidebar .ls-side > :first-child, .paper.layout-sidebar .ls-tt { grid-column:1 / -1; }
  .paper.layout-sidebar .ls-tt { margin-top:2px; padding-top:12px; }
  .paper.layout-sidebar .ls-main { padding:18px var(--pad-x) 20px; }
  .paper.layout-sidebar .ls-title .doc-label { font-size:26px; }

  .paper.layout-overlay .lo-band { padding:12px var(--pad-x) 40px; }
  .paper.layout-overlay .lo-top { flex-wrap:wrap; gap:8px 16px; }
  .paper.layout-overlay .lo-float { margin-top:-24px; }
  .paper.layout-overlay .lo-parties { grid-template-columns:1fr; gap:12px; padding:12px 16px; }
  .paper.layout-overlay .lo-tt { order:-1; align-items:flex-start; padding:0 0 10px; border-left:0; border-bottom:1px solid var(--border-soft); text-align:left; }
  .paper.layout-overlay .lo-a { --fig-size:30px; --fig-room:calc(100cqi - 2 * var(--pad-x) - 32px); }
  .paper.layout-overlay .lo-strip { padding:8px 16px; }
  .paper.layout-overlay .lo-totcard { width:100%; }
}

/* Print: brand fills must print (white text on a dropped background would vanish); rows and totals stay whole. */
@media print {
  .paper { overflow:visible; border:0; border-radius:0; box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .paper.layout-overlay .lo-float, .paper.layout-overlay .lo-totcard { box-shadow:0 0 0 1px var(--border); }
  .paper.layout-overlay .lo-band { border-radius:var(--r-lg); box-shadow:none; }
  .paper .doc-table tr, .paper .doc-totals, .paper .lo-totcard, .paper .doc-payrow, .paper .doc-foot > * { break-inside:avoid; }
  .paper .table-scroll { overflow:visible; }
}