/* ==========================================================================
   SignSecure application
   Loads on top of site.css and uses only tokens that already exist there.
   No new colours, no second radius scale, no competing type ramp.
   ========================================================================== */

/* Fixed in both themes. A PDF page is white paper whatever the viewer's
   theme is, so anything drawn on top of one uses these and not --ink. */
:root{ --paper-bg:#FFFFFF; --paper-ink:#14161F; }

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);
  padding:12px 18px;border-radius:var(--radius-sm);z-index:100}
.skip:focus{left:12px;top:12px}
body.no-scroll{overflow:hidden}

/* ---------- application nav ---------- */
.app-nav{position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--line)}
.app-nav-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:var(--nav-h);
  display:flex;align-items:center;gap:26px}
.app-nav-in.is-wide{max-width:none;padding:0 18px}
.app-nav-links{display:flex;align-items:center;gap:22px;flex:1 1 auto}
.app-nav-links a{font-size:.92rem;color:var(--text-2);font-weight:500;white-space:nowrap;
  transition:color .18s var(--ease)}
.app-nav-links a:hover{color:var(--text)}
.app-nav-links a[aria-current="page"]{color:var(--text);font-weight:600}
.app-nav-cta{display:flex;align-items:center;gap:12px;flex:none}
@media(max-width:760px){
  .app-nav-links{display:none}
  .app-nav-in{gap:14px}
  .app-nav-cta .btn i+*{display:none}
}

.app-main{max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3.4vw,44px) 24px 90px}
.app-main-wide{padding:0}
@media(max-width:640px){.app-main{padding:22px 18px 70px}}

/* ---------- user menu ---------- */
.usermenu{position:relative}
.usermenu summary{list-style:none;cursor:pointer;display:block;border-radius:var(--radius-pill)}
.usermenu summary::-webkit-details-marker{display:none}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
  font-weight:700;font-size:.8rem;letter-spacing:.02em}
.usermenu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:248px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:8px;z-index:60}
.usermenu-id{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;
  display:flex;flex-direction:column;gap:2px}
.usermenu-id b{font-size:.94rem}
.usermenu-id span{font-size:.84rem;color:var(--text-3);word-break:break-word}
.usermenu-org{color:var(--text-2) !important;font-weight:500}
.usermenu-panel a,.usermenu-panel button{display:block;width:100%;text-align:left;
  padding:9px 12px;border-radius:var(--radius-sm);font-size:.92rem;color:var(--text);
  background:none;border:0;font-family:inherit;cursor:pointer}
.usermenu-panel a:hover,.usermenu-panel button:hover{background:var(--surface-2)}

/* ---------- page furniture ---------- */
.page-head{margin-bottom:26px}
.page-head p{margin-top:7px}
.page-head-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.muted{color:var(--text-3)}
.small{font-size:.86rem}
.tiny{font-size:.74rem;word-break:break-all}
.right{text-align:right}
.pre{white-space:pre-wrap}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--accent);
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.btn-sm{padding:7px 14px;font-size:.87rem}
/* site.css styles .btn but has no disabled state, because nothing on the
   marketing site disables one. The wizard and the signing surface both do,
   and a primary button that looks live but does nothing reads as broken. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--accent);box-shadow:none}
.btn-ghost:disabled:hover{background:transparent;border-color:var(--line-strong)}
.btn:disabled:active{transform:none}
.iconbtn{background:none;border:1px solid transparent;border-radius:var(--radius-sm);
  width:32px;height:32px;display:grid;place-items:center;color:var(--text-3);cursor:pointer}
.iconbtn:hover{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.select{font-family:inherit;font-size:.95rem;color:var(--text);background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 12px;width:100%}
.select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field-row{display:grid;gap:0 16px;grid-template-columns:1fr}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.checkline{display:flex;gap:11px;align-items:flex-start;margin-top:18px;cursor:pointer}
.checkline input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex:none}
.checkline b{display:block;font-size:.93rem}
.checkline .body-2{font-size:.86rem}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
table.data{border-collapse:collapse;width:100%;font-size:.92rem;min-width:560px}
table.data th{text-align:left;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;
  padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
.rowlink{font-weight:600;color:var(--text)}
.rowlink:hover{color:var(--accent)}

/* ---------- status pills ---------- */
.pill{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.01em;
  padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--surface-3);color:var(--text-2)}
.pill-completed,.pill-signed{background:var(--ok-soft);color:var(--ok)}
.pill-sent,.pill-viewed{background:var(--accent-soft);color:var(--accent)}
.pill-declined,.pill-voided{background:var(--critical-soft);color:var(--critical)}
.pill-expired{background:var(--warn-soft,var(--surface-3));color:var(--warn,var(--text-2))}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:clamp(46px,7vw,86px) 24px;border:1px dashed var(--line-strong);
  border-radius:var(--radius);background:var(--surface)}
.empty i{font-size:2.6rem;color:var(--text-3);display:block;margin-bottom:14px}
.empty p{max-width:44ch;margin:9px auto 20px}

/* ---------- wizard ----------
   Named wstep, not step: site.css already owns .steps and .step for the
   marketing "how it works" section, and its 26px padding-top and top border
   would otherwise land on every wizard rail. */
.wsteps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0}
/* The li is itself a flex container so the whitespace between it and its
   child does not form an anonymous line box above the pill. */
.wstep{flex:1 1 140px;display:flex}
.wstep>*{flex:1 1 auto;display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);font-size:.88rem;color:var(--text-3)}
.wstep-n{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex:none;
  background:var(--surface-3);color:var(--text-3);font-size:.72rem;font-weight:700}
.wstep.is-now>*{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.wstep.is-now .wstep-n{background:var(--accent);color:var(--on-accent)}
.wstep.is-done>*{color:var(--text-2)}
.wstep.is-done .wstep-n{background:var(--ok-soft);color:var(--ok)}
.wstep.is-done a:hover>*{border-color:var(--line-strong)}
@media(max-width:640px){.wstep-l{display:none}.wstep{flex:0 0 auto}}

.wizard{max-width:820px}
.wizard>*+*{margin-top:20px}
.wizard-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:center;padding-top:8px}

/* ---------- dropzone ---------- */
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface);
  padding:clamp(30px,5vw,52px) 24px;text-align:center;cursor:pointer;display:block;width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.dropzone.is-over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone i{font-size:2.2rem;color:var(--accent);display:block;margin-bottom:10px}
.dropzone b{display:block;font-size:1rem;margin-bottom:5px}
.dropzone .body-2{font-size:.86rem}

.doclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.doclist:empty{display:none}
.doclist li{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.doclist.plain li{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0}
.doclist.plain li:last-child{border-bottom:0}
.doclist li>i{font-size:1.5rem;color:var(--accent);flex:none}
.doclist-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.doclist-t b{font-size:.94rem;word-break:break-word}
.doclist-t span{font-size:.82rem;color:var(--text-3)}
.doclist li.is-busy{opacity:.6}

/* ---------- recipients ---------- */
.rcp-head{display:none;gap:12px;padding:0 0 8px;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.rcp-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.rcp-row{display:grid;gap:10px;grid-template-columns:1fr;align-items:start;
  padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.rcp-row .field{margin-bottom:0}
.rcp-order{display:flex;align-items:center;gap:8px}
.rcp-order .dot{flex:none}
.rcp-order input{width:56px;text-align:center}
@media(min-width:860px){
  .rcp-head{display:grid;grid-template-columns:110px 1fr 1.3fr 150px 40px}
  .rcp-row{grid-template-columns:110px 1fr 1.3fr 150px 40px;align-items:center;
    background:var(--surface);padding:12px 14px}
  .rcp-row .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.dot{width:11px;height:11px;border-radius:50%;background:var(--dot,var(--accent));flex:none}

/* ---------- review ---------- */
.review-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){.review-grid{grid-template-columns:1fr 1fr}}
.deflist{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.93rem}
.deflist dt{color:var(--text-3);font-size:.82rem;font-weight:600}
.deflist dd{margin:0}
.review-rcp{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.review-rcp li{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.review-rcp li:last-child{border-bottom:0}
.review-rcp li>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.review-rcp b{font-size:.94rem}
.review-rcp .body-2{font-size:.85rem}
.preview-wrap{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);overflow:hidden}
.preview-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.audit-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-bottom:12px}
.chain{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;
  padding:4px 11px;border-radius:var(--radius-pill)}
.chain.ok{background:var(--ok-soft);color:var(--ok)}
.chain.bad{background:var(--critical-soft);color:var(--critical)}

/* ---------- tagger ---------- */
.tagger{display:grid;grid-template-columns:1fr;height:calc(100dvh - var(--nav-h));
  overflow:hidden}
@media(min-width:900px){.tagger{grid-template-columns:284px 1fr}}
/* min-height:0 is what makes the inner scrollers work. A grid item defaults to
   min-height:auto, so without this the page column grows to the height of the
   document instead of scrolling inside its track, .tagger overflows the
   viewport, and body.no-scroll clips it. Every page after the first is then
   rendered but unreachable. */
.tag-side,.tag-main{min-height:0}
.tag-side{border-right:1px solid var(--line);background:var(--surface);overflow-y:auto;
  padding:18px;display:flex;flex-direction:column;gap:22px}
@media(max-width:899px){.tag-side{border-right:0;border-bottom:1px solid var(--line);
  flex-direction:row;overflow-x:auto;gap:18px;padding:14px}
  .tag-side-sec{min-width:230px}
  .tag-side-grow{display:none}}
.tag-side-grow{flex:1 1 auto;min-height:0}
.tag-label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px;font-weight:500}
.tag-hint{font-size:.81rem;color:var(--text-3);margin-top:10px;line-height:1.5}
.palette{display:grid;gap:7px}
.palette-item{display:flex;align-items:center;gap:10px;padding:10px 12px;font:inherit;
  font-size:.89rem;font-weight:500;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);cursor:grab;text-align:left;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.palette-item:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.palette-item.is-armed{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.palette-item i{font-size:1.15rem;color:var(--accent)}
.palette-item:active{cursor:grabbing}
.placed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;
  font-size:.85rem;overflow-y:auto;max-height:100%}
.placed li{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  background:var(--surface-2);cursor:pointer}
.placed li:hover{background:var(--surface-3)}
.placed li.is-sel{outline:2px solid var(--accent);outline-offset:-2px}
.placed .who{color:var(--text-3);font-size:.78rem;margin-left:auto}

.tag-main{display:flex;flex-direction:column;min-width:0;background:var(--surface-2)}
.tag-bar{display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--surface);
  border-bottom:1px solid var(--line);flex:none}
.tag-title{font-weight:600;font-size:.95rem;flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tag-save{font-size:.82rem;color:var(--text-3);flex:none}
.tag-pages{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:26px 18px 80px;
  display:flex;flex-direction:column;align-items:center;gap:22px}
@media(max-width:620px){.tag-pages{padding:16px 10px 90px;gap:16px}}
.tag-pages.preview{max-height:620px;padding:22px 18px}
.tag-loading{display:flex;align-items:center;gap:12px;color:var(--text-3);padding:60px 0}
.spinner-lg{width:22px;height:22px;border-radius:50%;flex:none;
  border:2.5px solid var(--line-strong);border-top-color:var(--accent);
  animation:spin .8s linear infinite;display:block}

/* flex:none matters. These are children of a column flexbox that now has a
   bounded height, so without it they shrink to share the space instead of
   keeping the page's aspect ratio and letting the container scroll. A two page
   document renders as two squashed strips. */
.page-wrap{position:relative;box-shadow:var(--shadow-md);background:#fff;line-height:0;
  border-radius:2px;overflow:hidden;max-width:100%;flex:none}
.page-wrap canvas{display:block;width:100%;height:100%}
.page-num{position:absolute;left:-2px;top:-24px;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);line-height:1}
.page-layer{position:absolute;inset:0}

/* .page-wrap zeroes its line-height so the canvas sits flush with no descender
   gap beneath it. That inherits into the overlay, where it collapses every
   label and every filled-in value to a nothing-high line box that the field's
   own overflow:hidden then clips away. Fields carry their own line-height. */
.fld{position:absolute;border:1.5px solid var(--fc,var(--accent));border-radius:4px;
  background:color-mix(in srgb,var(--fc,var(--accent)) 15%,transparent);
  display:flex;align-items:center;gap:5px;padding:0 5px;font-size:11px;font-weight:600;
  line-height:1.35;
  color:var(--fc,var(--accent));cursor:move;overflow:hidden;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fld i{font-size:12px;flex:none}
.fld.is-sel{outline:2px solid var(--fc,var(--accent));outline-offset:2px;z-index:5}
/* The grip and the delete button sit just outside the box on purpose, so they
   are reachable on a small field. .fld clips its own overflow to keep a long
   label inside a narrow box, which was also clipping both handles: the resize
   corner and the delete button were invisible and unclickable, leaving the
   keyboard as the only way to resize or remove a field. Clip the label instead
   of the box. */
#tagger .fld{overflow:visible}
#tagger .fld > span:not(.grip){overflow:hidden;text-overflow:ellipsis;min-width:0}
.fld .grip{position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;border-radius:2px;
  background:var(--fc,var(--accent));border:1.5px solid #fff;cursor:nwse-resize}
.fld .kill{position:absolute;right:-8px;top:-8px;width:17px;height:17px;border-radius:50%;
  background:var(--fc,var(--accent));color:#fff;border:1.5px solid #fff;display:none;
  align-items:center;justify-content:center;font-size:10px;cursor:pointer;padding:0;line-height:1}
.fld.is-sel .kill{display:flex}
.tag-pages.preview .fld{cursor:default}
.tag-pages.preview .grip,.tag-pages.preview .kill{display:none}

/* ---------- auth screens ---------- */
.auth-body{min-height:100dvh;display:grid;place-items:center;background:var(--bg);
  padding:36px 20px}
.auth-body::before{content:"";position:fixed;inset:-30% -10% auto -10%;height:60%;z-index:-1;
  background:radial-gradient(50% 60% at 50% 30%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.auth-shell{width:100%;max-width:472px}
.auth-brand{justify-content:center;margin-bottom:24px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:1.09rem;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
.auth-card{padding:clamp(26px,4vw,38px)}
.auth-heading{margin-bottom:8px}
.auth-sub{margin-bottom:24px}
.auth-foot{text-align:center;margin-top:20px;font-size:.88rem;color:var(--text-3)}
.auth-foot a{color:var(--accent);font-weight:600}
.code-sent{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:20px;
  padding:12px 14px;background:var(--accent-soft);border-radius:var(--radius-sm);font-size:.88rem}
.code-sent i{color:var(--accent);font-size:1.1rem}
.otp-input{font-family:"JetBrains Mono",monospace !important;font-size:1.6rem !important;
  letter-spacing:.42em;text-align:center;padding:14px 10px !important}

/* ---------- signer ---------- */
.signer-body{min-height:100dvh;background:var(--surface-2);display:flex;flex-direction:column}
.sign-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:11px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.sign-brand{flex:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.sign-doc{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sign-doc b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sign-doc .body-2{font-size:.82rem}
.sign-progress{display:flex;align-items:center;gap:14px;flex:none}
/* The direct child only: a bare `span` here also matched the label inside the
   button, which left a blank pill on every phone. */
.sign-progress>span{font-size:.85rem;color:var(--text-3);font-variant-numeric:tabular-nums}
@media(max-width:620px){.sign-brand{display:none}.sign-progress>span{display:none}}
.sign-message{display:flex;gap:12px;padding:14px 20px;background:var(--accent-soft);
  border-bottom:1px solid var(--accent-line)}
.sign-message i{color:var(--accent);font-size:1.2rem;flex:none}
.sign-message p{font-size:.92rem;white-space:pre-wrap}
.sign-shell{flex:1 1 auto;min-height:0;display:flex}
.sign-pages{flex:1 1 auto;overflow-y:auto}
.sign-pages .fld{cursor:pointer;border-style:dashed;border-width:2px}
.sign-pages .fld.is-filled{border-style:solid;background:transparent}
.sign-pages .fld.is-next{animation:pulse 1.6s var(--ease) infinite}
.sign-pages .fld img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
/* Field values sit on the rendered page, so they follow the paper, not the theme. */
.sign-pages .fld .val{overflow:hidden;text-overflow:ellipsis;font-weight:500;
  color:var(--paper-ink);font-size:12px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fc) 45%,transparent)}
  50%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.sign-pages .fld.is-next{animation:none;
  outline:2px solid var(--fc);outline-offset:2px}}

.jump{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:30;
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--on-accent);border:0;font:inherit;font-weight:600;
  font-size:.93rem;cursor:pointer;box-shadow:var(--shadow-lg)}
.jump:hover{background:var(--accent-hover)}

.sigmodal{border:0;border-radius:var(--radius);padding:0;background:var(--surface);
  box-shadow:var(--shadow-lg);max-width:min(620px,94vw);width:100%;color:var(--text)}
.sigmodal::backdrop{background:rgba(10,12,18,.55);backdrop-filter:blur(3px)}
.sigmodal-in{padding:clamp(20px,3vw,28px)}
.sigtabs{display:flex;gap:6px;margin:16px 0 14px;background:var(--surface-2);padding:4px;
  border-radius:var(--radius-pill);width:fit-content}
.sigtab{border:0;background:none;font:inherit;font-size:.89rem;font-weight:600;padding:7px 18px;
  border-radius:var(--radius-pill);color:var(--text-3);cursor:pointer}
.sigtab.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
/* The pad is paper-white in both themes, and the stroke is always dark ink.
   What lands here is embedded into the PDF verbatim, so a themed stroke would
   mean a white signature on a white page. */
#sigpad{width:100%;height:auto;aspect-ratio:3/1;background:var(--paper-bg);
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);touch-action:none;
  cursor:crosshair;display:block;margin-bottom:10px}
.siginput{font-family:inherit;font-size:1rem;color:var(--text);background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 13px;width:100%}
.siginput:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.sigpreview{margin-top:12px;min-height:88px;display:grid;place-items:center;
  background:var(--paper-bg);border-radius:var(--radius-sm);font-size:2.3rem;color:var(--paper-ink);
  font-family:"Brush Script MT","Segoe Script",cursive;overflow:hidden;padding:8px}
.sig-consent{margin:16px 0 0;font-size:.84rem}
/* Three buttons will not sit on one row on a phone, and Remove was the one
   falling off the edge. Push it to the far side and let the row wrap. */
.sigmodal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.sigmodal-actions #sigremove,.sigmodal-actions #textremove{margin-right:auto}

.notice{max-width:520px;margin:0 auto;padding:16vh 24px 60px;text-align:center}
.notice i{font-size:3rem;color:var(--text-3);display:block;margin-bottom:18px}
.notice-ok i{color:var(--ok)}
.notice h1{margin-bottom:12px}
.notice .lede{margin:0 auto}
.notice-foot{margin-top:30px}
.notice-foot a{color:var(--accent);font-weight:600}
.sign-error{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:60;
  max-width:min(520px,92vw);box-shadow:var(--shadow-lg)}

/* ---------- people and roles ---------- */
.team-grid{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.team-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.team-invite{position:sticky;top:calc(var(--nav-h) + 20px)}
@media(max-width:979px){.team-invite{position:static}}

.member-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.member-list li{display:flex;align-items:center;gap:13px;padding:12px 0;
  border-bottom:1px solid var(--line);position:relative}
.member-list li:last-child{border-bottom:0}
.avatar-sm{width:32px;height:32px;font-size:.72rem}
.avatar-pending{background:var(--surface-3);color:var(--text-3);border-color:var(--line-strong)}
.avatar-pending i{font-size:1rem}
.member-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.member-who b{font-size:.94rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.member-who .body-2{font-size:.84rem;overflow:hidden;text-overflow:ellipsis}
.you{font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);padding:2px 7px;border-radius:var(--radius-pill)}
.member-act{display:flex;align-items:center;gap:8px;flex:none}
.select-sm{width:auto;padding:6px 9px;font-size:.85rem}
.select:disabled,.iconbtn:disabled{opacity:.45;cursor:not-allowed}
.flash{position:absolute;right:0;bottom:-2px;font-size:.74rem;color:var(--ok);font-weight:600}

.roledesc{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;
  font-size:.84rem;color:var(--text-2);line-height:1.5}
.roledesc b{display:inline-block;min-width:62px;color:var(--text)}

.usermenu-role{display:inline-block;align-self:flex-start;margin-top:5px;font-size:.7rem;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-3);color:var(--text-2);padding:2px 8px;border-radius:var(--radius-pill)}

.invite-note{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;padding:14px 16px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);
  font-size:.9rem;line-height:1.55}
.invite-note i{color:var(--accent);font-size:1.2rem;flex:none;margin-top:1px}

/* A destructive action needs to look like one, and needs to not look like the
   primary action sitting next to it. */
/* The record page's own controls. Chasing, correcting and withdrawing sit with
   the envelope they act on rather than on a settings screen somewhere else. */
/* The one decision left on the review step. It sits with Send rather than in a
   settings screen because it is a property of this send, not of the account. */
.expiry-row{margin:22px 0 4px;max-width:340px}
.expiry-row .select{margin-top:8px}
.expiry-row .body-2{margin-top:10px;font-size:.86rem}
/* The identity option sits under the row it belongs to rather than in a
   column of its own: it is off for almost every recipient, and a column of
   empty checkboxes reads as something you have forgotten to fill in. */
.rcp-id{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:2px;
  font-size:.88rem;color:var(--text-2);cursor:pointer}
.rcp-id input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.rcp-id[hidden]{display:none}
/* The identity line on a recipient. Its own row rather than appended to the
   status, because an attempt count is money and should not read as a footnote. */
.idline{display:flex;align-items:center;gap:6px;margin-top:3px}
.idline i{font-size:14px;flex:none}
.pack-acts{display:flex;flex-wrap:wrap;gap:10px}
/* How much of the month's allowance is gone. A number alone makes you do the
   arithmetic; a bar tells you whether to care before you have read it. */
.meter{margin-top:16px;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.meter span{display:block;height:100%;background:var(--accent);border-radius:999px;
  transition:width .3s var(--ease)}
/* Two ways to buy the same plan. Radios rather than two buttons, because the
   choice is made before the action and the saving needs to be visible while
   it is being made. */
.buy{display:grid;gap:12px;margin-top:20px}
@media(min-width:620px){.buy{grid-template-columns:1fr 1fr}}
.buy-opt{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.buy-opt:hover{border-color:var(--line-strong)}
.buy-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.buy-opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.buy-opt-in{display:grid;gap:5px}
.buy-opt-in b{font-size:1.06rem}
.buy-save{justify-self:start;font-size:.76rem;font-weight:600;letter-spacing:.01em;
  padding:2px 9px;border-radius:var(--radius-pill);background:var(--ok-soft);color:var(--ok)}
.plan-now{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.plan-now p{margin-top:6px;max-width:52ch}
/* Saved layouts, in the tagging sidebar rather than on a screen of their own:
   the only moment a template is useful is while you are looking at the page it
   would land on. */
.tpl-acts{display:grid;gap:10px;margin-top:10px}
.tpl-buttons{display:flex;flex-wrap:wrap;gap:8px}
.tpl-buttons .btn{flex:1 1 auto;justify-content:center}
.tpl-note{margin:0;font-size:.82rem;line-height:1.45;color:var(--text-2)}
.tpl-note.bad{color:var(--critical)}
.tpl-note[hidden]{display:none}
/* A support conversation. Inbound and outbound alike are shown as text; what
   arrives is somebody else's markup and is never rendered. */
.thread{display:grid;gap:14px;margin-bottom:22px}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px}
.msg-out{background:var(--accent-soft);border-color:var(--accent-line)}
.msg header{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.msg-subject{margin:8px 0 0;font-weight:600}
.msg .pre{margin:10px 0 0;white-space:pre-wrap;color:var(--text-2);line-height:1.6}
.msg-error{margin:12px 0 0;color:var(--critical);font-size:.88rem;font-weight:500}
.reply .inp{width:100%;font-family:inherit;font-size:.98rem;color:var(--text);
  background:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:11px 13px;margin-top:8px}
.reply textarea.inp{resize:vertical;line-height:1.6}
.reply .inp:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.head-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rcp-acts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.rcp-acts .linkish{font-size:.82rem;white-space:nowrap}
.btn-danger{background:var(--critical);color:#fff;border-color:var(--critical)}
.btn-danger:hover{background:var(--critical);filter:brightness(.92)}
.sigmodal textarea.siginput{min-height:84px;resize:vertical;font-family:inherit}
.sigmodal .err{margin-top:8px;font-size:.85rem;color:var(--critical);font-weight:500;
  display:none;align-items:center;gap:6px}
#decline{flex:none}
@media(max-width:620px){
  /* The bar wraps on a phone; keep both actions reachable rather than letting
     Decline fall off the edge. */
  .sign-progress{flex:1 1 100%;justify-content:flex-end}
}

/* A converted document is worth a glance before it goes out. */
.doclist li.is-converted{border-color:var(--warn)}
.doclist-act{display:flex;flex-wrap:wrap;gap:8px;flex:none}
#converted-note{margin-top:0}

/* developers: event checkboxes, and a key or secret shown once */
.check{display:flex;align-items:center;gap:8px;font-size:.9rem;padding:3px 0;cursor:pointer}
.check code{font-size:.84rem}
code.secret{display:block;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;font-size:.84rem;user-select:all}