/* it-rm-v3.css: the receipt maker's editor shell (25 Sep 2026).
   Built to the owner's clickable wireframe (InvoiceTools_Clickable_Editor.html) the way the
   invoice generator was (it-gen-v3.css): a sticky toolbar, an icon rail on the left, the live
   receipt always visible in the middle, and one slide-out panel on the right that is closed when
   the page lands. The receipt itself (#paper and the .p-* rules in the page's pgStyle) keeps the
   page's own styles; nothing here changes what is exported or printed.

   Colours are the site's, never the wireframe's teal: ink #0B1419, CTA orange #C04E06 (hover
   #A94405) for every selected or active state, the warm tint #FFF3EA behind it, grey lines.
   The only green in the editor chrome is Review & Export and Download image, which
   it-green-actions-v1.css paints through [data-it-action="download"] and #pngBtn: green means
   one thing on every tool, this is how you get your document. Nothing here sets it.

   A receipt has three panels, not the wireframe's five: it has one layout (no Templates), and
   everything typed lives on the receipt itself (no Details form). Style, Payment and Fields are
   the settings that are not a single typed value with one place on the document. */

/* pBiz is a field target: render() replaces its whole innerHTML on every keystroke commit
   (setText), so pBizDetail can no longer live nested inside it the way the old wizard markup had
   it (that nesting made the address disappear the first time the page rendered at all, since the
   engine's own render() wiped it out along with the placeholder text). Restyled here as a sibling
   to match the old .p-biz span look exactly. */
#pBizDetail{display:block;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;color:#6E675D;font-weight:500;margin-top:5px;white-space:pre-wrap;line-height:1.5}

/* Editor chrome tokens (25 Sep 2026): the same values, verbatim, as it-gen-v3.css, it-ce-v3.css,
   it-po-v3.css and it-wo-v3.css under their own prefixes; change one, change all five. */
.rce,.rce-fin{
  --rce-text:#0B1419; --rce-text2:#253640; --rce-muted:#66727a; --rce-muted2:#6c7883;
  --rce-faint:#85949a; --rce-eyebrow:#73818b;
  --rce-line:#E3E8EB; --rce-line2:#D8DFE4; --rce-line3:#E8ECEF; --rce-input:#CFD8DE;
  --rce-accent:#C04E06; --rce-accent-hover:#A94405; --rce-accent-bg:#FFF3EA; --rce-accent-soft:#FFF8F2;
  --rce-accent-line:#F3CDB0; --rce-hover:#F1F4F6; --rce-hover2:#E8EDF0; --rce-focus:rgba(242,98,7,.3);
  --rce-canvas:#EEF1F4; --rce-canvas-bg:linear-gradient(180deg,#F6F8FA 0,#EDF0F3 360px); --rce-danger:#9e443e;
  --rce-ghost:#FFF8F2; --rce-ghost-line:#F3CDB0; --rce-ghost-hover:#FFF3EA; --rce-ghost-hover-line:#E8A26F; --rce-ghost-disc:#FFE7D6;
  --rce-ring:0 0 0 3px rgba(242,98,7,.22);
  --rce-sh-1:0 1px 2px rgba(11,20,25,.06);
  --rce-sh-2:0 4px 14px -2px rgba(11,20,25,.12);
  --rce-sh-3:0 14px 36px -8px rgba(11,20,25,.18);
  --rce-sh-paper:0 0 0 1px rgba(11,20,25,.05),0 2px 4px rgba(11,20,25,.04),0 24px 48px -20px rgba(11,20,25,.28);
  --rce-sh-bar:0 1px 0 rgba(11,20,25,.04),0 10px 24px -18px rgba(11,20,25,.18);
  --rce-sh-modal:0 0 0 1px rgba(11,20,25,.06),0 32px 80px -20px rgba(11,20,25,.45);
  --rce-r-sm:8px; --rce-r-md:10px; --rce-r-lg:12px; --rce-r-xl:16px; --rce-r-modal:20px;
  --rce-hdr:65px; --rce-topbar:76px;
  --rce-font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--rce-text); font-family:var(--rce-font); font-size:16px; line-height:1.4;
}
.rce *,.rce *::before,.rce *::after{box-sizing:border-box}
/* :where() keeps the reset at class weight so a later .rce-rail-btn font-size wins as written */
.rce :where(button){font:inherit;cursor:pointer;color:inherit}
.rce :where(button):disabled{cursor:not-allowed;opacity:.5}
.rce-plain:disabled{opacity:1;color:#AEB7BC;background:#F6F8FA;border-color:#E3E8EB}
.rce button:focus-visible,.rce input:focus-visible,.rce select:focus-visible,.rce textarea:focus-visible,
.rce [contenteditable]:focus-visible{outline:3px solid #F26207;outline-offset:2px}
.rce svg{display:block}
.rce .rce-ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* The integration bridge: the inputs the shared scripts write into and read from (AI fill, the
   dashboard handover, tracked send, account fill, the tips drawer) keyed by the ids this page
   has always had. It mirrors the receipt's state and is never shown; people edit the receipt. */
.rce-bridge{display:none!important}

/* the page title above the editor, as on the invoice generator */
.rc-h1wrap{max-width:820px;margin:0 auto;padding:34px 24px 22px;text-align:center}
.rc-h1wrap .eyebrow{justify-content:center;margin-bottom:12px}
.rc-h1wrap h1{font-size:clamp(30px,4.2vw,46px);max-width:none;line-height:1.1}
.rc-h1wrap h1 em{font-style:italic;color:#AC4D06}
.rc-h1wrap .ans{margin:12px auto 0;max-width:62ch;font-size:16px;line-height:1.55;color:#4A443C}
@media (max-width:1023px){.rc-h1wrap{padding:22px 16px 16px}}
@media (max-width:520px){.rc-h1wrap{padding:18px 16px 12px}.rc-h1wrap .ans{font-size:14.5px}}

/* ---------------------------------------------------------------- top bar */
.rce-top{
  position:sticky; top:var(--rce-hdr); z-index:40;
  display:flex; align-items:center; gap:14px; height:var(--rce-topbar); padding:0 24px;
  background:#fff; border-bottom:1px solid var(--rce-line); box-shadow:var(--rce-sh-bar);
}
.rce-word{display:flex;align-items:center;gap:9px;font-weight:800;font-size:22px;letter-spacing:-.8px;white-space:nowrap;color:var(--rce-text)}
.rce-word .rce-ic{width:24px;height:24px;color:#F26207}
.rce-sep{border-left:1px solid var(--rce-line2);height:28px;margin:0 6px}
/* the trade picker: one dropdown in the toolbar, the same control the invoice generator has
   (.ige-trade in it-gen-v3.css), with the trade mark it-trade-swatch-v1.js paints beside it */
.rce-trade{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;color:var(--rce-accent)}
.rce-word,.rce-primary,.rce-zoom{flex:0 0 auto}
.rce-selwrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.rce-top select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;color:#1d2b35;background:#fff;border:1px solid var(--rce-line2);
  border-radius:10px;max-width:220px;padding:10px 34px 10px 12px;font-size:15px;line-height:1.4;
  min-height:45px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-family:var(--rce-font);
}
.rce-selwrap::after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:1.8px solid #5c6a72;border-bottom:1.8px solid #5c6a72;transform:rotate(45deg);pointer-events:none}
/* the page's own sitewide select{} rule (!important) draws a second chevron via background-image */
.rce-selwrap select{background-image:none!important}
.it-tsw{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#ADB5BD,#495057);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 1px 2px rgba(11,20,25,.16)}
.it-tsw svg{width:18px;height:18px;display:block}
.rce-plain{color:#4A5860;background:#F6F8FA;border:1px solid #B9C5CC;padding:8px;border-radius:var(--rce-r-sm);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;transition:background-color .15s,color .15s}
.rce-plain:hover{background:var(--rce-hover);color:var(--rce-accent)}
.rce-spacer{flex:1}
.rce-zoom{display:flex;align-items:center;height:42px;background:#fff;border:1px solid var(--rce-line2);border-radius:var(--rce-r-md);gap:1px;box-shadow:var(--rce-sh-1)}
.rce-zoom button{color:#45545f;background:none;border:0;width:34px;height:40px;font-size:21px;line-height:1;border-radius:8px}
.rce-zoom button.rce-zoom-mode{color:#6f7d83;width:auto;padding:0 6px;font-size:11px;font-weight:600}
.rce-zoom button.rce-zoom-mode[aria-pressed="true"]{color:var(--rce-accent)}
.rce-zoom button:hover{color:var(--rce-accent)}
.rce-zoom span{text-align:center;min-width:48px;font-size:14px;font-weight:600}
/* Review & Export: the shape is set here, the colour comes from it-green-actions-v1.css */
.rce-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  background:var(--rce-accent);color:#fff;border:1px solid var(--rce-accent);border-radius:10px;padding:12px 20px;font-weight:700;font-size:15px;
}
.rce-primary:hover{background:var(--rce-accent-hover);border-color:var(--rce-accent-hover)}
.rce-primary .rce-ic{width:18px;height:18px}
/* The toolbar's Review & export carries id reviewBtn, which it-green-actions-v1.css does not
   list, so it was the one orange toolbar button among six green ones (25 Sep 2026). Painted
   here from the shared green variable, so the colour still has one definition. */
.rce-top #reviewBtn.rce-primary{background:var(--it-action-green,#047857);border-color:var(--it-action-green,#047857);color:#fff}
.rce-top #reviewBtn.rce-primary:hover{background:var(--it-action-green-dark,#036249);border-color:var(--it-action-green-dark,#036249)}
/* "Switch to" (28 Sep 2026): only ever shown on a locked-template arrival (?template=&trade=
   both present, same trigger as invoice-generator's .ige-locked-trade), never on a plain visit.
   Page-scoped rather than reusing it-gen-v3.css's .ige-mode, since that file is not loaded here. */
.rce-mode{position:relative;flex:0 0 auto;display:none}
.rce-locked-trade .rce-mode{display:flex}
.rce-locked-trade [data-tab="templates"]{display:none!important}
.rce-locked-trade .rce-trade{display:none!important}
.rce-mode-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:210px;
  background:#fff;border:1px solid var(--rce-line2);border-radius:var(--rce-r-md);
  box-shadow:var(--rce-sh-2);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:40;
}
.rce-mode.open .rce-mode-menu{opacity:1;visibility:visible;transform:translateY(0)}
.rce-mode.open .rce-mode-btn{background:var(--rce-hover);color:var(--rce-accent)}
.rce-mode-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8b969c;padding:6px 10px 4px}
.rce-mode-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;background:none;border:0;color:#2b3438;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.rce-mode-item:hover{background:var(--rce-hover)}
.rce-mode-item.on{color:var(--rce-accent);background:var(--rce-hover)}
.rce-mode-item svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rce-mode-item .rce-mode-check{margin-left:auto;width:16px;height:16px;flex:0 0 auto;stroke-width:2.4}
@media (max-width:900px){
  /* 30 Sep 2026: this button sits at the LEFT edge of the toolbar, so right-anchoring here
     pushed the menu mostly off-screen on phones - same bug as it-gen-v3.css's .ige-mode-menu,
     reported live by the owner. left:0 (the non-mobile default) is correct at every width. */
}

/* -------------------------------------------------------------- workspace */
.rce-work{display:grid;grid-template-columns:116px minmax(0,1fr) 376px;align-items:start;min-height:60vh;margin:0;padding:0;max-width:none}
@media (min-width:1051px){
  .rce[data-panel-open="0"] .rce-work{grid-template-columns:116px minmax(0,1fr)}
  .rce[data-panel-open="0"] .rce-panel{display:none}
}
.rce-rail{
  position:sticky; top:calc(var(--rce-hdr) + var(--rce-topbar)); align-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:18px 8px;
  border-right:1px solid var(--rce-line3);min-height:calc(100vh - var(--rce-hdr) - var(--rce-topbar));background:#fff;
}
.rce-rail-btn{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:80px;
  color:#54616d;background:none;border:0;border-radius:12px;font-size:13px;position:relative;
}
.rce-rail-btn .rce-ic{width:23px;height:23px}
.rce-rail-btn{transition:background-color .15s,color .15s}
.rce-rail-btn:hover{background:var(--rce-hover);color:var(--rce-text)}
.rce-rail-btn[aria-pressed="true"]{color:var(--rce-accent);background:var(--rce-accent-bg);font-weight:700}
.rce-rail-btn[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--rce-accent)}
.rce-rail-foot{margin-top:auto;padding:12px 4px 12px;text-align:center;color:#97a2a7;font-size:11px;line-height:1.4}
.rce-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#F26207;margin-right:4px;vertical-align:1px}

/* the document column: the page scrolls, never a box around the paper */
.rce-canvas{background:var(--rce-canvas-bg) var(--rce-canvas);padding:20px 34px 70px;min-width:0}
.rce-canvas-label{display:flex;justify-content:space-between;gap:12px;max-width:690px;margin:0 auto 13px;color:#6B7A83;font-size:12px}
.rce-canvas-label span{display:flex;align-items:center;gap:7px}
.rce-canvas-label .rce-ic{width:17px;height:17px}
.rce-pv-scroll{position:relative}
.rce-pv-sizer{position:relative;margin:0 auto;overflow:visible}
.rce-pv-inner{position:absolute;left:50%;top:0;width:690px;transform-origin:top center;transform:translateX(-50%)}
.rce-pv-inner:not([style*="scale"]){position:relative;left:auto;transform:none;margin:0 auto;max-width:100%}
.rce-canvas #paper{margin:0;width:100%}
/* one paper shadow on every generator; the page's own .paper border stays 1px (transparent) so
   the sheet keeps its exact width, the shadow's first layer draws the hairline. Export and
   print copy #paper on their own and never see it. */
.rce-canvas #paper.paper{border-radius:4px;border-color:transparent;box-shadow:var(--rce-sh-paper)}

/* inline editing on the receipt. These affordances live only where the editor's own column is
   an ancestor; every export and print copies the sheet on its own, so they never print. */
.rce-canvas #paper [data-f]{border-radius:3px;transition:background-color .12s}
.rce-canvas #paper [data-f]:hover{background:var(--rce-accent-bg);cursor:text;box-shadow:0 0 0 3px var(--rce-accent-bg)}
.rce-canvas #paper [data-f].rce-editing{background:var(--rce-accent-soft);outline:2px solid var(--rce-accent);outline-offset:1px;cursor:text;box-shadow:none;min-width:2ch;white-space:pre-wrap}
.rce-canvas #paper [data-f].rce-editing:hover{background:var(--rce-accent-soft)}
.rce-canvas #paper [data-open]:hover{cursor:pointer;background:var(--rce-accent-bg);box-shadow:0 0 0 3px var(--rce-accent-bg);border-radius:3px}
.rce-canvas #paper .pill[data-open]:hover{box-shadow:none}
.rce-empty{display:none}
.rce-canvas #paper .rce-empty{display:inline;color:#6B7280;font-style:italic;font-weight:400}
.rce-canvas #paper .rce-empty::before{content:attr(data-ph)}
.rce-canvas #paper .rce-empty.rce-editing::before{content:none}
.rce-canvas #paper .rce-empty.rce-editing{font-style:normal;color:inherit}
/* the "click the amount above" part-payment prompt is an instruction, not a placeholder: it
   needs to actually read at a glance for a first-time user, so it gets its own darker, upright
   style instead of the faint italic placeholder gray used for optional empty fields. */
.rce-canvas #paper .rce-part-hint{color:#6b7280;font-style:normal;font-weight:600}
/* editor-only pieces inside the sheet (add a line, the zero rows, the add chips) */
.rce-ui{display:none!important}
.rce-canvas #paper .rce-ui{display:flex!important}
.rce-canvas #paper .p-sum .rce-zero{display:flex!important;color:#6B7280}
.rce-canvas #paper .p-line .rce-q1{display:block!important;color:#6B7280}
#paper .p-sum .rce-zero,#paper .p-line .rce-q1{display:none}
/* Split payment boxes (28 Sep 2026, added for tmpl-rm30-split-tender but usable by any design):
   #pSplit only ever renders when payState is "split" (site/assets/b/19a0710cb7a70f48.js). A
   neutral, self-contained base style so switching a plain design to split payment never looks
   unstyled; any per-design tmpl-* block can still override this with its own !important rules,
   same convention as every other .p-* base/override pair on this page. */
#paper .p-split{display:flex;gap:10px;margin:0 0 14px}
#paper .p-split-box{flex:1 1 0;padding:10px 12px;background:#F7F7F5;border-left:3px solid #6B7280;border-radius:4px}
#paper .p-split-box .rce-num-f{display:block;font-size:10px;letter-spacing:.08em;font-weight:700;text-transform:uppercase;color:#6B7280;margin-bottom:3px}
#paper .p-split-box b{font-size:18px;font-weight:700;color:inherit}
/* the "ghost" affordance: every editor-only add/edit control on the document (add a line, add
   discount, add your logo, add a signature) is the same object on every generator: warm tint
   fill, solid hairline in the tint's own line colour, orange label, the icon on a small disc,
   and a real hover (deeper tint, darker line, a lift). Never dashed: that read as unfinished. */
.rce-canvas #paper .rce-addbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--rce-accent);background:var(--rce-ghost);
  border:1px solid var(--rce-ghost-line);border-radius:var(--rce-r-md);padding:9px 12px;margin-top:8px;font-weight:700;font-size:13px;font-family:var(--rce-font);cursor:pointer;
  box-shadow:var(--rce-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.rce-canvas #paper .rce-addbtn:hover{background:var(--rce-ghost-hover);border-color:var(--rce-ghost-hover-line);box-shadow:var(--rce-sh-2)}
.rce-canvas #paper .rce-addbtn .rce-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--rce-ghost-disc);stroke-width:2.2}
.rce-canvas #paper .rce-chip{
  display:inline-flex;align-items:center;gap:6px;color:var(--rce-accent);background:var(--rce-ghost);border:1px solid var(--rce-ghost-line);
  border-radius:999px;padding:5px 12px 5px 8px;font-size:12px;font-weight:600;font-family:var(--rce-font);cursor:pointer;line-height:1.5;
  box-shadow:var(--rce-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.rce-canvas #paper .rce-chip:hover{background:var(--rce-ghost-hover);border-color:var(--rce-ghost-hover-line);box-shadow:var(--rce-sh-2)}
.rce-canvas #paper .rce-chip .rce-ic{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--rce-ghost-disc);stroke-width:2.2}
.rce-canvas #paper .rce-addlogo{width:132px;min-height:56px;margin:0 0 12px;justify-content:center;border-radius:var(--rce-r-md);padding:8px 12px}
.rce-canvas #paper .rce-addsig{margin:16px 0 0 auto}
.rce-canvas #paper .p-line.rce-row-on{background:var(--rce-accent-soft);box-shadow:0 0 0 4px var(--rce-accent-soft)}
/* row actions float over the sheet, outside the exported node */
.rce-ovl{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:8}
.rce-rowacts{position:absolute;display:none;gap:2px;pointer-events:auto;background:#fff;border:1px solid var(--rce-line2);border-radius:var(--rce-r-sm);box-shadow:var(--rce-sh-2);padding:3px;transform-origin:0 0}
.rce-rowacts[data-on="1"]{display:flex}
.rce-rowacts button{color:#53646d;background:none;border:0;padding:4px;border-radius:6px;display:inline-flex;min-height:0!important;height:auto!important;transition:background-color .15s,color .15s}
.rce-rowacts button:hover{background:var(--rce-accent-bg);color:var(--rce-accent)}
.rce-rowacts button .rce-ic{width:18px;height:18px}
/* The per-line remove control is a single button (class rce-rowacts, "Remove line") that the
   page places absolutely inside each .p-line with no offset, so it sat on top of the first
   letters of the description (owner screenshot, 25 Sep 2026). The row becomes its containing
   block and the button moves to the paper's right gutter as the same 24px circle the field
   clear chip and the purchase order's remove button use; the row's own text and figures never
   move, and the export copies #paper without the editor column, so nothing reaches the file. */
.rce-canvas #paper .p-line{position:relative}
.rce-canvas #paper .p-line > button.rce-rowacts{
  left:auto;right:3px;top:50%;transform:translateY(-50%);width:24px;height:24px!important;min-height:0!important;padding:0;
  align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--rce-line2);box-shadow:0 1px 3px rgba(11,20,25,.12);
  color:#53646d;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;
}
.rce-canvas #paper .p-line > button.rce-rowacts:hover{color:var(--rce-danger);border-color:#E6B9B5;background:#FFF5F4}
.rce-canvas #paper .p-line > button.rce-rowacts .rce-ic,.rce-canvas #paper .p-line > button.rce-rowacts svg{width:14px;height:14px}
@media (pointer:coarse){
  .rce-canvas #paper .p-line > button.rce-rowacts{width:30px;height:30px!important;right:0}
  .rce-canvas #paper .p-line > button.rce-rowacts .rce-ic,.rce-canvas #paper .p-line > button.rce-rowacts svg{width:16px;height:16px}
}
/* the clear chip beside an optional field: 24px, icon only, past the end of the text */
.rce-fieldclear{
  position:absolute;display:none;align-items:center;justify-content:center;pointer-events:auto;width:24px;height:24px;padding:0;
  border-radius:50%;background:#fff;border:1px solid var(--rce-line2);box-shadow:0 1px 3px rgba(11,20,25,.12);color:#53646d;cursor:pointer;transform-origin:0 0;
  transition:background-color .15s,border-color .15s,color .15s;
}
.rce-fieldclear[data-on="1"]{display:inline-flex}
.rce-fieldclear .rce-ic{width:14px;height:14px}
.rce-fieldclear:hover{color:var(--rce-accent);border-color:var(--rce-accent-line);background:var(--rce-accent-bg)}
.rce-ovl .rce-fieldclear{min-height:0!important;height:24px!important;width:24px!important}
@media (pointer:coarse){.rce-ovl .rce-fieldclear{width:30px!important;height:30px!important}.rce-fieldclear .rce-ic{width:16px;height:16px}}
/* a small anchored editor for the date and the paid-by method */
.rce-pop{
  position:absolute;z-index:9;pointer-events:auto;background:#fff;border:1px solid var(--rce-line2);border-radius:var(--rce-r-lg);
  padding:12px;box-shadow:var(--rce-sh-3);display:none;min-width:200px;max-width:280px;font-family:var(--rce-font);font-size:13px;color:var(--rce-text);transform-origin:0 0;
}
.rce-pop[data-on="1"]{display:block}
.rce-pop label{display:block;font-weight:700;font-size:12px;margin-bottom:6px}
.rce-pop input{width:100%;border:1px solid var(--rce-input);border-radius:var(--rce-r-sm);padding:9px 10px;font:inherit;color:inherit;background:#fff;min-height:0!important}
.rce-pop input:focus{border-color:var(--rce-accent);outline:none;box-shadow:var(--rce-ring)}
.rce-pop .rce-pop-row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.rce-pop .rce-pop-row button{border-radius:var(--rce-r-sm);padding:7px 12px;font-weight:700;font-size:12px;border:1px solid var(--rce-line2);background:#fff;min-height:0!important}
.rce-pop .rce-pop-row button:hover{background:var(--rce-hover)}
.rce-pop .rce-pop-row button.rce-pop-ok{background:var(--rce-accent);border-color:var(--rce-accent);color:#fff}
.rce-pop .rce-pop-row button.rce-pop-ok:hover{background:var(--rce-accent-hover);border-color:var(--rce-accent-hover)}

/* ------------------------------------------------------------------ panel */
.rce-panel{
  position:sticky; top:calc(var(--rce-hdr) + var(--rce-topbar)); align-self:start;
  background:#fff;border-left:1px solid var(--rce-line);padding:27px 28px 45px;
  max-height:calc(100vh - var(--rce-hdr) - var(--rce-topbar));overflow-y:auto;overscroll-behavior:contain;min-width:0;
}
.rce-panel-x{display:none;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--rce-line2);background:#fff;color:#53646d;align-items:center;justify-content:center;z-index:2;box-shadow:var(--rce-sh-1)}
.rce-panel-x:hover{background:var(--rce-hover);color:var(--rce-text)}
.rce-panel-x .rce-ic{width:16px;height:16px}
.rce-pane{display:none}
.rce-pane[data-on="1"]{display:block}
.rce-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--rce-eyebrow)}
.rce-pane h2{margin:9px 0 5px;font-size:24px;font-weight:800;letter-spacing:-.55px;line-height:1.35;color:var(--rce-text);font-family:var(--rce-font)}
.rce-pane-lead{color:var(--rce-muted2);margin:0;font-size:13px;line-height:1.5}
.rce-pane section{border-top:1px solid var(--rce-line3);padding:18px 0;margin-top:18px}
.rce-pane section+section{margin-top:0}
.rce-pane section h3{margin:0 0 13px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--rce-text);font-family:var(--rce-font)}
.rce-lab{display:block;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--rce-text)}
.rce-lab span{color:#8c999f;font-weight:400}
.rce-pane .rce-in,.rce-pane .rce-sel{
  display:block;width:100%;color:#273842;background:#fff;border:1px solid var(--rce-input);border-radius:var(--rce-r-md);
  margin:0 0 17px;padding:12px 13px;font:inherit;font-size:15px;line-height:1.35;font-family:var(--rce-font);transition:border-color .15s,box-shadow .15s;
}
.rce-pane .rce-in::placeholder{color:#a1adb2}
.rce-pane .rce-in:hover,.rce-pane .rce-sel:hover{border-color:#B9C5CC}
.rce-pane .rce-in:focus,.rce-pane .rce-sel:focus{border-color:var(--rce-accent);outline:none;box-shadow:var(--rce-ring)}
.rce-pane .rce-in.rce-bad{border-color:var(--rce-danger)}
.rce-selwrap.rce-selwrap-p{display:block;position:relative}
.rce-selwrap.rce-selwrap-p .rce-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;background-image:none!important}
.rce-selwrap.rce-selwrap-p::after{top:24px;margin-top:0}
.rce-pre{display:flex;align-items:stretch;margin:0 0 17px}
.rce-pre span{display:flex;align-items:center;padding:0 10px;border:1px solid var(--rce-input);border-right:0;border-radius:var(--rce-r-md) 0 0 var(--rce-r-md);background:var(--rce-hover);color:#66727a;font-size:13px;white-space:nowrap}
.rce-pre .rce-in{margin:0;border-radius:0 var(--rce-r-md) var(--rce-r-md) 0;min-width:0}
.rce-pre span[hidden]+.rce-in{border-radius:var(--rce-r-md)}
.rce-help{color:var(--rce-faint);margin:-8px 0 12px;font-size:11px;line-height:1.5}
.rce-help.rce-help-top{margin:9px 0}
.rce-err{color:var(--rce-danger);font-size:12px;font-weight:600;margin:-8px 0 12px;display:none}
.rce-err.on{display:block}
.rce-link{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 14px;background:var(--rce-hover);border:1px solid var(--rce-line2);border-radius:var(--rce-r-md);padding:8px 10px}
.rce-link code{flex:1;min-width:0;font-size:11.5px;color:var(--rce-text2);word-break:break-all}
.rce-switch{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 0;font-size:13px;cursor:pointer;color:var(--rce-text)}
.rce-switch span{flex:1}
.rce-switch small{display:block;color:#8b989d;margin-top:3px;font-size:11px}
.rce-switch input{accent-color:var(--rce-accent);flex-shrink:0;width:19px;height:19px;margin:0;cursor:pointer;min-height:0!important}
/* segmented controls sit on a grey track; the chosen segment lifts off it in the warm tint */
.rce-seg{display:flex;background:var(--rce-hover);border:1px solid var(--rce-line2);border-radius:var(--rce-r-md);padding:3px;gap:2px;margin:0 0 14px}
.rce-seg button{flex:1;background:transparent;border:0;border-radius:var(--rce-r-sm);padding:10px;font-size:14px;font-family:var(--rce-font);color:var(--rce-text2);transition:background-color .15s,color .15s}
.rce-seg button:hover{background:var(--rce-hover2)}
.rce-seg button[aria-pressed="true"],.rce-seg button[aria-pressed="true"]{color:var(--rce-accent);background:var(--rce-accent-bg);font-weight:700;box-shadow:var(--rce-sh-1)}
.rce-seg.rce-seg-grid{display:grid;grid-template-columns:1fr 1fr}
/* the swatches are the receipt's own accent, the colour the person picks for their document */
.rce-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.rce .rce-sw{width:31px;height:31px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dce3e6;padding:0;min-height:0!important}
.rce .rce-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--rce-text)}
.rce-sw-custom{position:relative;width:32px;height:32px;border-radius:6px;overflow:hidden;background:conic-gradient(from 180deg,#F08A1D,#E11D6E,#7C3AED,#2A5CE0,#0E9F63,#F08A1D);box-shadow:0 0 0 1px #dce3e6}
.rce-sw-custom input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:0;padding:0}
.rce-sw-custom[data-on="1"]{box-shadow:0 0 0 2px var(--rce-text)}
@media (pointer:coarse){.rce .rce-sw{width:44px;height:44px}.rce-sw-custom{width:44px;height:44px}}
.rce-upload{
  display:block;text-align:center;color:var(--rce-text2);cursor:pointer;background:var(--rce-ghost);border:1px dashed var(--rce-ghost-line);border-radius:var(--rce-r-lg);
  margin:11px 0;padding:15px;font-size:12px;position:relative;transition:background-color .15s,border-color .15s;
}
.rce-upload:hover,.rce-upload.it-drop-over{background:var(--rce-ghost-hover);border-color:var(--rce-ghost-hover-line)}
.rce-upload .rce-ic{display:inline-block;vertical-align:-4px;width:16px;height:16px;margin-right:6px}
.rce-upload img{display:block;max-height:64px;max-width:100%;margin:0 auto 8px;object-fit:contain}
.rce-upload img[hidden]{display:none}
.rce-mini-acts{display:flex;gap:8px;margin:-4px 0 12px;flex-wrap:wrap}
.rce-mini-acts button,.rce-btn3{background:#fff;border:1px solid var(--rce-line2);border-radius:var(--rce-r-sm);padding:8px 12px;font-size:12px;font-weight:700;color:var(--rce-text2);font-family:var(--rce-font);box-shadow:var(--rce-sh-1);transition:background-color .15s,border-color .15s}
.rce-mini-acts button:hover,.rce-btn3:hover{background:var(--rce-hover);border-color:#C9D3D9}
.rce-danger{color:var(--rce-danger)}
.rce-tip{display:flex;align-items:center;gap:9px;color:#7A3403;background:var(--rce-accent-bg);border:1px solid #F8DCC6;border-radius:var(--rce-r-lg);margin-top:20px;padding:13px;font-size:12px;line-height:1.45}
.rce-tip .rce-ic{width:22px;height:22px;flex:0 0 auto}
.rce-tip a{color:inherit;font-weight:700;text-decoration:underline}
.rce-quiet{color:var(--rce-muted2);font-size:12.5px;line-height:1.5;margin:0 0 12px}

/* signature pad, in the Style panel */
.rce-sigpanel{display:none;margin-top:12px}
.rce-sigpanel[data-on="1"]{display:block}
.rce-sigpanel .rce-none{color:var(--rce-faint);font-size:12px;margin:0;line-height:1.5}
.rce #sigPad{display:block;width:100%;height:110px;touch-action:none;background:#fff;border:1px dashed #B9C5CC;border-radius:var(--rce-r-lg);cursor:crosshair}
.rce #sigPad.inked{border-style:solid}
.rce-sigprev{margin:10px 0 0;border:1px solid var(--rce-line3);border-radius:var(--rce-r-lg);background:#fff;padding:10px 12px;display:none}
.rce-sigprev.on{display:block}
.rce .sig-typed{font-family:"Segoe Script","Bradley Hand","Snell Roundhand",cursive;font-size:28px;line-height:1.25;color:#1A1713}

/* the shared payment-methods picker sits inside the Payment pane */
.rce-pane #payMethods{margin-top:6px}
.rce-pane #payMethods .pm-head h3{font-family:var(--rce-font)}

/* ---------------------------------------------------------- review modal */
.rce-fin{position:fixed;inset:0;z-index:2147483000;background:rgba(11,20,25,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;overflow:auto}
.rce-fin[hidden]{display:none}
.rce-fin .rce-review{position:relative;width:min(880px,100%);background:#fff;border-radius:var(--rce-r-modal);padding:32px;box-shadow:var(--rce-sh-modal);color:var(--rce-text);font-family:var(--rce-font);max-height:calc(100vh - 36px);overflow:auto}
.rce-review .rce-fin-x{position:absolute;top:20px;right:20px;width:40px;height:40px;min-height:40px!important;display:inline-flex;align-items:center;justify-content:center;background:var(--rce-hover);border:0;padding:0;border-radius:50%;color:var(--rce-text);cursor:pointer;transition:background-color .15s}
.rce-review .rce-fin-x:hover{background:var(--rce-hover2)}
.rce-review .rce-fin-x .rce-ic{width:20px;height:20px}
.rce-review h3{margin:7px 0;font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.2;font-family:var(--rce-font)}
.rce-review .rce-fin-sub{color:#64737b;font-size:14px;margin:0}
.rce-fin-body{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
.rce-fin-preview{background:var(--rce-canvas-bg) var(--rce-canvas);border:1px solid var(--rce-line);display:grid;place-items:center;padding:22px;border-radius:14px}
.rce-fin-mini{display:flex;flex-direction:column;gap:13px;width:280px;min-height:330px;padding:22px;background:#fff;font-size:12px;border-radius:4px;box-shadow:var(--rce-sh-paper);color:var(--rce-text)}
.rce-fin-mini strong{font-size:16px}
.rce-fin-mini span{color:var(--rce-accent)}
.rce-fin-mini hr{border:0;border-top:1px solid #ddd;width:100%;margin:0}
.rce-fin-mini p{margin:0}
.rce-fin-mini b{color:var(--rce-accent);text-align:right;margin-top:auto;font-size:21px}
.rce-fin-mini small{color:var(--rce-muted);text-align:right;font-size:12px}
.rce-fin-actions h4{margin:5px 0 16px;font-size:18px;font-weight:700}
.rce-fin-checks{list-style:none;margin:0 0 14px;padding:0}
.rce-fin-checks li{display:flex;gap:7px;font-size:13px;margin:0 0 10px;line-height:1.4}
.rce-fin-checks li .rce-ic{width:20px;height:20px;flex:0 0 auto}
.rce-fin-checks li.valid{color:var(--rce-text2)}
.rce-fin-checks li.warn{color:#a36320}
.rce-fin-checks li button{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer;text-align:left;min-height:0!important}
/* the export grid: Download image is green by the shared sheet, Print secondary by the same
   sheet, the rest are quiet tiles. Send and track is added to this grid by it-send-v1.js. */
.rce-fin .acts.share{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}
.rce-fin .acts.share button,.rce-fin .acts.share a{
  display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--rce-line2);border-radius:var(--rce-r-md);
  padding:9px 8px;font-size:14px;font-weight:600;color:var(--rce-text);font-family:var(--rce-font);min-height:44px;text-decoration:none;cursor:pointer;white-space:normal;text-align:center;
  transition:background-color .15s,border-color .15s;
}
.rce-fin .acts.share button:hover,.rce-fin .acts.share a:hover{background:var(--rce-ghost-hover);border-color:var(--rce-ghost-hover-line)}
.rce-fin .acts.share #pngBtn{grid-column:1/-1;font-size:15px;min-height:48px}
.rce-fin .acts.share .rce-ic{width:18px;height:18px}
.rce-fin .acts.share #btnSendTracked{grid-column:1/-1;color:var(--rce-accent);background:#fff;border:1px solid var(--rce-accent)!important;font-weight:700;margin-top:6px;min-height:48px}
.rce-fin .acts.share #btnSendTracked.its-off{opacity:1;background:#fff!important;color:var(--rce-accent)!important;border-color:var(--rce-accent)!important;filter:none!important}
.rce-fin .acts.share #btnSendTracked:hover{background:var(--rce-accent-bg)}
.rce-fin .acts.share #btnSendTracked .its-dot{display:none}
.rce-fin .its-msg{margin:0 0 8px;font-size:13px;color:#a36320}
.rce-fin .its-result{font-size:13px;line-height:1.5;margin:0 0 10px}
.rce-fin .its-link{display:flex;gap:8px;margin:8px 0}
.rce-fin .its-link input{flex:1;min-width:0;border:1px solid var(--rce-line2);border-radius:var(--rce-r-sm);padding:8px}
.rce-fin .its-link button{border:1px solid var(--rce-line2);border-radius:var(--rce-r-sm);padding:8px 12px;background:#fff;font-weight:700}
.rce-fin .acts-note{display:block;color:#8b999f;font-size:11.5px;line-height:1.5;margin:12px 0 0}
.rce-fin-note{display:block;color:#8b999f;font-size:11px;line-height:1.5;margin-top:8px}

/* toast */
.rce-toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,10px);z-index:9600;background:#0B1419;color:#fff;border-radius:var(--rce-r-lg);padding:12px 18px;font-size:13px;font-family:var(--rce-font);box-shadow:var(--rce-sh-3);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:min(92vw,520px);text-align:center}
.rce-toast.show{opacity:1;transform:translate(-50%,0)}
.rce-flash{animation:rceFlash 1.4s ease}
@keyframes rceFlash{0%,60%{box-shadow:0 0 0 3px #F26207}100%{box-shadow:none}}

/* ------------------------------------------------------------- responsive */
/* the tips bulb (a shared floating control) sits at the bottom left, over the rail, and the
   assistant robot sits at the bottom right, over the panel's controls; both step aside */
body:has(.rce) #itp-tip-btn{left:132px!important}
body:has(.rce[data-panel-open="1"]) > .itw-fab{right:calc(376px + 16px)!important}
@media (max-width:1300px){
  body:has(.rce) #itp-tip-btn{left:100px!important}
  body:has(.rce[data-panel-open="1"]) > .itw-fab{right:calc(320px + 16px)!important}
  .rce-work{grid-template-columns:86px minmax(0,1fr) 320px}
  .rce[data-panel-open="0"] .rce-work{grid-template-columns:86px minmax(0,1fr)}
  .rce-rail-btn{font-size:11px}
  .rce-canvas{padding-left:18px;padding-right:18px}
  .rce-panel{padding:23px 20px}
  .rce-top{gap:9px;padding:0 13px}
}
@media (min-width:901px) and (max-width:1050px){
  body:has(.rce) #itp-tip-btn{left:90px!important}
  body:has(.rce[data-panel-open="1"]) > .itw-fab{right:calc(min(375px,88vw) + 16px)!important}
  .rce-work{grid-template-columns:76px minmax(0,1fr)}
  .rce-panel{position:fixed;align-self:normal;justify-self:normal;top:calc(var(--rce-hdr) + var(--rce-topbar));bottom:0;right:0;left:auto;z-index:45;width:min(375px,88vw);max-height:none;box-shadow:-12px 0 40px -8px rgba(11,20,25,.18);display:none}
  .rce[data-panel-open="1"] .rce-panel{display:block}
  .rce[data-panel-open="1"] .rce-canvas{padding-right:calc(min(375px,88vw) + 18px)}
  .rce-panel-x{display:inline-flex}
  .rce-top .rce-sep{display:none}
}
@media (max-width:900px){
  .rce{--rce-topbar:64px}
  .rce-word,.rce-sep{display:none}
  .rce-word{font-size:18px;letter-spacing:-.5px}
  .rev-word{display:none}
  .rce-top select{max-width:none;min-height:42px;padding:8px 30px 8px 10px;font-size:14px}
  /* a 150px basis is claimed before the free space is split with the spacer, so the picker
     never shrinks to a sliver; the cap keeps it from ballooning on tablets (as .ige-trade) */
  .rce-trade{flex:1 1 150px;min-width:64px;max-width:260px;gap:6px}
  .rce-trade .rce-selwrap{flex:1 1 auto;min-width:0;display:flex}
  .rce-top .rce-trade select{width:100%;max-width:none;min-width:0;padding:8px 20px 8px 6px!important;font-size:12.5px}
  .rce-trade .rce-selwrap::after{right:6px}
  .it-tsw{width:30px;height:30px;border-radius:9px}
  .it-tsw svg{width:16px;height:16px}
  .rce-zoom,.rce-top .rce-sep,.rce-top .rce-plain span{display:none}
  .rce-top .rce-plain{padding:8px}
  .rce-top .rce-primary{padding:10px 12px;font-size:12px;gap:6px}
  .rce-top .rce-primary .rce-ic{width:15px;height:15px}
  .rce-work{display:block}
  /* The rail becomes a bottom tab bar: Templates, Style, Payment (the trade preset tab
     went when the trade moved into the toolbar) with a real gutter, the icon in its own pill
     that tints when the tab is open, an 11px label that never wraps, and the home-indicator
     inset added below. Everything above the bar reads its height from --rce-tabbar.
     Column count MUST match the real tab count, or the newest tab silently wraps to a
     second row below the bar's fixed height and is unreachable (found 27 Sep 2026: Payment
     was invisible on phone because this said two, and a Templates tab had since been added). */
  .rce{--rce-tabbar:64px;--rce-safe:env(safe-area-inset-bottom,0px)}
  .rce-rail{
    position:fixed;align-self:normal;left:0;right:0;bottom:0;top:auto;z-index:48;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;
    height:calc(var(--rce-tabbar) + var(--rce-safe));min-height:0;padding:6px 12px var(--rce-safe);
    border-right:0;border-top:1px solid var(--rce-line);background:#fff;
    box-shadow:0 -8px 24px -12px rgba(11,20,25,.16);-webkit-tap-highlight-color:transparent;
  }
  .rce-rail-btn{
    gap:4px;min-width:0;height:52px;padding:0 2px;border-radius:12px;
    font-size:11px;font-weight:600;letter-spacing:0;line-height:1.2;color:#5b6770;
  }
  .rce-rail-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rce-rail-btn .rce-ic{width:52px;height:28px;padding:3px 15px;border-radius:14px;stroke-width:1.8;transition:background-color .15s,transform .15s}
  .rce-rail-btn:hover,.rce-rail-btn[aria-pressed="true"]{background:none}
  .rce-rail-btn:active .rce-ic{transform:scale(.92)}
  .rce-rail-btn[aria-pressed="true"]{color:var(--rce-accent);font-weight:700}
  .rce-rail-btn[aria-pressed="true"] .rce-ic{background:var(--rce-accent-bg);stroke-width:2.1}
  .rce-rail-btn[aria-pressed="true"]::before,.rce-rail-foot{display:none}
  .rce-rail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #F26207}
  .rce-canvas{padding:14px 10px calc(var(--rce-tabbar) + var(--rce-safe) + 36px)!important}
  .rce-canvas-label{font-size:10px}
  .rce-panel{display:none}
  .rce[data-panel-open="1"] .rce-panel{display:block}
  .rce-panel{position:fixed;align-self:normal;left:0;right:0;bottom:calc(var(--rce-tabbar) + var(--rce-safe));top:auto;width:100%;max-height:68vh;border-left:0;border-top:1px solid var(--rce-line3);border-radius:var(--rce-r-modal) var(--rce-r-modal) 0 0;padding:20px 16px 24px;box-shadow:0 -12px 40px -8px rgba(11,20,25,.22);z-index:47}
  .rce-panel-x{display:inline-flex}
  .rce[data-panel-open="1"] .rce-canvas{padding-right:10px!important}
  .rce-fin-body{grid-template-columns:1fr}
  .rce-fin-preview{display:none}
  .rce-fin .rce-review{padding:22px 18px}
  .rce-review h3{font-size:22px}
  /* floating controls from shared scripts sit above the tab bar, and leave while a panel
     sheet is open so they never cover a control inside it */
  body>.itw-fab{bottom:82px!important;right:14px!important}
  body:has(.rce[data-panel-open="1"]) > .itw-fab,body:has(.rce[data-panel-open="1"]) #itp-tip-btn{display:none!important}
  body:has(.rce) #itp-tip-btn{left:16px!important;bottom:82px!important}
  .rce-toast{bottom:84px}
}
@media (max-width:400px){
  .rce-top{gap:6px;padding:0 10px}
  .rce-word .rce-ic{display:none}
}
@media print{
  .rce-top,.rce-rail,.rce-panel,.rce-ovl,.rce-canvas-label,.rce-toast,.rce-fin,.rc-h1wrap,.rce-ui,.rce-bridge{display:none!important}
  .rce-work{display:block!important}
  .rce-canvas{padding:0!important;background:#fff!important}
  .rce-pv-scroll,.rce-pv-sizer{width:auto!important;height:auto!important;margin:0!important}
  .rce-pv-inner{position:static!important;transform:none!important;width:auto!important;left:auto!important;margin:0!important}
  /* .rce-canvas #paper{width:100%} above is an unscoped, higher-specificity (id) screen rule
     that otherwise wins here too: it stretched #paper to the print container's own width
     (whatever that was) instead of the 690px the print-fit gauge measured, so the scale it
     computed no longer matched the printed layout and the sheet split onto a second page. */
  .rce-canvas #paper{width:690px!important}
}
@media (prefers-reduced-motion:reduce){.rce *{transition:none!important;animation:none!important}}

/* On-screen only (never print): the paper is a fixed 690px width that .rce-pv-inner scales down
   with a transform to fit a phone screen, the same way it-gen-v3.css's own mobile block does for
   the invoice generator's .inv-* classes. A scaled-down transform shrinks the rendered text along
   with everything else, so the receipt's own point sizes are bumped here to stay legible and
   editable at a thumb's width. Scoped to #paper inside the canvas so print, which never scales the
   sheet, is untouched. */
@media screen and (max-width:900px){
  .rce-canvas #paper .p-biz{font-size:24px}
  .rce-canvas #paper .p-biz span{font-size:14px}
  .rce-canvas #paper .pill{font-size:12.5px}
  .rce-canvas #paper .p-meta div span{font-size:11.5px}
  .rce-canvas #paper .p-meta div b{font-size:16px}
  .rce-canvas #paper .p-line{font-size:16px}
  .rce-canvas #paper .p-line .qty{font-size:13px}
  .rce-canvas #paper .p-sum div{font-size:15.5px}
  .rce-canvas #paper .p-sum .total span{font-size:16.5px}
  .rce-canvas #paper .p-sum .total b{font-size:23px}
  .rce-canvas #paper .p-note{font-size:14.5px}
  .rce-canvas #paper .p-qrtext b{font-size:14.5px}
  .rce-canvas #paper .p-qrtext span{font-size:17px}
  .rce-canvas #paper .p-qrtext i{font-size:12px}
  .rce-canvas #paper .p-sig-in .rule{font-size:12.5px}
}