/* Hubibù Sign pages and fields, drawn by fields.js: the same look in the owner app and on the recipient page.
   Each field gets its person's colour in --field. */
.pages-box{min-width:0}
.sign-pages{display:grid;gap:16px;justify-items:center}
.sign-page{position:relative;width:100%;max-width:900px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);border-radius:2px;overflow:hidden;touch-action:pan-y;user-select:none}
.sign-page img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.sign-page-number{position:absolute;right:6px;bottom:6px;font-size:11px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:1px 6px}
.pages-box.compact .sign-page{max-width:520px}
.sign-field{position:absolute;box-sizing:border-box;border:2px solid var(--field);background:color-mix(in srgb,var(--field) 14%,transparent);border-radius:4px;
  color:var(--field);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;padding:0 2px;font-family:inherit}
.sign-field.muted{opacity:.45;border-style:dashed}
button.sign-field{cursor:pointer}
.sign-field.editable{cursor:move;touch-action:none;flex-direction:column;line-height:1.1}
.sign-field.selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--field) 35%,transparent);z-index:2}
.sign-field-caption{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sign-field-owner{font-weight:400;font-size:10px;opacity:.8;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sign-field-handle{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;background:var(--field);border-radius:3px 0 3px 0;cursor:nwse-resize}