/* The document canvas: shared by the field editor inside the app and by the
   public signing page, which loads this file on its own. Kept separate from
   styles.css for exactly that reason. */

.dv-wrap { background: #eef1f6; padding: 18px; border-radius: 12px; overflow: auto; }
.dv-page {
  position: relative; background: #fff; margin: 0 auto 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .16); border-radius: 2px;
  font-family: Helvetica, Arial, sans-serif; overflow: hidden;
}
.dv-page:last-child { margin-bottom: 0; }
.dv-text { position: absolute; white-space: pre; }
.dv-line { position: absolute; }
.dv-scan { position: absolute; object-fit: contain; }
.dv-note {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: #64748b; font-size: 13px; padding: 0 40px; line-height: 1.6;
}
.dv-note span { font-size: 12px; color: #94a3b8; }

/* A block somebody has to fill in. */
.dv-field {
  position: absolute; border: 1.5px dashed #2563eb; background: rgba(37, 99, 235, .10);
  border-radius: 4px; font-size: 10px; color: #1d4ed8; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer; user-select: none; box-sizing: border-box; text-align: center;
}
.dv-field .dv-tag {
  position: absolute; top: -16px; left: -1px; font-size: 9.5px; font-weight: 700;
  background: #2563eb; color: #fff; border-radius: 4px 4px 0 0; padding: 1px 5px;
  white-space: nowrap; letter-spacing: .2px;
}
.dv-field.dv-other { border-color: #94a3b8; background: rgba(148, 163, 184, .12); color: #64748b; }
.dv-field.dv-other .dv-tag { background: #94a3b8; }
.dv-field.dv-mine { border-color: #d97706; background: rgba(217, 119, 6, .12); color: #b45309; }
.dv-field.dv-mine .dv-tag { background: #d97706; }
.dv-field.dv-done { border-style: solid; border-color: #059669; background: rgba(5, 150, 105, .07); }
.dv-field.dv-done .dv-tag { background: #059669; }
.dv-field.dv-required::after {
  content: '*'; position: absolute; top: -15px; right: -3px;
  color: #dc2626; font-weight: 700; font-size: 13px;
}
.dv-field.dv-selected { outline: 2px solid #0f172a; outline-offset: 2px; }
.dv-field img { max-width: 100%; max-height: 100%; display: block; }
.dv-field .dv-val {
  font-family: Helvetica, Arial, sans-serif; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px;
}
.dv-field .dv-val.dv-ital { font-style: italic; }
.dv-grip {
  position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px;
  background: #0f172a; border: 1.5px solid #fff; border-radius: 2px; cursor: nwse-resize;
}
.dv-del {
  position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; line-height: 13px;
  background: #dc2626; color: #fff; border: 1.5px solid #fff; border-radius: 50%;
  font-size: 11px; text-align: center; cursor: pointer; font-weight: 700;
}

/* Sender markup, which nobody fills in. */
.dv-markup { position: absolute; box-sizing: border-box; cursor: move; }
.dv-markup.mk-check { color: #047857; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dv-markup.mk-strike { border-top: 1.6px solid #b91c1c; }
.dv-markup.mk-highlight { background: rgba(253, 224, 71, .55); border-radius: 2px; }
.dv-markup.mk-text {
  color: #0f172a; font-family: Helvetica, Arial, sans-serif;
  display: flex; align-items: center; white-space: pre; overflow: hidden;
}
.dv-markup.dv-selected { outline: 2px solid #0f172a; outline-offset: 2px; }

/* Placement palette, used by the editor. */
.dv-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dv-tool {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 6px 11px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: #334155;
}
.dv-tool:hover { border-color: #2563eb; color: #1d4ed8; }
.dv-tool.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.dv-arm { cursor: crosshair; }