/* SignDesk 3.5.0 – PDF editing while signing (Edit text, Highlight), ink colour per signature/stamp,
   quick page drawing, and the black/white redactor. Loaded by signer.html and redact.html. */

/* page drawings (pdfview.js): quick low-resolution drawing first, the sharp one on top of it */
.page canvas.pv-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

/* toolbar buttons and the edit row */
.sd-tool-edit.on, .sd-tool-mark.on { background: #1a56a8; border-color: #1a56a8; color: #fff; box-shadow: 0 2px 6px rgba(26,86,168,.3); }
.pe-bar { display: flex; flex-direction: column; gap: 6px; padding: 7px 14px 8px; border-top: 1px solid var(--line); background: #f5f8fc; }
.pe-bar[hidden], .pe-row[hidden], .pe-note[hidden], .pe-msg[hidden] { display: none; }
.pe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pe-grp { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 5px; }
.pe-grp-wrap { flex-wrap: wrap; }
.pe-sub[aria-pressed="true"] { background: #1a56a8; border-color: #1a56a8; color: #fff; }
.pe-tog[aria-pressed="true"] { background: #e3ecf8; border-color: #1a56a8; color: #12366b; }
.pe-tog b { margin-right: 4px; }
.pe-i b { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.pe-u b { text-decoration: underline; }
.pe-sel.field { width: auto; padding: 5px 4px; min-height: 32px; max-width: 150px; }
.pe-size.field { width: 58px; padding: 5px 6px; min-height: 32px; }
.pe-mini.btn-sm { padding: 6px 9px; }
.pe-sub.btn-sm, .pe-tog.btn-sm { padding: 6px 10px; }
.pe-done.btn-sm { margin-left: 4px; }
.pe-row .sd-lbl { margin-left: 2px; }
.pe-note { font-size: 12px; line-height: 1.3; color: var(--muted); flex: 1 1 230px; min-width: 200px; }
.pe-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff8e1; border: 1px solid #f3dd8f; border-radius: 8px; padding: 7px 10px; font-size: 13px; }

/* the editing layer on every page: under the signatures, above the page drawing */
.pe-layer { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
.pe-covers, .pe-objs { position: absolute; inset: 0; pointer-events: none; }
.pe-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; mix-blend-mode: multiply; }
.pe-on .pe-layer { pointer-events: auto; }
.pe-on .page .overlay, .pe-on .page .overlay * { pointer-events: none !important; }
.pe-on.pe-m-text .pe-layer { cursor: text; }
.pe-on.pe-s-add .pe-layer { cursor: copy; }
.pe-on.pe-s-white .pe-layer, .pe-on.pe-s-pen .pe-layer { cursor: crosshair; }
/* touch screens: a swipe still scrolls while changing words or adding text (drawing tools keep the finger) */
.pe-on.pe-s-change .pe-layer, .pe-on.pe-s-add .pe-layer { touch-action: pan-x pan-y pinch-zoom; }
.pe-on.pe-m-mark .pe-layer { cursor: text; }
.pe-on.pe-s-pen .pe-layer { cursor: crosshair; }
/* touch screens: a swipe still scrolls while changing words or adding text (drawing tools keep the finger) */
.pe-on.pe-s-change .pe-layer, .pe-on.pe-s-add .pe-layer { touch-action: pan-x pan-y pinch-zoom; }

.pe-cover { position: absolute; pointer-events: none; }
.pe-obj { position: absolute; pointer-events: none; }
.pe-on.pe-m-text .pe-obj { pointer-events: auto; cursor: move; touch-action: none; }
.pe-txt { white-space: pre; }
.pe-words { white-space: pre; transform-origin: 0 0; user-select: none; }
.pe-white { background: #fff; }
.pe-ghost { position: absolute; outline: 2px dashed #1a56a8; background: rgba(255,255,255,.85); }
.pe-on.pe-m-text .pe-obj { outline: 1px dashed rgba(26,86,168,.55); outline-offset: 1px; }
.pe-on.pe-m-text .pe-white { outline: 1px dashed rgba(26,86,168,.8); }
.pe-on.pe-m-text .pe-obj.pe-selected { outline: 2px solid #1a56a8; }
.pe-typing { outline: none !important; }
.pe-ta { display: block; border: 0; margin: 0; padding: 0; background: transparent; outline: 2px solid #1a56a8; outline-offset: 1px; resize: none; overflow: hidden;
  white-space: pre; transform-origin: 0 0; box-shadow: 0 0 0 4px rgba(26,86,168,.15); }
.pe-hover { position: absolute; pointer-events: none; outline: 2px solid rgba(26,86,168,.6); background: rgba(26,86,168,.07); border-radius: 2px; }
.pe-hover[hidden] { display: none; }
.pe-x { position: absolute; top: -24px; right: -2px; display: none; z-index: 3; border: 0; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 8px; cursor: pointer; white-space: nowrap; pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pe-x[hidden] { display: none !important; }
.pe-on.pe-m-text .pe-obj:hover > .pe-x, .pe-on.pe-m-text .pe-obj.pe-selected > .pe-x { display: block; }
.pe-on.pe-m-text .pe-obj.pe-typing > .pe-x { display: none; }
.pe-markx { top: 0; right: auto; }
.pe-on.pe-m-mark .pe-markx { display: block; }
.pe-rz { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #1a56a8; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; display: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.pe-on.pe-m-text .pe-obj:hover > .pe-rz, .pe-on.pe-m-text .pe-obj.pe-selected > .pe-rz { display: block; }
.pe-on.pe-m-text .pe-obj.pe-typing > .pe-rz { display: none; }

/* signer: words on the small buttons of a placed signature, stamp or date */
.ptools .sz.sz-w { width: auto; padding: 0 7px; font-size: 12px; font-weight: 600; }
.ptools .sz.sz-x { background: var(--danger); border-color: var(--danger); color: #fff; }
.placed.sd-sel, .dt-place.sd-sel { outline: 2px solid #0b5d4b; }
.placed.sd-sel .ptools, .dt-place.sd-sel .ptools, .placed.sd-sel .rz, .dt-place.sd-sel .rz { display: flex; }
.placed.sd-sel .rz, .dt-place.sd-sel .rz { display: block; }
/* ink colour of the selected signature or stamp */
.pe-inkpanel { position: absolute; z-index: 6; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; box-shadow: 0 4px 14px rgba(16,24,40,.18);
  width: 330px; max-width: calc(100% - 8px); cursor: default; }
.pe-inkpanel .pe-inklbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }

/* redactor: black or white */
.rd-colours { display: inline-flex; gap: 4px; }
.rd-col[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 2px rgba(11,93,75,.25); }
.rd-box.rd-white { background: #fff; outline: 2px dashed #a3261d; }
.rd-ghost.rd-white { background: rgba(255,255,255,.75); }
.rd-btns { position: absolute; top: -26px; right: -2px; display: none; gap: 3px; white-space: nowrap; z-index: 3; }
.rd-box:hover .rd-btns, .rd-box:focus-within .rd-btns { display: flex; }
.rd-btns::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
.rd-btns button { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rd-btns .rd-del { background: var(--danger); border-color: var(--danger); color: #fff; }
.rd-note2 { display: block; margin-top: 4px; font-weight: 600; }

/* small screens (phones, the narrow SignDesk window): a compact edit row */
.pe-bar button { white-space: nowrap; }
@media (max-width: 640px) {
  .pe-bar { padding: 5px 8px 6px; gap: 4px; }
  .pe-row { gap: 5px 6px; }
  .pe-grp { flex-wrap: wrap; gap: 4px; }
  .pe-row .sd-lbl { display: none; }
  .pe-bar .btn-sm, .pe-bar .sd-sw { padding: 4px 8px; font-size: 12.5px; }
  .pe-sel.field { max-width: 118px; min-height: 30px; font-size: 13px; }
  .pe-size.field { width: 48px; min-height: 30px; }
  .pe-note { font-size: 11.5px; flex-basis: 100%; min-width: 0; }
  .pe-msg { font-size: 12.5px; padding: 5px 8px; }
  .pe-inkpanel { width: 260px; }
}