/* The PDF editor. The frame (.ed-back, .ed, .ed-head, .ed-body, .ed-rail,
   .ed-canvas) and the tool buttons (.dv-tool) are the e-sign field editor's, in
   styles.css and docview.css; this file is only what is particular to editing a
   document in place: the toolbar row, the pages, and the layer over each page. */

.pe-opening { margin: auto; color: #475569; font-size: 14px; }

.ed.pe { position: relative; }
.pe-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 18px; background: #fff; border-bottom: 1px solid var(--border);
}
.pe-bar select { margin-left: 4px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px 6px; background: #fff; }
.pe-sep { width: 1px; height: 22px; background: var(--border); }
.pe-banner { margin: 0; border-radius: 0; }

.pe-pages { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pe-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.pe-pagehead {
  display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700;
  margin: 10px 0 6px; color: var(--text); white-space: nowrap; max-width: 100%;
}
.pe-pagehead .n {
  background: var(--text); color: #fff; border-radius: 6px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 4px;
}
.pe-pagenote {
  font-weight: 500; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 2px 8px;
  white-space: normal; min-width: 0;
}
/* The scan controls: the read button, or what came of reading the page. */
.pe-headtools { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.pe-headtools:empty { display: none; }
.pe-ocrnote { color: #b45309; }

.pe-page {
  position: relative; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .16);
  border-radius: 2px; overflow: hidden; user-select: none;
}
.pe-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.pe-layer { position: absolute; inset: 0; }
.pe-page.pe-armed { cursor: crosshair; }

/* Text that can be edited shows where it is on hover, and only then: an outline
   round every line of a full page would be all a person could see. */
.pe-line, .pe-oline { position: absolute; box-sizing: border-box; border: 1px solid transparent; border-radius: 2px; }
.pe-page.pe-edit .pe-line, .pe-page.pe-edit .pe-oline { cursor: text; }
.pe-page.pe-edit .pe-line:hover, .pe-page.pe-edit .pe-oline:hover { border-color: #2563eb; background: rgba(37, 99, 235, .08); }
.pe-page:not(.pe-edit):not(.pe-move) .pe-line, .pe-page:not(.pe-edit) .pe-oline { pointer-events: none; }
.pe-line.pe-edited, .pe-oline.pe-edited { border-color: #059669; background: rgba(5, 150, 105, .07); }

/* A word the scan reader is not sure of: an amber dotted underline on the line,
   with the reason on hover. The strip is taller than the line so it can be hovered. */
.pe-low {
  position: absolute; bottom: -3px; height: 8px; box-sizing: border-box;
  border-bottom: 2px dotted #d97706; pointer-events: auto;
}
.pe-page:not(.pe-edit) .pe-low { pointer-events: none; }

/* Text that cannot be edited here is outlined, so it is clear it is there and why
   clicking it does nothing. */
.pe-blocked { position: absolute; box-sizing: border-box; border: 1px dashed #94a3b8; pointer-events: auto; }

.pe-preview { position: absolute; left: 0; top: 0; white-space: pre; background: #fff; pointer-events: none; }
.pe-preview.pe-above { background: transparent; }

/* Things that were added: an outline to aim at, a preview until the server's own
   drawing arrives, and the same handles the e-sign editor uses. */
.pe-op {
  position: absolute; box-sizing: border-box; border: 1.5px dashed #2563eb; cursor: move;
  background: rgba(37, 99, 235, .05);
}
.pe-op.sel { border-style: solid; outline: 2px solid #0f172a; outline-offset: 2px; }
.pe-op.pe-bad { border-color: #dc2626; background: rgba(220, 38, 38, .12); }
.pe-op .pe-white { position: absolute; inset: 0; }
.pe-op .pe-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .9; pointer-events: none; }
.pe-op.pe-whiteout { background: rgba(255, 255, 255, .55); border-color: #64748b; }

.pe-rubber { position: absolute; border: 1.5px dashed #0f172a; background: rgba(255, 255, 255, .7); pointer-events: none; }

.pe-draft {
  position: absolute; box-sizing: border-box; background: #fff; border: 1.5px solid #2563eb;
  border-radius: 2px; padding: 0 2px; margin: 0; outline: none; z-index: 5;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
}
.pe-lineinput { color: #0f172a; }
.pe-textinput { resize: none; overflow: hidden; white-space: pre; }

/* A line read off a scan: the same input, with a small bar for the lettering above
   it (below it when the line is at the top of the page). The wrapper has no frame
   of its own; the input does. */
.pe-scanedit { padding: 0; border: 0; background: transparent; box-shadow: none; }
.pe-scaninput {
  display: block; box-sizing: border-box; background: #fff; color: #0f172a; margin: 0; outline: none;
  border: 1.5px solid #2563eb; border-radius: 2px; padding: 0 2px; box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
}
.pe-scanbar {
  position: absolute; left: 0; bottom: calc(100% + 4px); display: flex; gap: 8px; align-items: center;
  white-space: nowrap; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; padding: 3px 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .2); font-size: 12px;
}
.pe-scanbar.pe-below { bottom: auto; top: calc(100% + 4px); }
.pe-scanbar select, .pe-scanbar input[type=number] { border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 4px; background: #fff; font-size: 12px; }
.pe-scanbar input[type=number] { width: 54px; }

/* The side panel. */
.pe-style .pe-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 8px; }
.pe-style input[type=color] { width: 100%; height: 32px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; }
.pe-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pe-photo {
  border: 2px solid transparent; border-radius: 8px; padding: 0; background: #f1f5f9;
  aspect-ratio: 1; overflow: hidden; cursor: pointer;
}
.pe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-photo:hover { border-color: #93c5fd; }
.pe-photo.on { border-color: #2563eb; }

/* ---- Phase 3a: fill in a form, and the Pages panel ---- */

/* The note in a page's heading when the page list moves, turns or removes it. */
.pe-plantag { font-weight: 600; font-size: 11.5px; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.pe-plantag:empty { display: none; }
.pe-plantag.on { background: #dbeafe; color: #1d4ed8; }
.pe-plantag.gone { background: #fee2e2; color: #b91c1c; }
.pe-page.pe-removed { opacity: .55; }

/* The controls over a form's fields. See-through while nobody is using them: the picture
   under them is pdfium's own drawing of the field, and a second copy of the same words on
   top would be seen doubled. While the server is drawing a change (.pe-pending on the
   page) they show it themselves, so an answer never looks as if it had not taken. */
.pe-fields { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pe-fields > * { pointer-events: auto; }
.pe-fctl, .pe-fro {
  position: absolute; box-sizing: border-box; margin: 0; padding: 0 2px; border-radius: 2px;
  border: 1px solid rgba(37, 99, 235, .55); background: rgba(37, 99, 235, .08);
  font-family: Helvetica, Arial, sans-serif; user-select: text; -webkit-user-select: text;
}
.pe-fctl.pe-fans { border-color: #059669; background: rgba(5, 150, 105, .09); }
.pe-ftext, .pe-fselect { color: transparent; line-height: 1.15; resize: none; overflow: hidden; }
textarea.pe-ftext { padding-top: 2px; overflow: auto; }
.pe-ftext:focus, .pe-fselect:focus {
  background: #fff; color: #0f172a; border-color: #2563eb; outline: none; z-index: 2;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .25);
}
.pe-pending .pe-ftext, .pe-pending .pe-fselect { color: #0f172a; background: #fff; }
.pe-fselect option { color: #0f172a; background: #fff; }
.pe-fcheck, .pe-fradio { -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0; }
.pe-fradio { border-radius: 50%; }
.pe-fcheck:focus, .pe-fradio:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.pe-pending .pe-fcheck:checked::after, .pe-pending .pe-fradio:checked::after {
  content: ""; position: absolute; left: 22%; top: 22%; right: 22%; bottom: 22%; background: #0f172a;
}
.pe-pending .pe-fradio:checked::after { border-radius: 50%; }
.pe-fro {
  background: repeating-linear-gradient(135deg, rgba(100, 116, 139, .16), rgba(100, 116, 139, .16) 4px, rgba(100, 116, 139, .05) 4px, rgba(100, 116, 139, .05) 8px);
  border-color: rgba(100, 116, 139, .5); cursor: not-allowed;
}

/* The Pages panel: a rail beside the tools, with a card for each page in its new order. */
.pe-panel { width: 268px; }
.pe-panel[hidden] { display: none; }
.pe-plantools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pe-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pe-th {
  position: relative; border: 2px solid transparent; border-radius: 8px; padding: 6px 4px 4px;
  background: #f8fafc; cursor: grab; user-select: none; -webkit-user-select: none; text-align: center;
}
.pe-th:hover { border-color: #bfdbfe; }
.pe-th.sel { border-color: #2563eb; background: #eff6ff; }
.pe-th.new { background: #f0fdf4; }
.pe-th.new.sel { background: #eff6ff; }
.pe-th.drag { opacity: .4; }
.pe-th.before { box-shadow: inset 0 3px 0 #2563eb; }
.pe-th.after { box-shadow: inset 0 -3px 0 #2563eb; }
.pe-thimg { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .3); overflow: hidden; }
.pe-thimg img { position: absolute; display: block; transform-origin: 50% 50%; -webkit-user-drag: none; }
.pe-thblank { position: absolute; inset: 0; background: #fff; }
.pe-thnum {
  position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; border-radius: 5px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: #0f172a; color: #fff;
}
.pe-thcap { font-size: 10.5px; color: #475569; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-thbtns { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.pe-thbtns button {
  width: 26px; height: 24px; padding: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1;
}
.pe-thbtns button:hover { background: #f1f5f9; border-color: #94a3b8; }
.pe-gone { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chip { background: #fee2e2; color: #7f1d1d; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.pe-linkbtn { border: 0; background: none; color: #1d4ed8; cursor: pointer; padding: 0 0 0 6px; font-size: 12px; text-decoration: underline; }
.pe-addednote { background: #fef3c7; color: #92400e; border-radius: 7px; padding: 6px 9px; margin: 10px 0 0; }
.pe-picker { border: 1px solid #cbd5e1; border-radius: 9px; padding: 9px; margin-bottom: 10px; background: #f8fafc; display: flex; flex-direction: column; gap: 6px; }
.pe-pickrow {
  text-align: left; border: 1px solid #cbd5e1; background: #fff; border-radius: 7px; padding: 5px 8px; font-size: 12.5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-pickrow:hover { border-color: #2563eb; background: #eff6ff; }
.pe-picker input[type=text] { width: 100%; box-sizing: border-box; margin-top: 3px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 5px 7px; }
.pe-pickerr { color: #b91c1c; }
.pe-pickbtns { display: flex; gap: 6px; }

/* The save dialog. It lives inside the editor because the app's own modals sit below it. */
.pe-dialog-back { position: fixed; inset: 0; z-index: 130; background: rgba(15, 23, 42, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pe-dialog { background: #fff; border-radius: 14px; width: 480px; max-width: 100%; padding: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3); }
.pe-dialog h3 { margin: 0 0 10px; }
.pe-dlg-info { margin: 8px 0; padding-left: 18px; }
.pe-dlg-flat { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 9px; cursor: pointer; }
.pe-dlg-flat input { margin-top: 3px; }
.pe-dlg-flat span span { display: block; margin-top: 3px; font-weight: 400; }
.pe-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- Phase 3b: paragraphs, moving, and the things drawn over a page that is turned ---- */

/* The Move tool: a line is picked up where it is, and shows it was moved. */
.pe-page.pe-move .pe-line { cursor: move; }
.pe-page.pe-move .pe-line:hover { border-color: #2563eb; background: rgba(37, 99, 235, .08); }
.pe-line.pe-moved { border-color: #7c3aed; background: rgba(124, 58, 237, .07); }
.pe-ghost { position: absolute; box-sizing: border-box; border: 1.5px dashed #059669; background: rgba(5, 150, 105, .1); pointer-events: none; z-index: 4; }

/* A picture that is already on the page, in the Move tool: an outline to pick it up by, and
   at each corner a handle that resizes it with its shape kept. */
.pe-pic { position: absolute; box-sizing: border-box; border: 1.5px dashed #2563eb; background: rgba(37, 99, 235, .05); cursor: move; }
.pe-pic.pe-moved { border-color: #7c3aed; }
.pe-pic.sel { border-style: solid; outline: 2px solid #0f172a; outline-offset: 2px; }
.pe-pic.pe-gone { border-color: #dc2626; background: repeating-linear-gradient(135deg, rgba(220, 38, 38, .18), rgba(220, 38, 38, .18) 5px, rgba(220, 38, 38, .06) 5px, rgba(220, 38, 38, .06) 10px); cursor: default; }
.pe-corner { position: absolute; width: 10px; height: 10px; background: #0f172a; border: 1.5px solid #fff; border-radius: 2px; }
.pe-corner-tl { left: -6px; top: -6px; cursor: nwse-resize; }
.pe-corner-br { right: -6px; bottom: -6px; cursor: nwse-resize; }
.pe-corner-tr { right: -6px; top: -6px; cursor: nesw-resize; }
.pe-corner-bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
.pe-pic .dv-del { right: auto; left: calc(50% - 8px); top: -22px; }

/* A paragraph that was set again is one box, and its preview wraps like the page will. */
.pe-para { cursor: text; }
.pe-preview.pe-wrapped { white-space: pre-wrap; }

/* The box to type a whole paragraph in. Like the scan line's: the wrapper has no frame of its own;
   the textarea does, and the bar above it (below it near the top of the page) says what will happen. */
.pe-paraedit { padding: 0; border: 0; background: transparent; box-shadow: none; }
.pe-paratext {
  display: block; box-sizing: border-box; width: 100%; resize: none; overflow: hidden; margin: 0; outline: none;
  background: #fff; border: 1.5px solid #2563eb; border-radius: 2px; padding: 0 2px; box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
}
.pe-parabar {
  position: absolute; left: 0; bottom: calc(100% + 4px); width: max-content; max-width: 460px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; padding: 5px 9px; font-size: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
}
.pe-parabar.pe-below { bottom: auto; top: calc(100% + 4px); }
.pe-parawarn { color: #92400e; font-weight: 600; margin-bottom: 3px; }

/* ---- Phase 3c: redaction ---- */

/* A pending box is a RED outline with a red wash; once the server's picture of the page arrives
   the picture itself is black there (it is pdfium's own drawing of the copy), and the outline is
   left as the thing to aim at. A box the server refused is hatched. */
.pe-op.pe-redact { border: 1.5px dashed #dc2626; background: rgba(220, 38, 38, .06); }
.pe-pending .pe-op.pe-redact { background: rgba(220, 38, 38, .24); }
.pe-op.pe-redact.pe-bad {
  background: repeating-linear-gradient(135deg, rgba(220, 38, 38, .28), rgba(220, 38, 38, .28) 5px, rgba(220, 38, 38, .08) 5px, rgba(220, 38, 38, .08) 10px);
}
.pe-rbadge {
  position: absolute; left: 2px; top: 2px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border-radius: 4px; pointer-events: none;
  background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700;
}

/* The list of boxes in the rail: what each took, or why it was refused and the tickbox that would let it through. */
.pe-reds { display: flex; flex-direction: column; gap: 8px; }
.pe-red {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; cursor: pointer;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 9px; background: #fff;
}
.pe-red.sel { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.pe-red.bad { border-color: #dc2626; background: #fef2f2; }
.pe-red-no { color: #991b1b; }
.pe-red-warn { color: #92400e; }
.pe-red .ed-check { cursor: pointer; }

/* The confirmation before a copy with a redaction in it is written. */
.pe-dlg-red { border: 1px solid #dc2626; background: #fef2f2; border-radius: 9px; padding: 10px 12px; margin: 10px 0; }
.pe-dlg-red .pe-dlg-info { margin: 6px 0 0; }

/* The Tools page picker: open one from the computer (optionally filed on a lead) above the list
   of PDFs already filed. Each row is the open button with download and, for a PDF kept for this
   person alone, delete beside it, outside the button, because a button inside a button is not
   one a browser will press. The row classes are the Tools page's own listing picker's. */
.pdfpick-up { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pdfpick-up .field { flex: 1 1 260px; min-width: 0; margin: 0; }
.pdfpick-upbtn { cursor: pointer; white-space: nowrap; }
.pdfpick-upbtn.disabled { opacity: .55; pointer-events: none; }
.pdfpick-upnote { margin: 6px 0 12px; }
#pdfpick-note:empty { display: none; }
#pdfpick-note { margin: 6px 0; }
#pdfpick-list { margin-top: 8px; }
.pdfpick-row { display: flex; align-items: center; gap: 6px; }
.pdfpick-row .tool-pick-row { flex: 1 1 auto; min-width: 0; }
.pdfpick-row .tool-pick-row b { overflow-wrap: anywhere; }
.pdfpick-row.pdfpick-fresh .tool-pick-row { border-color: #16a34a; background: #f0fdf4; }