/*! it-edit-access-v1.css
   Keyboard focus ring, touch edit cue and due-date shortcut chips (P0-06, P1-04).
   Everything is scoped under html.it-ea plus the live document root ids, and the cue is screen only,
   so the exporter (which clones the document node into an iframe with no html.it-ea) never paints it. */
@media screen{
  /* P0-06: opening an empty field used to drop its placeholder, so the box collapsed and the document moved.
     Keep the placeholder drawn (dimmed) until the first character is typed; :empty makes it vanish then.
     Applies to every generator's X-editing class (ige, rce, poe, ase, cee, woe, tse, cne ...); some drop X-empty at edit start, so data-ph is the hook. */
  html.it-ea [data-ph][class*="-editing"]:empty::before{
    content:attr(data-ph) !important;color:#6B7280;font-style:italic;font-weight:400;
  }
}
@media screen{
  /* quote generator turns every field being edited into an inline-block, which shrinks a block cell and
     moves right-aligned figures; keep the display each field already has */
  html.it-ea .ige-canvas #live-preview-capture :is(div,p,.block)[data-f].ige-editing{display:block}
  html.it-ea .ige-canvas #live-preview-capture span[data-f][data-ph].ige-editing:not(.block){display:inline}
}
@media screen{
  /* work order: focusing a block field (address) made it inline-block, so it jumped up beside the business name */
  html.it-ea .woe-canvas #paper .woe-f.woe-f-block.woe-editing{display:block}
}
@media screen{
  html.it-ea :is(#invoicePreview,#live-preview-capture,#paper,#ceDoc) [data-ea]:not([contenteditable="true"]):focus-visible{
    /* ring, never a background fill (v328): white inner line shows on dark templates, dark outer line on light ones */
    outline:2px solid #fff !important;outline-offset:0 !important;box-shadow:0 0 0 4px #1F2430 !important;border-radius:2px;
  }
  html.it-ea :is(#invoicePreview,#live-preview-capture,#paper,#ceDoc) [data-ea]:focus:not(:focus-visible){outline:none}
}
@media screen and (hover:none) and (pointer:coarse){
  /* no hover on a touch screen, so editable text carries a faint dotted edge: no layout, no fill */
  html.it-ea :is(#invoicePreview,#live-preview-capture,#paper,#ceDoc) [data-ea]:not(:focus):not([class*="-editing"]){
    outline:1px dotted rgba(110,110,110,.6);outline-offset:2px;
  }
  @supports (color:color-mix(in srgb,red,blue)){
    html.it-ea :is(#invoicePreview,#live-preview-capture,#paper,#ceDoc) [data-ea]:not(:focus):not([class*="-editing"]){
      outline-color:color-mix(in srgb,currentColor 38%,transparent);
    }
  }
}
.ige-pop .ige-pop-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ige-pop .ige-pop-quick button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--ige-line2,#ddd);background:#fff;border-radius:var(--ige-r-sm,6px);padding:6px 10px;font:inherit;font-size:12px;cursor:pointer;text-align:left;color:inherit}
.ige-pop .ige-pop-quick button b{font-weight:700}
.ige-pop .ige-pop-quick button small{font-size:11px;color:#5B5750}
.ige-pop .ige-pop-quick button:hover{background:var(--ige-hover,#f3f6f7)}
.ige-pop .ige-pop-quick button:focus-visible{outline:2px solid #C04E06;outline-offset:2px}