/* Sign PDF tool (assets/js/tools/sign.js). Uses the workbench tokens with safe fallbacks; works in light, dark and RTL. */
.sg-gate{padding:24px;max-width:560px}.sg-gate h3{margin:0 0 8px}.sg-gate p{margin:0 0 16px;color:var(--wb-muted,#5b6472)}
.sg-panel,.sg-make{padding:16px;margin-bottom:16px}
.sg-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sg-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.sg-chipw{position:relative}
.sg-chip{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px;max-width:160px;padding:8px 10px;border:1px solid var(--wb-line,#d8dde5);border-radius:10px;background:var(--wb-surface,#fff);color:var(--wb-ink,#111827);cursor:pointer;font:inherit;font-size:.8125rem}
.sg-chip img{display:block;max-width:100%;max-height:52px;object-fit:contain;background:repeating-conic-gradient(#0000000d 0 25%,transparent 0 50%) 0 0/12px 12px;border-radius:4px}
.sg-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wb-muted,#5b6472)}
.sg-chip.on{border-color:var(--wb-accent,#0d9488);box-shadow:0 0 0 2px var(--wb-accent-soft,#0d948833)}
.sg-chip.tmp{border-style:dashed}
.sg-chip:focus-visible,.sg-del:focus-visible,.sg-x:focus-visible,.sg-mark:focus-visible,.sg-col:focus-visible{outline:2px solid var(--wb-focus,var(--wb-accent,#0d9488));outline-offset:2px}
.sg-del{position:absolute;top:-6px;inset-inline-end:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;border:1px solid var(--wb-line,#d8dde5);background:var(--wb-surface,#fff);color:var(--wb-muted,#5b6472);cursor:pointer;font:inherit;font-size:.75rem;line-height:1}
.sg-del.sure{background:var(--wb-err,#b42318);border-color:var(--wb-err,#b42318);color:#fff}
.sg-quota{margin:0;font-size:.8125rem}
.sg-padbox{position:relative;border:1px dashed var(--wb-line-strong,#aab2bf);border-radius:10px;background:var(--wb-surface,#fff);overflow:hidden}
.sg-pad{display:block;width:100%;aspect-ratio:5/2;cursor:crosshair;touch-action:none;background:transparent}
.sg-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--wb-muted,#5b6472);font-size:.9375rem;text-align:center;padding:0 12px}
.sg-colors{display:flex;gap:8px;align-items:center;margin-inline-end:auto}
.sg-col{width:28px;height:28px;border-radius:50%;border:2px solid var(--wb-line,#d8dde5);background:var(--c);cursor:pointer;padding:0}
.sg-col.on{border-color:var(--wb-ink,#111827);box-shadow:0 0 0 2px var(--wb-surface,#fff) inset}
.sg-tabs{margin-bottom:12px}
.sg-pane{margin-bottom:12px}
.sg-prevbox{margin:10px 0;min-height:24px}
.sg-prev{max-width:100%;max-height:140px;background:repeating-conic-gradient(#0000000d 0 25%,transparent 0 50%) 0 0/12px 12px;border:1px solid var(--wb-line,#d8dde5);border-radius:8px}
.sg-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}
.sg-count{font-size:.875rem}
.sg-stage{margin-top:8px}
.sg-stage.placing .sg-page{cursor:copy;outline:2px dashed var(--wb-accent,#0d9488);outline-offset:-2px}
.sg-pages{display:flex;flex-direction:column;gap:16px;align-items:center;background:var(--wb-sunken,#eef1f5);padding:16px;border-radius:12px}
.sg-page{position:relative;width:100%;max-width:900px;background:#fff;box-shadow:0 1px 4px #0003;direction:ltr}
.sg-cv{position:absolute;inset:0;width:100%;height:100%}
.sg-layer{position:absolute;inset:0}
.sg-pn{position:absolute;top:6px;inset-inline-start:8px;font-size:.6875rem;color:#6b7280;pointer-events:none}
.sg-mark{position:absolute;cursor:move;border:1.5px dashed transparent;touch-action:none;user-select:none;-webkit-user-select:none}
.sg-mark.sel,.sg-mark:hover,.sg-mark:focus-visible{border-color:var(--wb-accent,#0d9488)}
.sg-mark img{display:block;width:100%;height:auto;pointer-events:none}
.sg-x{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;border:1px solid var(--wb-line,#d8dde5);background:#fff;color:#111827;cursor:pointer;font-size:14px;line-height:1;padding:0;display:none}
.sg-mark.sel .sg-x,.sg-mark:hover .sg-x,.sg-mark:focus-within .sg-x{display:block}
.sg-rs{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:3px;background:var(--wb-accent,#0d9488);border:2px solid #fff;cursor:nwse-resize;display:none;touch-action:none}
.sg-mark.sel .sg-rs,.sg-mark:hover .sg-rs,.sg-mark:focus-within .sg-rs{display:block}
@media (pointer:coarse){.sg-x{width:32px;height:32px;top:-16px;right:-16px;display:block}.sg-rs{width:24px;height:24px;right:-12px;bottom:-12px;display:block}.sg-mark{border-color:var(--wb-accent,#0d9488)}}
@media (max-width:640px){.sg-chip{min-width:100px}.sg-pages{padding:8px}}