/* /signature-maker/ page styles. Built from /assets/polyatic.css tokens; the pad and font buttons follow
   /sign-pdf/'s signature pad (white "paper" in both themes, because the ink colours are dark). */
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/dancing-script-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/dancing-script-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/great-vibes-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/great-vibes-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/caveat-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/caveat-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

/* the pad gets the width on desktop; style and download sit beside it */
@media(min-width:920px){.sm-duo{grid-template-columns:minmax(0,1.6fr) minmax(18rem,.85fr)}}
.sm-side{display:grid;gap:1rem;align-content:start}
@media(min-width:920px){.sm-side{position:sticky;top:1rem}}
.sm-modes{margin-bottom:0.75rem}
.sm-panel{display:flex;flex-direction:column;gap:0.625rem}
.sm-panel[hidden]{display:none}

/* the signature pad */
.sm-canvaswrap{position:relative;height:13rem;border:1px solid var(--line-2);border-radius:0.75rem;background:#fff;overflow:hidden}
@media(min-width:920px){.sm-canvaswrap{height:18rem}}
.sm-pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sm-line{position:absolute;left:8%;right:8%;bottom:28%;border-bottom:1px solid #b9bbb2;pointer-events:none}
.sm-padhint{position:absolute;left:8%;bottom:calc(28% + 0.25rem);font-size:0.8125rem;color:#5a5f5b;pointer-events:none}
.sm-padbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}
.sm-padbar .chip:disabled{opacity:.45;cursor:default}
.sm-count{margin-left:auto;font-size:0.8125rem;color:var(--muted)}
.chip:focus-visible,.modes button:focus-visible,.sm-font:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* typed */
.sm-opt{display:flex;flex-direction:column;gap:0.25rem;font-size:0.8125rem;font-weight:600;color:var(--muted)}
.sm-opt input{height:2.75rem;padding:0 0.75rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
.sm-opt input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sm-fonts{display:grid;grid-template-columns:1fr;gap:0.5rem}
.sm-font{height:3.75rem;border:1px solid var(--line-2);border-radius:0.625rem;background:#fff;color:#111312;font-size:2rem;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.75rem}
.sm-font.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sm-font[data-f="dancing"]{font-family:"Dancing Script",cursive}
.sm-font[data-f="vibes"]{font-family:"Great Vibes",cursive;font-size:2.25rem}
.sm-font[data-f="caveat"]{font-family:"Caveat",cursive;font-size:2.125rem}
/* Devanagari and Bengali faces: registered by app.js (FontFace) only once a name in that script is typed */
.sm-font[hidden]{display:none}
.sm-font[data-f="kalam"]{font-family:"Kalam",cursive;font-size:1.75rem}
.sm-font[data-f="tillana"]{font-family:"Tillana",cursive;font-size:1.625rem}
.sm-font[data-f="atma"]{font-family:"Atma",cursive;font-size:1.75rem}
.sm-font[data-f="galada"]{font-family:"Galada",cursive;font-size:1.875rem}

/* photo */
.sm-pick{align-self:flex-start}
.sm-panel .field[hidden]{display:none}

/* side cards */
.sm-card .sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.625rem}
.sm-card .field{margin-top:0.875rem}
.sm-card .field[hidden]{display:none}
.sm-ink{display:flex;flex-wrap:wrap;gap:0.5rem}
.sm-ink .chip{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;cursor:pointer}
.sm-dot{width:0.75rem;height:0.75rem;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.sm-black{background:#111312}
.sm-blue{background:#1a3fb0}
.sm-custom input{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.sm-custom:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* preview on a checkerboard, so transparency is visible */
.sm-prev{min-height:7rem;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:0.75rem;padding:0.75rem;background-color:#fff;background-image:linear-gradient(45deg,#efefe9 25%,transparent 25%,transparent 75%,#efefe9 75%),linear-gradient(45deg,#efefe9 25%,transparent 25%,transparent 75%,#efefe9 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.sm-prev canvas{max-width:100%;max-height:10rem;outline:1px dashed #b9bbb2}
.sm-prev canvas[hidden]{display:none}
.sm-none{font-size:0.8125rem;color:#5a5f5b;text-align:center;max-width:22rem}
.sm-dims{font-family:var(--mono);font-size:0.75rem;color:var(--muted);margin:0.5rem 0.125rem 0;min-height:1rem}
.sm-dl{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}
.sm-dl .btn{flex:1 1 5.5rem}
.sm-dl .btn[hidden]{display:none}
.sm-dl .btn:disabled{opacity:.5;cursor:default;filter:none}
.sm-note{font-size:0.8125rem;color:var(--muted);margin:0.625rem 0.125rem 0;line-height:1.5}

/* explainer */
.explainer .sm-steps,.explainer .sm-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .sm-steps li,.explainer .sm-cannot li{margin:0 0 0.5rem}
.explainer .sm-steps b,.explainer .sm-cannot b{color:var(--ink)}
.sm-howto{display:grid;gap:0.75rem 1.25rem}
@media(min-width:760px){.sm-howto{grid-template-columns:1fr 1fr}}
.sm-app{border:1px solid var(--line);border-radius:0.625rem;padding:0.75rem 0.875rem;background:var(--surface)}
.sm-appname{margin:0 0 0.375rem;color:var(--ink)}
.sm-app ol{margin:0;padding-left:1.125rem;color:var(--muted);font-size:0.875rem}
.sm-app li{margin:0 0 0.375rem}
.sm-app li b{color:var(--ink)}

@media(max-width:640px){.sm-main{padding:0.75rem}}