/* it-gen-v3.css: the editor shell the invoice generator and the quote generator share.
   Built to the owner's clickable wireframe (InvoiceTools_Clickable_Editor.html, 25 Sep 2026):
   a top toolbar, an icon rail on the left, the live document in the middle and one slide-out
   panel on the right. The document itself (#invoicePreview with .inv-*, or the quote's
   #live-preview-capture) keeps the page's own styles; nothing here changes what is exported.
   The quote generator loads this and it-qg-v3.css on top (25 Sep 2026).

   The layout is the wireframe's; the colours are the site's (owner, 25 Sep 2026: the wireframe's
   own teal was copied by mistake). Ink #0B1419, CTA orange #C04E06 (hover #A94405) for every
   selected or active state, the warm tint #FFF3EA behind it, and grey lines. The only green on
   the page is Review & Export, which it-green-actions-v1.css paints through #wizardReviewBtn:
   green means one thing on every tool, this is how you get your document. Nothing here sets it.
   The wireframe loads DM Sans and Manrope from Google Fonts; the site self-hosts Inter and
   never depends on a third-party font request, so Inter carries the same sizes and weights. */

/* Editor chrome tokens (25 Sep 2026, owner: "looks so dull, make it modern, all generators the
   same"). These values are repeated verbatim in it-ce-v3.css, it-po-v3.css, it-rm-v3.css and
   it-wo-v3.css under their own prefixes; change one, change all five. Brand colours are
   untouched: ink #0B1419, CTA #C04E06 / #A94405, the warm tint #FFF3EA behind selected states.
   What changed is the neutral scale (cool grey lines and hover instead of beige), one canvas
   gradient, one shadow scale, one radius scale and one "ghost" treatment for every editor-only
   add/edit affordance that sits on the document. */
.ige,.ige-fin{
  --ige-text:#0B1419; --ige-text2:#253640; --ige-muted:#66727a; --ige-muted2:#6c7883;
  --ige-faint:#85949a; --ige-eyebrow:#73818b;
  --ige-line:#E3E8EB; --ige-line2:#D8DFE4; --ige-line3:#E8ECEF; --ige-input:#CFD8DE;
  --ige-accent:#C04E06; --ige-accent-hover:#A94405; --ige-accent-bg:#FFF3EA; --ige-accent-soft:#FFF8F2;
  --ige-accent-line:#F3CDB0; --ige-hover:#F1F4F6; --ige-hover2:#E8EDF0; --ige-focus:rgba(242,98,7,.3);
  --ige-canvas:#EEF1F4; --ige-canvas-bg:linear-gradient(180deg,#F6F8FA 0,#EDF0F3 360px); --ige-danger:#9e443e;
  --ige-ghost:#FFF8F2; --ige-ghost-line:#F3CDB0; --ige-ghost-hover:#FFF3EA; --ige-ghost-hover-line:#E8A26F; --ige-ghost-disc:#FFE7D6;
  --ige-ring:0 0 0 3px rgba(242,98,7,.22);
  --ige-sh-1:0 1px 2px rgba(11,20,25,.06);
  --ige-sh-2:0 4px 14px -2px rgba(11,20,25,.12);
  --ige-sh-3:0 14px 36px -8px rgba(11,20,25,.18);
  --ige-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);
  --ige-sh-bar:0 1px 0 rgba(11,20,25,.04),0 10px 24px -18px rgba(11,20,25,.18);
  --ige-sh-modal:0 0 0 1px rgba(11,20,25,.06),0 32px 80px -20px rgba(11,20,25,.45);
  --ige-r-sm:8px; --ige-r-md:10px; --ige-r-lg:12px; --ige-r-xl:16px; --ige-r-modal:20px;
  --ige-hdr:65px; --ige-topbar:76px;
  --ige-font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ige-text); font-family:var(--ige-font); font-size:16px; line-height:1.4;
}
/* the old two-column form was shrunk to fit; the editor sizes itself */
@media (min-width:921px){#appView.ige{zoom:1}}
.ige *,.ige *::before,.ige *::after{box-sizing:border-box}
/* :where() keeps this reset at class weight (0,1,0), so a later .ige-rail-btn or .ige-method
   font-size wins as written; as `.ige button` (0,1,1) it silently beat them all and every
   label inherited 16px */
.ige :where(button){font:inherit;cursor:pointer;color:inherit}
.ige :where(button):disabled{cursor:not-allowed;opacity:.5}
/* opacity alone faded .ige-plain's own background+border to nothing (owner report,
   25 Sep 2026: undo/redo read as broken ghosts against the now-colorful toolbar). Keep
   the button shape solid; mute only the icon to show it has nothing to do yet. */
.ige-plain:disabled{opacity:1;color:#AEB7BC;background:#F6F8FA;border-color:#E3E8EB}
.ige button:focus-visible,.ige input:focus-visible,.ige select:focus-visible,.ige textarea:focus-visible,
.ige [contenteditable]:focus-visible{outline:3px solid #F26207;outline-offset:2px}
.ige svg{display:block}
.ige .ige-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 other scripts write into and read from (AI fill, the
   dashboard handover, tracked send, account fill, the tips drawer) keyed by data-bind, id,
   placeholder and .item-card. It mirrors the document's state and is never shown; people
   edit the document itself. */
.ige-bridge{display:none!important}

/* ---------------------------------------------------------------- top bar */
.ige-top{
  position:sticky; top:var(--ige-hdr); z-index:40;
  display:flex; align-items:center; gap:15px; height:var(--ige-topbar); padding:0 25px;
  background:#fff; border-bottom:1px solid var(--ige-line); box-shadow:var(--ige-sh-bar);
}
.ige-word{display:flex;align-items:center;gap:9px;font-weight:800;font-size:23px;letter-spacing:-.9px;white-space:nowrap;color:var(--ige-text)}
.ige-word .ige-ic{width:24px;height:24px;color:#F26207}
.ige-sep{border-left:1px solid var(--ige-line2);height:28px;margin:0 9px}
.ige-trade,.ige-tpl{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.ige-word,.ige-primary,.ige-zoom{flex:0 0 auto}
.ige-trade{color:var(--ige-accent)}
/* the trade mark beside the picker: one color family and one line icon per trade, painted by
   it-trade-swatch-v1.js from the select's value (the tile pickers it replaced looked like this) */
.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}
.ige-tpl small{color:var(--ige-muted);font-size:13px}
.ige-selwrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.ige-top select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;color:#1d2b35;background:#fff;border:1px solid var(--ige-line2);
  border-radius:10px;max-width:175px;padding:10px 34px 10px 12px;font-size:16px;line-height:1.4;
  min-height:45px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.ige-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 its own chevron via
   background-image; here that stacked on top of the ::after chevron above ("vv",
   owner report, 25 Sep 2026). Higher specificity than the bare element selector
   wins even against its !important. */
.ige-selwrap select{background-image:none!important}

/* Pilot (27 Sep 2026): the "Switch to" document-type menu. .ige-plain is the toolbar's own
   plain-icon-button look (undo/redo/zoom already use it); the menu itself borrows the
   dropdown/panel treatment already used by .ige-doctype in it-editor-v1.css so both editors'
   switch menus read as the same control, adapted to this page's flat #igeTop bar (no popover
   API here, a simple .open class toggled from JS instead). */
/* Hidden by default (owner, 27 Sep 2026: Switch is not on any Create-menu page's own direct
   visit - only a locked arrival from an industry page's design gallery shows it, in place of
   the Templates rail button and the trade select; see applyLockedTradeUI() in the bundle). */
.ige-mode{position:relative;flex:0 0 auto;display:none}
.ige-locked-trade .ige-mode{display:flex}
.ige-locked-trade [data-panel="templates"]{display:none!important}
.ige-locked-trade .ige-trade{display:none!important}
.ige-mode-btn span{font-weight:600;font-size:13px;margin:0 2px}
.ige-mode-btn{width:auto!important;padding:8px 12px!important;gap:6px}
.ige-mode-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;
  border:1px solid var(--ige-line2);border-radius:var(--ige-r-md);box-shadow:var(--ige-sh-2,0 12px 32px rgba(11,20,25,.16));
  padding:8px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.ige-mode.open .ige-mode-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ige-mode.open .ige-mode-btn{background:var(--ige-hover);color:var(--ige-accent)}
.ige-mode-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ige-muted);padding:6px 10px 4px}
.ige-mode-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--ige-text2);text-align:left;
}
.ige-mode-item:hover{background:var(--ige-hover)}
.ige-mode-item.on{color:var(--ige-accent);background:var(--ige-hover)}
.ige-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}
.ige-mode-item .ige-mode-check{margin-left:auto;width:16px;height:16px;flex:0 0 auto;stroke-width:2.4}
@media (max-width:760px){
  .ige-mode-btn span{display:none}
  .ige-mode-menu{left:auto;right:0}
}
.ige-btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  color:var(--ige-text2);background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-md);padding:10px 15px;font-weight:600;
  box-shadow:var(--ige-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.ige-btn2:hover{background:var(--ige-hover);border-color:#C9D3D9}
.ige-plain:hover{background:var(--ige-hover);color:var(--ige-accent)}
.ige-plain{color:#4A5860;background:#F6F8FA;border:1px solid #B9C5CC;padding:8px;border-radius:var(--ige-r-sm);display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.ige-spacer{flex:1}
.ige-zoom{display:flex;align-items:center;height:42px;background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-md);gap:1px;box-shadow:var(--ige-sh-1)}
.ige-zoom button{color:#45545f;background:none;border:0;width:34px;height:40px;font-size:21px;line-height:1;border-radius:8px}
.ige-zoom button.ige-zoom-mode{color:#6f7d83;width:auto;padding:0 5px;font-size:11px;font-weight:600}
.ige-zoom button.ige-zoom-mode[aria-pressed="true"]{color:var(--ige-accent)}
.ige-zoom button:hover{color:var(--ige-accent)}
.ige-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 */
.ige-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  background:var(--ige-accent);color:#fff;border:1px solid var(--ige-accent);border-radius:10px;padding:12px 20px;font-weight:700;font-size:16px;
}
.ige-primary:hover,.ige-apply:hover{background:var(--ige-accent-hover);border-color:var(--ige-accent-hover)}
.ige-primary .ige-ic{width:19px;height:19px}

/* -------------------------------------------------------------- workspace */
.ige-work{display:grid;grid-template-columns:116px minmax(0,1fr) 376px;align-items:start;min-height:60vh;margin:0;padding:0;max-width:none}
/* no panel open (the way the page lands): the document has the width, not an empty column */
@media (min-width:1051px){
  .ige[data-panel-open="0"] .ige-work{grid-template-columns:116px minmax(0,1fr)}
  .ige[data-panel-open="0"] .ige-panel{display:none}
}
.ige-rail{
  position:sticky; top:calc(var(--ige-hdr) + var(--ige-topbar)); align-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:18px 8px;
  border-right:1px solid var(--ige-line3);min-height:calc(100vh - var(--ige-hdr) - var(--ige-topbar));background:#fff;
}
.ige-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;
}
.ige-rail-btn .ige-ic{width:23px;height:23px}
.ige-rail-btn{transition:background-color .15s,color .15s}
.ige-rail-btn:hover{background:var(--ige-hover);color:var(--ige-text)}
.ige-rail-btn[aria-pressed="true"]{color:var(--ige-accent);background:var(--ige-accent-bg);font-weight:700}
.ige-rail-btn[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--ige-accent)}
.ige-rail-foot{margin-top:auto;padding:12px 4px 12px;text-align:center;color:#97a2a7;font-size:11px;line-height:1.4}
.ige-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 */
.ige-canvas{background:var(--ige-canvas-bg) var(--ige-canvas);padding:20px 34px 70px;min-width:0}
.ige-canvas-label{display:flex;justify-content:space-between;gap:12px;max-width:816px;margin:0 auto 13px;color:#6B7A83;font-size:12px}
.ige-canvas-label span{display:flex;align-items:center;gap:7px}
.ige-canvas-label .ige-ic{width:17px;height:17px}
.ige-canvas .ig-ai{max-width:816px;margin:0 auto 18px}
.pv-scroll{position:relative}
.pv-sizer{position:relative;margin:0 auto;overflow:visible}
.pv-inner{position:absolute;left:50%;top:0;width:794px;transform-origin:top center;transform:translateX(-50%)}
.pv-inner:not([style*="scale"]){position:relative;left:auto;transform:none;margin:0 auto;max-width:100%}
/* the sheet's elevation on screen: one paper shadow on every generator. The id-weighted selector
   beats the page's own #appView .invoice-preview shadow; the quote's sheet is #live-preview-capture.
   The border stays 1px (transparent) so the sheet keeps its exact width; the shadow's first layer
   draws the hairline. Print and export never see this: both copy the sheet out of .ige-canvas. */
.ige-canvas .invoice-preview,.ige-canvas #invoicePreview.invoice-preview,.ige-canvas #live-preview-capture{
  border-radius:4px;border:1px solid transparent;box-shadow:var(--ige-sh-paper);
}

/* inline editing on the document. 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. */
.ige-canvas :is(#invoicePreview,#live-preview-capture) [data-f]{border-radius:3px;transition:background-color .12s}
.ige-canvas :is(#invoicePreview,#live-preview-capture) [data-f]:hover{background:var(--ige-accent-bg);cursor:text;box-shadow:0 0 0 3px var(--ige-accent-bg)}
/* DO NOT DELETE (removed once already, 25 Sep 2026, and the bug came straight back; the fix that
   replaced it, 26 Sep, never actually matched anything - see below): the hover rule above still
   applies its own background even while .ige-editing is also true (CSS doesn't cancel one
   selector's declaration just because another matched selector exists), so on the modern
   template's dark header the field kept getting a near-white fill under white text the instant
   the mouse rested on it while typing, not just on a plain hover. This rule wins on specificity
   and kills the background for real, for both states, inside that one header only.
   26 Sep 2026: the selector below was `... .tmpl-modern .inv-head [data-f]`, a descendant
   combinator between #invoicePreview and .tmpl-modern - but .tmpl-modern is a class on
   #invoicePreview itself (class="invoice-preview tmpl-modern font-sans"), not a child of it, so
   that space meant "a .tmpl-modern element somewhere inside #invoicePreview" and never matched
   anything. The rule was live in the CSS the whole time and never once applied; compounded the
   two selectors onto the same element (no space) to fix it for real, this time checked by
   hovering the field with a non-default accent color, not just by reading the CSS. */
.ige-canvas :is(#invoicePreview.tmpl-modern,#live-preview-capture.tmpl-modern) .inv-head [data-f]:hover,
.ige-canvas :is(#invoicePreview.tmpl-modern,#live-preview-capture.tmpl-modern) .inv-head [data-f].ige-editing{
  background:rgba(255,255,255,.18)!important;box-shadow:0 0 0 3px rgba(255,255,255,.18)!important;
}
.ige-canvas :is(#invoicePreview,#live-preview-capture) [data-f].ige-editing{outline:2px solid var(--ige-accent);outline-offset:1px;cursor:text;box-shadow:none;min-width:2ch}
.ige-canvas :is(#invoicePreview,#live-preview-capture) [data-f][data-open]:hover{cursor:pointer}
.ige-canvas #invoicePreview .inv-table td[data-f]{cursor:text}
.ige-empty{display:none}
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-empty{display:block;color:#9aa5aa;font-style:italic;font-weight:400}
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-empty::before{content:attr(data-ph)}
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-empty.ige-editing::before{content:none}
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-empty.ige-editing{font-style:normal;color:inherit}
.ige-ui{display:none!important}
/* the QR switch in Fields: the class rides on the sheet itself, so the export copy obeys it too */
#invoicePreview.no-qr .pm-qr{display:none!important}
.ige-canvas #invoicePreview tr.ige-ui{display:table-row!important}
.ige-canvas #invoicePreview .ige-addrow td{padding:6px 0 0!important;border:0!important}
/* the "ghost" affordance: every editor-only add/edit control that sits on the document (add a
   line, add a discount, add your logo, edit terms) 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 grey: that read as unfinished. */
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-addbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--ige-accent);background:var(--ige-ghost);
  border:1px solid var(--ige-ghost-line);border-radius:var(--ige-r-md);padding:9px 12px;font-weight:700;font-size:13px;font-family:var(--ige-font);
  box-shadow:var(--ige-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;cursor:pointer;
}
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-addbtn:hover{background:var(--ige-ghost-hover);border-color:var(--ige-ghost-hover-line);box-shadow:var(--ige-sh-2)}
/* the invoice and quote icon is already a circled plus, so it fills the disc (2px inset) rather
   than sitting as a ring inside a ring; the other four generators use a bare plus at 4px */
.ige-canvas :is(#invoicePreview,#live-preview-capture) .ige-addbtn .ige-ic{width:24px;height:24px;padding:2px;border-radius:50%;background:var(--ige-ghost-disc);stroke-width:2}
/* second, secondary "add from trade presets" control (scoped to invoice-generator's own
   #invoicePreview only, never #live-preview-capture, so this never touches quotegenerator's
   own it-qg-v3.css styling of the same class name) */
.ige-canvas #invoicePreview .ige-addpair{display:flex;gap:8px;flex-wrap:wrap}
.ige-canvas #invoicePreview .ige-addpair .ige-addbtn{width:auto;flex:1 1 180px}
.ige-canvas #invoicePreview .ige-addbtn-alt{color:var(--ige-text2);background:#fff;border-color:var(--ige-line2)}
.ige-canvas #invoicePreview .ige-addbtn-alt:hover{background:var(--ige-hover)}
.ige-canvas #invoicePreview .ige-addbtn-alt .ige-ic{background:var(--ige-hover2)}
.ige-canvas #invoicePreview tr.ige-row-on td{background:var(--ige-accent-soft);box-shadow:inset 0 0 0 1px #E8A26F}
/* row actions float over the sheet, outside the exported node */
.ige-ovl{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:8}
.ige-rowacts{position:absolute;display:none;gap:2px;pointer-events:auto;background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-sm);box-shadow:var(--ige-sh-2);padding:3px;transform-origin:0 0}
.ige-rowacts[data-on="1"]{display:flex}
.ige-rowacts button{color:#53646d;background:none;border:0;padding:4px;border-radius:6px;display:inline-flex;transition:background-color .15s,color .15s}
.ige-rowacts button:hover{background:var(--ige-accent-bg);color:var(--ige-accent)}
.ige-rowacts button[data-act="del"]:hover,.ige-rowacts button[data-del]:hover,.ige-rowacts button[aria-label*="emove"]:hover{background:#FFF5F4;color:var(--ige-danger)}
.ige-rowacts button .ige-ic{width:18px;height:18px}
/* the clear chip beside an optional field: 24px, icon only, past the end of the text */
.ige-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(--ige-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;
}
.ige-fieldclear[data-on="1"]{display:inline-flex}
.ige-fieldclear .ige-ic{width:14px;height:14px}
.ige-fieldclear:hover{color:var(--ige-accent);border-color:var(--ige-accent-line);background:var(--ige-accent-bg)}
/* the page's thumb-size rules give buttons min-height:44px; the chip is scaled to its own
   30px on touch screens (see positionFieldClear), so the minimum is pinned off here */
.ige-ovl .ige-fieldclear{min-height:0!important;height:24px!important;width:24px!important}
@media (pointer:coarse){.ige-ovl .ige-fieldclear{width:30px!important;height:30px!important}.ige-fieldclear .ige-ic{width:16px;height:16px}}
/* a small anchored editor for dates and numbers */
.ige-pop{
  position:absolute;z-index:9;pointer-events:auto;background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-lg);
  padding:12px;box-shadow:var(--ige-sh-3);display:none;min-width:200px;font-family:var(--ige-font);font-size:13px;color:var(--ige-text);
}
.ige-pop[data-on="1"]{display:block}
.ige-pop label{display:block;font-weight:700;font-size:12px;margin-bottom:6px}
.ige-pop input{width:100%;border:1px solid var(--ige-input);border-radius:var(--ige-r-sm);padding:9px 10px;font:inherit;color:inherit;background:#fff}
.ige-pop input:focus{border-color:var(--ige-accent);outline:none;box-shadow:var(--ige-ring)}
.ige-pop .ige-pop-row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.ige-pop .ige-pop-row button{border-radius:var(--ige-r-sm);padding:7px 12px;font-weight:700;font-size:12px;border:1px solid var(--ige-line2);background:#fff}
.ige-pop .ige-pop-row button:hover{background:var(--ige-hover)}
.ige-pop .ige-pop-row button.ige-pop-ok{background:var(--ige-accent);border-color:var(--ige-accent);color:#fff}
.ige-pop .ige-pop-row button.ige-pop-ok:hover{background:var(--ige-accent-hover);border-color:var(--ige-accent-hover)}

/* ------------------------------------------------------------------ panel */
.ige-panel{
  position:sticky; top:calc(var(--ige-hdr) + var(--ige-topbar)); align-self:start;
  background:#fff;border-left:1px solid var(--ige-line);padding:27px 28px 45px;
  max-height:calc(100vh - var(--ige-hdr) - var(--ige-topbar));overflow-y:auto;overscroll-behavior:contain;min-width:0;
}
.ige-panel-x{display:none;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ige-line2);background:#fff;color:#53646d;align-items:center;justify-content:center;z-index:2;box-shadow:var(--ige-sh-1)}
.ige-panel-x:hover{background:var(--ige-hover);color:var(--ige-text)}
.ige-panel-x .ige-ic{width:16px;height:16px}
.ige-pane{display:none}
.ige-pane[data-on="1"]{display:block}
.ige-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ige-eyebrow)}
.ige-pane h2{margin:9px 0 5px;font-size:24px;font-weight:800;letter-spacing:-.55px;line-height:1.35;color:var(--ige-text)}
.ige-pane-lead{color:var(--ige-muted2);margin:0;font-size:13px;line-height:1.5}
.ige-pane section{border-top:1px solid var(--ige-line3);padding:18px 0;margin-top:18px}
.ige-pane section+section{margin-top:0}
.ige-pane section h3{margin:0 0 13px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ige-text)}
.ige-lab{display:block;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--ige-text)}
.ige-lab span{color:#8c999f;font-weight:400}
.ige-pane .ige-in,.ige-pane .ige-ta,.ige-pane .ige-sel{
  display:block;width:100%;color:#273842;background:#fff;border:1px solid var(--ige-input);border-radius:var(--ige-r-md);
  margin:0 0 17px;padding:12px 13px;font:inherit;font-size:15px;line-height:1.35;transition:border-color .15s,box-shadow .15s;
}
.ige-pane .ige-ta{min-height:82px;resize:vertical;font-size:14px}
.ige-pane .ige-in::placeholder,.ige-pane .ige-ta::placeholder{color:#a1adb2}
.ige-pane .ige-in:hover,.ige-pane .ige-ta:hover,.ige-pane .ige-sel:hover{border-color:#B9C5CC}
.ige-pane .ige-in:focus,.ige-pane .ige-ta:focus,.ige-pane .ige-sel:focus{border-color:var(--ige-accent);outline:none;box-shadow:var(--ige-ring)}
.ige-selwrap.ige-selwrap-p{display:block;position:relative}
.ige-selwrap.ige-selwrap-p .ige-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px}
.ige-selwrap.ige-selwrap-p::after{top:24px;margin-top:0}
.ige-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.ige-help{color:var(--ige-faint);margin:-8px 0 12px;font-size:11px;line-height:1.5}
.ige-help.ige-help-top{margin:9px 0}
.ige-switch{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 0;font-size:13px;cursor:pointer;color:var(--ige-text)}
.ige-switch span{flex:1}
.ige-switch small{display:block;color:#8b989d;margin-top:3px;font-size:11px}
.ige-switch input{accent-color:var(--ige-accent);flex-shrink:0;width:19px;height:19px;margin:0;cursor:pointer}
.ige-chips{display:flex;flex-wrap:wrap;gap:7px}
.ige-chips button{background:#fff;border:1px solid var(--ige-line2);border-radius:999px;padding:7px 11px;font-size:12px;color:var(--ige-text);transition:background-color .15s,border-color .15s}
.ige-chips button:hover{border-color:var(--ige-ghost-hover-line);background:var(--ige-ghost)}
.ige-chips button[aria-pressed="true"]{background:var(--ige-accent-bg);border-color:var(--ige-accent);color:var(--ige-accent);font-weight:700}
/* segmented controls sit on a grey track; the chosen segment lifts off it in the warm tint */
.ige-seg{display:flex;background:var(--ige-hover);border:1px solid var(--ige-line2);border-radius:var(--ige-r-md);padding:3px;gap:2px}
.ige-seg button{flex:1;background:transparent;border:0;border-radius:var(--ige-r-sm);padding:10px;font-size:15px;color:var(--ige-text2);transition:background-color .15s,color .15s}
.ige-seg button:hover{background:var(--ige-hover2)}
.ige-seg button[aria-pressed="true"]{color:var(--ige-accent);background:var(--ige-accent-bg);font-weight:700;box-shadow:var(--ige-sh-1)}
.ige-seg.ige-seg-grid{display:grid;grid-template-columns:1fr 1fr}
/* the swatches are the document's own accent, the colour the person picks for their invoice */
.ige-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ige-sw{width:31px;height:31px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dce3e6;padding:0}
.ige-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ige-text)}
.ige-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}
.ige-sw-custom input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:0;padding:0}
.ige-sw-custom[data-on="1"]{box-shadow:0 0 0 2px var(--ige-text)}
.ige-upload{
  display:block;text-align:center;color:var(--ige-text2);cursor:pointer;background:var(--ige-ghost);border:1px dashed var(--ige-ghost-line);border-radius:var(--ige-r-lg);
  margin:11px 0;padding:15px;font-size:12px;position:relative;transition:background-color .15s,border-color .15s;
}
.ige-upload:hover,.ige-upload.drag{background:var(--ige-ghost-hover);border-color:var(--ige-ghost-hover-line)}
.ige-upload .ige-ic{display:inline-block;vertical-align:-4px;width:16px;height:16px;margin-right:6px}
.ige-upload img{display:block;max-height:64px;max-width:100%;margin:0 auto 8px;object-fit:contain}
.ige-upload img:not([src]){display:none}
.ige-mini-acts{display:flex;gap:8px;margin:-4px 0 12px}
.ige-mini-acts button,.ige-btn3{background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-sm);padding:8px 12px;font-size:12px;font-weight:700;color:var(--ige-text2);box-shadow:var(--ige-sh-1);transition:background-color .15s,border-color .15s}
.ige-mini-acts button:hover,.ige-btn3:hover{background:var(--ige-hover);border-color:#C9D3D9}
.ige-apply{display:block;width:100%;background:var(--ige-accent);color:#fff;border:0;border-radius:var(--ige-r-md);margin-top:6px;padding:13px;font-weight:700;font-size:15px;box-shadow:var(--ige-sh-1)}
.ige-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ige-text2);background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-md);padding:10px 15px;font-weight:600;font-size:15px;box-shadow:var(--ige-sh-1);transition:background-color .15s,border-color .15s}
.ige-secondary:hover{background:var(--ige-hover);border-color:#C9D3D9}
.ige-danger{color:var(--ige-danger);margin-top:15px}
.ige-tip{display:flex;align-items:center;gap:9px;color:#7A3403;background:var(--ige-accent-bg);border:1px solid #F8DCC6;border-radius:var(--ige-r-lg);margin-top:20px;padding:13px;font-size:12px;line-height:1.45}
.ige-tip .ige-ic{width:22px;height:22px;flex:0 0 auto}
.ige-tip a{color:inherit;font-weight:700}
.ige-range{width:100%;accent-color:var(--ige-accent);margin:4px 0 14px}

/* templates. The thumbnails' accent is the document's default accent (#121214), not the editor's,
   except the trade design cards below, whose mini bar is inlined to the trade's curated accent. */
.ige-tplgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ige-tplgrid-label{margin:2px 2px 10px}
.ige-tplgrid-label2{margin-top:22px}
.ige-tpl-card{text-align:left;background:#fff;border:2px solid transparent;border-radius:10px;padding:0;position:relative;color:var(--ige-text);box-shadow:var(--ige-sh-1);transition:border-color .15s,box-shadow .15s;overflow:hidden;box-sizing:border-box}
.ige-tpl-card:hover{border-color:#C9D3D9;box-shadow:var(--ige-sh-2)}
.ige-tpl-card[aria-pressed="true"]{border-color:var(--ige-accent)}
/* photo-only cards (27 Sep 2026): name/description text removed so every card is just the
   miniature, small and equal size, per the owner's reference layout - the tick badge is now
   the only selected-state indicator besides the border. */
.ige-tpl-card>span:not(.qg-swatch){display:none}
.ige-tpl-card>small{display:none}
.ige-tpl-card>.ige-mini~small{display:none}
.ige-tpl-card>.ige-tpl-chk{display:none;position:absolute;top:auto;bottom:6px;right:6px;color:var(--ige-accent);background:#fff;border-radius:50%;box-shadow:0 0 0 2px #fff}
.ige-tpl-card[aria-pressed="true"]>.ige-tpl-chk{display:block}
.ige-tpl-card>.ige-tpl-chk .ige-ic{width:16px;height:16px}
/* Template cards (26 Sep 2026): each card holds a real miniature of the document, the same
   markup and template rules the sheet uses, filled with a fixed sample (miniDocHTML in the
   generator bundle). The sheet is laid out 600px wide and scaled down by --ige-mini-k, which
   the bundle sets from the measured card width; min-height keeps the paper filling the card. */
.ige-mini{position:relative;background:#e6eaec;border:0;border-radius:8px;aspect-ratio:139/186;overflow:hidden;pointer-events:none;isolation:isolate}
.ige-mini .ige-mini-doc{position:absolute!important;left:0!important;top:0!important;width:600px!important;transform-origin:0 0!important;transform:scale(var(--ige-mini-k,.2317))!important;min-height:calc(100% / var(--ige-mini-k,.2317));border-radius:0!important;border:0!important;box-shadow:none!important;overflow:hidden!important}
.ige-mini .ige-mini-doc .inv-body{padding-bottom:24px}
.ige-mini .ige-mini-doc .inv-head-left{max-width:58%}
.ige-mini .ige-mini-doc .inv-details{min-width:190px}

/* payment methods */
.ige-methods{margin:21px 0 25px}
.ige-method{display:flex;align-items:center;gap:13px;width:100%;text-align:left;color:#2b3943;background:#fff;border:0;border-bottom:1px solid var(--ige-line3);padding:12px 3px;font-size:14px}
.ige-method:hover{color:var(--ige-accent)}
.ige-method[aria-checked="true"]{color:var(--ige-accent);font-weight:700}
.ige-method>span:nth-child(2){flex:1}
.ige-method .ige-radio{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid #a6b0b5;flex:0 0 auto}
.ige-method[aria-checked="true"] .ige-radio{border:5px solid var(--ige-accent)}
.ige-method .ige-ic{width:17px;height:17px;display:none}
.ige-method[aria-checked="true"] .ige-ic{display:block}
.ige-method em{font-style:normal;color:var(--ige-accent);font-weight:600;font-size:12px}
.ige-paypv{background:var(--ige-hover);border:1px solid var(--ige-line2);border-radius:var(--ige-r-lg);min-height:102px;margin-top:10px;padding:16px}
.ige-paypv small{display:block;color:var(--ige-muted);letter-spacing:1px;font-size:10px;font-weight:800;text-transform:uppercase}
.ige-paypv b{display:block;margin-top:11px}
.ige-paypv p{color:#6b7a80;margin:5px 0;font-size:12px;line-height:1.45;white-space:pre-line}

/* signature pad, photos */
.ige-sigpanel{display:none;margin-top:12px}
.ige-sigpanel[data-on="1"]{display:block}
.ige-sigpanel .ige-none{color:var(--ige-faint);font-size:12px;margin:0;line-height:1.5}
#sigCanvas{display:block;width:100%;height:95px;touch-action:none;background:#fff;border:1px dashed #b9c3c8;border-radius:8px;cursor:crosshair}
.ige-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ige-photos .ige-upload{margin:0 0 8px;padding:12px 8px;min-height:74px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
.ige-photos .ige-upload img{max-height:58px;margin:0 0 4px}
.ige-photos .ige-upload strong{font-size:12px}
.ige-photos .ige-upload small{font-size:10px;opacity:.8}
.ige-photos .ige-upload.has-photo .ige-ph-empty{display:none}
.ige-photos .ige-clear{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:1px solid var(--ige-line2);background:#fff;color:#53646d;font-size:13px;line-height:1;padding:0}
.ige-photos .ige-upload:not(.has-photo) .ige-clear{display:none}
.ige-photos .ige-in{margin-bottom:0;padding:8px 10px;font-size:13px}

/* ---------------------------------------------------------- review modal */
.fin-overlay.ige-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}
.fin-overlay.ige-fin[hidden]{display:none}
.ige-fin .ige-review{position:relative;width:min(900px,100%);background:#fff;border-radius:var(--ige-r-modal);padding:32px;box-shadow:var(--ige-sh-modal);color:var(--ige-text);font-family:var(--ige-font);max-height:calc(100vh - 36px);overflow:auto}
.ige-review .ige-fin-x{position:absolute;top:20px;right:20px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--ige-hover);border:0;padding:0;border-radius:50%;color:var(--ige-text);transition:background-color .15s}
.ige-review .ige-fin-x:hover{background:var(--ige-hover2)}
.ige-review .ige-fin-x .ige-ic{width:20px;height:20px}
.ige-review h3{margin:7px 0;font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.ige-review .ige-fin-sub{color:#64737b;font-size:14px;margin:0}
.ige-fin-body{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
.ige-fin-preview{background:var(--ige-canvas-bg) var(--ige-canvas);border:1px solid var(--ige-line);display:grid;place-items:center;padding:22px;border-radius:14px}
.ige-fin-mini{display:flex;flex-direction:column;gap:15px;width:280px;min-height:360px;padding:22px;background:#fff;font-size:12px;border-radius:4px;box-shadow:var(--ige-sh-paper);color:var(--ige-text)}
.ige-fin-mini strong{font-size:16px}
.ige-fin-mini span{color:var(--ige-accent)}
.ige-fin-mini hr{border:0;border-top:1px solid #ddd;width:100%;margin:0}
.ige-fin-mini p{margin:0}
.ige-fin-mini b{color:var(--ige-accent);text-align:right;margin-top:auto;font-size:21px}
.ige-fin-actions h4{margin:5px 0 20px;font-size:18px;font-weight:700}
.ige-fin-checks{list-style:none;margin:0;padding:0}
.ige-fin-checks li{display:flex;gap:7px;font-size:13px;margin:0 0 10px;line-height:1.4}
.ige-fin-checks li .ige-ic{width:20px;height:20px;flex:0 0 auto}
.ige-fin-checks li.valid{color:var(--ige-text2)}
.ige-fin-checks li.warn{color:#a36320}
.ige-fin-checks li button{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}
.ige-fin .fin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.ige-fin .fin-grid button{display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--ige-line2);border-radius:var(--ige-r-md);padding:9px 8px;font-size:15px;font-weight:600;color:var(--ige-text);font-family:var(--ige-font);min-height:44px;transition:background-color .15s,border-color .15s}
.ige-fin .fin-grid button:hover{background:var(--ige-ghost-hover);border-color:var(--ige-ghost-hover-line)}
.ige-fin .fin-grid button .ige-ic{width:20px;height:20px}
.ige-fin .fin-grid #btnExportPDF{background:var(--ige-accent);border-color:var(--ige-accent);color:#fff;grid-column:1/-1}
.ige-fin .fin-grid #btnExportPDF:hover{background:var(--ige-accent-hover);border-color:var(--ige-accent-hover)}
.ige-fin .fin-grid #btnSendTracked{grid-column:1/-1;color:var(--ige-accent);background:#fff;border:1px solid var(--ige-accent)!important;font-weight:700;margin-top:6px;min-height:48px}
.ige-fin .fin-grid #btnSendTracked.its-off{opacity:1;background:#fff!important;color:var(--ige-accent)!important;border-color:var(--ige-accent)!important;filter:none!important}
.ige-fin .fin-ic{display:inline-flex;width:20px;height:20px}
.ige-fin .fin-grid button{min-height:44px!important;transform:none!important;box-shadow:none!important}
.ige-fin .fin-grid #btnSendTracked:hover{background:var(--ige-accent-bg)}
.ige-fin .fin-grid #btnSendTracked .its-dot{display:none}
.ige-fin .its-msg{margin:0 0 8px;font-size:13px;color:#a36320}
.ige-fin .its-result{font-size:13px;line-height:1.5;margin:0 0 10px}
.ige-fin .its-link{display:flex;gap:8px;margin:8px 0}
.ige-fin .its-link input{flex:1;min-width:0;border:1px solid var(--ige-line2);border-radius:var(--ige-r-sm);padding:8px}
.ige-fin .its-link button{border:1px solid var(--ige-line2);border-radius:var(--ige-r-sm);padding:8px 12px;background:#fff;font-weight:700}
.ige-fin-note{display:block;color:#8b999f;font-size:11px;line-height:1.5}
.ige-fin-link{font-size:12px;color:#64737b;margin:6px 0 0;word-break:break-all}
.ige-fin-link b{color:var(--ige-text)}

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

/* ------------------------------------------------------------- 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 checkboxes; both step aside */
.ige ~ #itp-tip-btn,body:has(.ige) #itp-tip-btn{left:132px!important}
body:has(.ige[data-panel-open="1"]) > .itw-fab{right:calc(376px + 16px)!important}
@media (max-width:1300px){
  body:has(.ige) #itp-tip-btn{left:100px!important}
  body:has(.ige[data-panel-open="1"]) > .itw-fab{right:calc(320px + 16px)!important}
  .ige-work{grid-template-columns:86px minmax(0,1fr) 320px}
  .ige[data-panel-open="0"] .ige-work{grid-template-columns:86px minmax(0,1fr)}
  .ige-rail-btn{font-size:11px}
  .ige-canvas{padding-left:18px;padding-right:18px}
  .ige-panel{padding:23px 20px}
  .ige-top{gap:9px;padding:0 13px}
  .ige-change{display:none}
}
@media (min-width:901px) and (max-width:1050px){
  body:has(.ige) #itp-tip-btn{left:90px!important}
  body:has(.ige[data-panel-open="1"]) > .itw-fab{right:calc(min(375px,88vw) + 16px)!important}
  .ige-work{grid-template-columns:76px minmax(0,1fr)}
  /* a fixed grid child still answers to align-self, so the sticky rule's start alignment is undone here */
  .ige-panel{position:fixed;align-self:normal;justify-self:normal;top:calc(var(--ige-hdr) + var(--ige-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}
  .ige[data-panel-open="1"] .ige-panel{display:block}
  .ige[data-panel-open="1"] .ige-canvas{padding-right:calc(min(375px,88vw) + 18px)}
  .ige-panel-x{display:inline-flex}
  .ige-top .ige-tpl small,.ige-top .ige-sep{display:none}
}
@media (max-width:900px){
  .ige{--ige-topbar:64px}
  /* the doc-type word (Invoice/Estimate/...) is decorative once the page title already
     says it; dropping it on phone gives the trade picker and undo/redo real room */
  .ige-word,.ige-sep{display:none}
  .ige-word b{font-size:18px}
  .ige-word{letter-spacing:-.5px}
  .ige-top select{max-width:120px;min-height:42px;padding:8px 30px 8px 10px;font-size:14px}
  /* the picker and the invisible .ige-spacer both grow from the same free space, so with a
     64px basis the picker got half of it and "Pick your trade" still read "Pick you..." beside
     a 57px hole at 375 (v145 live check). A 150px basis is claimed before the split, so the
     placeholder fits at 360; the cap keeps it from ballooning on tablets under 900px. */
  .ige-trade{flex:1 1 150px;min-width:64px;max-width:260px}
  .ige-trade .ige-selwrap{flex:1 1 auto;min-width:0;display:flex}
  .ige-top .ige-trade select{width:100%;max-width:none;min-width:0;padding:8px 20px 8px 6px!important;font-size:12.5px}
  .ige-trade .ige-selwrap::after{right:6px}
  .ige-trade{gap:6px}
  .it-tsw{width:30px;height:30px;border-radius:9px}
  .it-tsw svg{width:16px;height:16px}
  .ige-tpl,.ige-zoom{display:none}
  /* "Review & Export" would not fit next to the trade picker and undo/redo on a phone width;
     the trade picker was losing the fight for space and shrinking to an unreadable sliver */
  .rev-word{display:none}
  /* undo/redo stay reachable on phone: they are the only way back from a hover-clear chip's
     clear action once a mouse is not available to hover a field a second time */
  .ige-top .ige-plain{width:34px;height:34px;padding:0;flex:0 0 auto}
  .ige-top .ige-plain .ige-ic{width:17px;height:17px}
  .ige-top .ige-primary{padding:10px 12px;font-size:12px;gap:6px}
  .ige-top .ige-primary .ige-ic{width:15px;height:15px}
  .ige-work{display:block}
  /* The rail becomes a bottom tab bar (owner, 25 Sep 2026: the first cut read as one word,
     "DetailsTemplates"). Five equal columns 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 that sits above the bar reads its height from --ige-tabbar. A
     locked-trade arrival (27 Sep 2026) drops the Templates tab via .ige-locked-trade below,
     which recomputes this to repeat(4,...) itself - see applyLockedTradeUI() in the bundle. */
  .ige{--ige-tabbar:64px;--ige-safe:env(safe-area-inset-bottom,0px)}
  .ige-rail{
    position:fixed;align-self:normal;left:0;right:0;bottom:0;top:auto;z-index:48;
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;align-items:stretch;
    height:calc(var(--ige-tabbar) + var(--ige-safe));min-height:0;padding:6px 6px var(--ige-safe);
    border-right:0;border-top:1px solid var(--ige-line);background:#fff;
    box-shadow:0 -8px 24px -12px rgba(11,20,25,.16);-webkit-tap-highlight-color:transparent;
  }
  .ige-locked-trade .ige-rail{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ige-rail-btn{
    gap:4px;min-width:0;height:52px;padding:0 1px;border-radius:12px;
    font-size:10.5px;font-weight:600;letter-spacing:0;line-height:1.2;color:#5b6770;
  }
  .ige-rail-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ige-rail-btn .ige-ic{width:48px;height:28px;padding:3px 13px;border-radius:14px;stroke-width:1.8;transition:background-color .15s,transform .15s var(--ui-ease,ease)}
  .ige-rail-btn:hover,.ige-rail-btn[aria-pressed="true"]{background:none}
  .ige-rail-btn:active .ige-ic{transform:scale(.92)}
  .ige-rail-btn[aria-pressed="true"]{color:var(--ige-accent);font-weight:700}
  .ige-rail-btn[aria-pressed="true"] .ige-ic{background:var(--ige-accent-bg);stroke-width:2.1}
  .ige-rail-btn[aria-pressed="true"]::before,.ige-rail-foot{display:none}
  .ige-rail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #F26207}
  .ige-canvas{padding:14px 10px calc(var(--ige-tabbar) + var(--ige-safe) + 36px)!important}
  .ige-canvas-label{font-size:10px}
  .ige-panel{display:none}
  .ige[data-panel-open="1"] .ige-panel{display:block}
  .ige-panel{position:fixed;align-self:normal;left:0;right:0;bottom:calc(var(--ige-tabbar) + var(--ige-safe));top:auto;width:100%;max-height:68vh;border-left:0;border-top:1px solid var(--ige-line3);border-radius:var(--ige-r-modal) var(--ige-r-modal) 0 0;padding:20px 16px 24px;box-shadow:0 -12px 40px -8px rgba(11,20,25,.22);z-index:47}
  .ige[data-panel-open="1"] .ige-canvas{padding-right:10px!important}
  /* the close X exists in the tablet sidebar layout (901-1050px) but was never turned on
     here: a phone's bottom sheet has no backdrop to tap away, so without this the only way
     back to the document was re-tapping the same rail tab underneath the sheet, which most
     people do not think to try (owner report, 25 Sep 2026: "I can't go back until I refresh") */
  .ige-panel-x{display:inline-flex;top:12px;right:12px;width:32px;height:32px}
  .ige-fin-body{grid-template-columns:1fr}
  .ige-fin-preview{display:none}
  .ige-fin .ige-review{padding:22px 18px}
  .ige-review h3{font-size:22px}
  .ige-row2{grid-template-columns:1fr}
  /* 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(.ige[data-panel-open="1"]) > .itw-fab,body:has(.ige[data-panel-open="1"]) #itp-tip-btn{display:none!important}
  body:has(.ige) #itp-tip-btn{left:16px!important;bottom:82px!important}
  .save-fallback{bottom:84px!important}
  .ige-toast{bottom:84px}
}
@media (max-width:400px){
  .ige-top{gap:6px;padding:0 10px}
  .ige-word .ige-ic{display:none}
}
/* On phone the paper is still the same fixed-width page scaled down to fit (no caged inner
   scroll, per the site rule), so the same font sizes that read fine on desktop end up quite
   small once scaled to ~40-50%. This raises the document's own on-screen type a step for
   screens under 900px only — print and PDF/PNG export are untouched (a separate @media print
   block already sets their own sizes), and desktop is untouched. Column layouts are flex/grid
   based, not fixed-width, so a ~15-20% bump does not reflow or clip anything that was not
   already safe at this same relative size on desktop. */
@media screen and (max-width:900px){
  /* the name and title bumps apply to the six original designs only (26 Sep 2026): the ten
     newer designs set their own name and title sizes (Editorial's 64px serif title, Ledger's
     spaced 18px, Luxe's small caps) and those are the design, so they are left alone */
  #invoicePreview:where(.tmpl-minimal,.tmpl-modern,.tmpl-classic,.tmpl-bold,.tmpl-stripe,.tmpl-notion) .inv-biz-name{font-size:26px}
  #invoicePreview .inv-biz-contact div,#invoicePreview .inv-biz-address,#invoicePreview .inv-biz-tax{font-size:15.5px}
  #invoicePreview:where(.tmpl-minimal,.tmpl-modern,.tmpl-classic,.tmpl-bold,.tmpl-stripe,.tmpl-notion) .inv-doc-title{font-size:34px}
  #invoicePreview .inv-doc-num,#invoicePreview .inv-doc-po{font-size:15px}
  #invoicePreview .inv-label,#invoicePreview .inv-label-inline{font-size:12.5px}
  #invoicePreview .inv-client-name{font-size:19px}
  #invoicePreview .inv-bill-to div{font-size:15.5px}
  #invoicePreview .inv-detail-row{font-size:15.5px}
  #invoicePreview .inv-shipping{font-size:15px}
  #invoicePreview .inv-table thead th{font-size:12px}
  #invoicePreview .inv-table tbody td{font-size:16px}
  #invoicePreview .inv-totals>div{font-size:16px}
  #invoicePreview .inv-total-grand{font-size:21px!important}
  #invoicePreview .inv-total-grand b{font-size:22px}
  #invoicePreview .inv-paylink a{font-size:16px}
  #invoicePreview .inv-bank div{font-size:15.5px}
  #invoicePreview .inv-latefee{font-size:14px!important}
  #invoicePreview .inv-notes div,#invoicePreview .inv-terms div{font-size:15.5px}
}
@media print{.ige-top,.ige-rail,.ige-panel,.ige-ovl,.ige-canvas-label,.ige-toast,.ige-empty,.ige-ui{display:none!important}}
@media (prefers-reduced-motion:reduce){.ige *{transition:none!important}}