/* Spliced eSign — styled per DESIGN.md (Spliced App Analysis, alpha)
   Poppins Light body · flat #4d7aee actions + blue→cyan gradient CTAs
   white cards on #f7f7f7 canvas · wide sub-10% shadows · violet accent family */
* { box-sizing: border-box; }
:root {
  --primary: #4d7aee; --primary-g2: #4cb5ed;
  --violet: #875ae2; --violet-bright: #c05be3; --indigo: #7367f0; --magenta: #da61e4;
  --navy: #1a1a2e;
  --canvas: #f7f7f7; --surface: #ffffff; --surface-soft: #f6f8fa; --surface-muted: #f3f2f7;
  --ink: #101213; --body: #454545; --secondary: #54595f; --muted: #6e8192; --faint: #b9b9c3;
  --hairline: #e1e1e3; --border-input: #d8d6de;
  --success: #28c76f; --warning: #f2a356; --error: #ea5455;
  --s1: #4d7aee; --s2: #875ae2; --s3: #7367f0; --s4: #da61e4;
  --r-xs: 3.75px; --r-sm: 5.37px; --r-md: 6px; --r-lg: 10px; --r-xl: 12px;
  --shadow-1: rgba(27,49,66,.05) 10px 20px 60px 0px;
  --shadow-2: rgba(0,0,0,.08) 0px 2px 8px 0px;
  --shadow-3: rgba(0,0,0,.15) 0px 4px 12px 0px;
  --grad-primary: linear-gradient(90deg, #4d7aee, #4cb5ed);
  --grad-purple: linear-gradient(88.35deg, #c05be3, #875ae2);
  /* legacy aliases used by JS inline styles */
  --pen: #4d7aee; --void: #ea5455; --waiting: #f2a356; --fog: #f7f7f7; --line: #e1e1e3; --txt: #454545;
}
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Poppins', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; font-weight: 300; line-height: 1.45;
  color: var(--body); background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-weight: 600; color: var(--ink); letter-spacing: 0; }
h1 { font-size: 21.75px; line-height: 1.2; margin: 0 0 4px; }
h2 { font-size: 16.5px; line-height: 1.3; margin: 0 0 10px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; color: var(--ink); }
.mono { font-size: 13px; }

/* ---------- App shell ---------- */
#app { display: flex; min-height: 100vh; }
.rail {
  width: 240px; flex-shrink: 0; background: var(--surface); color: var(--body);
  display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh;
  box-shadow: var(--shadow-2);
  background-image: linear-gradient(180deg, rgba(135,90,226,.08), rgba(255,255,255,0) 190px);
}
.rail .brand {
  font-weight: 600; color: var(--ink); font-size: 16.5px;
  padding: 4px 12px 16px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px;
}
.rail .brand small { display:block; letter-spacing:.22em; font-size:11px; color:var(--violet); font-weight:400; margin-top:1px; text-transform: uppercase; }
.rail nav a {
  display: block; padding: 10px 15px; color: var(--body); font-weight: 300;
  border-radius: var(--r-lg); margin-bottom: 2px;
}
.rail nav a:hover { color: var(--ink); text-decoration: none; background: var(--surface-muted); }
.rail nav a.active { color: var(--ink); font-weight: 400; background: var(--surface-muted); box-shadow: inset 3px 0 0 var(--primary); }
.rail .foot { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--hairline); font-size: 13px; }
.rail .foot .who { color: var(--ink); font-weight: 600; }
.rail .foot button { margin-top: 8px; }

main.content { flex: 1; padding: 30px 36px 60px; max-width: 1140px; }
.topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22.5px; flex-wrap: wrap; }
.topline p { margin: 0; color: var(--muted); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
.card.pad { padding: 22.5px; }
.stack > * + * { margin-top: 15px; }

/* signing-baseline motif */
.baseline { position: relative; height: 34px; margin: 6px 0 2px; }
.baseline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; border-bottom: 1.5px solid var(--hairline); }
.baseline::before {
  content: "\2715"; position: absolute; left: 2px; bottom: 11px;
  font-family: 'Caveat', cursive; font-size: 20px; color: var(--primary);
}

/* ---------- Controls ---------- */
button, .btn {
  font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--border-input); background: var(--surface); color: var(--body);
  padding: 7.5px 10px; transition: border-color .12s, box-shadow .12s, opacity .12s;
  display: inline-flex; align-items: center; gap: 7px;
}
button:hover, .btn:hover { border-color: var(--faint); text-decoration: none; }
button.primary, .btn.primary {
  background: var(--grad-primary); border: 0; color: #fff;
  font-size: 15px; line-height: 1; padding: 10px 15px; border-radius: var(--r-lg);
  position: relative;
}
button.primary::after, .btn.primary::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%); pointer-events:none; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.04); }
button.danger { color: var(--error); border-color: #f3c6c6; }
button.danger:hover { background: #fdf3f3; }
button.ghost { border-color: transparent; background: transparent; color: var(--primary); }
button:disabled { background: var(--surface-muted); color: var(--faint); border-color: transparent; cursor: not-allowed; filter: none; }
button.primary:disabled::after { display: none; }
button.sm { padding: 5px 10px; font-size: 13px; }

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  font: inherit; font-weight: 300; width: 100%; padding: 10px 15px; border: 1px solid var(--border-input);
  border-radius: var(--r-md); background: var(--surface); color: var(--body);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
button:focus-visible { outline: 2px solid rgba(77,122,238,.4); outline-offset: 1px; }
label { display: block; font-weight: 600; font-size: 13px; line-height: 18.85px; color: var(--secondary); margin-bottom: 4px; }
.field-row { margin-bottom: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hint { color: var(--muted); font-size: 13px; font-weight: 300; margin-top: 4px; }

/* ---------- Tables & pills ---------- */
table { width: 100%; border-collapse: collapse; }
thead th { background: var(--surface-soft); }
th { text-align: left; font-size: 13px; font-weight: 600; line-height: 18.85px; color: var(--secondary); padding: 10px 15px; border-bottom: 1px solid var(--hairline); }
th:first-child { border-top-left-radius: var(--r-lg); }
th:last-child { border-top-right-radius: var(--r-lg); }
td { padding: 10px 15px; font-size: 13px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--surface-soft); }

.pill { display: inline-block; padding: 3px 8px; border-radius: var(--r-xs); font-size: 11px; line-height: 15px; font-weight: 400; color: #fff; }
.pill.draft, .pill.pending { background: var(--surface-muted); color: var(--secondary); }
.pill.sent, .pill.viewed { background: var(--warning); }
.pill.completed, .pill.signed { background: var(--success); }
.pill.voided { background: var(--error); }

.signer-dot { display: inline-flex; width: 20px; height: 20px; border-radius: 9999px; color: #fff; font-size: 11px; font-weight: 600; align-items: center; justify-content: center; }
.sd1 { background: var(--s1); } .sd2 { background: var(--s2); } .sd3 { background: var(--s3); } .sd4, .sd5, .sd6 { background: var(--s4); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--canvas); }
.login-card { width: 372px; background: var(--surface); border-radius: var(--r-xl); padding: 35px; box-shadow: var(--shadow-1); }
.login-card .wordmark { font-weight: 600; font-size: 16.5px; color: var(--ink); }
.login-card .wordmark small { display:block; letter-spacing:.22em; font-size:11px; color:var(--violet); font-weight:400; margin-top:1px; text-transform: uppercase; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 52px 24px; color: var(--muted); }
.empty .baseline { width: 200px; margin: 0 auto 14px; }

/* ---------- PDF pages & fields ---------- */
.doc-col { display: flex; flex-direction: column; align-items: center; gap: 22.5px; }
.page-wrap { position: relative; box-shadow: var(--shadow-2), var(--shadow-1); background: #fff; border-radius: 2px; }
.page-wrap canvas { display: block; }
.page-num { position: absolute; top: -20px; right: 0; font-size: 11px; color: var(--muted); }

.f-box {
  position: absolute; border: 1.5px dashed; border-radius: var(--r-xs); font-size: 11px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  user-select: none;
}
.f-box .tag { position: absolute; top: -17px; left: -1.5px; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-xs) var(--r-xs) 0 0; color: #fff; white-space: nowrap; }
.f-c1 { border-color: var(--s1); background: rgba(77,122,238,.08); color: var(--s1); }
.f-c1 .tag { background: var(--s1); }
.f-c2 { border-color: var(--s2); background: rgba(135,90,226,.08); color: var(--s2); }
.f-c2 .tag { background: var(--s2); }
.f-c3 { border-color: var(--s3); background: rgba(115,103,240,.08); color: var(--s3); }
.f-c3 .tag { background: var(--s3); }
.f-c4, .f-c5, .f-c6 { border-color: var(--s4); background: rgba(218,97,228,.08); color: var(--s4); }
.f-c4 .tag, .f-c5 .tag, .f-c6 .tag { background: var(--s4); }
.f-box.selected { border-style: solid; box-shadow: 0 0 0 2px rgba(77,122,238,.3); }
.f-box .resizer { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; background: #fff; border: 1.5px solid currentColor; border-radius: 2px; cursor: nwse-resize; }

/* editor layout */
.editor { display: grid; grid-template-columns: 1fr 264px; gap: 22.5px; align-items: start; }
.editor .doc-scroll { overflow: auto; padding: 26px 8px 40px; background: var(--surface-muted); border-radius: var(--r-xl); }
.tools { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 2px; }
.tools .tool-btn { width: 100%; justify-content: flex-start; margin-bottom: 7.5px; }
.tools .tool-btn.active { border-color: var(--primary); background: rgba(77,122,238,.07); color: var(--primary); }

/* ---------- Signing page ---------- */
.sign-header {
  background: var(--surface); color: var(--ink); padding: 13px 22.5px; display: flex; align-items: center;
  justify-content: space-between; gap: 15px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
  box-shadow: var(--shadow-2);
}
.sign-header .wordmark { font-weight: 600; font-size: 15px; color: var(--ink); }
.sign-header .doc-name { color: var(--muted); font-size: 13px; }
.sign-main { max-width: 900px; margin: 0 auto; padding: 30px 16px 130px; }
.sign-notice { max-width: 560px; margin: 60px auto; }

.f-input {
  position: absolute; border: 1.5px solid var(--primary); background: rgba(77,122,238,.07);
  border-radius: var(--r-xs); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--primary); font-weight: 600; overflow: hidden;
}
.f-input.filled { background: #fff; border-style: solid; border-color: #bccdf8; cursor: pointer; }
.f-input img { max-width: 96%; max-height: 96%; }
.f-input input[type=text] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 4px; font-size: inherit; font-weight: 400; color: var(--body); }
.f-static { position: absolute; display: flex; align-items: center; overflow: hidden; color: var(--body); }
.f-static img { max-width: 100%; max-height: 100%; }

.sign-bar {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
  padding: 12px 22.5px; display: flex; align-items: center; justify-content: space-between; gap: 15px; z-index: 30; flex-wrap: wrap;
  box-shadow: rgba(0,0,0,.08) 0px -2px 8px 0px;
}
.progress-track { height: 5px; border-radius: var(--r-xs); background: var(--surface-muted); width: 180px; overflow: hidden; }
.progress-track i { display: block; height: 100%; background: var(--grad-primary); transition: width .25s; }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(16,18,19,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: var(--r-xl); width: 100%; max-width: 480px; padding: 22.5px; box-shadow: var(--shadow-3); }
.modal h2 { margin-top: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 15px; }
.tabs button { border: 0; background: none; border-radius: 0; padding: 10px 15px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 15px; font-weight: 300; }
.tabs button.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
#drawPad { border: 1px dashed var(--border-input); border-radius: var(--r-md); width: 100%; touch-action: none; background: var(--surface-soft); cursor: crosshair; }
.type-preview {
  height: 90px; border: 1px dashed var(--border-input); border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; font-size: 42px; color: var(--ink); background: var(--surface-soft); margin-top: 10px; overflow: hidden;
}
.font-caveat { font-family: 'Caveat', cursive; }
.font-dancing { font-family: 'Dancing Script', cursive; }

/* ---------- Toast ---------- */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--ink); font-size: 13px; padding: 10px 15px; border-radius: var(--r-lg); font-weight: 400; box-shadow: var(--shadow-2); z-index: 99; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; border-left: 3px solid var(--success); }
#toast.show { opacity: 1; }
#toast.err { border-left-color: var(--error); color: var(--error); }

/* audit trail */
.audit { font-size: 13px; }
.audit li { list-style: none; padding: 6px 0; border-bottom: 1px solid var(--hairline); display: flex; gap: 15px; }
.audit li:last-child { border-bottom: 0; }
.audit ul { margin: 0; padding: 0; }
.audit .t { color: var(--muted); flex-shrink: 0; }

@media (max-width: 900px) {
  #app { flex-direction: column; }
  .rail { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px 15px; gap: 6px; overflow-x: auto; background-image: none; }
  .rail .brand { border: 0; padding: 0 15px 0 0; margin: 0; white-space: nowrap; }
  .rail nav { display: flex; }
  .rail nav a { border-radius: var(--r-md); padding: 8px 10px; white-space: nowrap; }
  .rail nav a.active { box-shadow: inset 0 -2px 0 var(--primary); background: none; }
  .rail .foot { display: none; }
  main.content { padding: 20px 15px 80px; }
  .editor { grid-template-columns: 1fr; }
  .tools { position: static; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* text-run overlays (template editor "from text" mode) */
.t-run { position: absolute; pointer-events: none; }
.page-wrap.text-mode { cursor: text; }
.page-wrap.text-mode .t-run { pointer-events: auto; cursor: pointer; border-radius: 2px; }
.page-wrap.text-mode .t-run:hover { background: rgba(77,122,238,.14); box-shadow: 0 1.5px 0 var(--primary); }

/* "Replace text underneath" fields — opaque white so the original wording is hidden */
.f-box.fillbg { background: #fff; border-style: solid; }
.f-input.fillbg, .f-static.fillbg { background: #fff !important; }
.f-box .killer { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; background: var(--error); color: #fff; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; line-height: 1; }