/* ---------- signature fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Sig Dancing";src:url("/sign/fonts/dancingscript.woff2") format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Sig Caveat";src:url("/sign/fonts/caveat.woff2") format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Sig Apple";src:url("/sign/fonts/homemadeapple.woff2") format("woff2");font-display:block}
@font-face{font-family:"Sig Vibes";src:url("/sign/fonts/greatvibes.woff2") format("woff2");font-display:block}

:root{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --border:#dfe2e8;
  --text:#1b1f27;
  --muted:#636b7a;
  --accent:#2f6df6;
  --accent-ink:#ffffff;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15171c;--surface:#1d2026;--border:#31353e;--text:#e9ecf1;--muted:#9aa3b2;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
/* display:flex/grid below would otherwise beat the hidden attribute */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2{margin:0}

/* ---------- top bar ---------- */
/* bar + palette stick as one block, so the palette needs no hardcoded offset */
.topbar{position:sticky;top:0;z-index:40}
.bar{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand img{border-radius:6px;display:block}
.bar-file{min-width:0;flex:1}
.fname{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.pageind{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.zoom{display:flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:8px;padding:2px}
.zoom span{min-width:46px;text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

.btn{
  appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font:inherit;font-weight:600;font-size:14px;padding:8px 14px;border-radius:8px;cursor:pointer;
  position:relative;overflow:hidden;
}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.primary[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:rgba(127,127,127,.12);border-color:transparent}
.btn.big{padding:12px 22px;font-size:16px}
.btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.icon-btn{
  appearance:none;border:0;background:transparent;color:var(--muted);
  font-size:18px;line-height:1;width:28px;height:28px;border-radius:6px;cursor:pointer;
}
.icon-btn:hover{background:rgba(127,127,127,.14);color:var(--text)}

/* ---------- signature palette ---------- */
.palette{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.palette-label,.palette-hint{font-size:12px;color:var(--muted)}
.palette-items{display:flex;gap:8px;flex-wrap:wrap}
.sig-chip{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:46px;min-width:76px;padding:4px 10px;
  background:#fff;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;
}
.sig-chip img{max-height:36px;max-width:150px;display:block}
.sig-chip.armed{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,109,246,.2)}
.sig-chip .del{
  position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;
  border:0;background:var(--muted);color:#fff;font-size:12px;line-height:19px;padding:0;cursor:pointer;
}
.sig-chip .del:hover{background:#d4423c}

/* ---------- intro ---------- */
.intro{max-width:760px;margin:0 auto;padding:40px 20px 80px}
.drop{
  background:var(--surface);border:2px dashed var(--border);border-radius:16px;
  padding:44px 28px;text-align:center;
}
.drop.over{border-color:var(--accent);background:rgba(47,109,246,.06)}
.drop-ico{width:60px;height:60px;color:var(--accent);margin-bottom:10px}
.drop h1{font-size:28px;letter-spacing:-.02em}
.lede{color:var(--muted);margin:8px 0 22px}
.privacy{color:var(--muted);font-size:13px;max-width:44ch;margin:24px auto 0;line-height:1.6}
.privacy strong{color:var(--text)}
.steps{color:var(--muted);line-height:1.8;margin:34px 0 0;padding-left:22px;font-size:14px}
.steps b{color:var(--text)}
.home-link{margin:34px 0 0;font-size:13px;color:var(--muted);text-align:center}
.home-link a{color:var(--accent);font-weight:600;text-decoration:none}
.home-link a:hover{text-decoration:underline}

/* ---------- viewer ---------- */
.viewer{padding:22px 10px 120px;display:flex;flex-direction:column;align-items:center;gap:18px}
.page{
  position:relative;background:#fff;box-shadow:var(--shadow);border-radius:2px;
  flex:0 0 auto;
}
.page canvas{display:block;width:100%;height:100%;border-radius:2px}
.page .pageno{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-19px;
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;
}
.page .skeleton{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}
.overlay{position:absolute;inset:0}  /* visible, so the selection handles are not clipped */
.page.arming{cursor:copy}
.page.arming .overlay{background:rgba(47,109,246,.05)}

/* ---------- placed signature ---------- */
.ph{position:absolute;touch-action:none;cursor:grab;border:1.5px dashed transparent;border-radius:3px}
.ph img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.ph:hover{border-color:rgba(47,109,246,.5)}
.ph.sel{border-color:var(--accent);cursor:move}
.ph .grip{
  position:absolute;right:-8px;bottom:-8px;width:17px;height:17px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;cursor:nwse-resize;display:none;touch-action:none;
}
.ph .rm{
  position:absolute;left:-9px;top:-9px;width:19px;height:19px;border-radius:50%;
  background:#d4423c;border:2px solid #fff;color:#fff;font-size:11px;line-height:1;
  padding:0;cursor:pointer;display:none;
}
.ph.sel .grip,.ph.sel .rm{display:block}

/* ---------- modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:60;background:rgba(10,13,20,.55);display:grid;place-items:center;padding:16px}
.modal{
  background:var(--surface);border-radius:14px;box-shadow:var(--shadow);
  width:100%;max-width:560px;overflow:hidden;
}
.modal-head{display:flex;align-items:center;padding:16px 16px 10px}
.modal-head h2{font-size:17px;flex:1;letter-spacing:-.01em}
.tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--border)}
.tab{
  appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;
  padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab.on{color:var(--text);border-bottom-color:var(--accent)}
.pane{padding:16px}

.padwrap{position:relative;border:1.5px solid var(--border);border-radius:10px;background:#fff;overflow:hidden}
#pad{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair;position:relative;z-index:2}
.baseline{position:absolute;left:28px;right:28px;bottom:52px;border-bottom:1.5px dashed #c9ced8;z-index:1}
.padhint{position:absolute;left:32px;bottom:58px;color:#b7bdc8;font-size:14px;z-index:1;pointer-events:none}
.padwrap.inked .padhint{display:none}

#typedName{
  width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:1.5px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);
}
#typedName:focus{outline:none;border-color:var(--accent)}
.fontpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fontopt{
  display:flex;align-items:center;justify-content:center;height:68px;padding:4px 8px;
  background:#fff;border:1.5px solid var(--border);border-radius:9px;cursor:pointer;overflow:hidden;
  color:#111;font-size:30px;line-height:1.1;white-space:nowrap;
}
.fontopt.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,109,246,.18)}
.fontopt .ghosttext{color:#b7bdc8}

.modal-foot{display:flex;align-items:center;gap:12px;padding:12px 16px 16px;border-top:1px solid var(--border);flex-wrap:wrap}
.modal-foot .spacer{flex:1}
.inks{display:flex;gap:7px}
.ink{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0}
.ink.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,109,246,.25)}
.remember{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer}

/* ---------- messages ---------- */
.loading,.error{text-align:center;color:var(--muted);padding:30px 16px}
.error{color:#d4423c;max-width:60ch;margin:0 auto}

@media (max-width:640px){
  .bar{gap:10px;padding:9px 12px}
  .bar-file{order:3;flex-basis:100%;flex-grow:1}
  .bar-tools{gap:7px}
  .btn{padding:7px 11px;font-size:13px}
  .pageind,.palette-hint{display:none}
  .intro{padding:26px 14px 60px}
  .drop{padding:30px 16px}
  .drop h1{font-size:23px}
  .fontpick{grid-template-columns:1fr}
  .viewer{padding:14px 6px 110px}
}