/* it-po-v3.css: the purchase order editor shell.
   Built to the owner's clickable wireframe (InvoiceTools_Clickable_Editor.html, 25 Sep 2026),
   the same shell the invoice generator got in v137: a top toolbar, an icon rail on the left,
   the live order in the middle and one slide-out panel on the right. 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.

   The colours are the site's, not the wireframe'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 five. */
.poe,.poe-fin{
  --poe-text:#0B1419; --poe-text2:#253640; --poe-muted:#66727a; --poe-muted2:#6c7883;
  --poe-faint:#85949a; --poe-eyebrow:#73818b;
  --poe-line:#E3E8EB; --poe-line2:#D8DFE4; --poe-line3:#E8ECEF; --poe-input:#CFD8DE;
  --poe-accent:#C04E06; --poe-accent-hover:#A94405; --poe-accent-bg:#FFF3EA; --poe-accent-soft:#FFF8F2;
  --poe-accent-line:#F3CDB0; --poe-hover:#F1F4F6; --poe-hover2:#E8EDF0; --poe-focus:rgba(242,98,7,.3);
  --poe-canvas:#EEF1F4; --poe-canvas-bg:linear-gradient(180deg,#F6F8FA 0,#EDF0F3 360px); --poe-danger:#9e443e;
  --poe-ghost:#FFF8F2; --poe-ghost-line:#F3CDB0; --poe-ghost-hover:#FFF3EA; --poe-ghost-hover-line:#E8A26F; --poe-ghost-disc:#FFE7D6;
  --poe-ring:0 0 0 3px rgba(242,98,7,.22);
  --poe-sh-1:0 1px 2px rgba(11,20,25,.06);
  --poe-sh-2:0 4px 14px -2px rgba(11,20,25,.12);
  --poe-sh-3:0 14px 36px -8px rgba(11,20,25,.18);
  --poe-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);
  --poe-sh-bar:0 1px 0 rgba(11,20,25,.04),0 10px 24px -18px rgba(11,20,25,.18);
  --poe-sh-modal:0 0 0 1px rgba(11,20,25,.06),0 32px 80px -20px rgba(11,20,25,.45);
  --poe-r-sm:8px; --poe-r-md:10px; --poe-r-lg:12px; --poe-r-xl:16px; --poe-r-modal:20px;
  --poe-hdr:65px; --poe-topbar:76px;
  --poe-font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--poe-text); font-family:var(--poe-font); font-size:16px; line-height:1.4;
}
.poe *,.poe *::before,.poe *::after{box-sizing:border-box}
/* :where() keeps the reset at class weight so a later .poe-rail-btn font-size wins as written */
.poe :where(button){font:inherit;cursor:pointer;color:inherit}
.poe :where(button):disabled{cursor:not-allowed;opacity:.5}
.poe-plain:disabled{opacity:1;color:#AEB7BC;background:#F6F8FA;border-color:#E3E8EB}
.poe button:focus-visible,.poe input:focus-visible,.poe select:focus-visible,.poe textarea:focus-visible,
.poe [contenteditable]:focus-visible{outline:3px solid #F26207;outline-offset:2px}
.poe svg{display:block}
/* .poe-fin is a sibling of .poe, 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 */
.poe .poe-ic,.poe-fin .poe-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. */
.poe-bridge{display:none!important}

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

/* -------------------------------------------------------------- workspace */
.poe-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){
  .poe[data-panel-open="0"] .poe-work{grid-template-columns:116px minmax(0,1fr)}
  .poe[data-panel-open="0"] .poe-panel{display:none}
}
/* "Switch to" document-type menu (28 Sep 2026, owner): hidden by default, only shown on a
   locked arrival (real ?template=&trade= from a trade's own gallery). Same pattern/markup as
   invoice-generator's .ige-mode in it-gen-v3.css, under this page's own .poe- prefix. */
.poe-mode{position:relative;flex:0 0 auto;display:none}
.poe-locked-trade .poe-mode{display:flex}
.poe-locked-trade [data-panel="templates"]{display:none!important}
.poe-locked-trade .poe-trade{display:none!important}
.poe-mode-btn span{font-weight:600;font-size:13px;margin:0 2px}
.poe-mode-btn{width:auto!important;padding:8px 12px!important;gap:6px}
.poe-mode-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;
  border:1px solid var(--poe-line2);border-radius:var(--poe-r-md);box-shadow:var(--poe-sh-2);
  padding:8px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.poe-mode.open .poe-mode-menu{opacity:1;visibility:visible;transform:translateY(0)}
.poe-mode.open .poe-mode-btn{background:var(--poe-hover);color:var(--poe-accent)}
.poe-mode-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--poe-muted);padding:6px 10px 4px}
.poe-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(--poe-text2);text-align:left;
}
.poe-mode-item:hover{background:var(--poe-hover)}
.poe-mode-item.on{color:var(--poe-accent);background:var(--poe-hover)}
.poe-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}
.poe-mode-item .poe-mode-check{margin-left:auto;width:16px;height:16px;flex:0 0 auto;stroke-width:2.4}
@media (max-width:760px){
  .poe-mode-btn span{display:none}
  /* 30 Sep 2026: this button sits at the LEFT edge of the toolbar, so right-anchoring here
     pushed the menu mostly off-screen on phones - same bug as it-gen-v3.css's .ige-mode-menu,
     reported live by the owner. left:0 (the non-mobile default) is correct at every width. */
}

.poe-rail{
  position:sticky; top:calc(var(--poe-hdr) + var(--poe-topbar)); align-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:18px 8px;
  border-right:1px solid var(--poe-line3);min-height:calc(100vh - var(--poe-hdr) - var(--poe-topbar));background:#fff;
}
.poe-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;
}
.poe-rail-btn .poe-ic{width:23px;height:23px}
.poe-rail-btn{transition:background-color .15s,color .15s}
.poe-rail-btn:hover{background:var(--poe-hover);color:var(--poe-text)}
.poe-rail-btn[aria-pressed="true"]{color:var(--poe-accent);background:var(--poe-accent-bg);font-weight:700}
.poe-rail-btn[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--poe-accent)}
.poe-rail-foot{margin-top:auto;padding:12px 4px 12px;text-align:center;color:#97a2a7;font-size:11px;line-height:1.4}
.poe-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 */
.poe-canvas{background:var(--poe-canvas-bg) var(--poe-canvas);padding:20px 34px 70px;min-width:0}
.poe-canvas-label{display:flex;justify-content:space-between;gap:12px;max-width:690px;margin:0 auto 13px;color:#6B7A83;font-size:12px}
.poe-canvas-label span{display:flex;align-items:center;gap:7px}
.poe-canvas-label .poe-ic{width:17px;height:17px}
.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. */
.poe-canvas #paper.paper{width:690px;max-width:none;margin:0;padding:26px;border-radius:4px;border:1px solid transparent;box-shadow:var(--poe-sh-paper)}
.poe-canvas #paper .p-two{grid-template-columns:1fr 1fr;gap:14px}
.poe-canvas #paper .p-sig.po{grid-template-columns:1fr 1fr;gap:16px}
.poe-canvas #paper .p-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
.poe-canvas #paper .p-tbl .n{white-space:nowrap;padding-left:10px}
.poe-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. */
.poe-canvas #paper [data-f]{border-radius:3px;transition:background-color .12s}
.poe-canvas #paper [data-f]:hover{background:var(--poe-accent-bg);cursor:text;box-shadow:0 0 0 3px var(--poe-accent-bg)}
.poe-canvas #paper [data-f].poe-editing{background:var(--poe-accent-soft);outline:2px solid var(--poe-accent);outline-offset:1px;cursor:text;box-shadow:none;min-width:2ch;white-space:pre-wrap}
.poe-canvas #paper [data-f].poe-editing:hover{background:var(--poe-accent-soft)}
.poe-canvas #paper [data-f][data-open]:hover,.poe-canvas #paper [data-f][data-pick]:hover,.poe-canvas #paper [data-f][data-date]:hover{cursor:pointer}
.poe-canvas #paper .pill[data-open]{cursor:pointer}
.poe-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 */
.poe-canvas #paper [data-open]:not([data-f]){border-radius:3px;cursor:pointer;transition:background-color .12s}
.poe-canvas #paper [data-open]:not([data-f]):hover{background:var(--poe-accent-bg);box-shadow:0 0 0 3px var(--poe-accent-bg)}
.poe-canvas #paper i[data-open]:not(:empty){display:block}
.poe-empty{display:none}
.poe-canvas #paper .poe-empty{display:inline-block;color:#9aa5aa;font-style:italic;font-weight:400}
.poe-canvas #paper .poe-empty::before{content:attr(data-ph)}
.poe-canvas #paper .poe-empty.poe-editing::before{content:none}
.poe-canvas #paper .poe-empty.poe-editing{font-style:normal;color:inherit}
.poe-canvas #paper .p-block i .poe-empty,.poe-canvas #paper .p-biz .poe-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. */
.poe-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.poe-ui{padding-left:10px!important;width:32px}
.poe-del{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--poe-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}
.poe-del:hover{color:var(--poe-danger);border-color:#E6B9B5;background:#FFF5F4}
.poe-canvas #paper .poe-ui{display:block!important}
.poe-canvas #paper tr.poe-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. */
.poe-canvas #paper th.poe-ui,.poe-canvas #paper td.poe-ui{display:table-cell!important;border:0!important;background:none}
.poe-canvas #paper tr.poe-row-on td.poe-ui{background:none;box-shadow:none}
.poe-canvas #paper .poe-del{height:24px!important;min-height:0!important}
@media (pointer:coarse){.poe-canvas #paper .poe-del{width:30px;height:30px!important;font-size:17px}}
.poe-canvas #paper span.poe-ui,.poe-canvas #paper .p-chip.poe-ui{display:inline-block!important}
.poe-canvas #paper .p-sum div.poe-ui{display:flex!important}
.poe-canvas #paper .poe-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. */
.poe-canvas #paper .poe-addbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--poe-accent);background:var(--poe-ghost);
  border:1px solid var(--poe-ghost-line);border-radius:var(--poe-r-md);padding:9px 12px;font-weight:700;font-size:13px;font-family:var(--poe-font);
  box-shadow:var(--poe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;cursor:pointer;
}
.poe-canvas #paper .poe-addbtn:hover{background:var(--poe-ghost-hover);border-color:var(--poe-ghost-hover-line);box-shadow:var(--poe-sh-2)}
.poe-canvas #paper .poe-addbtn .poe-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--poe-ghost-disc);stroke-width:2.2}
.poe-canvas #paper .p-sum div.poe-ui{color:var(--poe-muted);font-style:normal}
/* the summary's zero rows carry .poe-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) */
.poe-canvas #paper .p-sum div.poe-ui button,.poe-canvas #paper .p-chip.poe-ui{
  display:inline-flex;width:auto;flex:0 0 auto;align-items:center;gap:6px;background:var(--poe-ghost);border:1px solid var(--poe-ghost-line);border-radius:999px;padding:5px 12px;
  font:inherit;font-style:normal;font-size:12px;font-weight:600;letter-spacing:0;color:var(--poe-accent);cursor:pointer;line-height:1.5;font-family:var(--poe-font);
  box-shadow:var(--poe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.poe-canvas #paper .p-sum div.poe-ui button:hover,.poe-canvas #paper .p-chip.poe-ui:hover{background:var(--poe-ghost-hover);border-color:var(--poe-ghost-hover-line);color:var(--poe-accent);box-shadow:var(--poe-sh-2)}
.poe-canvas #paper .poe-logo-box{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--poe-ghost-line);border-radius:var(--poe-r-md);
  background:var(--poe-ghost);font-size:12px;font-weight:700;color:var(--poe-accent);font-family:var(--poe-font);font-style:normal;
  box-shadow:var(--poe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.poe-canvas #paper .poe-logo-box:hover{background:var(--poe-ghost-hover);border-color:var(--poe-ghost-hover-line);box-shadow:var(--poe-sh-2)}
.poe-canvas #paper .poe-logo-box .poe-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--poe-ghost-disc);stroke-width:2.2}
.poe-canvas #paper .p-terms.poe-ui{display:block!important;white-space:normal}
.poe-canvas #paper tr.poe-row-on td{background:var(--poe-accent-soft);box-shadow:inset 0 0 0 1px #E8A26F}
/* row actions float over the sheet, outside the exported node */
.poe-ovl{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:8}
.poe-rowacts{position:absolute;display:none;gap:2px;pointer-events:auto;background:#fff;border:1px solid var(--poe-line2);border-radius:var(--poe-r-sm);padding:3px;box-shadow:var(--poe-sh-2);transform-origin:top left}
.poe-rowacts[data-on="1"]{display:flex}
.poe-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}
.poe-rowacts button:hover{background:var(--poe-accent-bg);color:var(--poe-accent)}
.poe-rowacts button .poe-ic{width:18px;height:18px}
/* the clear chip beside an optional field: 24px, icon only, past the end of the text */
.poe-fieldclear{
  position:absolute;display:none;align-items:center;justify-content:center;pointer-events:auto;width:24px;height:24px;
  background:#fff;border:1px solid var(--poe-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;
}
.poe-fieldclear[data-on="1"]{display:inline-flex}
.poe-fieldclear .poe-ic{width:14px;height:14px}
.poe-fieldclear:hover{color:var(--poe-accent);border-color:var(--poe-accent-line);background:var(--poe-accent-bg)}
.poe-ovl .poe-fieldclear{min-height:0!important;height:24px!important;width:24px!important}
@media (pointer:coarse){.poe-ovl .poe-fieldclear{width:30px!important;height:30px!important}.poe-fieldclear .poe-ic{width:16px;height:16px}}
/* a small anchored editor for dates and the pick lists (unit, ship via, payment terms) */
.poe-pop{
  position:absolute;display:none;pointer-events:auto;background:#fff;border:1px solid var(--poe-line2);border-radius:var(--poe-r-lg);padding:12px;
  box-shadow:var(--poe-sh-3);min-width:220px;max-width:280px;font-family:var(--poe-font);transform-origin:top left;z-index:9;
}
.poe-pop[data-on="1"]{display:block}
.poe-pop label{display:block;font-weight:700;font-size:12px;margin-bottom:6px;color:var(--poe-text)}
.poe-pop input,.poe-pop select{width:100%;border:1px solid var(--poe-input);border-radius:var(--poe-r-sm);padding:9px 10px;font:inherit;color:inherit;background:#fff;font-size:14px;min-height:42px}
.poe-pop input:focus,.poe-pop select:focus{border-color:var(--poe-accent);outline:none;box-shadow:var(--poe-ring)}
.poe-pop .poe-selwrap{display:block;position:relative}
.poe-pop .poe-selwrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;background-image:none!important}
.poe-pop .poe-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}
.poe-pop .poe-pop-row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.poe-pop .poe-pop-row button{border-radius:var(--poe-r-sm);padding:7px 12px;font-weight:700;font-size:12px;border:1px solid var(--poe-line2);background:#fff;min-height:36px}
.poe-pop .poe-pop-row button:hover{background:var(--poe-hover)}
.poe-pop .poe-pop-row button.poe-pop-ok{background:var(--poe-accent);border-color:var(--poe-accent);color:#fff}
.poe-pop .poe-pop-row button.poe-pop-ok:hover{background:var(--poe-accent-hover);border-color:var(--poe-accent-hover)}

/* ------------------------------------------------------------------ panel */
.poe-panel{
  position:sticky;top:calc(var(--poe-hdr) + var(--poe-topbar));align-self:start;
  max-height:calc(100vh - var(--poe-hdr) - var(--poe-topbar));overflow:auto;
  background:#fff;border-left:1px solid var(--poe-line3);padding:26px 25px 40px;
}
.poe-panel-x{display:none;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--poe-line2);background:#fff;color:var(--poe-text);align-items:center;justify-content:center;padding:0;z-index:2;box-shadow:var(--poe-sh-1)}
.poe-panel-x:hover{background:var(--poe-hover)}
.poe-panel-x .poe-ic{width:16px;height:16px}
.poe-pane{display:none}
.poe-pane[data-on="1"]{display:block}
.poe-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--poe-eyebrow)}
.poe-pane h2{margin:9px 0 5px;font-size:24px;font-weight:800;letter-spacing:-.55px;line-height:1.35;color:var(--poe-text);font-family:var(--poe-font)}
.poe-pane-lead{color:var(--poe-muted2);margin:0;font-size:13px;line-height:1.5}
.poe-pane section{border-top:1px solid var(--poe-line3);padding:18px 0;margin-top:18px}
.poe-pane section+section{margin-top:0}
.poe-pane section h3{margin:0 0 13px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--poe-text);font-family:var(--poe-font)}
.poe-lab{display:block;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--poe-text)}
.poe-lab span{color:#8c999f;font-weight:400}
.poe-pane .poe-in,.poe-pane .poe-sel{
  display:block;width:100%;border:1px solid var(--poe-input);border-radius:var(--poe-r-md);padding:10px 12px;font:inherit;font-size:15px;color:var(--poe-text);
  background:#fff;margin:0 0 14px;min-height:44px;transition:border-color .15s,box-shadow .15s;
}
.poe-pane .poe-in:hover,.poe-pane .poe-sel:hover{border-color:#B9C5CC}
.poe-pane .poe-in:focus,.poe-pane .poe-sel:focus{border-color:var(--poe-accent);outline:none;box-shadow:var(--poe-ring)}
.poe-selwrap.poe-selwrap-p{display:block;position:relative}
.poe-selwrap.poe-selwrap-p .poe-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;background-image:none!important}
.poe-selwrap.poe-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}
.poe-help{color:var(--poe-faint);margin:-8px 0 12px;font-size:11px;line-height:1.5}
.poe-help.poe-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 */
.poe-presets{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 14px}
.poe-presets button{background:#fff;border:1px solid var(--poe-line2);border-radius:999px;padding:7px 11px;font-size:12px;color:var(--poe-text);min-height:0;transition:background-color .15s,border-color .15s}
.poe-presets button:hover{border-color:var(--poe-ghost-hover-line);background:var(--poe-ghost)}
.poe-presets button[aria-pressed="true"]{background:var(--poe-accent-bg);border-color:var(--poe-accent);color:var(--poe-accent);font-weight:700}
/* segmented controls sit on a grey track; the chosen segment lifts off it in the warm tint */
.poe-seg{display:flex;background:var(--poe-hover);border:1px solid var(--poe-line2);border-radius:var(--poe-r-md);padding:3px;gap:2px}
.poe-seg button{flex:1;background:transparent;border:0;border-radius:var(--poe-r-sm);padding:10px 6px;font-size:14px;min-height:44px;color:var(--poe-text2);transition:background-color .15s,color .15s}
.poe-seg button:hover{background:var(--poe-hover2)}
.poe-seg button[aria-pressed="true"],.poe-seg button[aria-pressed="true"]{color:var(--poe-accent);background:var(--poe-accent-bg);font-weight:700;box-shadow:var(--poe-sh-1)}
.poe-seg.poe-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 */
.poe-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.poe-sw{width:31px;height:31px;min-height:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dce3e6;padding:0}
.poe-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--poe-text)}
.poe-sw-custom{position:relative;width:32px;height:32px;border-radius:6px;overflow:hidden;background:conic-gradient(#F26207,#0E7A54,#3B5BDB,#B03A6A,#F26207);display:inline-block}
.poe-sw-custom input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:0;padding:0}
.poe-sw-custom[data-on="1"]{box-shadow:0 0 0 2px var(--poe-text)}
.poe-upload{
  display:block;border:1px dashed var(--poe-ghost-line);border-radius:var(--poe-r-lg);padding:18px 12px;text-align:center;color:var(--poe-text2);font-size:13px;
  background:var(--poe-ghost);cursor:pointer;margin:0 0 12px;transition:background-color .15s,border-color .15s;
}
.poe-upload:hover,.poe-upload.drag{background:var(--poe-ghost-hover);border-color:var(--poe-ghost-hover-line)}
.poe-upload .poe-ic{display:inline-block;vertical-align:-4px;width:16px;height:16px;margin-right:6px}
.poe-upload img{display:block;max-height:64px;max-width:100%;margin:0 auto 8px;object-fit:contain}
.poe-upload img[hidden]{display:none}
.poe-mini-acts{display:flex;gap:8px;margin:-4px 0 12px;flex-wrap:wrap}
.poe-mini-acts button,.poe-btn3{background:#fff;border:1px solid var(--poe-line2);border-radius:var(--poe-r-sm);padding:8px 12px;font-size:13px;font-weight:600;color:var(--poe-text2);min-height:40px;box-shadow:var(--poe-sh-1);transition:background-color .15s,border-color .15s}
.poe-mini-acts button:hover,.poe-btn3:hover{background:var(--poe-hover);border-color:#C9D3D9}
.poe-danger{display:block;width:100%;color:var(--poe-danger);margin-top:15px;background:#fff;border:1px solid var(--poe-line2);border-radius:var(--poe-r-md);padding:10px 12px;font-weight:700;font-size:14px;min-height:44px;transition:background-color .15s,border-color .15s}
.poe-danger:hover{background:#FFF5F4;border-color:#E6B9B5}
.poe-tip{display:flex;align-items:center;gap:9px;color:#7A3403;background:var(--poe-accent-bg);border:1px solid #F8DCC6;border-radius:var(--poe-r-lg);margin:14px 0 0;padding:11px 12px;font-size:12px;line-height:1.45}
.poe-tip .poe-ic{width:22px;height:22px;flex:0 0 auto}
.poe-hint{color:var(--poe-muted2);font-size:12px;line-height:1.5;margin:8px 0 0}
/* signature pad, in the Approval panel */
.poe-sigpanel{display:none;margin-top:12px}
.poe-sigpanel[data-on="1"]{display:block}
.poe-sigpanel .poe-none{color:var(--poe-faint);font-size:12px;margin:0;line-height:1.5}
.poe-sigpanel canvas.sigpad{width:100%;height:132px;border:1px dashed #B9C5CC;border-radius:var(--poe-r-lg);background:#fff;touch-action:none;cursor:crosshair;display:block}
.poe-sigpanel canvas.sigpad.inked{border-style:solid}
.poe-sigprev{margin-top:10px;border:1px solid var(--poe-line3);border-radius:var(--poe-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(--poe-text)}
.poe-sigprev.on{display:block}

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

/* toast */
.poe-toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,10px);z-index:9600;background:#0B1419;color:#fff;border-radius:var(--poe-r-lg);padding:12px 18px;font-size:13px;font-family:var(--poe-font);box-shadow:var(--poe-sh-3);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:min(92vw,520px);text-align:center}
.poe-toast.show{opacity:1;transform:translate(-50%,0)}
.itp-tip-flash{animation:poeFlash 1.4s ease-out}
@keyframes poeFlash{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(.poe) #itp-tip-btn{left:132px!important}
body:has(.poe[data-panel-open="1"]) > .itw-fab{right:calc(376px + 16px)!important}
@media (max-width:1300px){
  body:has(.poe) #itp-tip-btn{left:100px!important}
  body:has(.poe[data-panel-open="1"]) > .itw-fab{right:calc(320px + 16px)!important}
  .poe-work{grid-template-columns:86px minmax(0,1fr) 320px}
  .poe[data-panel-open="0"] .poe-work{grid-template-columns:86px minmax(0,1fr)}
  .poe-rail-btn{font-size:11px}
  .poe-canvas{padding-left:18px;padding-right:18px}
  .poe-panel{padding:23px 20px}
  .poe-top{gap:9px;padding:0 13px}
}
@media (min-width:901px) and (max-width:1050px){
  body:has(.poe) #itp-tip-btn{left:90px!important}
  body:has(.poe[data-panel-open="1"]) > .itw-fab{right:calc(min(375px,88vw) + 16px)!important}
  .poe-work{grid-template-columns:76px minmax(0,1fr)}
  .poe-panel{position:fixed;align-self:normal;justify-self:normal;top:calc(var(--poe-hdr) + var(--poe-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}
  .poe[data-panel-open="1"] .poe-panel{display:block}
  .poe[data-panel-open="1"] .poe-canvas{padding-right:calc(min(375px,88vw) + 18px)}
  .poe-panel-x{display:inline-flex}
  .poe-top .poe-sep{display:none}
}
@media (max-width:900px){
  .poe{--poe-topbar:64px}
  .poe-word,.poe-sep{display:none}
  .poe-word{font-size:18px;letter-spacing:-.5px}
  .rev-word{display:none}
  .poe-top .poe-sep,.poe-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) */
  .poe-top select{max-width:120px;min-height:42px;padding:8px 30px 8px 10px;font-size:14px}
  .poe-trade{flex:1 1 150px;min-width:64px;max-width:260px;gap:6px}
  .poe-trade .poe-selwrap{flex:1 1 auto;min-width:0;display:flex}
  .poe-top .poe-trade select{width:100%;max-width:none;min-width:0;padding:8px 20px 8px 6px!important;font-size:12.5px}
  .poe-trade .poe-selwrap::after{right:6px}
  .it-tsw{width:30px;height:30px;border-radius:9px}
  .it-tsw svg{width:16px;height:16px}
  .poe-top .poe-primary{padding:10px 12px;font-size:12px;gap:6px;min-height:42px}
  .poe-top .poe-primary .poe-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. */
  .poe-top .poe-plain{width:34px;height:34px;min-width:0;min-height:0;padding:0;flex:0 0 auto}
  .poe-top .poe-plain .poe-ic{width:17px;height:17px}
  .poe-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 --poe-tabbar.
     Four tabs (Templates, Order, Style, Approval), so the grid is four 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: Approval was invisible on phone because this said three). */
  .poe{--poe-tabbar:64px;--poe-safe:env(safe-area-inset-bottom,0px)}
  .poe-rail{
    position:fixed;align-self:normal;left:0;right:0;bottom:0;top:auto;z-index:48;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-items:stretch;
    height:calc(var(--poe-tabbar) + var(--poe-safe));min-height:0;padding:6px 8px var(--poe-safe);
    border-right:0;border-top:1px solid var(--poe-line);background:#fff;
    box-shadow:0 -8px 24px -12px rgba(11,20,25,.16);-webkit-tap-highlight-color:transparent;
  }
  .poe-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;
  }
  .poe-rail-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .poe-rail-btn .poe-ic{width:48px;height:28px;padding:3px 13px;border-radius:14px;stroke-width:1.8;transition:background-color .15s,transform .15s}
  .poe-rail-btn:hover,.poe-rail-btn[aria-pressed="true"]{background:none}
  .poe-rail-btn:active .poe-ic{transform:scale(.92)}
  .poe-rail-btn[aria-pressed="true"]{color:var(--poe-accent);font-weight:700}
  .poe-rail-btn[aria-pressed="true"] .poe-ic{background:var(--poe-accent-bg);stroke-width:2.1}
  .poe-rail-btn[aria-pressed="true"]::before,.poe-rail-foot{display:none}
  .poe-rail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #F26207}
  .poe-canvas{padding:14px 10px calc(var(--poe-tabbar) + var(--poe-safe) + 36px)!important}
  .poe-canvas-label{font-size:10px}
  .poe-panel{display:none}
  .poe[data-panel-open="1"] .poe-panel{display:block}
  .poe-panel{position:fixed;align-self:normal;left:0;right:0;bottom:calc(var(--poe-tabbar) + var(--poe-safe));top:auto;width:100%;max-height:68vh;border-left:0;border-top:1px solid var(--poe-line3);border-radius:var(--poe-r-modal) var(--poe-r-modal) 0 0;padding:20px 16px 24px;box-shadow:0 -12px 40px -8px rgba(11,20,25,.22);z-index:47}
  .poe-panel-x{display:inline-flex}
  .poe[data-panel-open="1"] .poe-canvas{padding-right:10px!important}
  .poe-fin-body{grid-template-columns:1fr}
  .poe-fin-preview{display:none}
  .poe-fin .poe-review{padding:22px 18px}
  .poe-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(.poe[data-panel-open="1"]) > .itw-fab,body:has(.poe[data-panel-open="1"]) #itp-tip-btn{display:none!important}
  body:has(.poe) #itp-tip-btn{left:16px!important;bottom:82px!important}
  .poe-toast{bottom:84px}
}
@media (max-width:400px){
  .poe-top{gap:6px;padding:0 10px}
  .poe-word .poe-ic{display:none}
  .poe-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{.poe-top,.poe-rail,.poe-panel,.poe-ovl,.poe-canvas-label,.poe-toast,.poe-fin{display:none!important}
  /* .poe-canvas #paper .poe-ui{display:block!important} (screen rule, for the table-cell fix)
     otherwise wins here too, so the logo box, add-line row and zero-row chips printed
     (found testing the credit-note/sales-order rebuild, 25 Sep 2026). */
  .poe-canvas #paper .poe-ui{display:none!important}
  .poe-work{display:block}.poe-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%) to match the width the print-fit gauge measured the
     content at; the HTML's own @media print rule handles the transform/height collapse,
     this #paper.paper selector only needs the higher specificity to win padding/border/
     box-shadow back from the screen-editor rule above. */
  .poe-canvas #paper.paper{width:690px;padding:0;border:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.poe *{transition:none!important;animation:none!important}}

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

/* "Start with AI" card (28 Sep 2026, same pattern as invoice-generator/quotegenerator, v229).
   Shared: this one file feeds it-ase/it-pfe/it-pse/it-tse-v3.css too (tools/docrail/build.py
   copies and prefix-renames it), so one edit here covers all five generators. Collapsed by
   default; each page's own rail-button/toggle script (its own small inline <script>) shows it. */
.poe-ai{max-width:100%;margin:0 0 12px}
.poe-ai-card{background:var(--poe-accent-soft);border:1px solid var(--poe-accent-line);border-radius:var(--poe-r-lg);padding:16px 16px 14px}
.poe-ai-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.poe-ai-head h2{margin:0;font-size:17px;letter-spacing:-.01em;color:var(--poe-text)}
.poe-ai-k{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--poe-accent);background:var(--poe-accent-bg);border-radius:999px;padding:2px 8px}
.poe-ai-sub{margin:2px 0 12px;color:var(--poe-muted);font-size:13px;max-width:70ch}
.poe-ai[data-collapsed="1"] .poe-ai-sub,.poe-ai[data-collapsed="1"] [id^="aiSlot"]{display:none}
.poe-ai-toggle{border:1px solid var(--poe-line2);background:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:5px 12px;cursor:pointer;color:var(--poe-text2)}
.poe-ai-toggle:hover{border-color:var(--poe-accent);color:var(--poe-accent)}
@media print{.poe-ai{display:none!important}}