/* Signature faces — self-hosted because the CSP allows font-src 'self' only.
   The same four the Dealward CRM ships, so a signature looks identical in
   either product. The fifth style ("Classic") is a plain serif every device
   already has. */
@font-face{font-family:"SigVibes";src:url("/static/fonts/great-vibes-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"SigDancing";src:url("/static/fonts/dancing-script-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"SigCaveat";src:url("/static/fonts/caveat-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"SigAllura";src:url("/static/fonts/allura-latin-400-normal.woff2") format("woff2");font-display:swap}

:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d2129; --line:#2a2f3a;
  --text:#e8eaf0; --muted:#9aa3b2; --accent:#d4a843; --accent2:#e6c36a;
  --ok:#4caf82; --err:#e06c5f; --blue:#ea8c3c;
  /* The button edge. A line tinted toward the brand gold reads as chosen; the
     flat grey it replaced read as whatever the browser happened to do. Three
     steps: at rest, under the pointer, and the gold a primary button carries. */
  --btnline:rgba(212,168,67,.34); --btnline-hi:rgba(212,168,67,.72);
  --btnline-pri:rgba(140,105,24,.55);
  --r1:#d4a843; --r2:#ea8c3c; --r3:#4caf82; --r4:#c97ad0; --r5:#bf8f66;
  /* One spacing scale. Before this the sheet used 21 different pixel values
     for margins and padding, which is what made the rhythm look accidental. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:var(--s5) 20px var(--s6);
  min-height:100vh;display:flex;flex-direction:column}
#view{flex:1}
/* ---- page header: one component, one height, on every page ------------
   Before this, two pages had a .topbar with a bottom rule and two rendered a
   bare <h1>, so content began at 119px on one page and 78px on another; the
   wordmark also appeared three different ways. */
/* SCOPED to the page header on purpose. As a bare h1 rule this leaked into
   document content in the editor, where it gave a contract's title
   display:flex, white-space:nowrap and 2.88px of tracking — a long title would
   have run off the page. */
.topbar h1{font-size:25px;letter-spacing:.12em;margin:0;font-weight:700;line-height:1.2;
  display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.topbar h1 em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-left:9px;border-left:1px solid var(--line)}
.brandblk{display:flex;align-items:center;gap:12px;min-width:0}
.topbar .sub{max-width:62ch}          /* a long subtitle must not grow the bar */
.seal{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;
  justify-content:center;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;color:var(--accent)}
.seal svg{width:29px;height:29px}
h1 span{color:var(--accent)}
.sub{color:var(--muted);font-size:13px;margin:var(--s1) 0 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:var(--s5);margin-bottom:var(--s4)}
/* section headers: ONE size. They were 12/13/14px with 6/8/10/16px margins,
   most of it inline overrides, which is what made the pages look uneven. */
.card h2,.sec,h2.gold{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s4);font-weight:700;line-height:1.3}
.card h2:first-child{margin-top:0}
/* rail and label headers: one smaller size, used by every rail */
.wsrail-h,.setnav-h,.prevlabel{font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:700}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:9px 11px;font-size:14px;width:100%;font-family:inherit}
/* A button is 38px, so a field beside one is 38px. Left to the browser they came
   out 37 for a text box and 39 for a dropdown - the two-pixel step you see when a
   Send button sits next to the box it belongs to. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
select{height:38px;line-height:1.2}
input[type=color]{height:38px;padding:3px;width:52px;cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
button{cursor:pointer;font-family:inherit}
/* De Beer 2026-10-06: "the buttons are not all on equal height and spacing is bad."
   They could not match: .btn was 11px/20px at 14px type while .btn2 and .btn-danger
   were 9px/14px at 13px, so a primary button beside a secondary one was always
   taller. All three share one size now - a fixed height and the same type - and a
   primary button earns its weight from colour instead of from being bigger.
   Height matches an input exactly (38px), so a button sitting at the end of a row
   of fields lines up without anybody reaching for an inline style. */
.btn,.btn2,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 17px;border-radius:9px;font-size:13.5px;
  font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;
  transition:border-color .16s ease,color .16s ease,filter .16s ease,
             background .16s ease}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#14161b;
  border:1px solid var(--btnline-pri)}
.btn:hover{filter:brightness(1.07);border-color:rgba(140,105,24,.85)}
.btn:disabled,.btn2:disabled,.btn-danger:disabled{opacity:.5;cursor:not-allowed}
.btn2{background:var(--panel2);border:1px solid var(--btnline);color:var(--text)}
.btn2:hover{border-color:var(--btnline-hi);color:var(--accent);
  background:rgba(212,168,67,.07)}
.btn-danger{background:none;border:1px solid var(--btnline);color:var(--muted)}
.btn-danger:hover{border-color:var(--err);color:var(--err)}
.btn:focus-visible,.btn2:focus-visible,.btn-danger:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
/* an svg inside a button never changes its height */
.btn svg,.btn2 svg,.btn-danger svg{width:16px;height:16px;flex:0 0 auto}
/* a row of buttons, evenly spaced, wrapping cleanly */
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse;font-size:14px}
th{color:var(--muted);text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;padding:6px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line)}
tr.click{cursor:pointer} tr.click:hover td{background:var(--panel2)}
.status{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;
  border-radius:20px;font-size:11px;line-height:1;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle}
.st-draft{background:#3a3f4c;color:#cdd3de}
.st-sent{background:#4a3a1e;color:#eec982}
.st-completed{background:#1f4634;color:#7fd8a8}
.st-declined,.st-voided{background:#4c2c28;color:#f0a89e}
.muted{color:var(--muted)} .small{font-size:12px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.gold{color:var(--accent)}
.err{color:var(--err)} .ok{color:var(--ok)}
/* a field row lines its controls up on their baselines, so a button at the end of
   a row sits level with the inputs with no inline margin pushing it there */
.rowflex{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  margin-bottom:var(--s3)}
.rowflex:last-child{margin-bottom:0}
.rowflex .f{flex:1;min-width:140px;margin-bottom:0}
.rowflex > .btn,.rowflex > .btn2,.rowflex > .btn-danger{margin-bottom:0}
.f{margin-bottom:var(--s3)}
.f label{font-size:12px;color:var(--muted);display:block;margin-bottom:5px;
  line-height:1.3}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:13px;
  margin:0 8px 8px 0;cursor:pointer;user-select:none}
.chip.active{border-color:var(--rc,var(--accent));box-shadow:0 0 0 1px var(--rc,var(--accent))}
.chip .dot{width:10px;height:10px;border-radius:50%;background:var(--rc,var(--accent))}
.chip .x{color:var(--muted);margin-left:2px}
.chip .x:hover{color:var(--err)}
.palette{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.palette button{background:var(--panel2);border:1px dashed var(--line);color:var(--text);
  border-radius:8px;padding:8px 14px;font-size:13px}
.palette button.armed{border-color:var(--accent);color:var(--accent);border-style:solid}
.pagewrap{position:relative;margin:0 auto 18px;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.pagewrap img{display:block;width:100%;user-select:none;-webkit-user-drag:none}
.doclabel{font-size:12px;color:var(--muted);margin:16px 0 6px;letter-spacing:.06em}
.field{position:absolute;border:1.5px solid var(--rc,var(--accent));background:color-mix(in srgb,var(--rc,var(--accent)) 18%,transparent);
  border-radius:4px;font-size:11px;color:#111;display:flex;align-items:center;
  justify-content:center;cursor:move;overflow:hidden}
.field .tag{background:var(--rc,var(--accent));color:#14161b;font-weight:600;
  font-size:10px;padding:1px 6px;border-radius:3px;pointer-events:none;white-space:nowrap}
.field .rm{position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--err);color:#fff;border:none;font-size:11px;line-height:1;display:none}
.field:hover .rm{display:block}
.field .rs{position:absolute;right:-5px;bottom:-5px;width:12px;height:12px;
  background:var(--rc,var(--accent));border-radius:2px;cursor:nwse-resize}
.topbar{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--s5);gap:var(--s5);flex-wrap:wrap;
  padding-bottom:var(--s4);border-bottom:1px solid var(--line);
  min-height:72px}          /* fixed, so a page with no actions is the same height */
/* De Beer 2026-10-06, second pass: "the buttons are not all ... spaced out well."
   They were right on top of each other because this container was a plain div -
   the only thing between two buttons was one collapsed HTML space, about 4px. It
   is a flex row with a real gap now, and it wraps to the right on a narrow screen
   instead of stretching the bar. */
#topactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:flex-end;margin-left:auto}
.audit{font-size:12px;width:100%;table-layout:fixed}
.audit td{padding:5px 8px;border-bottom:1px solid var(--line);
  overflow-wrap:anywhere;word-break:break-word}
.audit td.mono{white-space:normal}   /* an IPv6 turns the corner, never the card */
.audit th:last-child,.audit td:last-child{width:148px}
.audit th:first-child,.audit td:first-child{width:178px;white-space:nowrap}
.linkbox{display:flex;gap:8px;align-items:center;margin:4px 0}
.linkbox input{font-size:12px}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--accent);border-radius:10px;
  padding:10px 22px;font-size:14px;display:none;z-index:99}
/* signer */
.signhead{position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:1px solid var(--line);padding:12px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.signhead .env{font-size:13px;color:var(--muted)}
.sfield{position:absolute;border:1.5px solid var(--accent);border-radius:4px;
  background:rgba(212,168,67,.16);display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden}
.sfield.done{border-color:var(--ok);background:rgba(76,175,130,.10)}
.sfield input[type=text]{position:absolute;inset:0;border:none;border-radius:0;
  background:rgba(255,255,255,.92);color:#111;font-size:12px;padding:2px 6px}
.sfield .sigimg{max-width:100%;max-height:100%}
.sfield .sigtext{font-family:SigVibes,cursive;color:#101040;white-space:nowrap}
.sfield .prompt{background:var(--accent);color:#14161b;font-weight:700;font-size:11px;
  padding:2px 8px;border-radius:3px;pointer-events:none;white-space:nowrap}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;
  align-items:center;justify-content:center;z-index:50}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px;width:520px;max-width:94vw}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabs button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:8px;padding:8px}
.tabs button.on{color:var(--accent);border-color:var(--accent)}
#sigcanvas{background:#fff;border-radius:8px;width:100%;height:180px;touch-action:none}
.typed-preview{background:#fff;border-radius:8px;height:110px;display:flex;align-items:center;
  justify-content:center;font-family:SigVibes,cursive;
  font-size:44px;color:#101040;margin-top:10px}
.consent-box{white-space:pre-wrap;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:18px;font-size:13.5px;line-height:1.65;max-height:46vh;overflow-y:auto}
.progressbar{position:fixed;bottom:0;left:0;right:0;background:var(--panel);
  border-top:1px solid var(--line);padding:12px 20px;display:flex;gap:14px;
  align-items:center;justify-content:space-between;z-index:30;flex-wrap:wrap}
.center{max-width:720px;margin:8vh auto;padding:0 20px;text-align:center}
.bigicon{font-size:44px;margin-bottom:12px}

/* ---- prepare workspace: docs in the middle, sticky tools on the right ---- */
.prep{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:900px){.prep{grid-template-columns:1fr}.prep-side{position:static;max-height:none}}
.prep-side{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;
  display:flex;flex-direction:column;gap:12px}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.side-card h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.doclist button{display:block;width:100%;text-align:left;background:var(--panel2);
  border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 10px;
  margin-bottom:6px;font-size:13px;cursor:pointer}
.doclist button.on{border-color:var(--accent);color:var(--accent)}
.doclist .cnt{float:right;color:var(--muted);font-size:11px}
.palette2 button{display:block;width:100%;text-align:left;background:var(--panel2);
  border:1px dashed var(--line);color:var(--text);border-radius:8px;padding:9px 12px;
  margin-bottom:6px;font-size:13px;cursor:grab}
.palette2 button.armed{border-color:var(--accent);color:var(--accent);border-style:solid}
.chipcol .chip{display:flex;justify-content:space-between;margin:0 0 6px;width:100%}
.sideinputs input{margin-bottom:6px}
.dochead{position:sticky;top:0;z-index:15;background:var(--bg);padding:8px 0;
  font-size:13px;color:var(--muted);letter-spacing:.06em}
.signing-as{background:var(--panel2);border:1px solid var(--accent);border-radius:8px;
  padding:10px 14px;margin-bottom:12px;font-size:14px}

.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filters button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:20px;padding:6px 16px;font-size:13px}
.filters button.on{color:var(--accent);border-color:var(--accent)}
.filters .n{opacity:.7;font-size:11px;margin-left:4px}
.warnbox{background:#3a2f1a;border:1px solid var(--accent);border-radius:10px;
  padding:12px 16px;font-size:14px;margin-bottom:14px}
.field .ftext{position:absolute;inset:2px;border:none;border-radius:2px;
  background:rgba(255,255,255,.92);color:#111;font-size:11px;padding:1px 6px;cursor:text}
.sfield .lockedtext{background:#fff;color:#111;font-size:12px;padding:1px 6px;border-radius:2px;white-space:nowrap;overflow:hidden}

/* document-name links and any bare links: warm notebook tones, never browser blue */
a{color:var(--accent)}
.vfiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 18px;font-size:13.5px}
.vfiles a{color:var(--accent2);text-decoration:none}
.vfiles a:hover{color:var(--accent);text-decoration:underline}
.vfiles a:visited{color:var(--accent2)}

/* UX polish: checklist, dropzone, textarea */
.checklist{margin-top:10px}
.checklist div{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;margin-bottom:5px;line-height:1.4}
.ck-ok{color:var(--ok)} .ck-no{color:var(--muted)}
.prep-main.dz{outline:2px dashed var(--accent);outline-offset:-4px;border-radius:12px}
.dropcard{text-align:center;padding:60px 20px;cursor:pointer;border-style:dashed}
.dropcard:hover{border-color:var(--accent)}
textarea{resize:vertical}
.filters input{padding:6px 12px;font-size:13px;border-radius:20px}

/* accessibility + ease-of-use (signer) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
#sigcanvas{width:100%;max-width:472px}
.btn.ready{animation:dbxpulse 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(212,168,67,.6)}
@keyframes dbxpulse{50%{box-shadow:0 0 0 9px rgba(212,168,67,0)}}
.sfield:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.st-expired{background:#463a2a;color:#e0c39a}

/* home dashboard */
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0 var(--s5)}
@media(max-width:720px){.home-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.home-grid{grid-template-columns:1fr}}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--s5) var(--s4);
  cursor:pointer;transition:border-color .15s;position:relative}
.qcard:hover{border-color:var(--accent)}
.qcard .qi{font-size:26px}
.qcard .qt{font-size:15px;font-weight:600;margin:8px 0 3px}
.qcard .qd{font-size:12px;color:var(--muted);line-height:1.45}
.qcard.dis{opacity:.45;cursor:not-allowed}
.qcard .qbadge{position:absolute;top:12px;right:14px;background:var(--accent);color:#14161b;
  border-radius:14px;font-size:11px;font-weight:700;padding:1px 9px}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
@media(max-width:620px){.statrow{grid-template-columns:1fr}}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:var(--s3) var(--s4)}
.stat b{font-size:20px;color:var(--accent);display:block}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.greet{font-size:22px;font-weight:600;margin:0 0 var(--s1)}
.rolechip{display:inline-block;background:var(--panel2);border:1px solid var(--accent);color:var(--accent);
  border-radius:14px;font-size:11px;padding:1px 10px;margin-left:8px;letter-spacing:.05em;text-transform:uppercase}
.acct-field{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}
.acct-field .muted2{color:var(--muted)}
.locked{opacity:.5}

/* signature style picker — two-up grid, mirroring the CRM ceremony */
/* the adopt modal needs more room once the five swatches are in it */
.modal .box.adopt{width:640px}
.sigstyles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:660px){.modal .box.adopt{width:520px}
  .sigstyles{grid-template-columns:1fr}}
.sigstyle{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel2);border:2px solid var(--line);border-radius:12px;
  padding:10px 12px;text-align:left;color:inherit;font-family:inherit;
  transition:border-color .14s ease,background .14s ease;overflow:hidden}
.sigstyle:hover{border-color:var(--accent)}
.sigstyle.on{border-color:var(--accent);background:rgba(212,175,55,.10)}
.sigstyle-sample{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}
.sigstyle .ss-name{font-size:23px;color:#e8ebf0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.sigstyle .ss-init{font-size:17px;color:var(--muted);border-left:1px solid var(--line);
  padding-left:10px;white-space:nowrap;flex-shrink:0}
.sigstyle-label{font-size:11px;color:var(--muted);flex-shrink:0}
.sigstyle.on .sigstyle-label{color:var(--accent)}

/* ===================== prepare workspace (2026-09-02) =====================
   Documents left, page in the middle, recipients + fields right, actions on
   top. Hit targets are deliberately larger than the products this apes — the
   palette gets used all day and small chips are miserable to aim at. */
.ws{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.wsbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:52px;flex:0 0 52px;padding:0 12px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.wsbar-l,.wsbar-r{display:flex;align-items:center;gap:6px;min-width:0}
.wstitle{font-weight:700;font-size:14px;max-width:26vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
.wssep{width:1px;height:24px;background:var(--line);margin:0 6px;flex:0 0 1px}
.wsico{width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--text);
  font-size:17px;line-height:1;cursor:pointer;transition:all .13s ease}
.wsico:hover{border-color:var(--accent);color:var(--accent)}
.wspage{width:52px;height:36px;text-align:center;padding:0;font-size:14px}
.wsof{font-size:13px;color:var(--muted);white-space:nowrap}
.wszoom{min-width:52px;text-align:center;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.wsbtn{height:36px;padding:0 15px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-size:13.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:all .13s ease}
.wsbtn:hover{border-color:var(--accent);color:var(--accent)}
.wsbtn.send{background:var(--accent);border-color:var(--accent);color:#14161b;padding:0 22px}
.wsbtn.send:hover{color:#000;box-shadow:0 0 14px rgba(212,175,55,.4)}
.wsbtn.send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.wsmenu{position:relative}
.wsmenu-pop{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:210px;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:6px;
  box-shadow:0 14px 38px rgba(0,0,0,.6)}
.wsmenu.open .wsmenu-pop{display:block}
.wsmenu-pop button{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--text);font-size:13.5px;font-family:inherit;padding:10px 12px;border-radius:8px;cursor:pointer}
.wsmenu-pop button:hover{background:rgba(212,175,55,.12);color:var(--accent)}
.wsmenu-pop button.danger:hover{background:rgba(255,82,82,.14);color:#ff8a80}

.wsbody{flex:1;display:grid;grid-template-columns:236px minmax(0,1fr) 310px;min-height:0}
.ws.norail .wsbody{grid-template-columns:0 minmax(0,1fr) 310px}
.ws.norail .wsdocs{display:none}
@media(max-width:1100px){.wsbody{grid-template-columns:0 minmax(0,1fr) 280px}.wsdocs{display:none}}

.wsdocs{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;min-height:0}
.wsrail-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  padding:14px 14px 10px;position:sticky;top:0;background:var(--panel);z-index:2}
.wsdoc{border-bottom:1px solid var(--line)}
.wsdoc-h{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 14px;color:var(--text);font-family:inherit}
.wsdoc-h .nm{display:block;font-size:13px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wsdoc-h .mt{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.wsdoc.on .wsdoc-h .nm{color:var(--accent)}
.wsthumbs{display:flex;flex-direction:column;gap:10px;padding:4px 14px 14px}
.wsthumb{position:relative;background:#fff;border:2px solid var(--line);border-radius:6px;
  padding:0;cursor:pointer;overflow:hidden;line-height:0;transition:border-color .13s ease;
  aspect-ratio:8.5/11}   /* reserve the page's shape so a not-yet-loaded thumb keeps its slot */
.wsthumb:hover{border-color:var(--muted)}
.wsthumb.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(212,175,55,.22)}
.wsthumb img{width:100%;height:100%;object-fit:contain;display:block}
.wsthumb .pn{position:absolute;left:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;
  font-size:11px;line-height:1;padding:3px 6px;border-radius:4px}
.wsadd{display:block;width:calc(100% - 28px);margin:14px;height:38px;background:var(--panel2);
  border:1px dashed var(--line);border-radius:9px;color:var(--text);font-size:13px;
  font-weight:700;font-family:inherit;cursor:pointer}
.wsadd:hover{border-color:var(--accent);color:var(--accent)}

.wscanvas{overflow:auto;min-height:0;background:#14161b;padding:24px}
.wscanvas.dz{outline:2px dashed var(--accent);outline-offset:-8px}
/* The pages stack and the canvas scrolls through them (2026-10-05). One page at
   a time meant clicking the rail to read a document; the thumbnails stay, as the
   way to jump. */
.wscanvas #pages{display:flex;flex-direction:column;align-items:center;gap:18px}
.wscanvas .pagewrap .pgtag{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);
  color:#fff;font-size:10px;line-height:1;padding:3px 6px;border-radius:4px;pointer-events:none}
/* the address book in the new-envelope popup */
.pickbox{max-height:190px;overflow:auto;margin-top:6px}
.pickbox:empty{display:none}
.pickrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:inherit;font-size:13px;padding:8px 10px;margin-bottom:5px;cursor:pointer}
.pickrow:hover{border-color:var(--accent);color:var(--accent)}
.pickrow small{display:block;color:var(--muted);font-size:11.5px}
.picked{margin-top:10px;display:grid;gap:6px}
.pickedrow{display:flex;align-items:center;gap:8px;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.pickedrow .who{flex:1;min-width:0;font-size:13px}
.pickedrow .who small{display:block;color:var(--muted);font-size:11.5px}
.pickedrow select{width:auto;flex:0 0 auto;font-size:12.5px;padding:5px 7px}
.pickedrow .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px}
.pickedrow .x:hover{color:var(--err)}
.wscanvas .pagewrap{margin:0;max-width:none}
.wsdrop{max-width:520px;margin:8vh auto;text-align:center;background:var(--panel);
  border:2px dashed var(--line);border-radius:14px;padding:44px 24px;cursor:pointer}
.wsdrop:hover{border-color:var(--accent)}
.wsdrop .ic{font-size:40px}
.wsdrop .t{font-size:16px;margin:10px 0 4px}
.wsdrop .s{font-size:12.5px;color:var(--muted)}

.wsfields{border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;min-height:0;
  display:flex;flex-direction:column}
.wsrecips{padding:0 12px;display:flex;flex-direction:column;gap:7px}
.wsrecip{display:flex;align-items:center;gap:9px;background:var(--panel2);
  border:2px solid var(--line);border-left:4px solid var(--rc);border-radius:10px;
  padding:8px 10px;cursor:pointer;transition:border-color .13s ease}
.wsrecip:hover{border-color:var(--muted);border-left-color:var(--rc)}
.wsrecip.active{border-color:var(--accent);border-left-color:var(--rc);
  background:rgba(212,175,55,.09)}
.wsrecip .av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--rc);
  color:#14161b;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.wsrecip .who{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.wsrecip .who b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsrecip .who small{font-size:11px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wsrecip .tagr{font-size:11px;color:var(--muted);flex:0 0 auto}
.wsrecip .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px}
.wsrecip .x:hover{color:#ff8a80}
.wsready{padding:10px 14px 0;font-size:12px}
.wsready .ck-ok{color:var(--green,#4caf82)}
.wsready .ck-no{color:var(--muted)}

.wstabs{display:flex;gap:4px;padding:14px 12px 10px;position:sticky;top:0;background:var(--panel);z-index:2}
.wstabs button{flex:1;height:34px;background:none;border:0;border-bottom:2px solid var(--line);
  color:var(--muted);font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
.wstabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.wsgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px}
.wschip{display:flex;align-items:center;gap:9px;height:46px;padding:0 10px;
  background:var(--panel2);border:2px solid var(--line);border-radius:10px;color:var(--text);
  font-family:inherit;cursor:grab;text-align:left;transition:all .13s ease}
.wschip.wide{grid-column:1/-1}
.wschip:hover{border-color:var(--accent);color:var(--accent)}
.wschip:active{cursor:grabbing}
.wschip.armed{border-color:var(--accent);color:var(--accent);background:rgba(212,175,55,.13);
  box-shadow:0 0 0 2px rgba(212,175,55,.18)}
.wschip .ic{width:28px;height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;font-size:15px;line-height:1}
.wschip.armed .ic{border-color:var(--accent)}
.wschip .lb{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wshint{font-size:11.5px;color:var(--muted);line-height:1.45;padding:12px}

/* =============== gear menu + settings pane + help (2026-09-03) ============ */
.gearwrap{position:relative;display:inline-block}
.gearbtn{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 13px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--text);
  font-size:17px;line-height:1;font-family:inherit;cursor:pointer;transition:all .13s ease}
.gearbtn .car{font-size:11px;color:var(--muted)}
.gearbtn:hover{border-color:var(--accent);color:var(--accent)}
.gearwrap.open .gearbtn{border-color:var(--accent);color:var(--accent)}
.gearpop{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:290px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:7px;
  box-shadow:0 16px 40px rgba(0,0,0,.6)}
.gearwrap.open .gearpop{display:block}
.gearpop button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;
  border:0;color:var(--text);font-family:inherit;padding:10px 11px;border-radius:9px;cursor:pointer}
.gearpop button:hover{background:rgba(212,175,55,.12)}
.gearpop .gi{width:32px;height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:16px}
.gearpop .gt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.gearpop .gt b{font-size:13.5px}
.gearpop .gt small{font-size:11px;color:var(--muted)}
.gearsep{height:1px;background:var(--line);margin:7px 4px}
.gearout{display:block;padding:10px 11px;border-radius:9px;color:#ff8a80;text-decoration:none;
  font-size:13.5px;font-weight:700}
.gearout:hover{background:rgba(255,82,82,.13)}

.setwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:820px){.setwrap{grid-template-columns:1fr}}
.setnav{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;
  position:sticky;top:12px}
.setnav-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  padding:10px 10px 8px}
.setnav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;
  border:0;border-left:3px solid transparent;color:var(--text);font-family:inherit;
  padding:11px 10px;border-radius:9px;cursor:pointer;transition:background .13s ease}
.setnav button:hover{background:var(--panel2)}
.setnav button.on{background:rgba(212,175,55,.11);border-left-color:var(--accent)}
.setnav .si{width:30px;height:30px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;font-size:15px}
.setnav button.on .si{border-color:var(--accent)}
.setnav .st{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.setnav .st b{font-size:13.5px}
.setnav button.on .st b{color:var(--accent)}
.setnav .st small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setbody{min-width:0}

details.howto{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel2)}
details.howto>summary{cursor:pointer;padding:13px 15px;font-size:13.5px;font-weight:700;
  list-style:none;display:flex;align-items:center;gap:9px}
details.howto>summary::-webkit-details-marker{display:none}
details.howto>summary::before{content:'▸';display:inline-block;color:var(--accent);
  transition:transform .2s ease}
details.howto[open]>summary::before{transform:rotate(90deg)}
details.howto[open]>summary{color:var(--accent);border-bottom:1px solid var(--line)}
details.howto ol{margin:0;padding:12px 18px 14px 38px}
details.howto ol li{font-size:13px;line-height:1.6;margin-bottom:9px;color:var(--text)}
details.howto .fa{padding:13px 15px;font-size:13px;line-height:1.65;color:var(--muted)}
details.howto .fa b{color:var(--text)}
.faqfind{margin-bottom:12px}

/* ---- 5-star pass (2026-09-03): rhythm, empty states, a page floor ---- */
.mono{white-space:nowrap}
.sitefoot{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  flex-wrap:wrap;font-size:12px;color:var(--muted)}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover{color:var(--accent)}
/* a footer with more than two things in it: the links travel together on the
   right instead of being flung apart by space-between */
.footlinks{display:flex;gap:var(--s4);flex-wrap:wrap}
.sitefoot .dot{opacity:.4;margin:0 var(--s2)}
.emptystate{text-align:center;padding:var(--s6) var(--s4);color:var(--muted)}
.emptystate .ei{font-size:30px;opacity:.5;margin-bottom:var(--s2)}
.emptystate .et{font-size:14px;color:var(--text);margin-bottom:var(--s1)}
.emptystate .es{font-size:12.5px;line-height:1.55;max-width:380px;margin:0 auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ============ sender branding + mobile signer (2026-09-03) ============== */
.signhead .brandlogo{height:26px;max-width:150px;object-fit:contain;vertical-align:middle;
  margin-right:var(--s2)}
.signhead .brandname{font-size:15px;letter-spacing:.02em;vertical-align:middle}
.signfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  flex-wrap:wrap;padding:var(--s4) 20px var(--s6);font-size:12px;color:var(--muted);
  border-top:1px solid var(--line);margin-top:var(--s6)}
.signfoot a{color:var(--muted);text-decoration:none}
.signfoot a:hover{color:var(--accent)}

/* Most people sign on a phone. Targets get bigger, the sticky action bar gets
   out of the way of the thumb, and nothing relies on hover. */
@media (max-width:680px){
  .signhead{flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s4)}
  .signhead .env{display:block;width:100%;font-size:11.5px}
  #main{padding:var(--s4) var(--s3) 150px !important}
  .modal .box,.modal .box.adopt{width:100%;max-width:100%;border-radius:16px 16px 0 0;
    padding:var(--s5) var(--s4) var(--s6);max-height:92vh;overflow-y:auto}
  .modal{align-items:flex-end}
  .sigstyles{grid-template-columns:1fr}
  .sigstyle{height:56px}
  .sigstyle .ss-name{font-size:21px}
  .tabs button{padding:12px;font-size:15px}
  .typed-preview{height:92px;font-size:36px}
  #sigcanvas{height:150px}
  .btn,.btn2{padding:13px 18px;font-size:15px}
  .signfoot{flex-direction:column;align-items:flex-start;padding-bottom:120px}
  .consent-box{max-height:44vh}
}
/* the sticky finish bar must clear the iOS home indicator */
.progressbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

/* brand editor + live preview */
.brandrow{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s5);align-items:start}
@media(max-width:820px){.brandrow{grid-template-columns:1fr}}
.brandprev{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:var(--s3)}
.brandprev .prevlabel{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2)}
.brandprev .prevhead{display:flex;align-items:center;gap:var(--s2);background:var(--panel);
  border:1px solid var(--line);border-bottom:2px solid var(--pc,var(--accent));
  border-radius:8px 8px 0 0;padding:var(--s2) var(--s3);font-size:13px}
.brandprev .prevhead img{height:20px;max-width:96px;object-fit:contain}
.brandprev .prevbody{background:var(--panel);border:1px solid var(--line);border-top:0;
  border-radius:0 0 8px 8px;padding:var(--s3)}
.brandprev .prevline{height:7px;background:var(--line);border-radius:4px;margin-bottom:6px}
.brandprev .prevline.short{width:62%}
.brandprev .prevbtn{margin-top:var(--s3);border:0;border-radius:7px;color:#14161b;
  font-weight:700;font-size:12px;padding:7px 14px;cursor:default}

/* loading skeletons — a shimmer beats the word "Loading…" */
.skel{background:linear-gradient(90deg,var(--panel2) 25%,var(--line) 37%,var(--panel2) 63%);
  background-size:400% 100%;animation:shim 1.3s ease infinite;border-radius:8px}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}
.skelrow{height:52px;margin-bottom:var(--s2)}
.skelcard{height:104px}

/* the headline figures are navigation, so they must look and behave like it */
button.stat{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  transition:border-color .14s ease,background .14s ease}
button.stat:hover{border-color:var(--accent);background:var(--panel)}
button.stat:hover b{color:var(--accent2)}

/* delivery state on a signer row — a bounce must not read like a status note */
.dlv{margin-top:3px}
.dlv-idle{color:var(--muted)}
.dlv-ok{color:var(--ok)}
.dlv-warn{color:var(--blue)}
.dlv-bad{color:var(--err);font-weight:600}
/* the signing-order tick box reads as one sentence, not three columns */
.orderline{display:flex;align-items:flex-start;gap:9px;margin-top:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;cursor:pointer}
.orderline input{width:auto;flex:0 0 auto;margin-top:2px}
.orderline b{font-weight:600}

/* ---- transactions: the deal page -------------------------------------
   Four zones in two columns, collapsing to one on a narrow screen. The vault
   is the tallest thing on the page, so it leads the left column. */
.txhead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.txzones{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s4);align-items:start}
.txcol{display:flex;flex-direction:column;gap:var(--s4)}
.txcol>.card{margin:0}
@media (max-width:900px){.txzones{grid-template-columns:1fr}}

.txgroup{margin:var(--s3) 0}
.txglabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s2)}
.txdoc{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:8px;background:var(--panel2);margin-bottom:var(--s2)}
.txdoc .txdi{color:var(--accent);display:flex;flex:0 0 auto}
.txdoc .txdn{flex:1;min-width:0}
.txdoc .txdn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txdoc .txdn small{display:block;color:var(--muted);font-size:12px}
.txdoc .txda{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.txdoc .txda .btn2{padding:5px 9px;font-size:12px}

.txupload{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s3)}
.txfilebtn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:38px}
.txrole{font-size:12px;color:var(--muted);white-space:nowrap}

/* who is privy to what — one select per cell, so the whole grid is one glance */
.txgrid{width:100%;border-collapse:collapse;font-size:13px}
.txgrid th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:var(--s2) 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.txgrid td{padding:5px 6px;border-bottom:1px solid var(--line)}
.txgrid select{min-width:92px;padding:5px 6px;font-size:12px}

/* ---- notifications (de Beer 2026-10-06) -------------------------------
   "Any error notification stays way too short i could not read it in time.
    Have a popup with a timer running out at the bottom of it relative to the
    length of the notification at the top of the page not bottom with the
    ability to also close it."
   Top of the page, a bar draining along the bottom edge, and a close button. */
#noticehost{position:fixed;top:0;left:0;right:0;z-index:4000;display:flex;
  flex-direction:column;align-items:center;gap:8px;padding:14px 16px 0;
  pointer-events:none}
.notice{pointer-events:auto;width:min(620px,100%);background:var(--panel2);
  border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden;
  opacity:0;transform:translateY(-14px);transition:opacity .18s ease,transform .18s ease}
.notice.in{opacity:1;transform:translateY(0)}
.notice.out{opacity:0;transform:translateY(-10px)}
.notice .nrow{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 11px 14px}
.notice .nico{flex:0 0 auto;width:19px;height:19px;margin-top:1px;color:var(--muted)}
.notice .nico svg{width:19px;height:19px;display:block}
.notice .ntext{flex:1;min-width:0;font-size:14px;line-height:1.45;
  overflow-wrap:anywhere}
.notice .nclose{flex:0 0 auto;background:none;border:0;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:6px}
.notice .nclose:hover{color:var(--text);background:rgba(255,255,255,.07)}
.notice .nbarwrap{height:3px;background:rgba(255,255,255,.07)}
.notice .nbar{height:100%;width:100%;background:var(--muted)}
.notice.held .nbarwrap{background:rgba(255,255,255,.12)}
.notice.n-good{border-left-color:var(--ok)}
.notice.n-good .nico,.notice.n-good .nbar{color:var(--ok);background-color:var(--ok)}
.notice.n-good .nico{background:none}
.notice.n-bad{border-left-color:var(--err)}
.notice.n-bad .nico,.notice.n-bad .nbar{color:var(--err);background-color:var(--err)}
.notice.n-bad .nico{background:none}
.notice.n-info{border-left-color:var(--accent)}
.notice.n-info .nico,.notice.n-info .nbar{color:var(--accent);background-color:var(--accent)}
.notice.n-info .nico{background:none}
@media (prefers-reduced-motion:reduce){
  .notice{transition:none}
  .notice .nbar{transition:none !important}
}
@media (max-width:520px){#noticehost{padding:10px 10px 0}.notice .ntext{font-size:13.5px}}

/* ---- templates (de Beer 2026-10-06) ----------------------------------- */
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:var(--s4)}
.tplcard{border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.tplname{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.tplmeta{font-size:12.5px;color:var(--muted)}
.tplroles{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s1)}
.tplrole{font-size:11px;letter-spacing:.04em;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--text);white-space:nowrap}
.tplrole.opt{color:var(--muted);border-style:dashed}
.tplneed{font-size:12px;color:var(--muted);margin-top:auto;padding-top:var(--s2)}
.tplacts{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);
  padding-top:var(--s3)}
.tplacts .btn,.tplacts .btn2,.tplacts .btn-danger{padding:6px 12px;font-size:12.5px}

.utrole{border:1px solid var(--line);border-radius:10px;padding:var(--s3);
  margin-bottom:var(--s2);background:var(--panel2)}
.utlabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s2);display:flex;gap:8px;
  align-items:baseline;flex-wrap:wrap}
.utrole .f{margin-bottom:0}
.optbox{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--muted);white-space:nowrap;cursor:pointer}
.optbox input{width:auto;margin:0}

/* ---- saved clauses (de Beer 2026-10-06) ------------------------------- */
#clausepanel{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:3000;
  background:var(--panel);border-left:1px solid var(--line);display:flex;
  flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.45)}
#clausepanel[hidden]{display:none !important}
.cp-head{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.cp-head b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cp-x{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;
  padding:4px 6px;border-radius:6px}
.cp-x:hover{color:var(--text);background:rgba(255,255,255,.07)}
.cp-tools{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cp-tools input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font:inherit;font-size:13px}
.cp-new{white-space:nowrap;font:inherit;font-size:12.5px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#1a1205;
  font-weight:600;border-radius:8px;padding:8px 11px}
#cp-list{flex:1;overflow-y:auto;padding:10px 12px}
.cp-item{display:flex;gap:4px;align-items:flex-start;margin-bottom:8px}
.cp-ins{flex:1;min-width:0;text-align:left;cursor:pointer;font:inherit;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;color:var(--text);display:block}
.cp-ins:hover{border-color:var(--accent)}
.cp-t{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px;
  overflow-wrap:anywhere}
.cp-p{display:block;font-size:12px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-u{display:block;font-size:10.5px;color:var(--muted);margin-top:4px;
  letter-spacing:.06em;text-transform:uppercase}
.cp-acts{display:flex;flex-direction:column;gap:3px}
.cp-acts button{background:none;border:1px solid transparent;color:var(--muted);
  cursor:pointer;font-size:12px;padding:4px 6px;border-radius:6px;line-height:1}
.cp-acts button:hover{color:var(--text);border-color:var(--line);background:var(--panel2)}
.cp-empty{color:var(--muted);font-size:13px;line-height:1.5;padding:18px 6px}
.cp-foot{border-top:1px solid var(--line);padding:10px 16px;font-size:12px;
  color:var(--muted)}
.cl-body{min-height:130px;max-height:40vh;overflow-y:auto;padding:10px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel2);
  color:var(--text);font-size:14px;line-height:1.5}
.cl-body:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---- licensed form library (de Beer 2026-10-06) ----------------------- */
.memberbox{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;
  border:1px solid var(--line);border-radius:10px;padding:var(--s4);background:var(--panel2)}
.memberbox .f{margin-bottom:0}
.memberbox .ok{color:var(--ok)}
.formrow{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  padding:var(--s3);margin-bottom:var(--s2)}
.formrow.blocked{border-left:4px solid var(--err)}
.fr-main{flex:1;min-width:240px}
.fr-name{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:600}
.fr-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.fr-copy{font-size:11.5px;color:var(--muted);margin-top:5px;font-style:italic}
.fr-blocked{font-size:12.5px;color:var(--err);margin-top:6px}
.fr-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.fr-acts .btn2,.fr-acts .btn-danger{padding:6px 10px;font-size:12px}

/* ---- the mark is the way home (de Beer 2026-10-06) -------------------- */
a.brandhome{text-decoration:none;color:inherit;border-radius:12px;
  padding:6px 10px 6px 6px;margin:-6px -10px -6px -6px;
  transition:background .15s ease}
a.brandhome:hover{background:rgba(212,168,67,.09)}
a.brandhome:hover .seal{border-color:var(--accent)}
a.brandhome:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* one Home control, first in every bar, so it is always in the same place */
.btn2.homebtn{display:inline-flex;align-items:center;gap:6px}
.btn2.homebtn svg{width:16px;height:16px}
.wsbtn svg{vertical-align:-2px}
@media (max-width:520px){
  .topbar h1{font-size:20px}
  .seal{width:42px;height:42px;flex:0 0 42px}
  .seal svg{width:23px;height:23px}
}

/* ---- the public help page (de Beer 2026-10-06) ------------------------ */
.mapitem{border-left:2px solid var(--line);padding:2px 0 8px 12px;margin-bottom:10px}
.mapname{font-weight:600;font-size:14.5px}
.mapwhere{font-size:12px;color:var(--accent);margin:2px 0 3px}
.mapwhat{font-size:13px;color:var(--muted);line-height:1.5}

/* ---- field settings (de Beer 2026-10-06) --------------------------------
   Name a box, say who fills it, say whether it is needed. It replaced a
   browser prompt(), which froze the page and could only flip one setting. */
.fieldcfg{position:absolute;z-index:120;width:300px;max-width:calc(100vw - 16px);
  background:var(--panel);border:1px solid var(--btnline-hi);border-radius:12px;
  padding:var(--s4);box-shadow:0 18px 44px rgba(0,0,0,.55)}
.fieldcfg .fchead{display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s3)}
.fieldcfg .fcx{background:none;border:0;color:var(--muted);font-size:14px;padding:2px 4px}
.fieldcfg .fcx:hover{color:var(--text)}
.fieldcfg .fclab{display:block;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:var(--s3) 0 5px}
.fieldcfg .fchint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.fieldcfg .fcchk{display:flex;align-items:center;gap:8px;margin-top:var(--s4);
  font-size:13px;cursor:pointer}
.fieldcfg .fcchk input{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--accent)}
.fieldcfg .fcrow{margin-top:var(--s4)}
.fieldcfg .fcrow .btn2,.fieldcfg .fcrow .btn-danger{font-size:12px;padding:0 11px}
/* a box the SENDER fills says so on the page, so it is never mistaken for
   something the signer has to do */
.field .fask{position:absolute;right:3px;bottom:2px;font-size:9px;letter-spacing:.04em;
  color:var(--accent);opacity:.85;pointer-events:none;white-space:nowrap}
/* the details a template asks for at send time */
.utasks{border-left:2px solid var(--btnline);padding-left:var(--s4);margin:var(--s3) 0 var(--s4)}
.utasks .utlabel{margin-bottom:var(--s2)}
.utasks .f:last-child{margin-bottom:0}
label .req{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);
  margin-left:6px}
/* the same drop zone, sized for a modal - the builder's version reserves the
   height of an empty canvas, which left a hole in a dialog */
.wsdrop.small{padding:var(--s4) var(--s3);cursor:pointer;min-height:0;height:auto;
  margin:0;display:block}
.wsdrop.small .ic{font-size:22px}
.wsdrop.small .t{font-size:13.5px}
.wsdrop.small .s{font-size:11.5px}
.wsdrop.over{border-color:var(--accent);background:rgba(212,168,67,.08)}

/* ---- reports dashboard (de Beer 2026-10-12) -----------------------------
   Metadata only. Nothing in this view opens a document, by design: 17 U.S.C.
   512(m) says we need not monitor, and knowing what is inside is the thing
   that would cost us the safe harbour. */
.filterrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.filterrow button{background:var(--panel2);border:1px solid var(--btnline);color:var(--muted);
  border-radius:20px;padding:0 14px;height:30px;font-size:12.5px;font-weight:600}
.filterrow button.on{border-color:var(--accent);color:var(--accent);background:rgba(212,168,67,.09)}
.filterrow button b{color:var(--text);margin-left:3px}
.repcard{border:1px solid var(--line);border-radius:12px;padding:var(--s4);margin-bottom:var(--s3);
  background:var(--panel2)}
.rephead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--s3)}
.repkind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:5px;background:rgba(212,168,67,.14);color:var(--accent)}
.repkind.k-fraud,.repkind.k-illegal{background:rgba(224,108,95,.16);color:var(--err)}
.repref{font-size:11px;color:var(--muted)}
.repstatus{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.repstatus.s-open{border-color:var(--accent);color:var(--accent)}
.repstatus.s-actioned{border-color:var(--ok);color:var(--ok)}
.repbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4);
  margin-bottom:var(--s3)}
.replabel{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin-bottom:4px}
.repdetail{background:var(--panel);border-left:2px solid var(--btnline);border-radius:0 8px 8px 0;
  padding:var(--s3) var(--s4);font-size:13.5px;line-height:1.6;white-space:pre-wrap;
  overflow-wrap:anywhere}
.strikes{font-size:11.5px;color:var(--muted)}
.strikes.over{color:var(--err);font-weight:700}
.sworn{font-size:11px;color:var(--accent)}

/* ---- template workbench (de Beer 2026-10-06: "there should be a save option
   not a send option") — you are building a reusable thing, and the workspace
   should never let you forget it or offer to send it. */
.tplbanner{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(212,168,67,.13),rgba(212,168,67,.04));
  border-bottom:1px solid var(--btnline-hi);padding:var(--s3) var(--s4);font-size:13px}
.tplbanner b{color:var(--text)}
.tplbanner .btn2{margin-left:auto}
.tplbadge{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:#14161b;background:linear-gradient(135deg,var(--accent),var(--accent2));
  padding:3px 10px;border-radius:5px;flex:0 0 auto}
.wsbtn.save{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#14161b;
  border-color:var(--btnline-pri);font-weight:700}
.wsbtn.save:hover{filter:brightness(1.07)}

/* ---- who the email is signed as (de Beer 2026-10-15) -------------------- */
.senderid{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sidopt{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;cursor:pointer;
  border:1px solid var(--btnline);border-radius:10px;background:var(--panel2);
  transition:border-color .16s ease,background .16s ease}
.sidopt:hover{border-color:var(--btnline-hi)}
.sidopt.on{border-color:var(--accent);background:rgba(212,168,67,.07)}
.sidopt.off{opacity:.55;cursor:not-allowed}
.sidopt input{width:16px;height:16px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.sidbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.sidbody b{font-size:13.5px}
.sidprev{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.sidprev b{color:var(--accent);font-weight:600}

/* ---- the compliance docket ----------------------------------------------
   TWO AXES, drawn as two different shapes on purpose. What the file NEEDS is a
   square-cornered tag; what STATE it is in is the same round pill the rest of
   the app already uses for status. A broker has to be able to read "required,
   and still waiting on it" at a glance without decoding one colour twice. */
.dksum{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;margin:0 0 var(--s3)}
.dkmeter{flex:1;min-width:160px;height:8px;border-radius:5px;background:var(--panel2);
  overflow:hidden;border:1px solid var(--line)}
.dkmeter i{display:block;height:100%;background:var(--ok);transition:width .3s ease}
.dkcat{margin:var(--s4) 0 0}
.dkcat>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:7px 0;border-bottom:1px solid var(--line)}
.dkcat>summary::-webkit-details-marker{display:none}
.dkcat>summary:before{content:"\25B8";font-size:12px;letter-spacing:0}
.dkcat[open]>summary:before{content:"\25BE"}
.dkcat>summary .n{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:600}
.dkline{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:10px 2px;border-bottom:1px solid var(--line)}
.dkline:last-child{border-bottom:0}
.dkname{font-size:13.5px;line-height:1.35}
.dkwhy{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.dkright{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.need{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent}
.need-required{background:#3a2f1a;color:#eec982;border-color:#6b5420}
.need-if_applicable{background:var(--panel2);color:var(--muted);border-color:var(--line)}
.need-not_applicable{background:transparent;color:#7a818e;border-color:var(--line)}
.dkline.na .dkname{color:#7a818e}
.dklock{color:var(--accent);flex:0 0 auto;margin-top:1px;display:flex}
.dkdocs{margin-top:7px;display:flex;flex-direction:column;gap:5px}
.dkdoc{display:flex;align-items:center;gap:8px;font-size:12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;padding:4px 9px}
.dkdoc .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dkacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.dkacts button{background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:6px;padding:3px 9px;font:inherit;font-size:11.5px;cursor:pointer}
.dkacts button:hover{color:var(--text);border-color:var(--btnline-hi)}
.dkacts button.on{color:var(--accent);border-color:var(--btnline-hi)}
.dkbasis{font-size:11.5px;color:var(--muted);line-height:1.5;background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;padding:9px 12px;margin:0 0 var(--s3)}
.dkthread{display:flex;flex-direction:column;gap:9px;max-height:46vh;overflow:auto;
  margin-bottom:var(--s3)}
.dkmsg{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.dkmsg .who{font-size:11px;color:var(--muted);margin-bottom:3px}
.dkmsg .bd{font-size:13px;line-height:1.45;white-space:pre-wrap}
.factnote{font-style:italic}
@media (max-width:760px){
  .dkline{grid-template-columns:auto 1fr}
  .dkright{grid-column:1 / -1;justify-content:flex-start;margin-top:4px}
}