/* print-r2-cards.css - the style r2-cards: direction ฉ "soft cards", the owner's pick of 2026-10-09 (N-127) and the default of a new
   company. Rounded light-grey cards for the seller, the buyer, the facts, the amount in words, the totals and the signatures; a big total
   in the company colour; the document title top right on ONE line. Ported from line G's mockup (claude/storefront
   docs/design/doc-redesign-2026-10-09/f-cards.css + base.css) onto the engine's own p-* markup (paper.mjs / paper-forms.mjs /
   paper-parts.mjs) - line C's phase-2 note §1.1 (E-1). What every r2 style shares (the owner's fixes, min-width:0, the hooks' layout) is
   print-r2.css; this file is the look only, every rule under .paper[data-theme=r2-cards], loaded after print-r2.css.

   The mockups' classes -> the engine's (all three r2 styles):
     .sheet                     .paper                      .doc-head        .p-head            .brand        .p-brand
     .logo / .co-name / .co-en  .p-logo / .p-co-name / .p-co-en            .co-addr .co-tax  .p-co-addr
     .doc-title / h1            .p-tb / .p-title            .title-en        .p-en              .chip         .p-chip
     .parties                   .p-parties                  .party           .p-party (.p-infocard--wide)
     .lbl / .p-name / .p-addr   .p-party .k / b / p         .meta dl         .p-infocard--meta  div dt dd     .p-mrow .k .v
     .meta .sub (credit term)   .p-msub   (hook C-2)        .items           .p-items           .items .n     td.c
     .summary                   .p-summary                  .sum-left/.left  .p-note            .words        .p-wordsbox
     .pay                       .p-pay                      .totals          .p-totals > .p-sum .totals .grand .p-band (.lab .amt)
     .payment                   .p-payrow (hook C-2)        .pay-title       .p-paytitle        .pay-fields   .p-payfields (dl > div > dt dd)
     .qr / .qr-box / .qr-cap    .p-payqr / its svg / figcaption             .payment .paid    .p-payrow.is-paid
     .notes / .legal            .p-notes / .p-legal         .ack             .p-ack             .signs>div    .p-signs>div
     .signs .line               .p-signs>div::before        .doc-foot        .p-foot            .doc-title h1 line 2  .p-title-2 (hook C-2)
     .en (a label's English)    .p-len   (hook C-2, beside .p-lth)
   The company colour is --accent as sheet() sets it: clampAccent() keeps it >= 5.5:1 on white, which leaves it >= 4.5:1 on --card
   (test/print-r2-cards.test.mjs), so the big total and the chip read on a light company colour too and print dark on a mono laser.
   The mockup's 800 total is 700 here: the vendored Inter and Noto Sans Thai go to 700 (vendor/fonts.css), nothing is fetched at print time. */

/* ---------- tokens ---------- */
.paper[data-theme=r2-cards]{
  --ink:#1a2230;--muted:#55606e;--card:#f2f4f7;--hair:#e4e8ed;--rule:#d5dae1;--side:14mm;
  --font:'Noto Sans Thai','Inter',sans-serif;
  padding:12mm var(--side) 13mm;font:400 calc(9.5pt*var(--fs))/1.45 var(--font);color:var(--ink)
}

/* ---------- header: the seller's card, the title top right on one line ---------- */
.paper[data-theme=r2-cards] .p-head{gap:6mm;align-items:stretch;padding-bottom:0;border-bottom:0;margin-bottom:0}
.paper[data-theme=r2-cards] .p-brand{gap:4mm;align-items:center;background:var(--card);border-radius:4mm;padding:3mm 4mm}
.paper[data-theme=r2-cards] .p-co-name{font:700 12pt/1.3 var(--font)}
.paper[data-theme=r2-cards] .p-co-en{font:600 8pt/1.4 'Inter',sans-serif;letter-spacing:.06em}
.paper[data-theme=r2-cards] .p-co-addr{font-size:8pt;line-height:1.38;margin-top:.6mm}
.paper[data-theme=r2-cards] .p-tb{text-align:right;align-self:center}
.paper[data-theme=r2-cards] .p-title{font:700 var(--title-pt,var(--title-from,19pt))/1.2 var(--font);color:var(--ink)}
.paper[data-theme=r2-cards] .p-en{font:600 8pt/1 'Inter',sans-serif;letter-spacing:.14em;margin-top:1mm}
.paper[data-theme=r2-cards] .p-chip{margin:2.5mm 0 0;border:0;background:var(--wash);color:var(--accent);padding:.6mm 3.5mm;font:700 8.5pt/1.5 var(--font)}

/* ---------- the buyer and the facts ---------- */
.paper[data-theme=r2-cards] .p-parties{gap:4mm;margin:3mm 0 0}
.paper[data-theme=r2-cards] .p-infocard,.paper[data-theme=r2-cards] .p-party{background:var(--card);border:0;border-radius:4mm;padding:3.5mm 4.5mm}
.paper[data-theme=r2-cards] .p-party .k,.paper[data-theme=r2-cards] .p-cardlabel{font:600 8pt/1.3 var(--font);color:var(--muted);letter-spacing:0}
.paper[data-theme=r2-cards] .p-party b{font:700 11pt/1.4 var(--font);margin-top:.6mm}
.paper[data-theme=r2-cards] .p-party p{font-size:8.5pt;color:var(--ink)}
.paper[data-theme=r2-cards] .p-infocard--meta{width:88mm;gap:1mm}
.paper[data-theme=r2-cards] .p-infocard--meta .p-mrow{font-size:8.5pt}

/* ---------- items ---------- */
.paper[data-theme=r2-cards] .p-items{margin-top:3mm}
.paper[data-theme=r2-cards] .p-items th{padding:0 2mm 2mm;background:none;border-top:0;border-bottom:.3mm solid var(--hair);font:600 8pt/1.3 var(--font);color:var(--muted)}
.paper[data-theme=r2-cards] .p-items td{padding:1.1mm 2mm;border-bottom:.2mm solid var(--hair)}
.paper[data-theme=r2-cards] .p-items td.c{color:var(--muted)}
.paper[data-theme=r2-cards] .p-items td b{font-weight:600}
.paper[data-theme=r2-cards] .p-items tr.p-carry td{background:var(--card);border-bottom:.3mm solid var(--hair)}

/* ---------- summary: words and payment on the left, the totals card on the right ---------- */
.paper[data-theme=r2-cards] .p-summary{grid-template-columns:minmax(0,1fr) 78mm;gap:6mm;margin-top:3mm;align-items:start}
.paper[data-theme=r2-cards] .p-note{display:grid;gap:2.5mm;align-content:start;font-size:8.5pt;color:var(--ink)}
.paper[data-theme=r2-cards] .p-note>*{margin:0}
.paper[data-theme=r2-cards] .p-wordsbox,.paper[data-theme=r2-cards] .p-reasonbox{border:0;background:var(--card);border-radius:4mm;padding:3mm 4mm;margin:0}
.paper[data-theme=r2-cards] .p-wordsbox .k,.paper[data-theme=r2-cards] .p-reasonbox .k{font:600 8pt/1.3 var(--font)}
.paper[data-theme=r2-cards] .p-wordsbox b{font:700 10pt/1.4 var(--font)}
.paper[data-theme=r2-cards] .p-pay{font-size:8.5pt;line-height:1.55;padding:3mm 4mm}
.paper[data-theme=r2-cards] .p-totals{background:var(--card);border-radius:4mm;padding:2.5mm 4mm;font-size:9pt}
.paper[data-theme=r2-cards] .p-sum .l,.paper[data-theme=r2-cards] .p-sum .n{padding:.6mm 0}
/* the grand total: a rule over it and the figure big in the company colour; a figure too wide for the card drops under its label */
.paper[data-theme=r2-cards] .p-band{margin-top:1.5mm;background:none;color:var(--ink);border-radius:0;border-top:.3mm solid var(--rule);padding:3mm 0 0;align-items:flex-end;flex-wrap:wrap;gap:1mm 3mm}
.paper[data-theme=r2-cards] .p-band .lab{font:700 10pt/1.2 var(--font)}
.paper[data-theme=r2-cards] .p-band .lab small{font:600 8pt/1.3 'Inter',sans-serif;letter-spacing:.08em;color:var(--muted);opacity:1}
.paper[data-theme=r2-cards] .p-band .amt{margin-left:auto;font:700 20pt/1.1 'Inter','Noto Sans Thai',sans-serif;color:var(--accent)}

/* ---------- payment row: a card of its own ---------- */
.paper[data-theme=r2-cards] .p-payrow{margin-top:2.5mm;padding:2.5mm 4mm;background:var(--card);border-radius:4mm}
.paper[data-theme=r2-cards] .p-payrow.is-paid{background:#e7f6ee;color:#15532f}

/* ---------- notes, acknowledgement, signatures ---------- */
.paper[data-theme=r2-cards] .p-notes{margin-top:3.5mm;font-size:8.5pt;color:var(--ink)}
.paper[data-theme=r2-cards] .p-legal{font-style:normal;font-size:8pt;color:var(--muted)}
.paper[data-theme=r2-cards] .p-ack{margin-top:3mm;padding:2.2mm 4mm;background:var(--card);border:0;border-radius:4mm;font:400 8.5pt/1.45 var(--font);text-align:left}
/* each signature is a card: the pen's room and its line on top, the role under it */
.paper[data-theme=r2-cards] .p-signs{gap:6mm;margin-top:4mm}
.paper[data-theme=r2-cards] .p-signs>div{background:var(--card);border:0;border-radius:4mm;padding:2mm 4mm 2.5mm;font:600 8.5pt/1.4 var(--font);color:var(--ink)}
.paper[data-theme=r2-cards] .p-signs>div::before{content:"";display:block;height:8mm;border-bottom:.25mm solid var(--ink);margin-bottom:1.2mm}

/* ---------- ink saver (.is-eco): every card an outline, no fills; the total keeps its colour ---------- */
/* an outline, not a border: the same box size either way, so a page breaks at the same row with and without the saver */
.paper[data-theme=r2-cards].is-eco :is(.p-brand,.p-party,.p-infocard,.p-wordsbox,.p-reasonbox,.p-totals,.p-ack,.p-signs>div,.p-payrow){background:none;outline:.3mm solid var(--rule);outline-offset:-.3mm}
.paper[data-theme=r2-cards].is-eco .p-chip{background:none;outline:.3mm solid var(--accent);outline-offset:-.3mm}
.paper[data-theme=r2-cards].is-eco .p-band{border-top:.3mm solid var(--rule);border-bottom:0;color:var(--ink)}
.paper[data-theme=r2-cards].is-eco .p-items tr.p-carry td{background:none}
.paper[data-theme=r2-cards].is-eco .p-payrow.is-paid{color:var(--ink)}