:root{
  --ink:#16181d; --muted:#5c6270; --line:#dfe3ea; --bg:#f3f5f8;
  --card:#ffffff; --brand:#1b3a8f; --brand-ink:#ffffff;
  --ok:#126c3a; --warn:#8a5a00; --bad:#9a2525;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:900px;margin:0 auto;padding:24px 16px 72px}
.bar{background:#fff;border-bottom:1px solid var(--line)}
.bar .wrap{padding:14px 16px;display:flex;gap:12px;align-items:baseline;justify-content:space-between}
.bar strong{font-size:15px}
.bar span{color:var(--muted);font-size:13px}
h1{font-size:23px;line-height:1.25;margin:0 0 6px}
h2{font-size:17px;margin:28px 0 10px}
p{margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 18px}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}

.btn{
  display:inline-block;border:0;border-radius:7px;padding:13px 24px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  background:var(--brand);color:var(--brand-ink);
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:#eef1f6;color:var(--ink)}
.btn.lnk{background:none;color:var(--brand);padding:6px 0;text-decoration:underline}

.notice{border-radius:8px;padding:13px 16px;margin:0 0 18px;font-size:14px;border:1px solid}
.notice.err{background:#fdf2f2;border-color:#f3cfcf;color:var(--bad)}
.notice.warn{background:#fff8ea;border-color:#f0ddb4;color:var(--warn)}
.notice.ok{background:#eefaf2;border-color:#bfe6cf;color:var(--ok)}
.notice ul{margin:6px 0 0 18px;padding:0}

/* ---- document ---- */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 18px}
.page{position:relative;margin:0 auto 14px;max-width:100%;background:#fff;box-shadow:0 1px 4px rgba(20,24,40,.12)}
.page:last-child{margin-bottom:0}
.page img{display:block;width:100%;height:auto}
.fld{
  position:absolute;border:2px dashed var(--brand);border-radius:5px;
  background:rgba(27,58,143,.07);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--brand);text-align:center;padding:2px;
}
.fld:hover{background:rgba(27,58,143,.14)}
.fld.done{border-style:solid;border-color:var(--ok);background:rgba(18,108,58,.06);cursor:pointer}
.fld .ink{width:100%;height:100%;display:block}
.fld .val{font-weight:500;color:var(--ink);font-size:12px;overflow:hidden}
.fld.other{border-color:#c6ccd8;background:rgba(0,0,0,.02);color:#8b93a3;cursor:default;border-style:dotted}

/* ---- signature pad ---- */
.modal{position:fixed;inset:0;background:rgba(14,17,25,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.modal[hidden]{display:none}
.pad{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:560px}
.pad h3{margin:0 0 4px;font-size:17px}
.padbox{border:1px solid var(--line);border-radius:8px;background:#fcfcfd;position:relative;margin:14px 0 8px;touch-action:none}
.padbox canvas{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.padbox .base{position:absolute;left:14px;right:14px;bottom:38px;border-bottom:1px solid #cbd2de}
.padrow{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:6px;margin:0 0 4px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
input[type=text]{
  width:100%;border:1px solid var(--line);border-radius:7px;padding:12px;font:inherit;background:#fff;
}
input[type=text]:focus{outline:2px solid var(--brand);outline-offset:1px}
.typed{font-family:"Snell Roundhand","Apple Chancery","Segoe Script","Brush Script MT",cursive;font-size:38px;text-align:center;padding:18px 10px;color:#0a1b4a}
label.chk{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;cursor:pointer}
label.chk input{margin-top:3px;width:18px;height:18px;flex:none}
.field-label{font-size:13px;font-weight:600;margin:0 0 6px}

.actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(243,245,248,0),var(--bg) 42%);padding:22px 0 0;margin-top:8px}
table.kv{border-collapse:collapse;width:100%;font-size:14px}
table.kv td{padding:8px 12px 8px 0;vertical-align:top;border-bottom:1px solid var(--line)}
table.kv td:first-child{color:var(--muted);width:150px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.pill.ok{background:#e3f6ea;color:var(--ok)}
.pill.wait{background:#fdf1dc;color:var(--warn)}
@media (max-width:640px){
  h1{font-size:20px}
  .card,.doc{padding:16px}
  .typed{font-size:30px}
}

/* Initials need no signature baseline. Toggled by a class rather than a JS
   style assignment, which the page's CSP blocks. */
.padbox.noline .base{display:none}

/* A text field typed directly on the document. Sized to its box, so it sits
   on the contract's own ruled line like the signature does. */
.fld.fldtext{
  background:rgba(27,58,143,.06);border:2px dashed var(--brand);
  font:inherit;color:var(--ink);padding:0 4px;line-height:1;
  border-radius:5px;
}
.fld.fldtext::placeholder{color:var(--brand);opacity:.75;font-size:12px;font-weight:600}
.fld.fldtext:focus{outline:2px solid var(--brand);outline-offset:1px;background:#fff}
.fld.fldtext.done{border-style:solid;border-color:var(--ok);background:rgba(18,108,58,.06)}

/* Spacing utilities. These exist because the page's CSP has no
   'unsafe-inline' for styles: a style="" attribute is dropped outright, which
   is how every signature field once collapsed into the corner of its page.
   Nothing in a view may carry an inline style. */
.mt0{margin-top:0}
.mt18{margin-top:18px}
.mt20{margin-top:20px}
.mb4{margin:0 0 4px}
.mb10{margin:0 0 10px}
.mb12{margin:0 0 12px}
.mb14{margin:0 0 14px}
.hint{margin:7px 0 18px}
.note{margin:12px 0 0}
.tight{margin:8px 0 0}
.flat{padding-top:0}
.row-gap{gap:14px}
.w200{width:200px}

/* Signing toolbar. With dozens of fields spread over eleven pages, the signer
   needs the count and the apply-all action to stay reachable while scrolling. */
.toolbar{position:sticky;top:0;z-index:20;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(16,20,40,.07)}
.toolbar .padrow{margin:0}
#applyall{padding:9px 16px;font-size:14px}

/* A margin mark sits in a 25pt-wide box, so its label has to go. The box is
   still a clear target; what it is for is said in the toolbar and the pad. */
.fld.tiny{font-size:0;border-width:1.5px}
.fld.tiny.done{font-size:0}