/* Sign a PDF: a notary's desk. Pages sit on a cool grey blotter; placed signatures get a dashed blue frame while you
   arrange them, and the frame disappears in the saved file. */
:root { --page: #eef0f3; --card: #ffffff; --ink: #14181e; --soft: #58606b; --line: #d3d8de; --field: #e6e9ed; --act: #1d3a8a; --on-act: #ffffff; --stop: #b3261e; --wide: 820px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #111316; --card: #1a1d21; --ink: #e9ecf0; --soft: #a2a9b3; --line: #2e333a; --field: #111316; --act: #9fb6ff; --on-act: #0c1838; --stop: #ff8a80; color-scheme: dark; }
}
.drop { position: relative; display: grid; place-items: center; gap: 4px; min-height: 120px; border: 2px dashed var(--soft); border-radius: 12px; background: var(--card); text-align: center; cursor: pointer; padding: 20px; font-size: 19px; }
.drop.over, .drop:focus-within { border-color: var(--act); border-style: solid; } .drop input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; } .drop .soft { font-weight: 400; }
.pad { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 3 / 1; overflow: hidden; }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; }
.pad .line { position: absolute; left: 6%; right: 6%; bottom: 24%; border-bottom: 1.5px solid #c9c9c3; }
.pages { display: grid; gap: 18px; }
.page { position: relative; box-shadow: 0 2px 12px rgb(0 0 0 / .18); background: #fff; touch-action: pan-y; }
.page canvas { display: block; width: 100%; height: auto; }
.placed { position: absolute; border: 1.5px dashed var(--act); touch-action: none; cursor: move; }
.placed img { width: 100%; height: 100%; display: block; pointer-events: none; }
.placed .grip { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--act); border: 2px solid #fff; cursor: nwse-resize; }
.placed .when { position: absolute; left: 0; top: 100%; font: 11px Helvetica, Arial, sans-serif; color: #111; white-space: nowrap; pointer-events: none; }
.sticky { position: sticky; bottom: 0; background: var(--page); padding: 10px 0; z-index: 2; align-items: center; }