/* app.css — sender UI, Solviz brand kit v1 (~/solviz-site/brand): paper ground, ink as the
   workhorse, terracotta as the accent (never a field), sage for the rule and for "done".
   White cards on a 1px line, 16px corners, pill buttons, Assistant throughout — the same
   language as solviz.ai, so the signing service reads as part of the same product.
   The logotype is the outlined SVG from the kit, never set live in Fraunces.

   ONE deliberate exception to the RTL/logical-property rule, and it is the important one:
   everything inside `.page` is positioned with PHYSICAL left/top/width/height percentages.
   A field's position is a property of the sheet of paper, not of the reading direction —
   mirroring it under `dir=rtl` would put the client's signature on the wrong side of the
   document. `.page` is pinned to `direction:ltr` so no inherited direction can leak into
   that geometry; the labels inside a field box opt back into rtl for their text. */

/* The weight RANGE is load-bearing: pin it to one value and the variable axis locks and
   the whole page renders ExtraLight with fake-bold headings. */
@font-face{font-family:'Assistant';src:url('assets/fonts/assistant-hebrew.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Assistant';src:url('assets/fonts/assistant-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}

:root{
  /* brand kit palette + the site's working shades */
  --paper:#F6F3EC; --paper2:#EFEAE0; --paper3:#E6E0D3; --card:#FFFFFF;
  --line:#DDD7CA; --hairline:#E8E3D8;
  --ink:#141413; --ink-soft:#3A3A37; --muted:#6E6C66; --muted-soft:#6E6C66;
  --terra:#B4553A; --terra-deep:#9A462E; --terra-text:#9A462E; --terra-mist:#F5E6E0; --terra-line:#E3C2B6;
  --sage:#5F9E88; --sage-deep:#4A8571; --sage-text:#3F7462; --sage-mist:#E8F0EC; --sage-line:#C5DCD2;
  --manilla:#EBDBBC;
  --sans:'Assistant','Arial Hebrew','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,20,19,.04);
  --shadow-lift:0 24px 48px -28px rgba(20,20,19,.35);
  --header-h:64px;
  /* recipient identity. The whole placer reads colour as "who signs this". */
  --signer:var(--terra); --signer-text:var(--terra-text); --signer-mist:var(--terra-mist);
  --countersigner:var(--sage); --countersigner-text:var(--sage-text); --countersigner-mist:var(--sage-mist);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(1.7rem,3.4vw,2.25rem);line-height:1.15}
h2{font-size:1.1rem}
h3{font-size:.95rem}
p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
[dir=ltr]{unicode-bidi:isolate}
::selection{background:var(--manilla);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
/* The UA's [hidden] rule is `display:none` at author-agent weight, so ANY author
   `display:` on the same element beats it. `.flash` and `.toast` below both set one, and
   without this line the alert bar renders empty on every page load. sign.css carries the
   identical rule for the same reason. */
[hidden]{display:none !important}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-end-start-radius:var(--radius-sm)}
.skip:focus{inset-inline-start:0}
#root{outline:none}
.noscript{padding:2rem;color:var(--terra-text)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60; min-height:var(--header-h);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.75rem clamp(1rem,3vw,2rem);
  background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px);
  border-block-end:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
/* the kit's clear-space rule: one square's width around the lockup — the gap does it */
.brand .logo{display:block;block-size:28px;inline-size:auto}
.brand .sep{inline-size:1px;block-size:1.3rem;background:var(--line)}
.brand .pagename{color:var(--ink-soft);font-weight:600;font-size:1rem}
.spacer{flex:1}
.who{font-size:.82rem;color:var(--muted)}
.status{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.status .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--sage);flex:none}
.status.busy .dot{background:var(--manilla);animation:pulse 1s infinite var(--ease)}
.status.error .dot{background:var(--terra)}
@keyframes pulse{50%{opacity:.25}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:.5rem 1.05rem;cursor:pointer;
  font-size:.9rem;font-weight:600;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:active:not(:disabled){background:var(--paper2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover:not(:disabled){background:var(--terra);border-color:var(--terra);color:var(--paper)}
.btn.danger{color:var(--terra-text);border-color:var(--terra-line);background:var(--card)}
.btn.danger:hover:not(:disabled){background:var(--terra);color:var(--paper);border-color:var(--terra)}
.btn.armed{background:var(--terra);color:var(--paper);border-color:var(--terra)}
.btn.saved{border-color:var(--sage-line);background:var(--sage-mist);color:var(--sage-text)}
.btn.failed{border-color:var(--terra-line);background:var(--terra-mist);color:var(--terra-text)}
.btn[aria-pressed=true]{background:var(--sage-mist);border-color:var(--sage);color:var(--sage-text)}
.btn.wide{width:100%}
.icon{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- flash + toast ---------- */
.flash{
  position:sticky;top:var(--header-h);z-index:55;
  display:flex;align-items:center;gap:.75rem;
  margin:.9rem clamp(1rem,3vw,2rem) 0;padding:.75rem 1rem;
  background:var(--terra-mist);border:1px solid var(--terra-line);color:var(--terra-text);
  border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;
}
.flash-text{flex:1}
.flash-x{border:none;background:transparent;color:inherit;cursor:pointer;font-size:.9rem;padding:.1rem .3rem;border-radius:.3rem}
.flash-x:hover{background:rgba(180,85,58,.12)}
.toast{
  position:fixed;inset-block-end:1.2rem;inset-inline-start:1.2rem;z-index:110;
  background:var(--ink);color:var(--paper);padding:.65rem 1.1rem;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);font-size:.88rem;max-width:min(420px,90vw);
}
.toast.err{background:var(--terra-deep)}

/* ---------- shared bits ---------- */
.sheet{padding:clamp(1.25rem,3vw,2.5rem) clamp(1rem,3vw,2rem);max-inline-size:1200px;margin-inline:auto}
.sheet-head{display:flex;align-items:flex-end;gap:.4rem 1rem;flex-wrap:wrap;margin-block-end:1.6rem}
.sub{color:var(--muted);font-size:.9rem}
.pill{
  padding:.12rem .65rem;border-radius:999px;font-weight:600;font-size:.75rem;
  border:1px solid transparent;white-space:nowrap;display:inline-block;
}
.pill.sage{background:var(--sage-mist);color:var(--sage-text);border-color:var(--sage-line)}
.pill.kraft{background:#F5ECDA;color:#7A5A2A;border-color:var(--manilla)}
.pill.muted{background:var(--paper2);color:var(--muted);border-color:var(--line)}
.pill.clay{background:var(--terra-mist);color:var(--terra-text);border-color:var(--terra-line)}
.pill.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.empty{color:var(--muted);font-size:.9rem;padding:.4rem .2rem}
.hint{font-size:.8rem;color:var(--muted);line-height:1.45}
/* manilla is the kit's highlight colour */
.marker{
  background-image:linear-gradient(transparent 58%,var(--manilla) 58%,var(--manilla) 92%,transparent 92%);
  padding-inline:.1em;
}

/* ---------- envelope list ---------- */
.listgrid{
  display:grid;gap:clamp(1rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));align-items:start;
}
.env-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.15rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.env-card:hover{border-color:var(--ink);box-shadow:var(--shadow-lift)}
.env-head{display:flex;align-items:flex-start;gap:.6rem}
.env-title{font-weight:700;font-size:1.08rem;line-height:1.3;flex:1;min-width:0;overflow-wrap:anywhere}
.recips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.recips li{display:flex;align-items:center;gap:.45rem;font-size:.85rem;min-width:0}
.rdot{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.rdot.signer{background:var(--signer)}
.rdot.countersigner{background:var(--countersigner)}
.rname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9rem}
.remail{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-size:.8rem}
.rstat{color:var(--muted);font-size:.74rem;flex:none}
.dates{font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.15rem .7rem;padding-block-start:.6rem;border-block-start:1px solid var(--hairline)}
.cardactions{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.1rem}
.cardactions .btn{font-size:.84rem;padding:.4rem .9rem}
.voidrow{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.voidrow input{flex:1;min-width:9rem}

.newenv{
  border:1px dashed var(--line);background:transparent;border-radius:var(--radius);
  padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.65rem;min-height:150px;justify-content:center;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.newenv:hover{border-color:var(--muted)}
.newenv:focus-within{border-color:var(--sage);background:var(--card)}
.newenv h2{font-size:1.05rem;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:.25rem}
.field > span, .field > label{font-size:.78rem;color:var(--muted);font-weight:600}
input[type=text],input[type=email],input[type=search],input[type=file]{
  width:100%;border:1px solid var(--line);background:var(--card);
  border-radius:var(--radius-sm);padding:.5rem .7rem;font-size:.92rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
input[type=file]{padding:.35rem;cursor:pointer}
input::file-selector-button{
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:.28rem .85rem;margin-inline-end:.6rem;
}
input::file-selector-button:hover{border-color:var(--ink)}
input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--paper2)}
input:disabled{background:var(--paper2);color:var(--muted);cursor:not-allowed}

/* ---------- placer ---------- */
.placer{
  display:grid;grid-template-columns:minmax(0,1fr) 22rem;
  gap:clamp(1rem,2vw,1.6rem);
  padding:clamp(1rem,3vw,2rem);max-inline-size:1500px;margin-inline:auto;align-items:start;
}
.dochead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-block-end:.9rem}
.dochead h1{font-size:1.4rem;flex:1;min-width:12rem;overflow-wrap:anywhere}
.doccol{min-width:0}
.pages{display:flex;flex-direction:column;align-items:center;gap:1.6rem}

/* the sheet of paper. `outline` rather than `border` on purpose: an outline draws no box,
   so the element's bounding rect stays exactly the rendered page and normalisation of a
   pointer position needs no correction term. */
.page{
  position:relative;direction:ltr;
  inline-size:min(880px,100%);background:#fff;
  outline:1px solid var(--line);box-shadow:var(--shadow-lift);
}
.page canvas{display:block;inline-size:100%;block-size:auto}
.page::before{
  content:attr(data-label);position:absolute;top:-1.35rem;left:0;
  font-size:.72rem;color:var(--muted);letter-spacing:.02em;
}
.page.hot{outline:2px solid var(--sage);outline-offset:1px}
.overlay{position:absolute;inset:0}
.overlay.locked{pointer-events:none}

.fieldbox{
  position:absolute;direction:rtl;
  border:1.5px solid var(--signer);background:rgba(180,85,58,.10);
  border-radius:6px;
  cursor:grab;overflow:hidden;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:600;color:var(--signer-text);
  transition:box-shadow .15s var(--ease);
}
.fieldbox.countersigner{border-color:var(--countersigner);background:rgba(95,158,136,.14);color:var(--countersigner-text)}
.fieldbox:hover{box-shadow:0 0 0 3px rgba(20,20,19,.08)}
.fieldbox.sel{box-shadow:0 0 0 2px var(--ink);z-index:3}
.fieldbox.dragging{cursor:grabbing;opacity:.85}
.fieldbox.optional{border-style:dashed}
.fb-label{pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:clip;padding-inline:.2rem;line-height:1.1}
.grip{
  position:absolute;right:-1px;bottom:-1px;width:.8rem;height:.8rem;padding:0;
  background:var(--signer);border:1.5px solid #fff;border-radius:3px 0 5px 0;
  cursor:nwse-resize;touch-action:none;
}
.fieldbox.countersigner .grip{background:var(--countersigner)}
.drag-ghost{
  position:fixed;z-index:120;pointer-events:none;opacity:.92;
  border:1.5px dashed var(--signer);background:rgba(180,85,58,.12);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:600;color:var(--signer-text);
  box-shadow:var(--shadow-lift);
}
.drag-ghost.countersigner{border-color:var(--countersigner);background:rgba(95,158,136,.16);color:var(--countersigner-text)}

/* ---------- rail ---------- */
.rail{
  position:sticky;top:calc(var(--header-h) + 1rem);
  display:flex;flex-direction:column;gap:.9rem;
  max-block-size:calc(100vh - var(--header-h) - 2rem);overflow:auto;
  padding-inline-end:.2rem;
}
.panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.65rem;
}
.panel h2{font-size:.95rem;display:flex;align-items:center;gap:.4rem}
.panel h2 .count{color:var(--muted);font-weight:500;font-size:.8rem}

.recip{display:flex;flex-direction:column;gap:.45rem;padding-block-end:.6rem}
.recip + .recip{border-block-start:1px solid var(--hairline);padding-block-start:.75rem}
.recip-head{display:flex;align-items:center;gap:.45rem}
.recip-head h3{flex:1}
.rolechip{font-size:.74rem;font-weight:600;color:var(--muted)}
.whoami{display:flex;flex-direction:column;gap:.05rem;font-size:.9rem;font-weight:600;padding:.45rem .7rem;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm)}
.whoami .remail{font-weight:400}
.crm{display:flex;gap:.35rem;align-items:stretch}
.crm input{flex:1}
.crmres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem;max-block-size:11rem;overflow:auto}
.crmres li{display:flex}
.crmres button{
  width:100%;text-align:start;border:1px solid var(--hairline);background:var(--paper);
  border-radius:var(--radius-sm);padding:.35rem .55rem;cursor:pointer;font-size:.8rem;line-height:1.3;
}
.crmres button:hover{border-color:var(--ink)}
.crmres .cr-email{display:block;font-size:.72rem;color:var(--muted)}
.crmco{display:flex;flex-wrap:wrap;gap:.25rem}
.crmco button{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:.1rem .6rem;font-size:.72rem;cursor:pointer;
}
.crmco button:hover{border-color:var(--ink);color:var(--ink)}
.check{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--ink-soft);cursor:pointer}
.check input{width:1rem;height:1rem;accent-color:var(--ink);cursor:pointer}

.roletabs{display:flex;gap:.4rem}
.roletabs .btn{flex:1;padding-inline:.5rem}
.roletabs .btn[aria-pressed=true].signer{background:var(--signer-mist);border-color:var(--signer);color:var(--signer-text)}
.roletabs .btn[aria-pressed=true].countersigner{background:var(--countersigner-mist);border-color:var(--countersigner);color:var(--countersigner-text)}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.palette .btn{justify-content:flex-start;touch-action:none;font-size:.84rem;padding:.5rem .8rem;border-radius:var(--radius-sm)}
.palette .btn.span{grid-column:1 / -1}

.legend{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem}
.legend div{display:flex;align-items:center;gap:.45rem}
.legend .swatch{width:1.1rem;height:.75rem;border-radius:3px;flex:none;border:1.5px solid var(--signer);background:rgba(180,85,58,.10)}
.legend .swatch.countersigner{border-color:var(--countersigner);background:rgba(95,158,136,.14)}

.insp{display:flex;flex-direction:column;gap:.5rem}
.insp .row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.82rem}
.insp .coord{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}

.sendbox{display:flex;flex-direction:column;gap:.6rem}
.linkrow{display:flex;flex-direction:column;gap:.45rem;padding-block-end:.65rem;border-block-end:1px solid var(--hairline)}
.linkrow-head{display:flex;align-items:center;gap:.45rem;font-size:.86rem;min-width:0}
.linkrow-head .rname{flex:1;max-width:none}
.linkrow .btn{align-self:flex-start}
.linkrow .btn.armed{white-space:normal;text-align:start}
.urlrow{display:flex;gap:.35rem;flex-wrap:wrap}
.urlrow input{flex:1 1 100%;font-size:.78rem}
.urlrow .btn{flex:1;align-self:auto}
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;font-size:.8rem}
.events li{display:flex;gap:.5rem;align-items:baseline}
.events .ev-at{color:var(--muted);font-size:.72rem;flex:none;font-variant-numeric:tabular-nums}
.locknote{
  background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--sage);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font-size:.82rem;color:var(--ink-soft);
}

/* ---------- narrow ---------- */
@media (max-width:960px){
  .placer{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;max-block-size:none;overflow:visible;order:-1}
}
@media (max-width:560px){
  .who{display:none}
  .brand .logo{block-size:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}