/* it-ce-v3.css: the cost estimator's editor shell.
   The same shape as the invoice generator's editor (owner's clickable wireframe, 25 Sep 2026):
   a sticky toolbar, an icon rail on the left, the live estimate always in view in the middle,
   one slide-out panel on the right that is closed when the page lands. The estimate itself
   (#ceDoc and the .ce-doc-* rules in the page) keeps its own styles; nothing here changes
   what prints or exports, because every export clones #ceDoc out of this shell and the
   affordances below only exist under .cee-canvas.

   Colors are the site's, not the wireframe's: ink #0B1419, CTA orange #C04E06 (hover #A94405)
   for selected and active states, the warm tint #FFF3EA behind them. The only green on the page
   is the way out, Review & Export and Download PDF, painted by it-green-actions-v1.css through
   data-it-action="download". Nothing here sets green. */

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

/* ---------------------------------------------------------------- top bar */
.cee-top{
  position:sticky; top:var(--cee-hdr); z-index:40;
  display:flex; align-items:center; gap:12px; height:var(--cee-topbar); padding:0 25px;
  background:#fff; border-bottom:1px solid var(--cee-line); box-shadow:var(--cee-sh-bar);
}
.cee-word{display:flex;align-items:center;gap:9px;font-weight:800;font-size:23px;letter-spacing:-.9px;white-space:nowrap;color:var(--cee-text)}
.cee-word .cee-ic{width:24px;height:24px;color:#F26207}
.cee-sep{border-left:1px solid var(--cee-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.
   .cee-selwrap is also the panel's block-level wrapper (further down), so the toolbar's own
   inline shape and centred chevron are set with the toolbar in the selector. */
.cee-trade{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;color:var(--cee-accent)}
.cee-top .cee-selwrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.cee-top select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;color:#1d2b35;background:#fff;border:1px solid var(--cee-line2);
  border-radius:10px;max-width:220px;padding:10px 34px 10px 12px;font-size:16px;line-height:1.4;font-family:var(--cee-font);
  min-height:45px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.cee-top .cee-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 */
.cee-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}
.cee-btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:45px;
  color:var(--cee-text2);background:#fff;border:1px solid var(--cee-line2);border-radius:var(--cee-r-md);padding:9px 14px;font-weight:600;font-size:15px;
  box-shadow:var(--cee-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.cee-btn2 .cee-ic{color:var(--cee-accent);width:18px;height:18px}
.cee-btn2 b{font-weight:700;color:var(--cee-text);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.cee-btn2:hover{background:var(--cee-hover);border-color:#C9D3D9}
.cee-plain:hover{background:var(--cee-hover);color:var(--cee-accent)}
.cee-plain{color:#4A5860;background:#F6F8FA;border:1px solid #B9C5CC;padding:8px;border-radius:var(--cee-r-sm);display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.cee-plain .cee-ic{width:22px;height:22px}
/* "Switch to" (28 Sep 2026, owner): only ever shown on a locked-trade arrival (a real
   ?template=&trade= pair from a trade's own industry-page gallery, matching the invoice
   generator's .ige-locked-trade pattern in it-gen-v3.css) - a plain Create-menu visit never
   shows it. Same visual language as .ige-mode there, under this page's own .cee- prefix since
   it-gen-v3.css is not loaded here. */
.cee-mode{position:relative;flex:0 0 auto;display:none}
.cee-locked-trade .cee-mode{display:flex}
.cee-locked-trade [data-panel="templates"]{display:none!important}
.cee-locked-trade .cee-trade{display:none!important}
.cee-mode-btn span{font-weight:600;font-size:13px;margin:0 2px}
.cee-mode-btn{width:auto!important;padding:8px 12px!important;gap:6px}
.cee-mode-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;border:1px solid var(--cee-line2);
  border-radius:var(--cee-r-md);box-shadow:var(--cee-sh-3);padding:6px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;
}
.cee-mode.open .cee-mode-menu{opacity:1;visibility:visible;transform:translateY(0)}
.cee-mode.open .cee-mode-btn{background:var(--cee-hover);color:var(--cee-accent)}
.cee-mode-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cee-faint);padding:6px 10px 4px}
.cee-mode-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;
  padding:9px 10px;font-size:14.5px;font-weight:600;color:var(--cee-text2);
}
.cee-mode-item:hover{background:var(--cee-hover)}
.cee-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}
@media (max-width:900px){
  .cee-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. */
}

.cee-spacer{flex:1}
.cee-zoom{display:flex;align-items:center;height:42px;background:#fff;border:1px solid var(--cee-line2);border-radius:var(--cee-r-md);gap:1px;flex:0 0 auto;box-shadow:var(--cee-sh-1)}
.cee-zoom button{color:#45545f;background:none;border:0;width:34px;height:40px;font-size:21px;line-height:1;border-radius:8px}
.cee-zoom button.cee-zoom-mode{color:#6f7d83;width:auto;padding:0 5px;font-size:11px;font-weight:600}
.cee-zoom button.cee-zoom-mode[aria-pressed="true"]{color:var(--cee-accent)}
.cee-zoom button:hover{color:var(--cee-accent)}
.cee-zoom span{text-align:center;min-width:48px;font-size:14px;font-weight:600}
/* Review & Export: the shape is set here, the color comes from it-green-actions-v1.css */
.cee-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;flex:0 0 auto;
  background:var(--cee-accent);color:#fff;border:1px solid var(--cee-accent);border-radius:10px;padding:12px 20px;font-weight:700;font-size:16px;
}
.cee-primary:hover{background:var(--cee-accent-hover);border-color:var(--cee-accent-hover)}
.cee-primary .cee-ic{width:19px;height:19px}

/* -------------------------------------------------------------- workspace */
.cee-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){
  .cee[data-panel-open="0"] .cee-work{grid-template-columns:116px minmax(0,1fr)}
  .cee[data-panel-open="0"] .cee-panel{display:none}
}
.cee-rail{
  position:sticky; top:calc(var(--cee-hdr) + var(--cee-topbar)); align-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:18px 8px;
  border-right:1px solid var(--cee-line3);min-height:calc(100vh - var(--cee-hdr) - var(--cee-topbar));background:#fff;
}
.cee-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;
}
.cee-rail-btn .cee-ic{width:23px;height:23px}
.cee-rail-btn{transition:background-color .15s,color .15s}
.cee-rail-btn:hover{background:var(--cee-hover);color:var(--cee-text)}
.cee-rail-btn[aria-pressed="true"]{color:var(--cee-accent);background:var(--cee-accent-bg);font-weight:700}
.cee-rail-btn[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--cee-accent)}
.cee-rail-foot{margin-top:auto;padding:12px 4px 12px;text-align:center;color:#97a2a7;font-size:11px;line-height:1.4}
.cee-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 */
.cee-canvas{background:var(--cee-canvas-bg) var(--cee-canvas);padding:20px 34px 70px;min-width:0;position:static!important;max-height:none!important;overflow:visible!important}
.cee-canvas > .pvz{display:none!important}
.cee-canvas-label{display:flex;justify-content:space-between;gap:12px;max-width:794px;margin:0 auto 13px;color:#6B7A83;font-size:12px}
.cee-canvas-label span{display:flex;align-items:center;gap:7px}
.cee-canvas-label .cee-ic{width:17px;height:17px}
/* "Describe the job" AI card removed for now (27 Sep 2026, owner) - display:none rather than
   deleting the markup, so it is a one-line revert if it comes back. */
.cee-canvas .ce-ai{max-width:794px;margin:0 auto 18px;background:#fff;border:1px solid var(--cee-line);border-radius:var(--cee-r-xl);padding:18px 18px 16px;box-shadow:var(--cee-sh-1)}
.cee-canvas .ce-ai[data-collapsed="1"] .ce-ai-sub,.cee-canvas .ce-ai[data-collapsed="1"] #aiSlotCe{display:none}
.cee-canvas .ce-ai-head h2{font-size:19px}
.cee-canvas .pv-scroll{position:relative}
.cee-canvas .pv-sizer{position:relative;margin:0 auto;overflow:visible}
.cee-canvas .pv-inner{position:absolute;left:50%;top:0;width:794px;transform-origin:top center;transform:translateX(-50%)}
.cee-canvas .pv-inner:not([style*="scale"]){position:relative;left:auto;transform:none;margin:0 auto;max-width:100%}
/* 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 clone #ceDoc out
   of this shell and never see it. */
.cee-canvas #ceDoc{border-radius:4px;border:1px solid transparent;box-shadow:var(--cee-sh-paper)}

/* inline editing on the estimate. These live only where the editor's column is an ancestor;
   print and every export copy the sheet on its own, so none of it reaches paper. */
.cee-canvas #ceDoc [data-f]{border-radius:3px;transition:background-color .12s;cursor:text}
/* No background fill on hover/editing (own-text-color-independent outline ring only) - a fill under
   text that could be any color, on any design's own background, washes out illegible on a dark
   design (owner-reported, screenshot, 7 Oct 2026). Outline/box-shadow alone works on any color. */
.cee-canvas #ceDoc [data-f]:hover{box-shadow:0 0 0 3px var(--cee-accent-bg)}
.cee-canvas #ceDoc [data-f].cee-editing{outline:2px solid var(--cee-accent);outline-offset:1px;box-shadow:none;min-width:2ch;white-space:pre-wrap}
.cee-canvas #ceDoc [data-f].cee-editing:hover{background:var(--cee-accent-soft)}
.cee-canvas #ceDoc .cee-empty{display:inline-block;color:#9aa5aa;font-style:italic;font-weight:400;min-width:4ch}
.cee-canvas #ceDoc .cee-empty::before{content:attr(data-ph)}
.cee-canvas #ceDoc .cee-empty.cee-editing::before{content:none}
.cee-canvas #ceDoc .cee-empty.cee-editing{font-style:normal;color:inherit}
/* outside the editor an empty optional field takes no room at all */
#ceDoc .cee-empty{display:none}
#ceDoc .ce-doc-notes[data-empty="1"],#ceDoc .ce-doc-email[data-empty="1"]{display:none}
.cee-canvas #ceDoc .ce-doc-notes[data-empty="1"]{display:block}
.cee-canvas #ceDoc .ce-doc-email[data-empty="1"]{display:block}
/* Empty generators (owner, 14 Oct 2026): anything left unfilled is a prompt on the live sheet
   only. Outside the editor column (the PDF/PNG raster copy, the print root, and the Review &
   Export preview clone, which strips ids) an empty client/job/section-name/item prompt, an empty
   row (.cee-blank), an all-empty section and the separator beside an empty job take no room at
   all. Class-based on purpose so the id-less preview clone is covered as well as #ceDoc. */
.ce-doc .cee-empty:not(.cee-canvas *),
.ce-doc .cee-blank:not(.cee-canvas *),
.ce-doc .ce-doc-notes[data-empty="1"]:not(.cee-canvas *),
.ce-doc .ce-doc-email[data-empty="1"]:not(.cee-canvas *),
.ce-doc .ce-doc-sub[data-nojob="1"] .ce-doc-sep:not(.cee-canvas *){display:none!important}
.cee-canvas #ceDoc h3.cee-empty{display:block}
/* editor-only rows: the add buttons, the remove buttons, the clear chips */
.cee-ui{display:none!important}
.cee-canvas #ceDoc .cee-ui{display:flex!important}
.cee-canvas #ceDoc .ce-row,.cee-canvas #ceDoc .ce-grp-h,.cee-canvas #ceDoc .cee-fw{position:relative}
.cee-canvas #ceDoc .cee-addrow{padding:6px 0 2px;border:0;display:flex;flex-wrap:wrap;gap:8px}
/* the "ghost" affordance: every editor-only add/edit control on the document 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). */
.cee-canvas #ceDoc .cee-addbtn{
  display:flex;align-items:center;gap:10px;flex:1 1 200px;text-align:left;color:var(--cee-accent);background:var(--cee-ghost);
  border:1px solid var(--cee-ghost-line);border-radius:var(--cee-r-md);padding:9px 12px;font-weight:700;font-size:13px;font-family:var(--cee-font);cursor:pointer;
  box-shadow:var(--cee-sh-1);transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.cee-canvas #ceDoc .cee-addbtn:hover{background:var(--cee-ghost-hover);border-color:var(--cee-ghost-hover-line);box-shadow:var(--cee-sh-2)}
.cee-canvas #ceDoc .cee-addbtn .cee-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--cee-ghost-disc);stroke-width:2.2}
/* the presets button is the secondary action next to "Add a line" (29 Sep 2026): same shape as
   .cee-addbtn, but the page's own neutral secondary-button palette (matching .cee-btn2 in the
   toolbar) instead of the accent ghost tint, so it reads as "another way in", not the default. */
.cee-canvas #ceDoc .cee-addbtn-preset{color:var(--cee-text2);background:#fff;border-color:var(--cee-line2);box-shadow:none}
.cee-canvas #ceDoc .cee-addbtn-preset:hover{background:var(--cee-hover);border-color:#C9D3D9;box-shadow:none}
.cee-canvas #ceDoc .cee-addbtn-preset .cee-ic{background:transparent;color:var(--cee-text2)}
.cee-canvas #ceDoc .cee-addsec{margin-top:8px}
/* remove sits in the paper's right gutter, clear in the left one, both 24px, icon only,
   visible on hover, focus or while the field is being edited; always visible on touch */
.cee-canvas #ceDoc .cee-x,.cee-canvas #ceDoc .cee-clear{
  position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;min-height:0!important;padding:0;
  align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--cee-line2);
  box-shadow:0 1px 3px rgba(11,20,25,.12);color:#53646d;cursor:pointer;opacity:0;transition:opacity .12s,background-color .15s,border-color .15s,color .15s;z-index:2;
}
.cee-canvas #ceDoc .cee-x{right:-32px}
.cee-canvas #ceDoc .ce-grp-h .cee-x{top:50%}
.cee-canvas #ceDoc .cee-clear{left:-32px;top:8px;transform:none}
.cee-canvas #ceDoc .ce-doc-notes .cee-clear{left:auto;right:8px;top:8px}
.cee-canvas #ceDoc .cee-x .cee-ic,.cee-canvas #ceDoc .cee-clear .cee-ic{width:14px;height:14px}
.cee-canvas #ceDoc .ce-row:hover .cee-x,.cee-canvas #ceDoc .ce-row:focus-within .cee-x,
.cee-canvas #ceDoc .ce-grp-h:hover .cee-x,.cee-canvas #ceDoc .ce-grp-h:focus-within .cee-x,
.cee-canvas #ceDoc .cee-fw:hover .cee-clear,.cee-canvas #ceDoc .cee-fw:focus-within .cee-clear,
.cee-canvas #ceDoc .cee-x:focus-visible,.cee-canvas #ceDoc .cee-clear:focus-visible{opacity:1}
.cee-canvas #ceDoc .cee-x:hover{color:var(--cee-danger);border-color:#E6B9B5;background:#FFF5F4}
.cee-canvas #ceDoc .cee-clear:hover{color:var(--cee-accent);border-color:var(--cee-accent-line);background:var(--cee-accent-bg)}
/* a clear chip never shows beside an empty field */
.cee-canvas #ceDoc .cee-fw[data-empty="1"] .cee-clear{display:none!important}
@media (pointer:coarse){
  .cee-canvas #ceDoc .cee-x,.cee-canvas #ceDoc .cee-clear{opacity:1;width:30px;height:30px}
  .cee-canvas #ceDoc .cee-x{right:-34px}
  .cee-canvas #ceDoc .cee-clear{left:-34px}
  .cee-canvas #ceDoc .cee-x .cee-ic,.cee-canvas #ceDoc .cee-clear .cee-ic{width:16px;height:16px}
}
.cee-canvas #ceDoc .ce-row.cee-row-on{background:var(--cee-accent-soft);box-shadow:inset 0 0 0 1px #E8A26F;border-radius:6px}

/* ------------------------------------------------------------------ panel */
.cee-panel{
  position:sticky; top:calc(var(--cee-hdr) + var(--cee-topbar)); align-self:start;
  background:#fff;border-left:1px solid var(--cee-line);padding:27px 28px 45px;
  max-height:calc(100vh - var(--cee-hdr) - var(--cee-topbar));overflow-y:auto;overscroll-behavior:contain;min-width:0;
}
.cee-panel-x{display:none;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--cee-line2);background:#fff;color:#53646d;align-items:center;justify-content:center;z-index:2;box-shadow:var(--cee-sh-1)}
.cee-panel-x:hover{background:var(--cee-hover);color:var(--cee-text)}
.cee-panel-x .cee-ic{width:16px;height:16px}
.cee-pane{display:none}
.cee-pane[data-on="1"]{display:block}
.cee-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--cee-eyebrow)}
.cee-pane h2{margin:9px 0 5px;font-size:24px;font-weight:800;letter-spacing:-.55px;line-height:1.35;color:var(--cee-text)}
.cee-pane-lead{color:var(--cee-muted);margin:0;font-size:13px;line-height:1.5}
.cee-pane section{border-top:1px solid var(--cee-line3);padding:18px 0;margin-top:18px}
.cee-pane section+section{margin-top:0}
.cee-pane section h3{margin:0 0 13px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cee-text)}
.cee-lab{display:block;margin:0 0 9px;font-size:13px;font-weight:700;color:var(--cee-text)}
.cee-lab span{color:#8c999f;font-weight:400}
.cee-pane .cee-in,.cee-pane .cee-sel{
  display:block;width:100%;color:#273842;background:#fff;border:1px solid var(--cee-input);border-radius:var(--cee-r-md);
  margin:0 0 14px;padding:11px 12px;font:inherit;font-size:15px;line-height:1.35;min-height:44px;transition:border-color .15s,box-shadow .15s;
}
.cee-pane .cee-in::placeholder{color:#a1adb2}
.cee-pane .cee-in:hover,.cee-pane .cee-sel:hover{border-color:#B9C5CC}
.cee-pane .cee-in:focus,.cee-pane .cee-sel:focus{border-color:var(--cee-accent);outline:none;box-shadow:var(--cee-ring)}
.cee-pane .cee-in[type="number"]{font-variant-numeric:tabular-nums}
.cee-selwrap{display:block;position:relative}
.cee-selwrap .cee-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;background-image:none!important}
.cee-selwrap::after{content:"";position:absolute;right:14px;top:20px;width:8px;height:8px;
  border-right:1.8px solid #5c6a72;border-bottom:1.8px solid #5c6a72;transform:rotate(45deg);pointer-events:none}
.cee-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.cee-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.cee-help{color:var(--cee-faint);margin:-6px 0 12px;font-size:11.5px;line-height:1.5}
.cee-help.cee-help-top{margin:9px 0 0}
.cee-switch{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 0;font-size:13px;cursor:pointer;color:var(--cee-text)}
.cee-switch span{flex:1}
.cee-switch small{display:block;color:#8b989d;margin-top:3px;font-size:11px}
.cee-switch input{accent-color:var(--cee-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 */
.cee-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--cee-hover);border:1px solid var(--cee-line2);border-radius:var(--cee-r-md);padding:3px;gap:2px}
.cee-seg button{background:transparent;border:0;border-radius:var(--cee-r-sm);padding:10px;font-size:14px;min-height:42px;color:var(--cee-text2);transition:background-color .15s,color .15s}
.cee-seg button:hover{background:var(--cee-hover2)}
.cee-seg button[aria-pressed="true"],.cee-seg button[aria-pressed="true"]{color:var(--cee-accent);background:var(--cee-accent-bg);font-weight:700;box-shadow:var(--cee-sh-1)}
.cee-btn3{background:#fff;border:1px solid var(--cee-line2);border-radius:var(--cee-r-sm);padding:9px 12px;font-size:13px;font-weight:700;color:var(--cee-text2);min-height:42px;box-shadow:var(--cee-sh-1);transition:background-color .15s,border-color .15s}
.cee-btn3:hover{background:var(--cee-hover);border-color:#C9D3D9}
.cee-btn3[aria-pressed="true"]{background:var(--cee-accent-bg);border-color:var(--cee-accent);color:var(--cee-accent)}
.cee-mini-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cee-tip{display:flex;align-items:center;gap:9px;color:#7A3403;background:var(--cee-accent-bg);border:1px solid #F8DCC6;border-radius:var(--cee-r-lg);margin-top:20px;padding:13px;font-size:12px;line-height:1.45}
.cee-tip .cee-ic{width:22px;height:22px;flex:0 0 auto}
.cee-tip a{color:inherit;font-weight:700}
.cee-upload{
  display:block;text-align:center;color:var(--cee-text2);cursor:pointer;background:var(--cee-ghost);border:1px dashed var(--cee-ghost-line);border-radius:var(--cee-r-lg);
  margin:11px 0;padding:15px;font-size:12px;position:relative;transition:background-color .15s,border-color .15s;
}
.cee-upload:hover{background:var(--cee-ghost-hover);border-color:var(--cee-ghost-hover-line)}
.cee-upload img{display:block;max-height:64px;max-width:100%;margin:0 auto 8px;object-fit:contain}

/* the page's own controls restyled inside the panel, without renaming them:
   the theme swatches, the price commands, the signature tabs, the learn box */
.cee-pane .ce-hint{display:block;margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--cee-muted);font-weight:400;letter-spacing:0;text-transform:none}
.cee-pane .ce-priced{margin:8px 0 0;padding:9px 11px;border-radius:9px;background:var(--cee-accent-bg);border:1px solid var(--cee-accent-line);font-size:12.5px;line-height:1.45;color:#7A3403}
.cee-pane .ce-cmd{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.cee-pane .ce-cmd button{min-height:42px;padding:0 12px;border-radius:var(--cee-r-sm);border:1px solid var(--cee-line2);background:#fff;font:700 12.5px var(--cee-font);color:var(--cee-text2);cursor:pointer;box-shadow:var(--cee-sh-1);transition:background-color .15s,border-color .15s}
.cee-pane .ce-cmd button:hover{background:var(--cee-hover);border-color:#C9D3D9}
.cee-pane .ce-cmd button[aria-pressed="true"]{background:var(--cee-accent-bg);border-color:var(--cee-accent);color:var(--cee-accent)}
.cee-pane .ce-learn{margin:12px 0 0;padding:11px 12px;border-radius:9px;background:var(--cee-accent-soft);border:1px solid var(--cee-accent-line);font-size:12.5px;line-height:1.55;color:#4a3a2c}
.cee-pane .ce-learn b{color:var(--cee-text)}
.cee-pane .ce-learn button{margin-top:8px;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--cee-accent);background:#fff;font:700 13px var(--cee-font);color:var(--cee-accent);cursor:pointer}
.cee-pane .ce-themes{display:flex;flex-wrap:wrap;gap:8px}
.cee-pane .ce-themes button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 13px;border-radius:999px;border:1px solid var(--cee-line2);background:#fff;cursor:pointer;font:600 13px var(--cee-font);color:var(--cee-text2);transition:background-color .15s,border-color .15s}
.cee-pane .ce-themes button:hover{border-color:var(--cee-ghost-hover-line);background:var(--cee-ghost)}
.cee-pane .ce-themes button i{width:14px;height:14px;border-radius:5px;display:inline-block}
.cee-pane .ce-themes button[aria-pressed="true"]{border-color:var(--cee-accent);background:var(--cee-accent-bg);color:var(--cee-accent);font-weight:700;box-shadow:none}
.cee-pane .ce-logo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--cee-ghost-line);background:var(--cee-ghost);border-radius:var(--cee-r-lg);padding:10px;min-height:56px}
.cee-pane .ce-logo img{max-height:44px;max-width:150px;border-radius:6px}
.cee-pane .ce-logo-btn,.cee-pane .ce-logo-x{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:8px;border:1px solid var(--cee-line2);background:#fff;font:700 12.5px var(--cee-font);color:var(--cee-text2);cursor:pointer}
.cee-pane .ce-logo-x{color:var(--cee-danger)}
.cee-pane .ce-sigtabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0 0 12px;background:var(--cee-hover);border:1px solid var(--cee-line2);border-radius:var(--cee-r-md);padding:3px}
.cee-pane .ce-sigtabs button{border:0;background:transparent;border-radius:var(--cee-r-sm);padding:9px 8px;min-height:42px;font:600 13px/1.4 var(--cee-font);color:var(--cee-text2);cursor:pointer;transition:background-color .15s,color .15s}
.cee-pane .ce-sigtabs button[aria-selected="true"],.cee-pane .ce-sigtabs button[aria-selected="true"]:hover{background:var(--cee-accent-bg);color:var(--cee-accent);font-weight:700;box-shadow:var(--cee-sh-1)}
.cee-pane .ce-sigtabs button:hover{background:var(--cee-hover2)}
.cee-pane .ce-sigpane{margin:0 0 10px}
.cee-pane .ce-sigline{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--cee-line2);background:#fff;font:600 13.5px var(--cee-font);color:var(--cee-text);cursor:pointer}
.cee-pane .ce-sigline:hover{border-color:var(--cee-accent)}
.cee-pane .ce-signed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;padding:9px 11px;border:1px solid var(--cee-accent-line);background:var(--cee-accent-soft);border-radius:9px}
.cee-pane .ce-signed img{max-height:44px;max-width:170px}
.cee-pane .ce-signed span{font-size:12.5px;color:#4a3a2c;font-weight:700}
.cee-pane .ce-signed button{min-height:38px;padding:0 11px;border-radius:8px;border:1px solid var(--cee-line2);background:#fff;font:700 12px var(--cee-font);color:var(--cee-danger);cursor:pointer}
.cee-pane .field-block{margin:0 0 12px}
.cee-pane .field-label{display:block;margin:0 0 9px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cee-text)}
.cee-pane .field-input{display:block;width:100%;color:#273842;background:#fff;border:1px solid var(--cee-input);border-radius:var(--cee-r-md);padding:11px 12px;font:inherit;font-size:15px;min-height:44px;transition:border-color .15s,box-shadow .15s}
.cee-pane .field-input:focus{border-color:var(--cee-accent);outline:none;box-shadow:var(--cee-ring)}
/* live pricing tiles inside the Pricing pane */
.cee-pane .ce-live{margin:0;border:0;padding:0}
.cee-pane .ce-live-h{margin:0 0 9px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cee-text)}
.cee-pane .ce-live-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.cee-pane .ce-live-i{background:var(--cee-ghost);border:1px solid var(--cee-ghost-line);border-radius:var(--cee-r-lg);padding:9px 11px}
.cee-pane .ce-live-i span{display:block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a7362;margin-bottom:3px}
.cee-pane .ce-live-i b{font-size:16px;color:var(--cee-text);font-variant-numeric:tabular-nums}
.cee-pane .ce-live-i small{display:block;font-size:11px;color:var(--cee-muted);margin-top:2px;line-height:1.35}
.cee-pane .ce-live-bar{display:flex;height:9px;border-radius:6px;overflow:hidden;margin:10px 0 6px;background:#EDE7DA}
.cee-pane .ce-live-bar i{display:block;height:100%}
.cee-pane .ce-live-key{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--cee-muted)}
.cee-pane .ce-live-key i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.cee-pane .ce-live-note{margin:9px 0 0;font-size:12px;line-height:1.5;color:#7A3403}
.cee-pane #payMethods{margin-top:4px}

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

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

/* the Fields pane: each switch hides one document block, on screen and in
   every export/print (unlike the editor-only .cee-ui chrome above, these
   attributes describe what the document itself contains, so they are never
   scoped to .cee-canvas). */
#ceDoc[data-hide-detail="1"] .ce-row-x{display:none!important}
#ceDoc[data-hide-logo="1"] .ce-doc-logo{display:none!important}
#ceDoc[data-hide-notes="1"] .ce-doc-notes{display:none!important}
#ceDoc[data-hide-deposit="1"] .ce-doc-tot #ceDocDep{display:none!important}
#ceDoc[data-hide-pay="1"] #pPayDoc{display:none!important}
#ceDoc[data-hide-terms="1"] .ce-doc-f #ceDocTerms{display:none!important}
#ceDoc[data-hide-disc="1"] .ce-doc-f .ce-doc-disc{display:none!important}
#ceDoc[data-hide-credit="1"] .ce-doc-f .ce-doc-by{display:none!important}

/* ------------------------------------------------------------- responsive */
body:has(.cee) #itp-tip-btn{left:132px!important}
body:has(.cee[data-panel-open="1"]) > .itw-fab{right:calc(376px + 16px)!important}
@media (max-width:1300px){
  body:has(.cee) #itp-tip-btn{left:100px!important}
  body:has(.cee[data-panel-open="1"]) > .itw-fab{right:calc(320px + 16px)!important}
  .cee-work{grid-template-columns:86px minmax(0,1fr) 320px}
  .cee[data-panel-open="0"] .cee-work{grid-template-columns:86px minmax(0,1fr)}
  .cee-rail-btn{font-size:11px}
  .cee-canvas{padding-left:18px;padding-right:18px}
  .cee-panel{padding:23px 20px}
  .cee-top{gap:9px;padding:0 13px}
}
@media (min-width:901px) and (max-width:1050px){
  body:has(.cee) #itp-tip-btn{left:90px!important}
  body:has(.cee[data-panel-open="1"]) > .itw-fab{right:calc(min(375px,88vw) + 16px)!important}
  .cee-work{grid-template-columns:76px minmax(0,1fr)}
  .cee-panel{position:fixed;align-self:normal;justify-self:normal;top:calc(var(--cee-hdr) + var(--cee-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}
  .cee[data-panel-open="1"] .cee-panel{display:block}
  .cee[data-panel-open="1"] .cee-canvas{padding-right:calc(min(375px,88vw) + 18px)}
  .cee-panel-x{display:inline-flex}
  .cee-top .cee-sep{display:none}
}
@media (max-width:900px){
  .cee{--cee-topbar:64px}
  .cee-word,.cee-sep{display:none}
  .cee-word b{font-size:18px}
  .rev-word{display:none}
  .cee-word{letter-spacing:-.5px}
  /* 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) */
  .cee-top select{max-width:120px;min-height:42px;padding:8px 30px 8px 10px;font-size:14px}
  .cee-trade{flex:1 1 150px;min-width:64px;max-width:260px;gap:6px}
  .cee-top .cee-trade .cee-selwrap{flex:1 1 auto;min-width:0;display:flex}
  .cee-top .cee-trade select{width:100%;max-width:none;min-width:0;padding:8px 20px 8px 6px!important;font-size:12.5px}
  .cee-top .cee-trade .cee-selwrap::after{right:6px}
  .it-tsw{width:30px;height:30px;border-radius:9px}
  .it-tsw svg{width:16px;height:16px}
  .cee-zoom,.cee-top .cee-sep{display:none}
  /* undo/redo stay reachable on phone: an earlier pass hid .cee-plain here the
     way the invoice generator once did, which took undo/redo off the toolbar
     entirely below 900px. Keep them, just tighter. */
  .cee-top .cee-plain{padding:7px}
  .cee-top .cee-plain .cee-ic{width:19px;height:19px}
  .cee-top .cee-primary{padding:10px 12px;font-size:12px;gap:6px}
  .cee-top .cee-primary .cee-ic{width:15px;height:15px}
  .cee-work{display:block}
  /* The rail becomes a bottom tab bar: six equal columns (Templates, Scope, Pricing, Style,
     Fields, Accept) with a real gutter, the icon in its own pill that tints when the tab is
     open, a 10px label that never wraps, and the home-indicator inset added below.
     Was hardcoded to 5 columns while the rail has always had 6 buttons, so "Accept" (the
     client sign-off tab) wrapped to a second grid row that sat below the fixed tab bar's own
     height and past the bottom of the viewport - reachable by nothing, on every phone and
     tablet width. Bumped to repeat(6,...) and the icon/label shrunk slightly so six columns
     still fit without wrapping down to 320px. */
  .cee{--cee-tabbar:64px;--cee-safe:env(safe-area-inset-bottom,0px)}
  .cee-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:2px;align-items:stretch;
    height:calc(var(--cee-tabbar) + var(--cee-safe));min-height:0;padding:6px 4px var(--cee-safe);
    border-right:0;border-top:1px solid var(--cee-line);background:#fff;
    box-shadow:0 -8px 24px -12px rgba(11,20,25,.16);-webkit-tap-highlight-color:transparent;
  }
  .cee-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;
  }
  .cee-rail-btn span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cee-rail-btn .cee-ic{width:40px;height:26px;padding:3px 10px;border-radius:14px;stroke-width:1.8;transition:background-color .15s,transform .15s}
  .cee-rail-btn:hover,.cee-rail-btn[aria-pressed="true"]{background:none}
  .cee-rail-btn:active .cee-ic{transform:scale(.92)}
  .cee-rail-btn[aria-pressed="true"]{color:var(--cee-accent);font-weight:700}
  .cee-rail-btn[aria-pressed="true"] .cee-ic{background:var(--cee-accent-bg);stroke-width:2.1}
  .cee-rail-btn[aria-pressed="true"]::before,.cee-rail-foot{display:none}
  .cee-rail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #F26207}
  .cee-canvas{padding:14px 10px calc(var(--cee-tabbar) + var(--cee-safe) + 36px)!important}
  .cee-canvas-label{font-size:10px}
  .cee-canvas .ce-ai{padding:14px}
  .cee-panel{display:none}
  .cee[data-panel-open="1"] .cee-panel{display:block}
  .cee-panel{position:fixed;align-self:normal;left:0;right:0;bottom:calc(var(--cee-tabbar) + var(--cee-safe));top:auto;width:100%;max-height:68vh;border-left:0;border-top:1px solid var(--cee-line3);border-radius:var(--cee-r-modal) var(--cee-r-modal) 0 0;padding:20px 16px 24px;box-shadow:0 -12px 40px -8px rgba(11,20,25,.22);z-index:47}
  .cee-panel-x{display:inline-flex}
  .cee-fin-body{grid-template-columns:1fr}
  .cee-fin-preview{display:none}
  .cee-fin .cee-review{padding:22px 18px}
  .cee-review h3{font-size:22px}
  .cee-row2{grid-template-columns:1fr}
  body>.itw-fab{bottom:82px!important;right:14px!important}
  body:has(.cee[data-panel-open="1"]) > .itw-fab,body:has(.cee[data-panel-open="1"]) #itp-tip-btn{display:none!important}
  body:has(.cee) #itp-tip-btn{left:16px!important;bottom:82px!important}
  .save-fallback{bottom:84px!important}
  .cee-toast{bottom:84px}
  /* the page body is a column flex container below 921px (the page's own rule); the editor
     follows the H1 and the reading sections follow the editor */
  .cee{order:1}
  #it-related-v1{order:2}
}
@media (max-width:400px){
  .cee-top{gap:6px;padding:0 10px}
  .cee-word .cee-ic{display:none}
}
/* On-screen legibility on a phone: the paper scales down as a whole (the
   fit engine's transform on the wrapper, never on #ceDoc itself, so exports
   and print are untouched), and that scaling compounds with the sheet's own
   type scale until the print-safe floor above reads too small to use while
   editing. This block only ever runs on screen, and it must win over the
   #ceDoc rules set earlier in this page's own inline styles, so it repeats
   their selectors rather than a class the cascade might lose to. */
@media screen and (max-width:900px){
  #ceDoc:not([data-inv-doc]){font-size:16px!important;line-height:1.5!important}
  #ceDoc .ce-doc-h h3{font-size:24px!important}
  #ceDoc .pm-doc-h,#ceDoc .ce-doc-k{font-size:13px!important}
  #ceDoc .ce-doc-sub{font-size:16px!important}
  #ceDoc .ce-doc-tot span{font-size:13px!important}
  #ceDoc .ce-doc-tot small{font-size:15px!important}
  #ceDoc #ceGrand{font-size:23px!important}
  #ceDoc .ce-grp-h{font-size:15px!important}
  #ceDoc .ce-grp-h b{font-size:15px!important}
  #ceDoc .ce-row b,#ceDoc .ce-row span{font-size:16px!important}
  #ceDoc .ce-row small{font-size:14.5px!important}
  #ceDoc .ce-row-x,#ceDoc .ce-doc-by{font-size:15px!important}
  #ceDoc .ce-tot div{font-size:16px!important}
  #ceDoc .ce-tot div.grand{font-size:18px!important}
  #ceDoc .ce-doc-notes h4,#ceDoc .ce-doc-sign-b small{font-size:13.5px!important}
  #ceDoc .ce-doc-notes p,#ceDoc .ce-doc-f p{font-size:15px!important}
  #ceDoc .ce-warn{font-size:14px!important}
}
/* Ctrl+P without the print root: the sheet's own column prints, nothing else */
@media print{
  body > .cee{display:block!important}
  .cee > *:not(#main){display:none!important}
  .cee-top,.cee-rail,.cee-panel,.cee-canvas-label,.cee-toast,.cee-canvas .ce-ai,.fin-overlay{display:none!important}
  .cee-canvas{padding:0!important;background:none!important}
}
@media (prefers-reduced-motion:reduce){.cee *{transition:none!important}}

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

/* Simple / Advanced (10 Oct 2026, owner's sitewide spec) - same visual pattern already proven
   on quotegenerator's it-qg-v3.css. data-mode lives on #ceDoc itself (see it-ce-v3.js
   applySimpleMode) so it survives into the PDF/PNG export clone (it-sheet-render-v2.js clones
   #ceDoc directly). This is independent of the pre-existing data-hide-* feature toggles above
   (detail/logo/notes/deposit/pay/terms/disc/credit) - those are standing document settings,
   unaffected by Simple/Advanced; Advanced always shows every [data-opt] field regardless. */
.cee-modewrap{display:flex;align-items:center;gap:8px}
.cee-mode{display:inline-flex;border:1px solid var(--cee-line2);border-radius:999px;padding:2px;background:#fff}
.cee-mode button{background:transparent;border:0;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:#5b6770;line-height:1.2}
.cee-mode button[aria-pressed="true"]{background:var(--cee-accent-bg);color:var(--cee-accent)}
.cee-mode button:hover{color:var(--cee-accent)}
.cee-modehint{font-size:11px;color:#77838b}
@media (max-width:600px){.cee-canvas-label .cee-modehint{display:none}.cee-canvas-label{gap:8px}.cee-canvas-label>span:first-child{flex:1 1 auto;min-width:0}}
#ceDoc[data-mode="simple"] [data-opt]:not([data-revealed]){display:none!important}
@media (min-width:901px){.ige-fldmodal-ovl{display:none!important}}
/* an empty optional field is an on-screen editing prompt only: it prints and exports nothing */
@media print{.cee-canvas #ceDoc .cee-empty,.cee-canvas #ceDoc .cee-empty::before,.cee-canvas #ceDoc .ce-doc-email[data-empty="1"],.cee-canvas #ceDoc .ce-doc-notes[data-empty="1"],.cee-canvas #ceDoc .cee-blank,.cee-canvas #ceDoc .ce-doc-sub[data-nojob="1"] .ce-doc-sep{display:none!important;content:none!important}}

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

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

/* 19 Oct 2026: the sitewide body::after bottom spacer (it-ui-v1.css, 92px) sat between the header and the
 * page heading here, because this body is a flex column and #ceApp/.ce-h1wrap carry order:1. Keep it last. */
body::after{order:99}