/* Sign PDF: drawing pad and placement preview. Loaded only on /tools/sign-pdf/. */
.sign-source { display: grid; gap: var(--matrix-space-8); justify-items: start; }
.sign-pad-wrap { width: 100%; max-width: 520px; }
/* The pad is paper-white in every theme: the ink is dark (#1d1d1f) and in dark mode --matrix-surface is the same colour, which hid the drawing. */
.sign-pad { width: 100%; height: auto; touch-action: none; background: #ffffff; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); display: block; }
.sign-placement { display: grid; gap: var(--matrix-space-8); }
.sign-preview-wrap { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--matrix-border); cursor: crosshair; background: var(--matrix-surface); }
.sign-preview { display: block; max-width: 100%; height: auto; }
.sign-overlay { position: absolute; border: 2px solid var(--matrix-brand); background: color-mix(in srgb, var(--matrix-brand) 8%, transparent); pointer-events: none; }
.sign-overlay-image { display: block; width: 100%; height: 100%; }
/* The signature being placed is dragged where it is pressed (sign-pdf.js, grab), found by where the press is: with a mouse its frame
   stays out of the way of a click on the page and the pointer shows it can be moved; on a touch screen the frame takes the touch, so a
   drag that starts on it moves it instead of scrolling the page, while the rest of the page still scrolls. */
.sign-preview-wrap.is-over-signature { cursor: move; }
@media (any-pointer: coarse) { .sign-overlay { pointer-events: auto; touch-action: none; } }
.sign-preview-wrap { display: block; width: fit-content; }
.sign-source { grid-template-columns: minmax(0, 1fr); }
.sign-preview-wrap:focus-visible { outline: 3px solid var(--matrix-focus); outline-offset: 3px; }
/* Signatures kept for this save (appendix 10): their frames under the one being placed, and their list. */
.sign-added-frames { position: absolute; inset: 0; pointer-events: none; }
.sign-kept-frame { position: absolute; border: 2px dashed var(--matrix-brand); background: color-mix(in srgb, var(--matrix-brand) 4%, transparent); }
.sign-add-row { display: grid; gap: var(--matrix-space-4); justify-items: start; }
.sign-list { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--matrix-space-4); }
.sign-list-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8); }
/* Jack's T10-02: the typed name, and its picture on paper white as the pad is (the ink is dark in every theme). */
.sign-name { width: min(100%, 28em); }
.sign-typed { display: block; max-width: min(100%, 520px); max-height: 140px; height: auto; background: #ffffff; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8); }
/* Jack's T10-03, B: the frame's corners resize it. A press is matched to a corner by where it is (sign-pdf.js, cornerAt), as it is
   to the frame, so on a mouse the handles only show where the corners are and the pointer shows which way they pull; on a touch
   screen a handle takes the touch, over a larger area than it shows, so a drag that starts on it resizes instead of scrolling. */
.sign-handle { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; background: var(--matrix-surface); border: 2px solid var(--matrix-brand); border-radius: 2px; pointer-events: none; }
.sign-handle-top-left { top: 0; left: 0; }
.sign-handle-top-right { top: 0; left: 100%; }
.sign-handle-bottom-right { top: 100%; left: 100%; }
.sign-handle-bottom-left { top: 100%; left: 0; }
.sign-preview-wrap[data-corner="top-left"], .sign-preview-wrap[data-corner="bottom-right"] { cursor: nwse-resize; }
.sign-preview-wrap[data-corner="top-right"], .sign-preview-wrap[data-corner="bottom-left"] { cursor: nesw-resize; }
@media (any-pointer: coarse) {
  .sign-handle { width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: auto; touch-action: none; }
  .sign-handle::after { content: ""; position: absolute; inset: -10px; }
}
@media (forced-colors: active) { .sign-handle { border-color: Highlight; } }
/* T10-03, C: its place and width in millimetres, under the preview */
.sign-mm-row { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8) var(--matrix-space-16); }
.sign-mm-field { display: inline-flex; flex-direction: column; gap: 4px; }
.sign-mm-field input { width: 8em; }
.sign-mm .matrix-error { margin: 0; }
/* Lucy's new-4: the date and its written forms; a kept line's own words in the list */
.sign-date { width: min(100%, 14em); }
.sign-list-line { overflow-wrap: anywhere; }