/* it-so-v3.css: the sales order editor shell (25 Sep 2026).
   The same shell the invoice generator got in v137 and the purchase order, work order, receipt
   maker and cost estimator got in v142: a sticky toolbar, an icon rail on the left, the live
   sales order always visible in the middle and one slide-out panel on the right, closed when the page
   lands. The document itself (#paper and the .p-* rules in the page's own <style id="pgStyle">)
   keeps the page's styles; nothing here changes what is exported, because every export copies
   #paper on its own and every affordance below is scoped to the editor column.

   Copied from it-po-v3.css with the prefix renamed (soe-): the tokens, the toolbar, the rail,
   the panel, the modal and every phone rule are the purchase order's, verbatim. Change one,
   change all. The colours are the site's: ink #0B1419, CTA orange #C04E06 (hover #A94405) for
   every selected or active state, the warm tint #FFF3EA behind it. The only green on the page
   is the way out: it-green-actions-v1.css paints #wizardReviewBtn, #pngBtn and
   [data-it-action="download"]. Nothing here sets a green. */

/* Editor chrome tokens (25 Sep 2026): the same values, verbatim, as it-gen-v3.css, it-ce-v3.css,
   it-rm-v3.css and it-wo-v3.css under their own prefixes; change one, change all. */
.soe,.soe-fin{
  --soe-text:#0B1419; --soe-text2:#253640; --soe-muted:#66727a; --soe-muted2:#6c7883;
  --soe-faint:#85949a; --soe-eyebrow:#73818b;
  --soe-line:#E3E8EB; --soe-line2:#D8DFE4; --soe-line3:#E8ECEF; --soe-input:#CFD8DE;
  --soe-accent:#C04E06; --soe-accent-hover:#A94405; --soe-accent-bg:#FFF3EA; --soe-accent-soft:#FFF8F2;
  --soe-accent-line:#F3CDB0; --soe-hover:#F1F4F6; --soe-hover2:#E8EDF0; --soe-focus:rgba(242,98,7,.3);
  --soe-canvas:#EEF1F4; --soe-canvas-bg:linear-gradient(180deg,#F6F8FA 0,#EDF0F3 360px); --soe-danger:#9e443e;
  --soe-ghost:#FFF8F2; --soe-ghost-line:#F3CDB0; --soe-ghost-hover:#FFF3EA; --soe-ghost-hover-line:#E8A26F; --soe-ghost-disc:#FFE7D6;
  --soe-ring:0 0 0 3px rgba(242,98,7,.22);
  --soe-sh-1:0 1px 2px rgba(11,20,25,.06);
  --soe-sh-2:0 4px 14px -2px rgba(11,20,25,.12);
  --soe-sh-3:0 14px 36px -8px rgba(11,20,25,.18);
  --soe-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);
  --soe-sh-bar:0 1px 0 rgba(11,20,25,.04),0 10px 24px -18px rgba(11,20,25,.18);
  --soe-sh-modal:0 0 0 1px rgba(11,20,25,.06),0 32px 80px -20px rgba(11,20,25,.45);
  --soe-r-sm:8px; --soe-r-md:10px; --soe-r-lg:12px; --soe-r-xl:16px; --soe-r-modal:20px;
  --soe-hdr:65px; --soe-topbar:76px;
  --soe-font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--soe-text); font-family:var(--soe-font); font-size:16px; line-height:1.4;
}
.soe *,.soe *::before,.soe *::after{box-sizing:border-box}
/* :where() keeps the reset at class weight so a later .soe-rail-btn font-size wins as written */
.soe :where(button){font:inherit;cursor:pointer;color:inherit}
.soe :where(button):disabled{cursor:not-allowed;opacity:.5}
.soe-plain:disabled{opacity:1;color:#AEB7BC;background:#F6F8FA;border-color:#E3E8EB}
.soe button:focus-visible,.soe input:focus-visible,.soe select:focus-visible,.soe textarea:focus-visible,
.soe [contenteditable]:focus-visible{outline:3px solid #F26207;outline-offset:2px}
.soe svg{display:block}
/* .soe-fin is a sibling of .soe, not a child, so the modal's own icons (the close X) had no
   stroke and were invisible until 25 Sep 2026; the icon rule covers both roots now */
.soe .soe-ic,.soe-fin .soe-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 (account
   fill, the dashboard handover, tracked send, the tips drawer) keyed by the ids this page has
   always had. It mirrors the order's state and is never shown; people edit the order itself. */
.soe-bridge{display:none!important}

/* ---------------------------------------------------------------- top bar */
.soe-top{
  position:sticky; top:var(--soe-hdr); z-index:40;
  display:flex; align-items:center; gap:12px; height:var(--soe-topbar); padding:0 25px;
  background:#fff; border-bottom:1px solid var(--soe-line); box-shadow:var(--soe-sh-bar);
}
.soe-word{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;letter-spacing:-.7px;white-space:nowrap;color:var(--soe-text)}
.soe-word .soe-ic{width:24px;height:24px;color:#F26207}
.soe-sep{border-left:1px solid var(--soe-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 */
.soe-trade{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;color:var(--soe-accent)}
.soe-selwrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.soe-top select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;color:#1d2b35;background:#fff;border:1px solid var(--soe-line2);
  border-radius:10px;max-width:220px;padding:10px 34px 10px 12px;font-size:16px;line-height:1.4;font-family:var(--soe-font);
  min-height:44px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.soe-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 */
.soe-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}
.soe-btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:44px;
  color:var(--soe-text2);background:#fff;border:1px solid var(--soe-line2);border-radius:var(--soe-r-md);padding:9px 14px;font-weight:600;font-size:14px;
  box-shadow:var(--soe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.soe-btn2 .soe-ic{width:18px;height:18px;color:var(--soe-accent)}
.soe-btn2 b{font-weight:700;color:var(--soe-text)}
.soe-btn2:hover{background:var(--soe-hover);border-color:#C9D3D9}
.soe-plain:hover{background:var(--soe-hover);color:var(--soe-accent)}
.soe-plain{color:#4A5860;background:#F6F8FA;border:1px solid #B9C5CC;padding:8px;border-radius:var(--soe-r-sm);display:inline-flex;min-height:44px;min-width:44px;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.soe-plain .soe-ic{width:22px;height:22px}
.soe-spacer{flex:1}
.soe-zoom{display:flex;align-items:center;height:44px;background:#fff;border:1px solid var(--soe-line2);border-radius:var(--soe-r-md);gap:1px;flex:0 0 auto;box-shadow:var(--soe-sh-1)}
.soe-zoom button{color:#45545f;background:none;border:0;width:36px;height:42px;font-size:21px;line-height:1;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.soe-zoom button.soe-zoom-mode{color:#6f7d83;width:auto;padding:0 7px;font-size:11px;font-weight:600}
.soe-zoom button.soe-zoom-mode[aria-pressed="true"]{color:var(--soe-accent)}
.soe-zoom button:hover{color:var(--soe-accent)}
.soe-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 */
.soe-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;flex:0 0 auto;
  background:var(--soe-accent);color:#fff;border:1px solid var(--soe-accent);border-radius:10px;padding:12px 20px;font-weight:700;font-size:16px;min-height:46px;
}
.soe-primary .soe-ic{width:19px;height:19px}

/* -------------------------------------------------------------- workspace */
.soe-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){
  .soe[data-panel-open="0"] .soe-work{grid-template-columns:116px minmax(0,1fr)}
  .soe[data-panel-open="0"] .soe-panel{display:none}
}
.soe-rail{
  position:sticky; top:calc(var(--soe-hdr) + var(--soe-topbar)); align-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:18px 8px;
  border-right:1px solid var(--soe-line3);min-height:calc(100vh - var(--soe-hdr) - var(--soe-topbar));background:#fff;
}
.soe-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;
}
.soe-rail-btn .soe-ic{width:23px;height:23px}
.soe-rail-btn{transition:background-color .15s,color .15s}
.soe-rail-btn:hover{background:var(--soe-hover);color:var(--soe-text)}
.soe-rail-btn[aria-pressed="true"]{color:var(--soe-accent);background:var(--soe-accent-bg);font-weight:700}
.soe-rail-btn[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--soe-accent)}
.soe-rail-foot{margin-top:auto;padding:12px 4px 12px;text-align:center;color:#97a2a7;font-size:11px;line-height:1.4}
.soe-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 */
.soe-canvas{background:var(--soe-canvas-bg) var(--soe-canvas);padding:20px 34px 70px;min-width:0}
.soe-canvas-label{display:flex;justify-content:space-between;gap:12px;max-width:690px;margin:0 auto 13px;color:#6B7A83;font-size:12px}
.soe-canvas-label span{display:flex;align-items:center;gap:7px}
.soe-canvas-label .soe-ic{width:17px;height:17px}
/* Simple/Advanced mode toggle (10 Oct 2026): hides optional fields (customer email, empty logo
   placeholder) by default without touching layout/design/panels, per the owner's sitewide
   Simple/Advanced spec. Same look as the other generators' equivalent control. */
.soe-modewrap{display:flex;align-items:center;gap:8px}
.soe-mode{display:inline-flex;border:1px solid var(--soe-line2);border-radius:999px;padding:2px;background:#fff;box-shadow:var(--soe-sh-1)}
.soe-mode button{background:transparent;border:0;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:#5b6770;line-height:1.2;min-height:0!important;transition:background-color .15s,color .15s}
.soe-mode button[aria-pressed="true"]{background:var(--soe-accent-bg);color:var(--soe-accent)}
.soe-mode button:hover{color:var(--soe-accent)}
.soe-modehint{font-size:11px;color:#6B7A83}
@media (max-width:600px){.soe-canvas-label .soe-modehint{display:none}.soe-canvas-label{gap:8px}.soe-canvas-label>span:first-child{flex:1 1 auto;min-width:0}}
/* an optional field this page keeps visible in Advanced (or once explicitly revealed in
   Simple) but hides by default in Simple; JS toggles the class, never removes the value */
#appView[data-mode="simple"] .so-simple-hide:not(.so-revealed){display:none!important}
/* the reveal control inside the Order panel's new "Optional fields" section */
.soe-fieldtoggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--soe-line3)}
.soe-fieldtoggle:last-child{border-bottom:0}
.soe-fieldtoggle>span{display:flex;flex-direction:column;min-width:0}
.soe-fieldtoggle-lab{display:block;font-size:13px;font-weight:600;color:var(--soe-text1,#1d2b35)}
.soe-fieldtoggle-sub{display:block;font-size:11.5px;color:#7a8891;margin-top:1px}
.soe-fieldtoggle-btn{border:1px solid var(--soe-line2);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;background:#fff;color:#5b6770;flex:none}
.soe-fieldtoggle-btn[aria-pressed="true"]{background:var(--soe-accent-bg);color:var(--soe-accent);border-color:var(--soe-accent-line)}
.pv-scroll{position:relative}
.pv-sizer{position:relative;margin:0 auto;overflow:visible}
.pv-inner{position:absolute;left:50%;top:0;width:690px;transform-origin:top center;transform:translateX(-50%)}
/* The order is laid out at the width it exports at (690px, ITSheet.PAGE_W) and scaled to the
   column, so what is on screen is what is in the file. The page's own phone rules for the
   paper (one-column blocks, wrapped number columns) are viewport queries; they are undone
   here so a 690px sheet on a 390px phone keeps its printed layout. */
/* one paper shadow on every generator; the 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. */
.soe-canvas #paper.paper:not([data-inv-doc]){width:690px;max-width:none;margin:0;padding:26px;border-radius:4px;border:1px solid transparent;box-shadow:var(--soe-sh-paper)}
.soe-canvas #paper .p-two{grid-template-columns:1fr 1fr;gap:14px}
.soe-canvas #paper .p-sig.po{grid-template-columns:1fr 1fr;gap:16px}
.soe-canvas #paper .p-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
.soe-canvas #paper .p-tbl .n{white-space:nowrap;padding-left:10px}
.soe-canvas #paper .p-tbl td{font-size:12.5px}

/* 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. */
.soe-canvas #paper [data-f]{border-radius:3px;transition:background-color .12s}
/* No background fill on hover/editing (own-text-color-independent outline ring only) - a fill under
   text that could be any color, on any design's own background, washes out illegible on a dark
   design (owner-reported, screenshot, 7 Oct 2026). Outline/box-shadow alone works on any color. */
.soe-canvas #paper [data-f]:hover{cursor:text;box-shadow:0 0 0 3px var(--soe-accent-bg)}
.soe-canvas #paper [data-f].soe-editing{outline:2px solid var(--soe-accent);outline-offset:1px;cursor:text;box-shadow:none;min-width:2ch;white-space:pre-wrap}
.soe-canvas #paper [data-f].soe-editing:hover{background:var(--soe-accent-soft)}
.soe-canvas #paper [data-f][data-open]:hover,.soe-canvas #paper [data-f][data-pick]:hover,.soe-canvas #paper [data-f][data-date]:hover{cursor:pointer}
.soe-canvas #paper .pill[data-open]{cursor:pointer}
.soe-canvas #paper .p-logo{cursor:pointer}
/* jump-to-panel targets that carry no data-f of their own (the supplier/ship "more" line, the
   strip chips, the signature rule): same affordance, keyed off data-open alone */
.soe-canvas #paper [data-open]:not([data-f]){border-radius:3px;cursor:pointer;transition:background-color .12s}
.soe-canvas #paper [data-open]:not([data-f]):hover{background:var(--soe-accent-bg);box-shadow:0 0 0 3px var(--soe-accent-bg)}
.soe-canvas #paper i[data-open]:not(:empty){display:block}
.soe-empty{display:none}
.soe-canvas #paper .soe-empty{display:inline-block;color:#9aa5aa;font-style:italic;font-weight:400}
.soe-canvas #paper .soe-empty::before{content:attr(data-ph)}
.soe-canvas #paper .soe-empty.soe-editing::before{content:none}
.soe-canvas #paper .soe-empty.soe-editing{font-style:normal;color:inherit}
.soe-canvas #paper .p-block i .soe-empty,.soe-canvas #paper .p-biz .soe-empty{display:block}
/* editor-only parts of the sheet: the add-line row, the zero rows in the summary, the empty
   chips and the logo box. Hidden everywhere except in the editor column. */
.soe-ui{display:none!important}
/* the per-line remove button had no styling of its own and sat flush against the amount
   column with no gap (owner screenshot, 25 Sep 2026); give the cell breathing room and the
   button a real, consistent size matching the field-clear chip elsewhere on this page */
td.soe-ui{padding-left:10px!important;width:32px}
.soe-del{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--soe-line2);border-radius:50%;color:#53646d;font-size:15px;
  line-height:1;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(11,20,25,.12);transition:background-color .15s,border-color .15s,color .15s}
.soe-del:hover{color:var(--soe-danger);border-color:#E6B9B5;background:#FFF5F4}
.soe-canvas #paper .soe-ui{display:block!important}
.soe-canvas #paper tr.soe-ui{display:table-row!important}
/* the remove column is a real cell (the generic block rule above wrapped it in an anonymous
   cell, so the header's underline and every row's dashed rule ran on past Amount into the
   editor-only column). No borders, no row highlight there: it is not part of the document.
   The inlined touch sheet gives every button min-height:44px !important below 1025px, which
   stretched the 24px circle into a 24x46 pill on tablets; the same weight pins it back, and
   coarse pointers get the 30px target the field-clear chip already uses. */
.soe-canvas #paper th.soe-ui,.soe-canvas #paper td.soe-ui{display:table-cell!important;border:0!important;background:none}
.soe-canvas #paper tr.soe-row-on td.soe-ui{background:none;box-shadow:none}
.soe-canvas #paper .soe-del{height:24px!important;min-height:0!important}
@media (pointer:coarse){.soe-canvas #paper .soe-del{width:30px;height:30px!important;font-size:17px}}
.soe-canvas #paper span.soe-ui,.soe-canvas #paper .p-chip.soe-ui{display:inline-block!important}
.soe-canvas #paper .p-sum div.soe-ui{display:flex!important}
.soe-canvas #paper .soe-addrow td{padding:6px 0 0!important;border:0!important}
/* the "ghost" affordance: every editor-only add/edit control 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. */
.soe-canvas #paper .soe-addbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--soe-accent);background:var(--soe-ghost);
  border:1px solid var(--soe-ghost-line);border-radius:var(--soe-r-md);padding:9px 12px;font-weight:700;font-size:13px;font-family:var(--soe-font);
  box-shadow:var(--soe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;cursor:pointer;
}
.soe-canvas #paper .soe-addbtn:hover{background:var(--soe-ghost-hover);border-color:var(--soe-ghost-hover-line);box-shadow:var(--soe-sh-2)}
.soe-canvas #paper .soe-addbtn .soe-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--soe-ghost-disc);stroke-width:2.2}
.soe-canvas #paper .p-sum div.soe-ui{color:var(--soe-muted);font-style:normal}
/* the summary's zero rows carry .soe-addbtn as well, so width and display are pinned back to
   a compact pill here (this selector outweighs the full-width add-line rule above) */
.soe-canvas #paper .p-sum div.soe-ui button,.soe-canvas #paper .p-chip.soe-ui{
  display:inline-flex;width:auto;flex:0 0 auto;align-items:center;gap:6px;background:var(--soe-ghost);border:1px solid var(--soe-ghost-line);border-radius:999px;padding:5px 12px;
  font:inherit;font-style:normal;font-size:12px;font-weight:600;letter-spacing:0;color:var(--soe-accent);cursor:pointer;line-height:1.5;font-family:var(--soe-font);
  box-shadow:var(--soe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.soe-canvas #paper .p-sum div.soe-ui button:hover,.soe-canvas #paper .p-chip.soe-ui:hover{background:var(--soe-ghost-hover);border-color:var(--soe-ghost-hover-line);color:var(--soe-accent);box-shadow:var(--soe-sh-2)}
.soe-canvas #paper .soe-logo-box{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--soe-ghost-line);border-radius:var(--soe-r-md);
  background:var(--soe-ghost);font-size:12px;font-weight:700;color:var(--soe-accent);font-family:var(--soe-font);font-style:normal;
  box-shadow:var(--soe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.soe-canvas #paper .soe-logo-box:hover{background:var(--soe-ghost-hover);border-color:var(--soe-ghost-hover-line);box-shadow:var(--soe-sh-2)}
.soe-canvas #paper .soe-logo-box .soe-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--soe-ghost-disc);stroke-width:2.2}
.soe-canvas #paper .p-terms.soe-ui{display:block!important;white-space:normal}
.soe-canvas #paper tr.soe-row-on td{background:var(--soe-accent-soft);box-shadow:inset 0 0 0 1px #E8A26F}
/* row actions float over the sheet, outside the exported node */
.soe-ovl{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:8}
.soe-rowacts{position:absolute;display:none;gap:2px;pointer-events:auto;background:#fff;border:1px solid var(--soe-line2);border-radius:var(--soe-r-sm);padding:3px;box-shadow:var(--soe-sh-2);transform-origin:top left}
.soe-rowacts[data-on="1"]{display:flex}
.soe-rowacts button{color:#53646d;background:none;border:0;padding:4px;border-radius:6px;display:inline-flex;min-height:0;min-width:0;transition:background-color .15s,color .15s}
.soe-rowacts button:hover{background:var(--soe-accent-bg);color:var(--soe-accent)}
.soe-rowacts button .soe-ic{width:18px;height:18px}
/* the clear chip beside an optional field: 24px, icon only, past the end of the text */
.soe-fieldclear{
  position:absolute;display:none;align-items:center;justify-content:center;pointer-events:auto;width:24px;height:24px;
  background:#fff;border:1px solid var(--soe-line2);border-radius:50%;color:#53646d;padding:0;transform-origin:top left;
  box-shadow:0 1px 3px rgba(11,20,25,.12);transition:background-color .15s,border-color .15s,color .15s;
}
.soe-fieldclear[data-on="1"]{display:inline-flex}
.soe-fieldclear .soe-ic{width:14px;height:14px}
.soe-fieldclear:hover{color:var(--soe-accent);border-color:var(--soe-accent-line);background:var(--soe-accent-bg)}
.soe-ovl .soe-fieldclear{min-height:0!important;height:24px!important;width:24px!important}
@media (pointer:coarse){.soe-ovl .soe-fieldclear{width:30px!important;height:30px!important}.soe-fieldclear .soe-ic{width:16px;height:16px}}
/* a small anchored editor for dates and the pick lists (unit, ship via, payment terms) */
.soe-pop{
  position:absolute;display:none;pointer-events:auto;background:#fff;border:1px solid var(--soe-line2);border-radius:var(--soe-r-lg);padding:12px;
  box-shadow:var(--soe-sh-3);min-width:220px;max-width:280px;font-family:var(--soe-font);transform-origin:top left;z-index:9;
}
.soe-pop[data-on="1"]{display:block}
.soe-pop label{display:block;font-weight:700;font-size:12px;margin-bottom:6px;color:var(--soe-text)}
.soe-pop input,.soe-pop select{width:100%;border:1px solid var(--soe-input);border-radius:var(--soe-r-sm);padding:9px 10px;font:inherit;color:inherit;background:#fff;font-size:14px;min-height:42px}
.soe-pop input:focus,.soe-pop select:focus{border-color:var(--soe-accent);outline:none;box-shadow:var(--soe-ring)}
.soe-pop .soe-selwrap{display:block;position:relative}
.soe-pop .soe-selwrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;background-image:none!important}
.soe-pop .soe-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}
.soe-pop .soe-pop-row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.soe-pop .soe-pop-row button{border-radius:var(--soe-r-sm);padding:7px 12px;font-weight:700;font-size:12px;border:1px solid var(--soe-line2);background:#fff;min-height:36px}
.soe-pop .soe-pop-row button:hover{background:var(--soe-hover)}
.soe-pop .soe-pop-row button.soe-pop-ok{background:var(--soe-accent);border-color:var(--soe-accent);color:#fff}
.soe-pop .soe-pop-row button.soe-pop-ok:hover{background:var(--soe-accent-hover);border-color:var(--soe-accent-hover)}

/* ------------------------------------------------------------------ panel */
.soe-panel{
  position:sticky;top:calc(var(--soe-hdr) + var(--soe-topbar));align-self:start;
  max-height:calc(100vh - var(--soe-hdr) - var(--soe-topbar));overflow:auto;
  background:#fff;border-left:1px solid var(--soe-line3);padding:26px 25px 40px;
}
.soe-panel-x{display:none;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--soe-line2);background:#fff;color:var(--soe-text);align-items:center;justify-content:center;padding:0;z-index:2;box-shadow:var(--soe-sh-1)}
.soe-panel-x:hover{background:var(--soe-hover)}
.soe-panel-x .soe-ic{width:16px;height:16px}
.soe-pane{display:none}
.soe-pane[data-on="1"]{display:block}
.soe-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--soe-eyebrow)}
.soe-pane h2{margin:9px 0 5px;font-size:24px;font-weight:800;letter-spacing:-.55px;line-height:1.35;color:var(--soe-text);font-family:var(--soe-font)}
.soe-pane-lead{color:var(--soe-muted2);margin:0;font-size:13px;line-height:1.5}
.soe-pane section{border-top:1px solid var(--soe-line3);padding:18px 0;margin-top:18px}
.soe-pane section+section{margin-top:0}
.soe-pane section h3{margin:0 0 13px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--soe-text);font-family:var(--soe-font)}
.soe-lab{display:block;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--soe-text)}
.soe-lab span{color:#8c999f;font-weight:400}
.soe-pane .soe-in,.soe-pane .soe-sel{
  display:block;width:100%;border:1px solid var(--soe-input);border-radius:var(--soe-r-md);padding:10px 12px;font:inherit;font-size:15px;color:var(--soe-text);
  background:#fff;margin:0 0 14px;min-height:44px;transition:border-color .15s,box-shadow .15s;
}
.soe-pane .soe-in:hover,.soe-pane .soe-sel:hover{border-color:#B9C5CC}
.soe-pane .soe-in:focus,.soe-pane .soe-sel:focus{border-color:var(--soe-accent);outline:none;box-shadow:var(--soe-ring)}
.soe-selwrap.soe-selwrap-p{display:block;position:relative}
.soe-selwrap.soe-selwrap-p .soe-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;background-image:none!important}
.soe-selwrap.soe-selwrap-p::after{content:"";position:absolute;right:13px;top:20px;width:8px;height:8px;border-right:1.8px solid #5c6a72;border-bottom:1.8px solid #5c6a72;transform:rotate(45deg);pointer-events:none}
.soe-help{color:var(--soe-faint);margin:-8px 0 12px;font-size:11px;line-height:1.5}
.soe-help.soe-help-top{margin:9px 0}
/* free-text field with quick-pick presets underneath (payment terms): typing anything works,
   clicking a chip fills the input with that exact text, both stay in sync */
.soe-presets{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 14px}
.soe-presets button{background:#fff;border:1px solid var(--soe-line2);border-radius:999px;padding:7px 11px;font-size:12px;color:var(--soe-text);min-height:0;transition:background-color .15s,border-color .15s}
.soe-presets button:hover{border-color:var(--soe-ghost-hover-line);background:var(--soe-ghost)}
.soe-presets button[aria-pressed="true"]{background:var(--soe-accent-bg);border-color:var(--soe-accent);color:var(--soe-accent);font-weight:700}
/* segmented controls sit on a grey track; the chosen segment lifts off it in the warm tint */
.soe-seg{display:flex;background:var(--soe-hover);border:1px solid var(--soe-line2);border-radius:var(--soe-r-md);padding:3px;gap:2px}
.soe-seg button{flex:1;background:transparent;border:0;border-radius:var(--soe-r-sm);padding:10px 6px;font-size:14px;min-height:44px;color:var(--soe-text2);transition:background-color .15s,color .15s}
.soe-seg button:hover{background:var(--soe-hover2)}
.soe-seg button[aria-pressed="true"],.soe-seg button[aria-pressed="true"]{color:var(--soe-accent);background:var(--soe-accent-bg);font-weight:700;box-shadow:var(--soe-sh-1)}
.soe-seg.soe-seg-grid{display:grid;grid-template-columns:1fr 1fr}
/* the swatches are the document's own accent, the colour the person picks for their order */
.soe-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.soe-sw{width:31px;height:31px;min-height:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dce3e6;padding:0}
.soe-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--soe-text)}
.soe-sw-custom{position:relative;width:32px;height:32px;border-radius:6px;overflow:hidden;background:conic-gradient(#F26207,#0E7A54,#3B5BDB,#B03A6A,#F26207);display:inline-block}
.soe-sw-custom input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:0;padding:0}
.soe-sw-custom[data-on="1"]{box-shadow:0 0 0 2px var(--soe-text)}
.soe-upload{
  display:block;border:1px dashed var(--soe-ghost-line);border-radius:var(--soe-r-lg);padding:18px 12px;text-align:center;color:var(--soe-text2);font-size:13px;
  background:var(--soe-ghost);cursor:pointer;margin:0 0 12px;transition:background-color .15s,border-color .15s;
}
.soe-upload:hover,.soe-upload.drag{background:var(--soe-ghost-hover);border-color:var(--soe-ghost-hover-line)}
.soe-upload .soe-ic{display:inline-block;vertical-align:-4px;width:16px;height:16px;margin-right:6px}
.soe-upload img{display:block;max-height:64px;max-width:100%;margin:0 auto 8px;object-fit:contain}
.soe-upload img[hidden]{display:none}
.soe-mini-acts{display:flex;gap:8px;margin:-4px 0 12px;flex-wrap:wrap}
.soe-mini-acts button,.soe-btn3{background:#fff;border:1px solid var(--soe-line2);border-radius:var(--soe-r-sm);padding:8px 12px;font-size:13px;font-weight:600;color:var(--soe-text2);min-height:40px;box-shadow:var(--soe-sh-1);transition:background-color .15s,border-color .15s}
.soe-mini-acts button:hover,.soe-btn3:hover{background:var(--soe-hover);border-color:#C9D3D9}
.soe-danger{display:block;width:100%;color:var(--soe-danger);margin-top:15px;background:#fff;border:1px solid var(--soe-line2);border-radius:var(--soe-r-md);padding:10px 12px;font-weight:700;font-size:14px;min-height:44px;transition:background-color .15s,border-color .15s}
.soe-danger:hover{background:#FFF5F4;border-color:#E6B9B5}
.soe-tip{display:flex;align-items:center;gap:9px;color:#7A3403;background:var(--soe-accent-bg);border:1px solid #F8DCC6;border-radius:var(--soe-r-lg);margin:14px 0 0;padding:11px 12px;font-size:12px;line-height:1.45}
.soe-tip .soe-ic{width:22px;height:22px;flex:0 0 auto}
.soe-hint{color:var(--soe-muted2);font-size:12px;line-height:1.5;margin:8px 0 0}
/* signature pad, in the Approval panel */
.soe-sigpanel{display:none;margin-top:12px}
.soe-sigpanel[data-on="1"]{display:block}
.soe-sigpanel .soe-none{color:var(--soe-faint);font-size:12px;margin:0;line-height:1.5}
.soe-sigpanel canvas.sigpad{width:100%;height:132px;border:1px dashed #B9C5CC;border-radius:var(--soe-r-lg);background:#fff;touch-action:none;cursor:crosshair;display:block}
.soe-sigpanel canvas.sigpad.inked{border-style:solid}
.soe-sigprev{margin-top:10px;border:1px solid var(--soe-line3);border-radius:var(--soe-r-lg);background:#fff;padding:12px;display:none;font-family:"Segoe Script","Bradley Hand","Snell Roundhand",cursive;font-size:30px;line-height:1.25;color:var(--soe-text)}
.soe-sigprev.on{display:block}

/* ---------------------------------------------------------- review modal */
.fin-overlay.soe-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.soe-fin[hidden]{display:none}
.soe-fin .soe-review{position:relative;width:min(900px,100%);background:#fff;border-radius:var(--soe-r-modal);padding:32px;box-shadow:var(--soe-sh-modal);color:var(--soe-text);font-family:var(--soe-font);max-height:calc(100vh - 36px);overflow:auto}
.soe-review .soe-fin-x{position:absolute;top:20px;right:20px;background:var(--soe-hover);border:0;padding:0;border-radius:50%;color:var(--soe-text);display:inline-flex;width:40px;height:40px;min-height:40px;min-width:40px;align-items:center;justify-content:center;transition:background-color .15s}
.soe-review .soe-fin-x:hover{background:var(--soe-hover2)}
.soe-review .soe-fin-x .soe-ic{width:20px;height:20px}
.soe-review h3{margin:7px 0;font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.2;font-family:var(--soe-font)}
.soe-review .soe-fin-sub{color:#64737b;font-size:14px;margin:0}
.soe-fin-body{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
.soe-fin-preview{background:var(--soe-canvas-bg) var(--soe-canvas);border:1px solid var(--soe-line);display:grid;place-items:center;padding:22px;border-radius:14px}
.soe-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(--soe-sh-paper);color:var(--soe-text)}
.soe-fin-mini strong{font-size:16px}
.soe-fin-mini span{color:var(--soe-accent)}
.soe-fin-mini hr{border:0;border-top:1px solid #ddd;width:100%;margin:0}
.soe-fin-mini p{margin:0}
.soe-fin-mini b{color:var(--soe-accent);text-align:right;margin-top:auto;font-size:21px}
.soe-fin-real{position:relative;overflow:hidden;background:#fff;box-shadow:var(--soe-sh-paper);border-radius:4px}.soe-fin-real *{pointer-events:none!important}
.soe-fin-actions h4{margin:5px 0 20px;font-size:18px;font-weight:700;font-family:var(--soe-font)}
.soe-fin-checks{list-style:none;margin:0;padding:0}
.soe-fin-checks li{display:flex;gap:7px;font-size:13px;margin:0 0 10px;line-height:1.4}
.soe-fin-checks li .soe-ic{width:20px;height:20px;flex:0 0 auto}
.soe-fin-checks li.valid{color:var(--soe-text2)}
.soe-fin-checks li.warn{color:#a36320}
.soe-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}
/* The export grid. The page's sitewide button block (gb-style) paints #pngBtn, #printBtn and
   friends as frosted plates; inside the modal they take one quiet tile shape and the green
   sheet keeps the two that produce a file. */
.soe-fin .fin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0 0}
.soe-fin .fin-grid button,.soe-fin .fin-grid a,.soe-fin .acts.share button,.soe-fin .acts.share a{
  display:flex!important;align-items:center;justify-content:center;gap:7px;border-width:1px;border-style:solid;border-radius:var(--soe-r-md)!important;
  padding:9px 8px!important;font-size:14px;font-weight:600;font-family:var(--soe-font);min-height:44px!important;
  box-shadow:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-decoration:none;
  filter:none!important;white-space:nowrap;transition:background-color .15s,border-color .15s;
}
/* the quiet tiles. :not(#pngBtn) lifts the weight above the sitewide id rules; the two that
   produce a file (#pngBtn and [data-it-action="download"]) are left to the green sheet */
.soe-fin .fin-grid button:not([data-it-action]):not(#pngBtn),.soe-fin .fin-grid a:not(#itNone),
.soe-fin .acts.share button:not(#btnSendTracked),.soe-fin .acts.share a:not(#itNone){
  background:#fff!important;border-color:var(--soe-line2)!important;color:var(--soe-text)!important;
}
.soe-fin .fin-grid button:not([data-it-action]):not(#pngBtn):hover,.soe-fin .fin-grid a:not(#itNone):hover,
.soe-fin .acts.share button:not(#btnSendTracked):hover,.soe-fin .acts.share a:not(#itNone):hover{
  background:var(--soe-ghost-hover)!important;border-color:var(--soe-ghost-hover-line)!important;color:var(--soe-text)!important;
}
.soe-fin .fin-grid .soe-ic,.soe-fin .fin-grid svg{width:18px;height:18px;flex:0 0 auto}
/* Download image is the one action that produces the file, so it leads the grid, full width,
   green (from it-green-actions-v1.css) and a size up from the quiet tiles beside it, the same
   hierarchy the invoice/quote/cost-estimator export modals use for their download tile. */
.soe-fin .fin-grid #pngBtn{grid-column:1/-1;font-size:15px;font-weight:700;min-height:48px!important}
/* the tracked-send tile the shared script appends, and its messages */
.soe-fin .acts.share{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0 0}
.soe-fin .acts.share #btnSendTracked{color:var(--soe-accent)!important;border:1px solid var(--soe-accent)!important;font-weight:700;min-height:48px!important;opacity:1}
.soe-fin .acts.share #btnSendTracked.its-off{opacity:1;filter:none!important}
.soe-fin .acts.share #btnSendTracked .its-dot{display:none}
.soe-fin .its-msg{margin:8px 0 0;font-size:13px;color:#a36320}
.soe-fin .its-result{font-size:13px;line-height:1.5;margin:8px 0 0}
.soe-fin .its-link{display:flex;gap:8px;margin:8px 0}
.soe-fin .its-link input{flex:1;min-width:0;border:1px solid var(--soe-line2);border-radius:var(--soe-r-sm);padding:8px}
.soe-fin .its-link button{border:1px solid var(--soe-line2);border-radius:var(--soe-r-sm);padding:8px 12px;background:#fff;font-weight:700}
.soe-fin-note{display:block;color:#8b999f;font-size:11px;line-height:1.5;margin-top:12px}

/* ------------------------------------------------------ this document's own additions */
/* The business name on the sheet is a <b> so the page's own ".p-biz span" rule (the small grey
   address line) cannot shrink it; it keeps the serif heading weight it always had. */
.soe-canvas #paper .p-bizname{font-weight:inherit}
/* The note box stays on the sheet in the editor when it is empty, as a ghost prompt; it is
   .soe-ui then, so no export or print ever shows an empty box. */
.soe-canvas #paper .p-terms.soe-ui{display:block!important}
/* "Use these numbers", the carry block that hands the lines to the invoice generator and the
   other tools (it-carryover-v1.js), sits under the sheet at the sheet's own width: the prose
   below the builder says "the button under the sheet", and that is where it is. */
.soe-carry{max-width:690px;margin:22px auto 0}
.soe-carry .carry{background:#fff;border-color:var(--soe-line2)}
/* Download image and Download PDF both produce a file, so both lead the grid, side by side and
   both green (it-green-actions-v1.css paints #pngBtn and [data-it-action="download"]); the
   CSV and JSON tiles under them are the quiet shape. */
.soe-fin .fin-grid #pngBtn{grid-column:auto}
.soe-fin .fin-grid #pngBtn,.soe-fin .fin-grid [data-it-action="download"]{font-size:15px;font-weight:700;min-height:48px!important}
@media (max-width:480px){.soe-fin .fin-grid{grid-template-columns:1fr}}
/* the panel's inline error line (email format, a credit larger than its invoice) */
.soe-err{display:none;color:var(--soe-danger);font-size:12px;font-weight:600;line-height:1.45;margin:-8px 0 12px}
.soe-err.on{display:block}

/* toast */
.soe-toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,10px);z-index:9600;background:#0B1419;color:#fff;border-radius:var(--soe-r-lg);padding:12px 18px;font-size:13px;font-family:var(--soe-font);box-shadow:var(--soe-sh-3);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:min(92vw,520px);text-align:center}
.soe-toast.show{opacity:1;transform:translate(-50%,0)}
.itp-tip-flash{animation:soeFlash 1.4s ease-out}
@keyframes soeFlash{0%{box-shadow:0 0 0 4px rgba(242,98,7,.55)}100%{box-shadow:0 0 0 4px rgba(242,98,7,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; both step aside */
body:has(.soe) #itp-tip-btn{left:132px!important}
body:has(.soe[data-panel-open="1"]) > .itw-fab{right:calc(376px + 16px)!important}
@media (max-width:1300px){
  body:has(.soe) #itp-tip-btn{left:100px!important}
  body:has(.soe[data-panel-open="1"]) > .itw-fab{right:calc(320px + 16px)!important}
  .soe-work{grid-template-columns:86px minmax(0,1fr) 320px}
  .soe[data-panel-open="0"] .soe-work{grid-template-columns:86px minmax(0,1fr)}
  .soe-rail-btn{font-size:11px}
  .soe-canvas{padding-left:18px;padding-right:18px}
  .soe-panel{padding:23px 20px}
  .soe-top{gap:9px;padding:0 13px}
}
@media (min-width:901px) and (max-width:1050px){
  body:has(.soe) #itp-tip-btn{left:90px!important}
  body:has(.soe[data-panel-open="1"]) > .itw-fab{right:calc(min(375px,88vw) + 16px)!important}
  .soe-work{grid-template-columns:76px minmax(0,1fr)}
  .soe-panel{position:fixed;align-self:normal;justify-self:normal;top:calc(var(--soe-hdr) + var(--soe-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}
  .soe[data-panel-open="1"] .soe-panel{display:block}
  .soe[data-panel-open="1"] .soe-canvas{padding-right:calc(min(375px,88vw) + 18px)}
  .soe-panel-x{display:inline-flex}
  .soe-top .soe-sep{display:none}
}
@media (max-width:900px){
  .soe{--soe-topbar:64px}
  .soe-word,.soe-sep{display:none}
  .soe-word{font-size:18px;letter-spacing:-.5px}
  .rev-word{display:none}
  .soe-top .soe-sep,.soe-zoom{display:none}
  /* the trade picker keeps a real width on a phone: a 150px basis is claimed before the free
     space is split with the spacer, the cap keeps it from ballooning on tablets (the same fix
     as .ige-trade in it-gen-v3.css) */
  .soe-top select{max-width:120px;min-height:42px;padding:8px 30px 8px 10px;font-size:14px}
  .soe-trade{flex:1 1 150px;min-width:64px;max-width:260px;gap:6px}
  .soe-trade .soe-selwrap{flex:1 1 auto;min-width:0;display:flex}
  .soe-top .soe-trade select{width:100%;max-width:none;min-width:0;padding:8px 20px 8px 6px!important;font-size:12.5px}
  .soe-trade .soe-selwrap::after{right:6px}
  .it-tsw{width:30px;height:30px;border-radius:9px}
  .it-tsw svg{width:16px;height:16px}
  .soe-top .soe-primary{padding:10px 12px;font-size:12px;gap:6px;min-height:42px}
  .soe-top .soe-primary .soe-ic{width:15px;height:15px}
  /* undo/redo stay reachable on phone (shrunk, never hidden): 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. Matches the fix already shipped in it-gen-v3.css's .ige-plain. */
  .soe-top .soe-plain{width:34px;height:34px;min-width:0;min-height:0;padding:0;flex:0 0 auto}
  .soe-top .soe-plain .soe-ic{width:17px;height:17px}
  .soe-work{display:block}
  /* The rail becomes a bottom tab bar: equal columns with a real gutter, the icon in its
     own pill that tints orange when the tab is open, a 10.5px label that never wraps, and the
     home-indicator inset added below. Everything above the bar reads its height from --soe-tabbar.
     Six tabs (Try AI, Templates, Order, Extras, Style, Confirm), so the grid is six columns. A
     column count that does not match the real number of rail buttons wraps the last one onto a
     second row that sits below the bar's own fixed height and off the bottom of the screen,
     unreachable (found 27 Sep 2026: Confirm was invisible on phone because this said three;
     bumped 5->6 when the Extras tab was added, same bug class). */
  .soe{--soe-tabbar:64px;--soe-safe:env(safe-area-inset-bottom,0px)}
  .soe-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(--soe-tabbar) + var(--soe-safe));min-height:0;padding:6px 8px var(--soe-safe);
    border-right:0;border-top:1px solid var(--soe-line);background:#fff;
    box-shadow:0 -8px 24px -12px rgba(11,20,25,.16);-webkit-tap-highlight-color:transparent;
  }
  .soe-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;
  }
  .soe-rail-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .soe-rail-btn .soe-ic{width:48px;height:28px;padding:3px 13px;border-radius:14px;stroke-width:1.8;transition:background-color .15s,transform .15s}
  .soe-rail-btn:hover,.soe-rail-btn[aria-pressed="true"]{background:none}
  .soe-rail-btn:active .soe-ic{transform:scale(.92)}
  .soe-rail-btn[aria-pressed="true"]{color:var(--soe-accent);font-weight:700}
  .soe-rail-btn[aria-pressed="true"] .soe-ic{background:var(--soe-accent-bg);stroke-width:2.1}
  .soe-rail-btn[aria-pressed="true"]::before,.soe-rail-foot{display:none}
  .soe-rail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #F26207}
  .soe-canvas{padding:14px 10px calc(var(--soe-tabbar) + var(--soe-safe) + 36px)!important}
  .soe-canvas-label{font-size:10px}
  .soe-panel{display:none}
  .soe[data-panel-open="1"] .soe-panel{display:block}
  .soe-panel{position:fixed;align-self:normal;left:0;right:0;bottom:calc(var(--soe-tabbar) + var(--soe-safe));top:auto;width:100%;max-height:68vh;border-left:0;border-top:1px solid var(--soe-line3);border-radius:var(--soe-r-modal) var(--soe-r-modal) 0 0;padding:20px 16px 24px;box-shadow:0 -12px 40px -8px rgba(11,20,25,.22);z-index:47}
  .soe-panel-x{display:inline-flex}
  .soe[data-panel-open="1"] .soe-canvas{padding-right:10px!important}
  .soe-fin-body{grid-template-columns:1fr}
  .soe-fin-preview{display:none}
  .soe-fin .soe-review{padding:22px 18px}
  .soe-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(.soe[data-panel-open="1"]) > .itw-fab,body:has(.soe[data-panel-open="1"]) #itp-tip-btn{display:none!important}
  body:has(.soe) #itp-tip-btn{left:16px!important;bottom:82px!important}
  .soe-toast{bottom:84px}
}
@media (max-width:400px){
  .soe-top{gap:6px;padding:0 10px}
  .soe-word .soe-ic{display:none}
  .soe-rail{padding-left:6px;padding-right:6px;gap:4px}
}
/* The order sheet is a fixed-width paper scaled down with a transform to fit the phone
   screen (it-sheetfit-v1, see pgStyle), so whatever text measures small in the source
   measures smaller still once painted. #paper already carries a sitewide legibility floor
   (it-align-v1: th/td/p-sub/p-meta/p-chip etc), because #paper is shared with every other
   document generator, but it does not reach every class this page's own paper uses. This is
   this page's own version of the bump it-gen-v3.css already ships for #invoicePreview's
   .inv-* classes: screen only, never print (print sizes itself for the sheet, not the phone
   glass in front of it). */
@media screen and (max-width:900px){
  #paper.paper .p-biz{font-size:24px!important}
  #paper.paper .p-block b{font-size:15.5px!important}
  #paper.paper .p-block i{font-size:13px!important}
  #paper.paper .p-sum .total b{font-size:22px!important}
  #paper.paper .p-sum .total span{font-size:15.5px!important}
  #paper.paper .p-empty{font-size:14.5px!important}
  #paper.paper .p-strip .p-chip{font-size:12.5px!important;padding:5px 11px}
}
@media print{.soe-top,.soe-rail,.soe-panel,.soe-ovl,.soe-canvas-label,.soe-toast,.soe-fin,.soe-carry,.soe-bridge{display:none!important}
  .soe-work{display:block}.soe-canvas{padding:0!important;background:#fff}
  .pv-sizer{width:auto!important;height:auto!important}
  .pv-inner{position:static!important;transform:none!important;width:auto!important;left:auto!important}
    /* width stays 690px (not 100%): the print-fit gauge measures the sheet at 690px, and
     stretching it to the print container's own width here made the scale that gauge
     computed no longer match the printed layout, so the sheet split onto a second page. */
  .soe-canvas #paper.paper{width:690px;padding:0;border:0;box-shadow:none}
  /* the editor-only affordances (logo box, add-line row, remove column, zero-row chips, the
     edit chip, the ghost note, placeholders) are shown above with !important under the canvas
     ancestor, which is still there when the page prints; the same selectors, same weight, hide
     them again so a printed sheet is the document and nothing else */
  .soe-canvas #paper .soe-ui,.soe-canvas #paper tr.soe-ui,.soe-canvas #paper th.soe-ui,.soe-canvas #paper td.soe-ui,
  .soe-canvas #paper span.soe-ui,.soe-canvas #paper .p-chip.soe-ui,.soe-canvas #paper .p-sum div.soe-ui,
  .soe-canvas #paper .p-terms.soe-ui,.soe-canvas #paper .soe-empty{display:none!important}
}
@media (prefers-reduced-motion:reduce){.soe *{transition:none!important;animation:none!important}}

/* dates on the sheet: the chip swaps for the native date input in place (startDatePick) */
.soe-canvas #paper [data-pick="date"]{cursor:pointer}
.soe-canvas #paper .soe-cellpick{font:inherit;font-size:12px;padding:2px 4px;border:1px solid var(--soe-accent);border-radius:4px;background:#fff;color:inherit;max-width:100%;width:auto;min-height:0!important;height:auto;line-height:1.3}

/* a full-text editor for a long field on a narrow screen (owner, 10 Oct: the line-item
   description is awkward to edit inline on a phone - this opens a bottom sheet instead).
   Mobile only; desktop keeps editing the field in place. Same pattern/markup as
   invoice-generator's .ige-fldmodal, reusing this page's own --soe-* tokens. */
.ige-fldmodal-ovl{position:fixed;inset:0;z-index:9400;background:rgba(17,17,17,.42);
  display:none;align-items:flex-end;justify-content:center}
.ige-fldmodal-ovl[data-on="1"]{display:flex}
.ige-fldmodal{background:#fff;border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  width:100%;max-width:560px;max-height:80vh;overflow:auto;box-shadow:0 -20px 60px -20px rgba(17,17,17,.4);
  font-family:var(--soe-font);animation:igeFldIn .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes igeFldIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ige-fldmodal-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--soe-eyebrow);
  display:block;margin-bottom:6px}
.ige-fldmodal textarea{width:100%;min-height:120px;border:1px solid var(--soe-input);border-radius:var(--soe-r-lg);
  padding:14px;font:inherit;font-size:16px;color:var(--soe-text);resize:vertical;background:#fff}
.ige-fldmodal textarea:focus{border-color:var(--soe-accent);outline:none;box-shadow:var(--soe-ring)}
.ige-fldmodal .ige-fldmodal-row{display:flex;gap:10px;margin-top:14px}
.ige-fldmodal .ige-fldmodal-row button{flex:1;min-height:48px;border-radius:999px;font-weight:700;font-size:14px;
  border:1px solid var(--soe-line2);background:#fff;color:var(--soe-text)}
.ige-fldmodal .ige-fldmodal-row button:hover{background:var(--soe-hover)}
.ige-fldmodal .ige-fldmodal-row button.ige-fldmodal-ok{background:var(--soe-accent);border-color:var(--soe-accent);color:#fff}
.ige-fldmodal .ige-fldmodal-row button.ige-fldmodal-ok:hover{background:var(--soe-accent-hover);border-color:var(--soe-accent-hover)}
@media (min-width:901px){.ige-fldmodal-ovl{display:none!important}}

/* sibling-document links are page chrome, never part of a printed sheet (they pushed a 2nd page) */
@media print{.it-sibdocs{display:none!important}}

/* Empty generator (owner, 14 Oct 2026: "all generators empty... if they leave it empty then dnt
   print it"). .soe-blank marks a block with nothing filled in: a party block, a blank line, the whole
   table when no line is real, the chip strip, the signature. On the editor sheet it keeps its own
   layout, so the placeholders inside it are the prompt; anywhere the .soe-canvas ancestor is absent
   (a real print, the PDF/PNG raster's .it-shot clone, the print clone in #it-print-root, the Review
   preview in .soe-fin-real, the print-fit gauge) it is gone, heading and all. */
.soe-blank:not(.soe-canvas *){display:none!important}
@media print{.soe-canvas #paper .soe-blank{display:none!important}.soe-canvas #paper .soe-empty::before{content:none!important}}
/* a line's description cell with nothing typed stays a table cell everywhere (never inline-block,
   never hidden, or the row's other columns shift); its prompt text only paints under .soe-canvas */
td.soe-empty{display:table-cell}
.soe-canvas #paper td.soe-empty{display:table-cell}
@media print{.soe-canvas #paper td.soe-empty{display:table-cell!important}}
/* an unfilled name or address line inside a party block stacks like the filled one would */
.soe-canvas #paper .p-block b.soe-empty,.soe-canvas #paper .p-block i.soe-empty{display:block}

/* phone toolbar (Oct 2026): the trade select keeps a readable label. The invisible spacer and the
   picker split the free space, which left the select 33-57px wide (swatch only). The spacer goes,
   the picker takes the free space with a 96px floor, undo/redo/export never shrink, and the
   swatch drops on the narrowest phones so the trade name stays legible. */
@media (max-width:640px){
  .soe-top .soe-spacer{display:none}
  .soe-top .soe-trade{flex:1 1 0%;min-width:0;max-width:260px;margin-right:auto}
  .soe-top .soe-trade .soe-selwrap{min-width:96px}
  .soe-top .soe-trade select{min-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .soe-top .soe-plain{flex:0 0 auto}
}
@media (max-width:389px){.soe-top .soe-trade .it-tsw{display:none}}
/* touch hit areas (P1-05): bigger tap area, same look; overlays only, never shrinks a neighbour */
@media (pointer:coarse){
.soe-canvas #paper .soe-addbtn{position:relative}
.soe-canvas #paper .soe-del{position:relative;overflow:visible}
.soe-canvas #paper .soe-del::before{content:"";position:absolute;inset:-8px -44px -8px -14px}
.soe-canvas #paper .soe-addbtn::before{content:"";position:absolute;inset:-14px 0}
.soe-ovl .soe-fieldclear::before{content:"";position:absolute;inset:-7px}
}

/* Short desktop viewports (a 1366x768 laptop leaves roughly 620-660px of page once the browser
   chrome is counted): the sticky rail is taller than that, so its last button sits below the fold
   until the editor scrolls out. Tighter spacing keeps every rail button reachable. */
@media (min-width:901px) and (max-height:760px){
  .soe-rail{padding-top:8px;padding-bottom:8px;gap:2px}
  .soe-rail-btn{height:66px}
}

/* Review modal grid (18 Oct 2026): equal columns that cannot be pushed apart by a long label
   (packing slip's "Copy packing slip as image" widened its column past the modal at 360-390px), a
   lone last tile takes the whole row instead of leaving a hole, and the reset tile does the same
   at the widths where the share row runs two across. */
.soe-fin .fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.soe-fin .fin-grid button,.soe-fin .fin-grid a{white-space:normal}
.soe-fin .fin-grid > :last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:559.98px),(min-width:1100.02px){
  .soe-fin .acts.share > #resetBtn{grid-column:1/-1}
}

/* Simple/Advanced pill on touch screens (18 Oct 2026): the 24px-tall segments were the smallest
   control on the page; the other generators' pill is 36px and up. */
@media (pointer:coarse){
  .soe-mode button{min-height:36px!important;padding:8px 14px}
}