/* sign.lingacast.com — single stylesheet, no build step. */

:root {
  --blue: #0055ff;
  --blue-dark: #0044cc;
  --ink: #0b1a33;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --bg: #f6f8fb;
  --card: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);

  /* Per-signer field colours, reused by prepare.js and sign.js */
  --f0: #0055ff; --f1: #7c3aed; --f2: #059669; --f3: #d97706; --f4: #db2777; --f5: #0891b2;
}

* { box-sizing: border-box; }

/* Any class that sets `display` outranks the UA rule for [hidden] — without
   this, `<form hidden class="inline-form">` (display:flex) renders anyway. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; letter-spacing: -.4px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 12px; letter-spacing: -.2px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { text-align: right; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.optional { color: var(--faint); font-weight: 400; font-size: 12px; }
.hint { color: var(--faint); font-size: 12.5px; margin: 6px 0 0; }
.back { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 14px; }

/* -- Top bar --------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 28px;
  padding: 12px 28px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar .brand { flex: 0 0 auto; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* A pill rather than an underline: the header row's height is set by the logo
   and the button, so a bottom-aligned rule would need to track their size to
   land on the border. The pill has no such dependency. */
.navlink {
  padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--muted); text-decoration: none;
}
.navlink:hover { color: var(--ink); background: #f4f7fb; text-decoration: none; }
.navlink.active { color: var(--blue); background: #eef2ff; font-weight: 600; }

/* Account menu — a plain <details>, so it needs no JavaScript. */
.account { position: relative; }
.account summary { list-style: none; cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #eef2ff; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.account[open] .avatar { box-shadow: 0 0 0 3px rgba(0,85,255,.15); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; z-index: 30;
}
.account-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-who strong { display: block; font-size: 14px; }
.account-who span { font-size: 12.5px; color: var(--faint); word-break: break-all; }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: none;
  background: none; font: inherit; font-size: 14px; color: var(--ink-2);
  border-radius: 8px; cursor: pointer; text-decoration: none;
}
.account-menu a:hover, .account-menu button:hover { background: #f4f7fb; text-decoration: none; }
.account-menu button { color: var(--danger); }
/* Brand lockup: the LingaCast logo followed by the product word. */
.brand, .auth-brand, .brand-mini { display: flex; align-items: center; gap: 8px; }
.brand-logo { display: block; width: auto; height: 34px; }
.brand-logo.mini { height: 18px; }
.brand-sub {
  font-size: 15px; font-weight: 500; color: var(--muted);
  padding-left: 9px; border-left: 1px solid var(--line); line-height: 1.1;
}
.brand-mini .brand-sub { font-size: 11px; padding-left: 6px; }
.auth-brand { justify-content: center; margin-bottom: 22px; }
.topnav { display: flex; align-items: center; gap: 18px; font-size: 14px; }

/* -- Layout ---------------------------------------------------------------- */
.page { max-width: 1040px; margin: 0 auto; padding: 32px 28px 80px; }
.page.narrow { max-width: 680px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

body.centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--card); border-radius: 16px; padding: 32px; box-shadow: var(--shadow); }
.auth-card.wide { max-width: 620px; }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-card h1 { font-size: 20px; margin-bottom: 18px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; }

/* -- Forms ----------------------------------------------------------------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 16px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], textarea, select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(0,85,255,.25); outline-offset: 1px; border-color: var(--blue); }
textarea { resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; }
.inline-form label { flex: 1; margin-bottom: 0; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--ink-2); }
label.check input { margin-top: 3px; width: auto; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--ink-2); }

.recipient-row { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr .6fr auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.recipient-row label { margin-bottom: 0; }
.recipient-row .remove { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 18px; padding: 8px; }
.recipient-row .remove:hover { color: var(--danger); }

/* -- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 9px; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { background: var(--faint); cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-danger { background: #fff; color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-block { display: block; width: 100%; margin-top: 6px; }
.linkish { background: none; border: none; padding: 0; color: var(--blue); font: inherit; font-size: 13px; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* -- Tables ---------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); font-weight: 600; padding: 0 12px 10px; }
.table th.num { text-align: right; }
.table td { padding: 12px; border-top: 1px solid var(--line); vertical-align: top; }
.table.clickable { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table.clickable thead th { padding-top: 14px; background: #fbfcfe; }
.table.clickable tbody tr { cursor: pointer; }
.table.clickable tbody tr:hover { background: #f8fafc; }
.cell-title .doc-title { display: block; font-weight: 600; }
.cell-title .doc-sub { display: block; font-size: 12.5px; color: var(--faint); }
.empty { text-align: center; color: var(--muted); padding: 40px 12px; }
.row-actions { text-align: right; }

/* -- Badges ---------------------------------------------------------------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef2f7; color: var(--ink-2); }
.badge-draft { background: #eef2f7; color: #475569; }
.badge-sent { background: #e0edff; color: #1d4ed8; }
.badge-completed { background: #dcfce7; color: #15803d; }
.badge-declined, .badge-voided { background: #fee2e2; color: #b91c1c; }
.badge-r-pending { background: #eef2f7; color: #475569; }
.badge-r-sent { background: #e0edff; color: #1d4ed8; }
.badge-r-viewed { background: #fef3c7; color: #a16207; }
.badge-r-signed { background: #dcfce7; color: #15803d; }
.badge-r-declined { background: #fee2e2; color: #b91c1c; }

/* -- Alerts / notices ------------------------------------------------------ */
.alert { padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 18px; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.notice { text-align: center; padding: 8px 0 4px; }
.notice h1 { font-size: 20px; }
.notice-success h1 { color: var(--success); }
.notice-error h1 { color: var(--danger); }
.quote { border-left: 3px solid var(--line); padding: 4px 0 4px 14px; margin: 14px 0; color: var(--ink-2); white-space: pre-wrap; font-size: 14px; }
.disclosure { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 18px 0; max-height: 240px; overflow-y: auto; font-size: 13.5px; color: var(--ink-2); }
.disclosure h2 { font-size: 13px; }
.disclosure p { margin: 0 0 10px; }
.link-block .link-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.link-block .link-row span { min-width: 220px; color: var(--ink-2); }
.link-block .link-row input { margin: 0; font-size: 12px; }
.fingerprint code { display: block; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-top: 6px; }
.danger-zone { border-color: #fecaca; background: #fffafa; }
.danger-zone h2 { color: var(--danger); }
.card.form h2 { margin-bottom: 4px; }

/* -- PDF rendering (shared by prepare + sign) ------------------------------ */
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px; }
.pdf-page { position: relative; background: #fff; box-shadow: var(--shadow); border-radius: 4px; }
.pdf-page canvas { display: block; border-radius: 4px; }
.pdf-layer { position: absolute; inset: 0; }

.field {
  position: absolute; border: 1.5px dashed var(--fc, var(--blue));
  background: color-mix(in srgb, var(--fc, var(--blue)) 10%, transparent);
  border-radius: 4px; font-size: 12px; color: var(--fc, var(--blue));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  user-select: none;
}
.field .fl { padding: 0 4px; white-space: nowrap; pointer-events: none; font-weight: 600; }
.field img { max-width: 100%; max-height: 100%; object-fit: contain; }
.field.c0 { --fc: var(--f0); } .field.c1 { --fc: var(--f1); } .field.c2 { --fc: var(--f2); }
.field.c3 { --fc: var(--f3); } .field.c4 { --fc: var(--f4); } .field.c5 { --fc: var(--f5); }

/* -- Prepare screen -------------------------------------------------------- */
body.app-prepare { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.app-prepare .topbar { flex: 0 0 auto; }
.prepare { flex: 1; display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
.prepare-side { border-right: 1px solid var(--line); background: #fff; padding: 22px; overflow-y: auto; }
.prepare-side h1 { font-size: 17px; margin-bottom: 20px; }
.prepare-side h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); margin: 22px 0 10px; }
.prepare-doc { overflow: auto; background: #eef1f6; }

.signer-list { display: flex; flex-direction: column; gap: 6px; }
.signer-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.signer-chip em { font-style: normal; margin-left: auto; font-size: 11.5px; color: var(--faint); }
.signer-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--f0); flex: 0 0 auto; }
.signer-chip[data-color="1"] .dot { background: var(--f1); } .signer-chip[data-color="2"] .dot { background: var(--f2); }
.signer-chip[data-color="3"] .dot { background: var(--f3); } .signer-chip[data-color="4"] .dot { background: var(--f4); }
.signer-chip[data-color="5"] .dot { background: var(--f5); }
.signer-chip.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,85,255,.12); }

.palette { display: flex; flex-wrap: wrap; gap: 6px; }
.tool {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: 13px; cursor: grab; color: var(--ink-2);
}
.tool:active { cursor: grabbing; }

.prepare-actions { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.save-state { display: block; margin-top: 10px; font-size: 12.5px; color: var(--faint); text-align: center; min-height: 18px; }

.field.selected { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 25%, transparent); }
.field .handle { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--fc); border-radius: 3px; cursor: nwse-resize; }
.prepare .field { cursor: move; }

/* The remove button and the resize handle both sit OUTSIDE the field's box, so
   the editor must not clip its overflow — `.field` sets overflow:hidden to keep
   long labels and signature images inside, which cut both controls in half. Let
   the label clip itself instead, and lift the selected field above its
   neighbours so its controls are never covered. */
.prepare .field { overflow: visible; }
.prepare .field .fl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.prepare .field.selected { z-index: 5; }

/* Remove-this-field button. Only on the selected field, so the page stays
   readable while placing, but deleting one is discoverable without the
   keyboard. */
.field .rm { display: none; }
.field.selected .rm {
  display: grid; place-items: center; position: absolute; top: -10px; right: -10px;
  width: 20px; height: 20px; padding: 0;
  background: var(--danger); border: 2px solid #fff; border-radius: 50%;
  cursor: pointer; box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.field.selected .rm:hover { background: #b91c1c; }
/* Block-level SVG in a grid with place-items:center lands exactly in the
   middle, unlike a text glyph whose position depends on font metrics. */
.field.selected .rm svg { display: block; width: 12px; height: 12px; }
.field.selected .rm svg path { stroke: #fff; stroke-width: 2; stroke-linecap: round; fill: none; }

.reset-actions { display: flex; flex-direction: column; gap: 6px; }
.reset-actions .btn { text-align: center; }
.reset-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.reset-actions .hint { margin-top: 2px; text-align: center; }

/* -- Signing screen -------------------------------------------------------- */
body.app-sign { height: 100vh; overflow: hidden; }
.sign { height: 100vh; display: flex; flex-direction: column; }
.sign-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px; background: #fff; border-bottom: 1px solid var(--line);
}
.sign-title { display: flex; flex-direction: column; }
.brand-mini { font-size: 11px; letter-spacing: -.2px; color: var(--faint); }
.sign-title strong { font-size: 15px; }
.sign-bar-actions { display: flex; align-items: center; gap: 10px; }
.progress { font-size: 13px; color: var(--muted); }
.sign-body { flex: 1; overflow: auto; background: #eef1f6; }

.sign .field { cursor: pointer; }
.sign .field.other { border-style: dotted; opacity: .35; cursor: default; --fc: var(--faint); }
.sign .field.filled { border-style: solid; background: transparent; }
.sign .field.needs { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fc) 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fc) 0%, transparent); } }
.sign .field input[type=text] { width: 100%; height: 100%; margin: 0; border: none; background: transparent; font-size: 13px; text-align: center; padding: 0 4px; }
.sign .field .tick { font-size: 18px; font-weight: 700; color: var(--ink); }

.jump-btn {
  position: fixed; right: 24px; bottom: 24px; padding: 11px 18px; border-radius: 999px;
  background: var(--blue); color: #fff; border: none; font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,85,255,.35);
}

/* -- Modals ---------------------------------------------------------------- */
.modal { border: none; border-radius: 16px; padding: 0; box-shadow: 0 24px 60px rgba(15,23,42,.25); max-width: 92vw; }
.modal::backdrop { background: rgba(11,26,51,.45); }
.modal-inner { padding: 24px; width: 520px; max-width: 100%; }
.modal h2 { font-size: 17px; margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
#sig-canvas { width: 100%; height: 180px; border: 1px solid var(--line); border-radius: 10px; background: #fdfdfe; touch-action: none; cursor: crosshair; }
.sig-preview { height: 90px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: 38px; color: var(--ink); }

@media (max-width: 900px) {
  .prepare { grid-template-columns: 1fr; }
  .prepare-side { border-right: none; border-bottom: 1px solid var(--line); }
  body.app-prepare { overflow: auto; height: auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .recipient-row { grid-template-columns: 1fr 1fr; }
}