/* Signature and Photo upload fields, and the Wide form width (form.php, includes/form_extras.php, assets/form-extras.js).
   Brand Style Guide tokens only (--brand-*, via the .ff-body aliases in forms.css); shades are color-mix of them.
   Signature pad after Mobbin: Fresha (inline pad + Clear), Apple Notes (× and baseline, "sign using your finger"),
   Workable (Type / Undo / Clear row, legal line). Photo drop zone after Employment Hero. */

/* ---------- Wide form: as wide as the top nav (.mmh-inner, logo to Sign In) ---------- */
.ff-page.ff-wide .ff-card{width:calc(100% - 32px)}           /* page padding 20px each side + 16px = 100% - 72px, like .mmh-inner */
.ff-page.ff-wide .ff-privacy{max-width:none}
.ff-page.ff-wide .ff-cover p{max-width:900px}
.ff-embed-wrap.ff-wide .ff-card{width:100%}
@media(max-width:980px){.ff-page.ff-wide .ff-card{width:100%}}  /* nav: 100% - 40px = the page's own padding */
@media(max-width:640px){.ff-page.ff-wide .ff-card{width:calc(100% - 16px)}}

/* ---------- Signature ---------- */
.ff-sig{--sig-line:color-mix(in srgb,var(--brand-primary-2,#542675) 22%,var(--brand-line,#e6e2ea));margin-top:10px}
.ff-sig-pad{position:relative;height:200px;border:1.5px dashed var(--sig-line);border-radius:14px;background:var(--brand-bg,#fff);overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s}
.ff-sig-pad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
.ff-sig.is-typing .ff-sig-pad canvas{cursor:default;pointer-events:none}
.ff-sig-pad:hover{border-color:color-mix(in srgb,var(--brand-primary-2,#542675) 45%,var(--brand-line,#e6e2ea))}
.ff-sig.is-drawing .ff-sig-pad,.ff-sig-pad:focus-within{border-style:solid;border-color:var(--purple-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary-2,#542675) 13.3%,transparent)}
.ff-sig.has-ink .ff-sig-pad{border-style:solid}
.ff-sig-x{position:absolute;left:22px;bottom:44px;color:var(--muted);font-size:20px;line-height:1;pointer-events:none}
.ff-sig-line{position:absolute;left:46px;right:22px;bottom:50px;height:1.5px;background:var(--sig-line);pointer-events:none}
.ff-sig-hint{position:absolute;left:0;right:0;bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;color:var(--muted);font-size:13.5px;pointer-events:none;transition:opacity .2s}
.ff-sig-hint svg{width:20px;height:20px;color:var(--gold-ink)}
.ff-sig.has-ink .ff-sig-hint,.ff-sig.has-saved .ff-sig-hint{opacity:0}
.ff-q .ff-sig-type{position:absolute;left:16px;right:16px;top:14px;width:auto;min-height:44px;margin:0;font-size:15px}
.ff-sig-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.ff-sig-gap{flex:1}
.ff-sig-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--purple-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.ff-sig-btn svg{width:16px;height:16px}
.ff-sig-btn:hover:not(:disabled){background:var(--brand-surface,#f6f0fb)}
.ff-sig-btn:focus-visible{outline:2px solid var(--purple-2);outline-offset:2px}
.ff-sig-btn:disabled{color:color-mix(in srgb,var(--brand-muted,#6b6570) 55%,transparent);cursor:default}
.ff-sig-btn[aria-pressed=true]{background:var(--brand-surface,#f6f0fb)}
.ff-sig-legal{margin:4px 2px 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.ff-sig:not(.is-ready) .ff-sig-tools{display:none}
.ff-q.has-err .ff-sig-pad{border-color:var(--err)}
@media(max-width:640px){.ff-sig-pad{height:180px}.ff-sig-tools{flex-wrap:nowrap;gap:0}.ff-sig-btn{gap:5px;padding:0 8px;font-size:13.5px}}

/* ---------- Photo upload ---------- */
.ff-photo{margin-top:10px}
.ff-photo-drop{position:relative;display:grid;justify-items:center;gap:6px;padding:26px 18px;border:1.5px dashed color-mix(in srgb,var(--brand-primary-2,#542675) 22%,var(--brand-line,#e6e2ea));border-radius:14px;background:color-mix(in srgb,var(--brand-surface,#f6f0fb) 55%,var(--brand-bg,#fff));text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.ff-photo-drop[hidden]{display:none}
.ff-photo-drop:hover,.ff-photo-drop.is-over{border-color:var(--purple-2);background:var(--brand-surface,#f6f0fb)}
.ff-photo-drop:has(input:focus-visible){border-style:solid;border-color:var(--purple-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary-2,#542675) 13.3%,transparent)}
.ff-photo-drop input{position:absolute;width:1px;height:1px;opacity:0}
.ff-photo-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand-bg,#fff);color:var(--purple-2);box-shadow:0 2px 8px color-mix(in srgb,var(--brand-dark,#12081d) 8%,transparent)}
.ff-photo-text{font-size:15px}
.ff-photo-text strong{color:var(--purple-2)}
.ff-photo-or{color:var(--muted)}
.ff-photo-drop small{color:var(--muted);font-size:12.5px}
.ff-photo-preview{display:flex;align-items:center;gap:14px;padding:10px;border:1.5px solid var(--line);border-radius:14px;background:var(--brand-bg,#fff)}
.ff-photo-preview[hidden]{display:none}
.ff-photo-preview img{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:none;background:var(--brand-surface,#f6f0fb)}
.ff-photo-meta{display:grid;gap:2px;flex:1;min-width:0}
.ff-photo-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.ff-photo-meta small{color:var(--muted);font-size:13px}
.ff-photo-busy{margin:8px 2px 0;color:var(--muted);font-size:13.5px}
.ff-q.has-err .ff-photo-drop{border-color:var(--err)}
@media(max-width:640px){.ff-photo-or{display:none}}

/* Surveys: the pad sits on the slide like other answers */
.ff-survey .ff-sig,.ff-survey .ff-photo{max-width:640px;margin-top:22px}