/* it-wo-v3.css: the work order generator's 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 sticky toolbar, an icon rail on the
   left, the live document always in the middle, and one slide-out panel on the right. The
   document itself (#paper, the .p-* rules in the page's pgStyle block) keeps the page's own
   styles; nothing here changes what is printed or exported.

   The layout is the wireframe's; the colours are the site's (owner, 25 Sep 2026: the
   wireframe's teal is not ours). Ink #0B1419, CTA orange #C04E06 (hover #A94405) for every
   selected or active state, the warm tint #FFF3EA behind it, grey lines. The only green on
   the page is the way out: it-green-actions-v1.css paints #woReviewBtn and #pngBtn through
   [data-it-action="download"] and #pngBtn. Nothing here sets a green.

   Every class is prefixed woe- so it can never meet the invoice generator's ige- rules or a
   sitewide bare-class rule (the it-contrast-v2 lesson). */

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

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

/* ---------------------------------------------------------------- top bar */
.woe-top{
  position:sticky; top:var(--woe-hdr); z-index:40;
  display:flex; align-items:center; gap:14px; height:var(--woe-topbar); padding:0 24px;
  background:#fff; border-bottom:1px solid var(--woe-line); box-shadow:var(--woe-sh-bar);
}
.woe-word{display:flex;align-items:center;gap:9px;font-weight:800;font-size:22px;letter-spacing:-.8px;white-space:nowrap;color:var(--woe-text)}
.woe-word .woe-ic{width:24px;height:24px;color:#F26207}
.woe-sep{border-left:1px solid var(--woe-line2);height:28px;margin:0 6px}
/* Switch-to-another-generator menu (28 Sep 2026), same behavior as invoice-generator's
   .ige-mode: hidden on a plain visit, shown only when .woe-locked-trade is on #appView (a real
   ?template=&trade= pair, meaning this page opened from a trade's own industry-page gallery).
   Named woe-switchto rather than woe-mode since #woeMode/.woe-mode further down already name
   this page's own Simple/Advanced document-detail toggle. */
.woe-switchto{position:relative;flex:0 0 auto;display:none}
.woe-locked-trade .woe-switchto{display:flex}
.woe-locked-trade [data-panel="templates"]{display:none!important}
.woe-locked-trade .woe-trade{display:none!important}
.woe-switchto-btn span{font-weight:600;font-size:13px;margin:0 2px}
.woe-switchto-btn{width:auto!important;padding:8px 12px!important;gap:6px}
.woe-switchto-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;
  border:1px solid var(--woe-line2);border-radius:var(--woe-r-lg);box-shadow:var(--woe-sh-3);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:50;
}
.woe-switchto.open .woe-switchto-menu{opacity:1;visibility:visible;transform:translateY(0)}
.woe-switchto.open .woe-switchto-btn{background:var(--woe-hover);color:var(--woe-accent)}
.woe-switchto-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--woe-muted);padding:6px 10px 4px}
.woe-switchto-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;
  border-radius:8px;padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--woe-text);cursor:pointer;
  font-family:var(--woe-font);
}
.woe-switchto-item:hover{background:var(--woe-hover)}
.woe-switchto-item svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .woe-switchto-btn span{display:none}
  /* Left-aligned (opens rightward), not right-aligned: at <=680px .woe-word/.woe-sep hide and
     Switch becomes the LEFTMOST toolbar control (unlike invoice-generator's own Switch, which
     always keeps a control to its left) - a right-aligned menu here would push its 220px width
     past the left edge of the screen, off-canvas and unreachable. */
  .woe-switchto-menu{left:0;right:auto}
}
/* 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 */
.woe-trade{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;color:var(--woe-accent)}
.woe-selwrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.woe-top select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;color:#1d2b35;background:#fff;border:1px solid var(--woe-line2);
  border-radius:10px;max-width:220px;padding:10px 34px 10px 12px;font-size:16px;line-height:1.4;
  min-height:45px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-family:var(--woe-font);
}
.woe-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 */
.woe-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}
.woe-plain{color:#4A5860;background:#F6F8FA;border:1px solid #B9C5CC;padding:8px;border-radius:var(--woe-r-sm);display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.woe-plain:hover{background:var(--woe-hover);color:var(--woe-accent)}
.woe-spacer{flex:1}
.woe-zoom{display:flex;align-items:center;height:42px;background:#fff;border:1px solid var(--woe-line2);border-radius:var(--woe-r-md);gap:1px;flex:0 0 auto;box-shadow:var(--woe-sh-1)}
.woe-zoom button{color:#45545f;background:none;border:0;width:34px;height:40px;font-size:21px;line-height:1;border-radius:8px}
.woe-zoom button.woe-zoom-mode{color:#6f7d83;width:auto;padding:0 5px;font-size:11px;font-weight:600}
.woe-zoom button.woe-zoom-mode[aria-pressed="true"]{color:var(--woe-accent)}
.woe-zoom button:hover{color:var(--woe-accent)}
.woe-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 */
.woe-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;flex:0 0 auto;
  background:var(--woe-accent);color:#fff;border:1px solid var(--woe-accent);border-radius:10px;padding:12px 20px;font-weight:700;font-size:16px;
}
.woe-primary:hover{background:var(--woe-accent-hover);border-color:var(--woe-accent-hover)}
.woe-primary .woe-ic{width:19px;height:19px}

/* -------------------------------------------------------------- workspace */
.woe-work{display:grid;grid-template-columns:116px minmax(0,1fr) 376px;align-items:start;min-height:60vh;margin:0;padding:0;max-width:none}
@media (min-width:1051px){
  .woe[data-panel-open="0"] .woe-work{grid-template-columns:116px minmax(0,1fr)}
  .woe[data-panel-open="0"] .woe-panel{display:none}
}
.woe-rail{
  position:sticky; top:calc(var(--woe-hdr) + var(--woe-topbar)); align-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:18px 8px;
  border-right:1px solid var(--woe-line3);min-height:calc(100vh - var(--woe-hdr) - var(--woe-topbar));background:#fff;
}
.woe-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;
}
.woe-rail-btn .woe-ic{width:23px;height:23px}
.woe-rail-btn{transition:background-color .15s,color .15s}
.woe-rail-btn:hover{background:var(--woe-hover);color:var(--woe-text)}
.woe-rail-btn[aria-pressed="true"]{color:var(--woe-accent);background:var(--woe-accent-bg);font-weight:700}
.woe-rail-btn[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--woe-accent)}
.woe-rail-foot{margin-top:auto;padding:12px 4px 12px;text-align:center;color:#97a2a7;font-size:11px;line-height:1.4}
.woe-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 */
.woe-canvas{background:var(--woe-canvas-bg) var(--woe-canvas);padding:20px 34px 70px;min-width:0}
.woe-canvas-label{display:flex;justify-content:space-between;gap:12px;max-width:760px;margin:0 auto 13px;color:#6B7A83;font-size:12px}
.woe-canvas-label span{display:flex;align-items:center;gap:7px}
.woe-canvas-label .woe-ic{width:17px;height:17px}
/* the Simple / Advanced switch above the sheet had no rule of its own and drew as two bare
   native buttons (25 Sep 2026); it is the quote generator's pill (it-qg-v3.css .ige-mode) in
   this page's prefix. The touch sheet's 44px button minimum is undone at the same weight. */
.woe-modewrap{display:flex;align-items:center;gap:8px}
.woe-mode{display:inline-flex;border:1px solid var(--woe-line2);border-radius:999px;padding:2px;background:#fff;box-shadow:var(--woe-sh-1)}
.woe-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}
.woe-mode button[aria-pressed="true"]{background:var(--woe-accent-bg);color:var(--woe-accent)}
.woe-mode button:hover{color:var(--woe-accent)}
.woe-modehint{font-size:11px;color:#6B7A83}
@media (max-width:600px){.woe-canvas-label .woe-modehint{display:none}.woe-canvas-label{gap:8px}.woe-canvas-label>span:first-child{flex:1 1 auto;min-width:0}}
.woe-scroll{position:relative}
.woe-sizer{position:relative;margin:0 auto;overflow:visible}
.woe-inner{position:absolute;left:50%;top:0;width:720px;transform-origin:top center;transform:translateX(-50%)}
.woe-inner:not([style*="scale"]){position:relative;left:auto;transform:none;margin:0 auto;max-width:100%}
.woe-canvas #paper{width:720px;max-width:none;margin:0}
/* one paper shadow on every generator; the page's own .paper border stays 1px (transparent) so
   the sheet keeps its exact width, the shadow's first layer draws the hairline. Export and
   print copy #paper on their own and never see it. */
.woe-canvas #paper.paper{border-radius:4px;border-color:transparent;box-shadow:var(--woe-sh-paper)}

/* inline editing on the document. These affordances live only where the editor's own column
   is an ancestor; every export and print copies the sheet on its own, so they never print. */
.woe-canvas #paper [data-f]{border-radius:3px;transition:background-color .12s}
.woe-canvas #paper [data-f]:hover{background:var(--woe-accent-bg);cursor:text;box-shadow:0 0 0 3px var(--woe-accent-bg)}
.woe-canvas #paper [data-f].woe-editing{background:var(--woe-accent-soft);outline:2px solid var(--woe-accent);outline-offset:1px;cursor:text;box-shadow:none;min-width:2ch}
.woe-canvas #paper [data-f].woe-editing:hover{background:var(--woe-accent-soft)}
/* min-width does nothing on a non-replaced inline element (b, span), so an empty inline
   field that gets focused (by click or by Tab landing on it) collapses to a literal 0x0 box:
   invisible, with no caret to see. inline-block gives it real dimensions; div/i fields are
   already block and were never affected, so they are left alone to keep each on its own line. */
.woe-canvas #paper b.woe-f.woe-editing,.woe-canvas #paper span.woe-f.woe-editing{display:inline-block;min-height:1.3em;min-width:2ch!important}
.woe-canvas #paper [data-f][data-pick]:hover,.woe-canvas #paper [data-f][data-date]:hover{cursor:pointer}
.woe-canvas #paper .p-tbl td[data-f]{cursor:text}
.woe-canvas #paper [data-f].woe-empty{color:#9aa5aa;font-style:italic;font-weight:400}
.woe-canvas #paper [data-f].woe-empty::before{content:attr(data-ph)}
.woe-canvas #paper [data-f].woe-empty.woe-editing::before{content:none}
.woe-canvas #paper [data-f].woe-empty.woe-editing{font-style:normal;color:inherit}
/* editor-only blocks: shown while editing, stripped from every copy that leaves the page */
.woe-ui{display:none!important}
.woe-canvas #paper .woe-ui{display:block!important}
.woe-canvas #paper tr.woe-ui{display:table-row!important}
.woe-canvas #paper .p-sum .woe-ui{display:flex!important}
.woe-canvas #paper span.woe-ui{display:inline-flex!important}
.woe-canvas #paper .woe-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, the
   zero rows in the summary, the empty term chips) is the same object on every generator: warm
   tint fill, solid hairline in the tint's own line colour, orange label, the icon on a small
   disc, and a real hover (deeper tint, darker line, a lift). Never dashed: that read as unfinished. */
.woe-canvas #paper .woe-addbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--woe-accent);background:var(--woe-ghost);
  border:1px solid var(--woe-ghost-line);border-radius:var(--woe-r-md);padding:9px 12px;font-weight:700;font-size:13px;font-family:var(--woe-font);cursor:pointer;
  box-shadow:var(--woe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.woe-canvas #paper .woe-addbtn:hover{background:var(--woe-ghost-hover);border-color:var(--woe-ghost-hover-line);box-shadow:var(--woe-sh-2)}
.woe-canvas #paper .woe-addbtn .woe-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--woe-ghost-disc);stroke-width:2.2}
.woe-canvas #paper tr.woe-row-on td{background:var(--woe-accent-soft);box-shadow:inset 0 0 0 1px #E8A26F}
.woe-canvas #paper .p-chip.woe-ui{
  color:var(--woe-accent);background:var(--woe-ghost);border:1px solid var(--woe-ghost-line);border-radius:999px;cursor:pointer;
  font-family:var(--woe-font);font-weight:600;letter-spacing:0;box-shadow:var(--woe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.woe-canvas #paper .p-chip.woe-ui:hover{background:var(--woe-ghost-hover);border-color:var(--woe-ghost-hover-line);box-shadow:var(--woe-sh-2)}
.woe-canvas #paper .p-sum .woe-ui span:first-child{color:var(--woe-accent);font-weight:600}
.woe-canvas #paper .p-sum .woe-ui span:first-child::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:var(--woe-ghost-disc);font-weight:800;font-size:13px;line-height:1;vertical-align:-3px}
.woe-canvas #paper .p-block i.woe-empty,.woe-canvas #paper .p-meta i.woe-empty{display:block}
/* row actions float over the sheet, outside the exported node */
.woe-ovl{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:8}
.woe-rowacts{position:absolute;display:none;gap:2px;pointer-events:auto;background:#fff;border:1px solid var(--woe-line2);border-radius:var(--woe-r-sm);box-shadow:var(--woe-sh-2);padding:3px;transform-origin:0 0}
.woe-rowacts[data-on="1"]{display:flex}
.woe-rowacts button{color:#53646d;background:none;border:0;padding:4px;border-radius:6px;display:inline-flex;min-height:0;transition:background-color .15s,color .15s}
.woe-rowacts button:hover{background:var(--woe-accent-bg);color:var(--woe-accent)}
.woe-rowacts button .woe-ic{width:18px;height:18px}
/* the clear chip beside an optional field: 24px, icon only, past the end of the text */
.woe-fieldclear{
  position:absolute;display:none;align-items:center;justify-content:center;pointer-events:auto;width:24px;height:24px;padding:0;
  border-radius:50%;background:#fff;border:1px solid var(--woe-line2);box-shadow:0 1px 3px rgba(11,20,25,.12);color:#53646d;cursor:pointer;transform-origin:0 0;
  transition:background-color .15s,border-color .15s,color .15s;
}
.woe-fieldclear[data-on="1"]{display:inline-flex}
.woe-fieldclear .woe-ic{width:14px;height:14px}
.woe-fieldclear:hover{color:var(--woe-accent);border-color:var(--woe-accent-line);background:var(--woe-accent-bg)}
.woe-ovl .woe-fieldclear{min-height:0!important;height:24px!important;width:24px!important}
@media (pointer:coarse){.woe-ovl .woe-fieldclear{width:30px!important;height:30px!important}.woe-fieldclear .woe-ic{width:16px;height:16px}}
/* a small anchored editor for dates, units, status and the term chips */
.woe-pop{
  position:absolute;z-index:9;pointer-events:auto;background:#fff;border:1px solid var(--woe-line2);border-radius:var(--woe-r-lg);
  padding:12px;box-shadow:var(--woe-sh-3);display:none;min-width:210px;max-width:300px;font-family:var(--woe-font);font-size:13px;color:var(--woe-text);transform-origin:0 0;
}
.woe-pop[data-on="1"]{display:block}
.woe-pop label{display:block;font-weight:700;font-size:12px;margin-bottom:6px}
.woe-pop input,.woe-pop select{width:100%;border:1px solid var(--woe-input);border-radius:var(--woe-r-sm);padding:9px 10px;font:inherit;color:inherit;background:#fff}
.woe-pop input:focus,.woe-pop select:focus{border-color:var(--woe-accent);outline:none;box-shadow:var(--woe-ring)}
.woe-pop .woe-pop-row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.woe-pop .woe-pop-row button{border-radius:var(--woe-r-sm);padding:7px 12px;font-weight:700;font-size:12px;border:1px solid var(--woe-line2);background:#fff;min-height:0}
.woe-pop .woe-pop-row button:hover{background:var(--woe-hover)}
.woe-pop .woe-pop-row button.woe-pop-ok{background:var(--woe-accent);border-color:var(--woe-accent);color:#fff}
.woe-pop .woe-pop-row button.woe-pop-ok:hover{background:var(--woe-accent-hover);border-color:var(--woe-accent-hover)}
.woe-pop .woe-choices{display:flex;flex-direction:column;gap:3px;max-height:260px;overflow:auto}
.woe-pop .woe-choices button{text-align:left;background:#fff;border:1px solid transparent;border-radius:7px;padding:8px 10px;font-size:13px;min-height:0;color:var(--woe-text)}
.woe-pop .woe-choices button:hover{background:var(--woe-hover)}
.woe-pop .woe-choices button[aria-pressed="true"]{background:var(--woe-accent-bg);border-color:var(--woe-accent-line);color:var(--woe-accent);font-weight:700}

/* ------------------------------------------------------------------ panel */
.woe-panel{
  position:sticky; top:calc(var(--woe-hdr) + var(--woe-topbar)); align-self:start;
  background:#fff;border-left:1px solid var(--woe-line);padding:27px 28px 45px;
  max-height:calc(100vh - var(--woe-hdr) - var(--woe-topbar));overflow-y:auto;overscroll-behavior:contain;min-width:0;
}
.woe-panel-x{display:none;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--woe-line2);background:#fff;color:#53646d;align-items:center;justify-content:center;z-index:2;padding:0;box-shadow:var(--woe-sh-1)}
.woe-panel-x:hover{background:var(--woe-hover);color:var(--woe-text)}
.woe-panel-x .woe-ic{width:16px;height:16px}
.woe-pane{display:none}
.woe-pane[data-on="1"]{display:block}
.woe-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--woe-eyebrow)}
.woe-pane h2{margin:9px 0 5px;font-size:24px;font-weight:800;letter-spacing:-.55px;line-height:1.35;color:var(--woe-text);font-family:var(--woe-font)}
.woe-pane-lead{color:var(--woe-muted2);margin:0;font-size:13px;line-height:1.5}
.woe-pane section{border-top:1px solid var(--woe-line3);padding:18px 0;margin-top:18px}
.woe-pane section+section{margin-top:0}
.woe-pane section h3{margin:0 0 13px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--woe-text);font-family:var(--woe-font)}
.woe-lab{display:block;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--woe-text)}
.woe-lab span{color:#8c999f;font-weight:400}
.woe-pane .woe-in,.woe-pane .woe-sel{
  display:block;width:100%;color:#273842;background:#fff;border:1px solid var(--woe-input);border-radius:var(--woe-r-md);
  margin:0 0 17px;padding:12px 13px;font:inherit;font-size:15px;line-height:1.35;font-family:var(--woe-font);transition:border-color .15s,box-shadow .15s;
}
.woe-pane .woe-in::placeholder{color:#a1adb2}
.woe-pane .woe-in:hover,.woe-pane .woe-sel:hover{border-color:#B9C5CC}
.woe-pane .woe-in:focus,.woe-pane .woe-sel:focus{border-color:var(--woe-accent);outline:none;box-shadow:var(--woe-ring)}
.woe-selwrap.woe-selwrap-p{display:block;position:relative}
.woe-selwrap.woe-selwrap-p .woe-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;background-image:none!important}
.woe-selwrap.woe-selwrap-p::after{top:24px;margin-top:0}
.woe-help{color:var(--woe-faint);margin:-8px 0 12px;font-size:11px;line-height:1.5}
.woe-help.woe-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 */
.woe-presets{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 14px}
.woe-presets button{background:#fff;border:1px solid var(--woe-line2);border-radius:999px;padding:7px 11px;font-size:12px;color:var(--woe-text);min-height:0;transition:background-color .15s,border-color .15s}
.woe-presets button:hover{border-color:var(--woe-ghost-hover-line);background:var(--woe-ghost)}
.woe-presets button[aria-pressed="true"]{background:var(--woe-accent-bg);border-color:var(--woe-accent);color:var(--woe-accent);font-weight:700}
.woe-switch{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 0;font-size:13px;cursor:pointer;color:var(--woe-text)}
.woe-switch span{flex:1}
.woe-switch small{display:block;color:#8b989d;margin-top:3px;font-size:11px}
.woe-switch input{accent-color:var(--woe-accent);flex-shrink:0;width:19px;height:19px;margin:0;cursor:pointer}
/* segmented controls sit on a grey track; the chosen segment lifts off it in the warm tint */
.woe-seg{display:flex;background:var(--woe-hover);border:1px solid var(--woe-line2);border-radius:var(--woe-r-md);padding:3px;gap:2px}
.woe-seg button{flex:1;background:transparent;border:0;border-radius:var(--woe-r-sm);padding:10px;font-size:14px;min-height:0;color:var(--woe-text2);transition:background-color .15s,color .15s}
.woe-seg button:hover{background:var(--woe-hover2)}
.woe-seg button[aria-pressed="true"]{color:var(--woe-accent);background:var(--woe-accent-bg);font-weight:700;box-shadow:var(--woe-sh-1)}
.woe-seg.woe-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 */
.woe-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.woe-sw{width:31px;height:31px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dce3e6;padding:0;min-height:0}
.woe-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--woe-text)}
.woe-sw-custom{position:relative;width:32px;height:32px;border-radius:6px;overflow:hidden;background:conic-gradient(from 180deg,#F08A1D,#E11D6E,#7C3AED,#2A5CE0,#0E9F63,#F08A1D);box-shadow:0 0 0 1px #dce3e6}
.woe-sw-custom input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:0;padding:0}
.woe-sw-custom[data-on="1"]{box-shadow:0 0 0 2px var(--woe-text)}
.woe-upload{
  display:block;text-align:center;color:var(--woe-text2);cursor:pointer;background:var(--woe-ghost);border:1px dashed var(--woe-ghost-line);border-radius:var(--woe-r-lg);
  margin:11px 0;padding:15px;font-size:12px;position:relative;transition:background-color .15s,border-color .15s;
}
.woe-upload:hover,.woe-upload.it-drop-over{background:var(--woe-ghost-hover);border-color:var(--woe-ghost-hover-line)}
.woe-upload .woe-ic{display:inline-block;vertical-align:-4px;width:16px;height:16px;margin-right:6px}
.woe-upload img{display:block;max-height:64px;max-width:100%;margin:0 auto 8px;object-fit:contain}
.woe-upload img[hidden]{display:none}
.woe-mini-acts{display:flex;gap:8px;margin:-4px 0 12px;flex-wrap:wrap}
.woe-mini-acts button,.woe-btn3{background:#fff;border:1px solid var(--woe-line2);border-radius:var(--woe-r-sm);padding:8px 12px;font-size:12px;font-weight:700;color:var(--woe-text2);min-height:0;box-shadow:var(--woe-sh-1);transition:background-color .15s,border-color .15s}
.woe-mini-acts button:hover,.woe-btn3:hover{background:var(--woe-hover);border-color:#C9D3D9}
.woe-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--woe-text2);background:#fff;border:1px solid var(--woe-line2);border-radius:var(--woe-r-md);padding:10px 15px;font-weight:600;font-size:15px;box-shadow:var(--woe-sh-1);transition:background-color .15s,border-color .15s}
.woe-secondary:hover{background:var(--woe-hover);border-color:#C9D3D9}
.woe-danger{color:var(--woe-danger);margin-top:15px}
.woe-tip{display:flex;align-items:center;gap:9px;color:#7A3403;background:var(--woe-accent-bg);border:1px solid #F8DCC6;border-radius:var(--woe-r-lg);margin-top:20px;padding:13px;font-size:12px;line-height:1.45}
.woe-tip .woe-ic{width:22px;height:22px;flex:0 0 auto}
.woe-tip a{color:inherit;font-weight:700;text-decoration:underline}
.woe-sigpanel{display:none;margin-top:12px}
.woe-sigpanel[data-on="1"]{display:block}
.woe-sigpanel .woe-none{color:var(--woe-faint);font-size:12px;margin:0;line-height:1.5}
.woe-panel #sigPad{display:block;width:100%;height:110px;touch-action:none;background:#fff;border:1px dashed #B9C5CC;border-radius:var(--woe-r-lg);cursor:crosshair}
.woe-panel #sigPad.inked{border-style:solid}
.woe-sigprev{margin-top:10px;border:1px solid var(--woe-line3);border-radius:var(--woe-r-lg);padding:10px 12px;display:none;font-family:"Segoe Script","Bradley Hand","Snell Roundhand",cursive;font-size:28px;line-height:1.25;color:var(--woe-text)}
.woe-sigprev.on{display:block}
/* the payment picker is the shared it-paymethods module; it draws its own controls */
.woe-pane #payMethods{margin-top:6px}
.woe-empty-note{color:var(--woe-faint);font-size:12px;line-height:1.5;margin:6px 0 0}

/* ---------------------------------------------------------- review modal */
.woe-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}
.woe-fin[hidden]{display:none}
.woe-fin .woe-review{position:relative;width:min(900px,100%);background:#fff;border-radius:var(--woe-r-modal);padding:32px;box-shadow:var(--woe-sh-modal);color:var(--woe-text);font-family:var(--woe-font);max-height:calc(100vh - 36px);overflow:auto}
.woe-review .woe-fin-x{position:absolute;top:20px;right:20px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--woe-hover);border:0;padding:0;border-radius:50%;color:var(--woe-text);cursor:pointer;transition:background-color .15s}
.woe-review .woe-fin-x:hover{background:var(--woe-hover2)}
.woe-review .woe-fin-x .woe-ic{width:20px;height:20px}
.woe-review h3{margin:7px 0;font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.2;font-family:var(--woe-font)}
.woe-review .woe-fin-sub{color:#64737b;font-size:14px;margin:0}
.woe-fin-body{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
.woe-fin-preview{background:var(--woe-canvas-bg) var(--woe-canvas);border:1px solid var(--woe-line);display:grid;place-items:center;padding:22px;border-radius:14px}
.woe-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(--woe-sh-paper);color:var(--woe-text)}
.woe-fin-mini strong{font-size:16px}
.woe-fin-mini span{color:var(--woe-accent)}
.woe-fin-mini hr{border:0;border-top:1px solid #ddd;width:100%;margin:0}
.woe-fin-mini p{margin:0}
.woe-fin-mini b{color:var(--woe-accent);text-align:right;margin-top:auto;font-size:21px}
.woe-fin-actions h4{margin:5px 0 20px;font-size:18px;font-weight:700;font-family:var(--woe-font)}
.woe-fin-checks{list-style:none;margin:0;padding:0}
.woe-fin-checks li{display:flex;gap:7px;font-size:13px;margin:0 0 10px;line-height:1.4}
.woe-fin-checks li .woe-ic{width:20px;height:20px;flex:0 0 auto}
.woe-fin-checks li.valid{color:var(--woe-text2)}
.woe-fin-checks li.warn{color:#a36320}
.woe-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 tiles. Copy, Print, Email and WhatsApp keep their ids so the sitewide button
   sheet (gb-style) draws their icons and the green sheet paints Download image; the modal's
   own rules only lay them out and take away the frosted glass, which belongs on the cream page. */
.woe-fin .acts.share{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0;box-sizing:border-box}
.woe-fin .acts.share > button,.woe-fin .acts.share > a{
  display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  background:#fff!important;border:1px solid var(--woe-line2)!important;border-radius:var(--woe-r-md)!important;padding:9px 8px!important;
  font-size:15px;font-weight:600;color:var(--woe-text)!important;font-family:var(--woe-font);min-height:44px!important;
  box-shadow:none!important;transform:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;text-decoration:none;white-space:normal;line-height:1.25;text-align:center;min-width:0;width:auto!important;margin:0!important;
  transition:background-color .15s,border-color .15s;
}
.woe-fin .acts.share > button:hover,.woe-fin .acts.share > a:hover{background:var(--woe-ghost-hover)!important;border-color:var(--woe-ghost-hover-line)!important}
/* the one that produces the file takes the full width, sits first and is bold; its
   colour is the shared green from [data-it-action="download"]. Everything else in this
   row is a secondary way out and stays the plain quiet style above. The button/a rule two
   lines up sets background:#fff!important at higher specificity than it-green-actions-v1.css's
   own [data-it-action="download"] rule, so the green never actually showed here; matched here
   at equal-or-higher specificity to win it back. */
.woe-fin .acts.share > [data-it-action="download"]{grid-column:1/-1;order:-1;font-weight:700!important;min-height:48px!important}
.woe-fin .acts.share > button[data-it-action="download"]{
  background:var(--it-action-green,#047857)!important;border-color:var(--it-action-green,#047857)!important;color:#fff!important;
}
.woe-fin .acts.share > button[data-it-action="download"]:hover{
  background:var(--it-action-green-dark,#036249)!important;border-color:var(--it-action-green-dark,#036249)!important;
}
.woe-fin .acts.share > #copyAll{grid-column:1/-1}
.woe-fin .acts.share > #btnSendTracked{grid-column:1/-1;color:var(--woe-accent)!important;background:#fff!important;border:1px solid var(--woe-accent)!important;font-weight:700;margin-top:6px!important;min-height:48px!important}
.woe-fin .acts.share > #btnSendTracked.its-off{opacity:1;filter:none!important}
.woe-fin .acts.share > #btnSendTracked:hover{background:var(--woe-accent-bg)!important}
.woe-fin .acts.share > #btnSendTracked .its-dot{display:none}
.woe-fin .its-msg{margin:0 0 8px;font-size:13px;color:#a36320}
.woe-fin .its-result{font-size:13px;line-height:1.5;margin:0 0 10px}
.woe-fin .its-link{display:flex;gap:8px;margin:8px 0}
.woe-fin .its-link input{flex:1;min-width:0;border:1px solid var(--woe-line2);border-radius:var(--woe-r-sm);padding:8px}
.woe-fin .its-link button{border:1px solid var(--woe-line2);border-radius:var(--woe-r-sm);padding:8px 12px;background:#fff;font-weight:700}
.woe-fin-note{display:block;color:#8b999f;font-size:11px;line-height:1.5;margin-top:4px}
#actsNote{display:none}

/* the add-line control sits directly under the sheet, never inside it, so it
   can never reach a print or an exported image by construction */
.woe-addline{max-width:720px;margin:10px auto 0}
.woe-addline .woe-addbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--woe-accent);background:var(--woe-ghost);
  border:1px solid var(--woe-ghost-line);border-radius:var(--woe-r-md);padding:9px 12px;font-weight:700;font-size:13px;font-family:var(--woe-font);cursor:pointer;
  box-shadow:var(--woe-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.woe-addline .woe-addbtn:hover{background:var(--woe-ghost-hover);border-color:var(--woe-ghost-hover-line);box-shadow:var(--woe-sh-2)}
.woe-addline .woe-addbtn .woe-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--woe-ghost-disc);stroke-width:2.2}
/* second "add a line" affordance (from the shared trade-presets popover, 29 Sep 2026), stacked
   under the plain add-line button - both are full-width .woe-addbtn, so this just spaces them */
.woe-addline .woe-addbtn + .woe-addbtn{margin-top:8px}
.woe-canvas-actions{padding-bottom:8px}
.woe-canvas #paper [data-f].woe-bad{outline:2px solid #B3372B;outline-offset:1px;border-radius:3px}
/* line items are edited inline in the table; the unit is the one native
   control on the sheet, kept small and borderless so it reads as text */
.woe-canvas #paper .woe-rowunit{font:inherit;font-size:12.5px;color:inherit;background:none;border:0;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:0 12px 0 0;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8c999f 50%),linear-gradient(135deg,#8c999f 50%,transparent 50%)!important;
  background-position:right 3px top 55%,right 0 top 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.woe-canvas #paper .woe-rowunit:hover{color:var(--woe-accent)}

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

/* the tips drawer's jump highlight, on a sheet field instead of an input */
.woe-canvas #paper .itp-tip-flash{box-shadow:0 0 0 3px #F26207!important;transition:box-shadow .2s}

/* ------------------------------------------------------------- responsive */
/* the tips bulb sits at the bottom left, over the rail, and the assistant robot at the
   bottom right, over the panel; both step aside */
body:has(.woe) #itp-tip-btn{left:132px!important}
body:has(.woe[data-panel-open="1"]) > .itw-fab{right:calc(376px + 16px)!important}
@media (max-width:1300px){
  body:has(.woe) #itp-tip-btn{left:100px!important}
  body:has(.woe[data-panel-open="1"]) > .itw-fab{right:calc(320px + 16px)!important}
  .woe-work{grid-template-columns:86px minmax(0,1fr) 320px}
  .woe[data-panel-open="0"] .woe-work{grid-template-columns:86px minmax(0,1fr)}
  .woe-rail-btn{font-size:11px}
  .woe-canvas{padding-left:18px;padding-right:18px}
  .woe-panel{padding:23px 20px}
  .woe-top{gap:9px;padding:0 13px}
  .woe-top select{max-width:170px}
}
@media (min-width:901px) and (max-width:1050px){
  body:has(.woe) #itp-tip-btn{left:90px!important}
  body:has(.woe[data-panel-open="1"]) > .itw-fab{right:calc(min(375px,88vw) + 16px)!important}
  .woe-work{grid-template-columns:76px minmax(0,1fr)}
  .woe-panel{position:fixed;align-self:normal;justify-self:normal;top:calc(var(--woe-hdr) + var(--woe-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}
  .woe[data-panel-open="1"] .woe-panel{display:block}
  .woe[data-panel-open="1"] .woe-canvas{padding-right:calc(min(375px,88vw) + 18px)}
  .woe-panel-x{display:inline-flex}
  .woe-top .woe-sep{display:none}
}
@media (max-width:900px){
  .woe{--woe-topbar:64px}
  .woe-word,.woe-sep{display:none}
  .woe-word b{font-size:18px}
  .rev-word{display:none}
  .woe-word{letter-spacing:-.5px}
  .woe-top select{max-width:120px;min-height:42px;padding:8px 30px 8px 10px;font-size:14px}
  /* a 150px basis is claimed before the free space is split with the spacer, so the picker
     never shrinks to a sliver; the cap keeps it from ballooning on tablets (as .ige-trade) */
  .woe-trade{flex:1 1 150px;min-width:64px;max-width:260px;gap:6px}
  .woe-trade .woe-selwrap{flex:1 1 auto;min-width:0;display:flex}
  .woe-top .woe-trade select{width:100%;max-width:none;min-width:0;padding:8px 20px 8px 6px!important;font-size:12.5px}
  .woe-trade .woe-selwrap::after{right:6px}
  .it-tsw{width:30px;height:30px;border-radius:9px}
  .it-tsw svg{width:16px;height:16px}
  .woe-zoom,.woe-top .woe-sep{display:none}
  .woe-top .woe-plain{padding:7px}
  .woe-top .woe-primary{padding:10px 12px;font-size:12px;gap:6px}
  .woe-top .woe-primary .woe-ic{width:15px;height:15px}
  .woe-work{display:block}
  /* The rail becomes a bottom tab bar. A crew member checks this document on a phone on
     site more than any other on the site, so the bar is built for a thumb: six equal
     columns with a real gutter, the icon in its own pill that tints when the tab is open,
     a 9.5px label that never wraps or touches its neighbour, and the home-indicator inset
     added below. Everything that sits above the bar reads its height from --woe-tabbar.
     The column count has to match the real number of rail buttons: one short wraps the last
     button 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: Payment was invisible on phone because
     this said five for six buttons). 28 Sep 2026: Try AI added as a 7th rail button; base
     bumped to repeat(7,...). 29 Sep 2026: Try AI now carries data-panel="ai" (opens in the
     same right-side panel as every other rail button, replacing its old inline card) - still
     not "templates"/"tmpl", so it-hide-tpl-rail-v1.js still never hides it. */
  .woe{--woe-tabbar:64px;--woe-safe:env(safe-area-inset-bottom,0px)}
  .woe-rail{
    position:fixed;align-self:normal;left:0;right:0;bottom:0;top:auto;z-index:48;
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:stretch;
    height:calc(var(--woe-tabbar) + var(--woe-safe));min-height:0;padding:6px 5px var(--woe-safe);
    border-right:0;border-top:1px solid var(--woe-line);background:#fff;
    box-shadow:0 -8px 24px -12px rgba(11,20,25,.16);-webkit-tap-highlight-color:transparent;
  }
  /* Locked-trade arrival drops the Templates tab (it-hide-tpl-rail-v1.js), same as
     invoice-generator's own .ige-locked-trade .ige-rail rule - keeps the remaining 6 tabs
     (Try AI + Status/Style/Pricing/Sign-off/Payment) evenly filling the bar instead of one
     empty column. */
  .woe-locked-trade .woe-rail{grid-template-columns:repeat(6,minmax(0,1fr))}
  .woe-rail-btn{
    gap:3px;min-width:0;height:52px;padding:0 1px;border-radius:12px;
    font-size:9.5px;font-weight:600;letter-spacing:0;line-height:1.2;color:#5b6770;
  }
  .woe-rail-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .woe-rail-btn .woe-ic{width:38px;height:26px;padding:3px 9px;border-radius:13px;stroke-width:1.8;transition:background-color .15s,transform .15s ease}
  .woe-rail-btn:hover,.woe-rail-btn[aria-pressed="true"]{background:none}
  .woe-rail-btn:active .woe-ic{transform:scale(.92)}
  .woe-rail-btn[aria-pressed="true"]{color:var(--woe-accent);font-weight:700}
  .woe-rail-btn[aria-pressed="true"] .woe-ic{background:var(--woe-accent-bg);stroke-width:2.1}
  .woe-rail-btn[aria-pressed="true"]::before,.woe-rail-foot{display:none}
  .woe-rail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #F26207}
  .woe-canvas{padding:14px 10px calc(var(--woe-tabbar) + var(--woe-safe) + 36px)!important}
  .woe-canvas-label{font-size:10px}
  .woe-panel{display:none}
  .woe[data-panel-open="1"] .woe-panel{display:block}
  .woe-panel{position:fixed;align-self:normal;left:0;right:0;bottom:calc(var(--woe-tabbar) + var(--woe-safe));top:auto;width:100%;max-height:68vh;border-left:0;border-top:1px solid var(--woe-line3);border-radius:var(--woe-r-modal) var(--woe-r-modal) 0 0;padding:20px 16px 24px;box-shadow:0 -12px 40px -8px rgba(11,20,25,.22);z-index:47}
  .woe-panel-x{display:inline-flex}
  .woe[data-panel-open="1"] .woe-canvas{padding-right:10px!important}
  .woe-fin-body{grid-template-columns:1fr}
  .woe-fin-preview{display:none}
  .woe-fin .woe-review{padding:22px 18px}
  .woe-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(.woe[data-panel-open="1"]) > .itw-fab,body:has(.woe[data-panel-open="1"]) #itp-tip-btn{display:none!important}
  body:has(.woe) #itp-tip-btn{left:16px!important;bottom:82px!important}
  .woe-toast{bottom:84px}
}
@media (max-width:400px){
  .woe-top{gap:6px;padding:0 10px}
  .woe-word .woe-ic{display:none}
}
@media print{.woe-top,.woe-rail,.woe-panel,.woe-ovl,.woe-canvas-label,.woe-toast,.woe-fin,.woe-addline,.woe-canvas-actions{display:none!important}
  .woe-canvas{padding:0!important;background:#fff}
  .woe-inner{position:static!important;transform:none!important;width:auto!important}
  .woe-sizer{width:auto!important;height:auto!important}
  /* 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. */
  .woe-canvas #paper{width:690px!important}
  /* a placeholder is an editor affordance, drawn by CSS content; it must never print */
  .woe-canvas #paper [data-f].woe-empty::before{content:none!important}
}
@media (prefers-reduced-motion:reduce){.woe *{transition:none!important}}