/* /sign demo: the sender's screens (B2) — cockpit, Documents, Reports, Prepare, Review.
   Re-authored from the product's geometry (r1/r2/r7 at 1:1), never its CSS. Concept 15 recolour:
   indigo -> navy, lime -> orange, cyan -> teal, recall amber #FEF6E7/#F5DFAE. Orange lives in three places only
   (the yoke's send arrow, Book a demo, the Reports % pills). Hover and focus move colour and border only; motion is
   opacity/transform; every slot that appears later is reserved. Lato ships 400/700/900: 500 -> 400, 600 and 800 -> 700, 900 for the display sizes.
   Every rule is scoped to .ds-sender (the three roots this builder owns); the director owns the roots'
   visibility (.ds-scene / .ds-in / .ds-out + hidden) and paper.css owns .ds-page / .ds-pin / .ds-caret / .ds-val. */

.ds-sender{
  --yoke-w:720px; --idea-row:52px; --form-w:460px; --form-min:400px; --paper-min:560px; --strip-h:52px; --r-panel:10px;
  --suggest-bg:var(--track); --aline-line:var(--line);
  box-sizing:border-box; min-width:0; min-height:0;
  display:flex; flex-direction:column; overflow:hidden; container-type:inline-size; container-name:ds-sender;
  background:var(--app-canvas); color:var(--navy);
  font-family:var(--ff); font-size:var(--fs-ui); line-height:1.45; text-align:left;
}
/* on the stage the director's .ds-root places the root (absolute, inset 0); anywhere else it fills its parent */
.ds-sender:not(.ds-root){ position:relative; height:100%; }
.ds-sender[hidden], .ds-sender [hidden]{ display:none !important; }
.ds-sender *, .ds-sender *::before, .ds-sender *::after{ box-sizing:border-box; }
.ds-sender button{ font-family:var(--ff); cursor:pointer; }
.ds-sender button:disabled{ cursor:default; }
.ds-sender :focus-visible{ outline:2px solid var(--sel-ring); outline-offset:2px; }
.ds-sender .ds-ring{ outline:2px solid var(--sel-ring); outline-offset:2px; }
.ds-sender .ds-num{ font-variant-numeric:tabular-nums; }
.ds-sender .ds-ico{ display:block; flex:0 0 auto; }
.ds-sender .ds-sub{ flex:1 1 auto; height:100%; min-height:0; display:flex; flex-direction:column; }

/* the motion helpers core.js toggles, inside these roots */
.ds-sender .ds-rise{ opacity:0; transform:translateY(8px); transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.ds-sender .ds-rise.ds-in{ opacity:1; transform:none; }
@keyframes ds-sender-spring{ from{ transform:scale(.4); opacity:.4; } to{ transform:scale(1); opacity:1; } }
@keyframes ds-sender-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes ds-sender-blink{ 0%,49.9%{ opacity:1; } 50%,100%{ opacity:0; } }

/* hit areas: small product controls keep their drawn size and get a 44px target */
.ds-sender .ds-crumb, .ds-sender .ds-chip, .ds-sender .ds-strip-link, .ds-sender .ds-send, .ds-sender .ds-pill,
.ds-sender .ds-addcopy, .ds-sender .ds-copy-rm, .ds-sender .ds-recall-clear, .ds-sender .ds-btn, .ds-sender .ds-linkbtn{ position:relative; }
.ds-sender .ds-crumb::after, .ds-sender .ds-chip::after, .ds-sender .ds-strip-link::after, .ds-sender .ds-send::after, .ds-sender .ds-pill::after,
.ds-sender .ds-addcopy::after, .ds-sender .ds-copy-rm::after, .ds-sender .ds-recall-clear::after, .ds-sender .ds-linkbtn::after{
  content:''; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:44px; transform:translate(-50%, -50%);
}
.ds-sender .ds-btn::after{ content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }

/* the drawn caret for text the demo types into a field it never focuses */
.ds-sender .ds-fakecaret{ position:absolute; left:0; top:0; z-index:2; width:1.5px; height:20px; background:var(--navy); pointer-events:none; }
.ds-sender .ds-fakecaret.ds-blink{ animation:ds-sender-blink var(--t-caret) linear infinite; }
.ds-sender .ds-typemirror{ position:absolute; left:0; top:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; border:0; margin:0; }

/* ---------- the product's top strip ---------- */
.ds-sender .ds-strip{ flex:0 0 var(--strip-h); height:var(--strip-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; font-size:12.5px; color:var(--meta); min-width:0; }
.ds-sender .ds-strip-left, .ds-sender .ds-strip-right{ display:flex; align-items:center; gap:8px; min-width:0; }
.ds-sender .ds-strip-right{ gap:18px; flex:0 0 auto; }
.ds-sender .ds-crumb{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; flex:0 0 auto;
  font:700 12.5px/1 var(--ff); letter-spacing:.2px; color:var(--navy); background:#fff; border:1px solid var(--app-line); border-radius:var(--r-control);
  transition:color var(--t-hover), border-color var(--t-hover); }
@media (hover:hover){ .ds-sender button.ds-crumb:hover{ border-color:var(--ctl-line); } }
.ds-sender .ds-crumb-sep{ color:var(--meta); flex:0 0 auto; }
.ds-sender .ds-crumb-path{ font-weight:700; color:var(--meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ds-sender .ds-strip-link{ background:none; border:0; padding:4px 2px; font:700 12.5px/1 var(--ff); color:var(--navy); transition:color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-strip-link:hover{ color:var(--teal-ink); } }
.ds-sender .ds-strip-user{ font-size:13px; color:var(--meta); }

/* ---------- home ---------- */
.ds-sender .ds-homesub{ min-height:100%; }
.ds-sender .ds-home{ flex:1 1 auto; width:min(var(--yoke-w), calc(100% - 40px)); margin:0 auto; padding-bottom:calc(52px + 12vh); display:flex; flex-direction:column; justify-content:center; }
/* the greeting centres on the yoke's axis: no mark slot in the row */
.ds-sender .ds-greeting{ display:block; margin:0; text-align:center; font:900 36px/1.15 var(--ff); letter-spacing:-.6px; color:var(--navy); }
.ds-sender .ds-greeting-text{ display:inline; }

/* the reserved slot between the greeting and the yoke: the thinking pill and the reply, centred, so nothing moves */
.ds-sender .ds-yoke-slot{ flex:0 0 44px; height:44px; display:flex; align-items:center; justify-content:center; min-width:0; }
.ds-sender .ds-think{ width:40px; height:28px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--app-line); display:flex; align-items:center; justify-content:center; }
.ds-sender .ds-think i{ display:block; width:18px; height:18px; border-radius:50%; background:var(--teal); animation:ds-sender-pulse var(--t-think) ease-in-out infinite; }
.ds-sender .ds-reply{ display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:28px; padding:4px 12px 4px 8px; border-radius:14px; background:#fff; border:1px solid var(--aline-line);
  font-size:13px; line-height:1.3; color:var(--navy); opacity:0; transition:opacity var(--t-fade); }
.ds-sender .ds-reply.ds-in{ opacity:1; }
.ds-sender .ds-reply i{ width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--navy); }
.ds-sender .ds-reply-txt{ min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }

.ds-sender .ds-yoke{ position:relative; flex:0 0 124px; height:124px; padding:18px 18px 12px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--app-line); border-radius:12px; box-shadow:0 1px 2px rgba(11,29,58,.05); transition:border-color var(--t-hover), box-shadow var(--t-hover); }
.ds-sender .ds-yoke:focus-within{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
/* the idle ring on the box (the 'type' beat) rings the whole yoke, colour only */
.ds-sender .ds-yoke:has(.ds-yoke-input.ds-ring){ border-color:var(--sel-ring); box-shadow:0 0 0 1px var(--sel-ring); }
.ds-sender .ds-yoke-input.ds-ring{ outline:none !important; }
/* one line that scrolls with the typing (a textarea kept to one line: no wrap, no scrollbar) */
.ds-sender .ds-yoke-input{ display:block; width:100%; min-width:0; height:52px; flex:0 0 52px; margin:0; padding:14px 0; border:0; border-radius:0; outline:0; background:transparent;
  resize:none; overflow:hidden; white-space:pre; overflow-wrap:normal; font:400 16.5px/24px var(--ff); color:var(--navy); }
.ds-sender .ds-yoke-input::placeholder{ color:var(--meta); opacity:1; }
.ds-sender .ds-yoke-input:focus-visible{ outline:none; }
.ds-sender .ds-yoke-foot{ display:flex; align-items:center; justify-content:space-between; height:34px; margin-top:auto; }
.ds-sender .ds-yoke-left{ display:flex; align-items:center; gap:8px; }
.ds-sender .ds-chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--app-line); background:var(--ground-2);
  font:700 12.5px/1 var(--ff); color:var(--navy); white-space:nowrap; transition:color var(--t-hover), border-color var(--t-hover); }
.ds-sender .ds-chip[aria-expanded="true"]{ border-color:var(--ctl-line); }
@media (hover:hover){ .ds-sender .ds-chip:hover{ border-color:var(--ctl-line); } }
.ds-sender .ds-tplcaret{ font-size:9px; }
/* the send arrow: springs in (scale .4 -> 1), and leaves by fading at full size over 120ms */
.ds-sender .ds-send{ width:34px; height:34px; flex:0 0 34px; margin-left:auto; padding:0; border:0; border-radius:50%; background:var(--orange); color:var(--navy);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:none; visibility:hidden;
  transition:opacity 120ms linear, visibility 0s linear 120ms, background-color var(--t-hover); }
.ds-sender .ds-send.ds-go{ opacity:1; visibility:visible; transition:opacity 140ms linear, background-color var(--t-hover); }
.ds-sender .ds-send.ds-go.ds-spring{ animation:ds-sender-spring var(--t-spring) var(--ease-spring) both; }
.ds-sender .ds-send.ds-pressed{ background:var(--orange-hover); }
@media (hover:hover){ .ds-sender .ds-send:hover{ background:var(--orange-hover); } }
.ds-sender .ds-send svg{ stroke-width:2.4; }

/* the suggestion bar overlays the space under the yoke: shown by visibility, so nothing moves */
.ds-sender .ds-suggest{ position:absolute; left:-20px; right:-20px; top:100%; z-index:5; height:34px; display:flex; align-items:center; gap:8px; padding:0 12px;
  border:1px solid rgba(11,29,58,.2); border-radius:8px; background:var(--suggest-bg); box-shadow:0 1px 2px rgba(11,29,58,.06);
  font:400 13px/1 var(--ff); color:var(--navy); text-align:left; visibility:hidden; transition:background-color var(--t-hover), border-color var(--t-hover); }
.ds-sender .ds-suggest.ds-show{ visibility:visible; }
@media (hover:hover){ .ds-sender .ds-suggest:hover{ border-color:rgba(11,29,58,.4); } }
.ds-sender .ds-suggest-key{ font-weight:700; }
.ds-sender .ds-suggest-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ds-sender .ds-suggest-fill{ flex:1 1 auto; }
/* the product prints "Tab" as plain text, not a keycap */
.ds-sender .ds-suggest-tab{ flex:0 0 auto; font:700 11px/1 var(--ff); color:var(--meta); }

/* ideas: three reserved rows */
.ds-sender .ds-ideas{ margin-top:12px; }
.ds-sender .ds-ideas-label{ margin:0 0 6px 4px; font:400 11.5px/1.45 var(--ff); color:var(--meta); }
.ds-sender .ds-ideas-list{ list-style:none; margin:0; padding:0; min-height:calc(3 * var(--idea-row)); }
.ds-sender .ds-ideas-list > li{ margin:0; padding:0; }
.ds-sender .ds-idea{ display:flex; align-items:center; gap:14px; width:100%; min-height:var(--idea-row); padding:0 4px; margin:0; border:0; border-radius:var(--r-control); background:transparent;
  text-align:left; font:700 14px/1.35 var(--ff); color:var(--navy); transition:color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-idea:hover{ color:var(--teal-ink); } }
.ds-sender .ds-idea-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; border:1px solid var(--app-line); background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; transition:border-color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-idea:hover .ds-idea-ic{ border-color:var(--ctl-line); } }
.ds-sender .ds-idea-ic.ds-warn{ color:var(--error); }
.ds-sender .ds-idea-txt{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Templates ▾ */
.ds-sender .ds-tpl-wrap{ position:relative; }
.ds-sender .ds-tpl-pop{ position:absolute; left:0; top:calc(100% + 6px); z-index:20; width:281px; padding:6px; background:#fff; border:1px solid var(--app-line); border-radius:10px; box-shadow:0 6px 20px rgba(11,29,58,.14); }
.ds-sender .ds-tpl-item{ display:block; width:100%; min-height:44px; padding:9px 11px; margin:0; border:0; border-radius:8px; background:transparent; text-align:left;
  font:700 13px/1.3 var(--ff); color:var(--navy); transition:background-color var(--t-hover); }
.ds-sender .ds-tpl-item:focus-visible{ background:var(--ground-2); outline-offset:-2px; }
@media (hover:hover){ .ds-sender .ds-tpl-item:hover{ background:var(--ground-2); outline-offset:-2px; } }
.ds-sender .ds-tpl-item small{ display:block; margin-top:2px; font:400 11.5px/1.2 var(--ff); color:var(--meta); }
.ds-sender .ds-tpl-new{ margin-top:4px; border-top:1px solid var(--line-2); border-radius:0 0 8px 8px; }

/* ---------- page shells (Documents, Reports) ---------- */
.ds-sender .ds-scroll{ flex:1 1 auto; min-height:0; overflow:auto; position:relative; }
.ds-sender .ds-page-inner{ max-width:1180px; margin:0 auto; padding:6px 28px 36px; }
.ds-sender .ds-h1{ margin:14px 0 4px; font:900 26px/1.15 var(--ff); letter-spacing:-.3px; color:var(--navy); }
.ds-sender .ds-card{ background:#fff; border:1px solid var(--app-line); border-radius:var(--r-panel); box-shadow:0 1px 2px rgba(11,29,58,.04); }
.ds-sender .ds-tablewrap{ overflow-x:auto; }
.ds-sender .ds-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ds-sender .ds-table th{ padding:12px 18px; text-align:left; white-space:nowrap; font:700 11px/1 var(--ff); letter-spacing:.08em; text-transform:uppercase; color:var(--meta); border-bottom:1px solid var(--app-line); }
.ds-sender .ds-table td{ padding:15px 18px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.ds-sender .ds-table tbody tr:last-child td{ border-bottom:0; }
.ds-sender .ds-table tr.ds-link{ cursor:pointer; }
.ds-sender .ds-table tr.ds-link td{ transition:background-color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-table tr.ds-link:hover td{ background:var(--surface-2); } }
.ds-sender .ds-table tr.ds-link:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:-2px; }
.ds-sender th.ds-num, .ds-sender td.ds-num{ text-align:right; font-variant-numeric:tabular-nums; }
.ds-sender .ds-nowrap{ white-space:nowrap; }
.ds-sender .ds-muted{ color:var(--meta); }
.ds-sender .ds-caution{ color:#B45309; font-weight:700; }
.ds-sender .ds-strong{ font-weight:700; }
.ds-sender .ds-doc-title{ font-weight:700; }
.ds-sender .ds-sub-line{ margin-top:3px; font-size:12px; color:var(--meta); }
.ds-sender .ds-linkbtn{ display:inline; padding:0; margin:0; border:0; background:none; font:inherit; color:var(--navy); text-decoration:underline; text-underline-offset:2px; transition:color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-linkbtn:hover{ color:var(--teal-ink); } }

/* status chips (Sent / Viewed / Signed / Declined / Voided) */
.ds-sender .ds-chip-st{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--r-pill); font:700 11px/1 var(--ff); white-space:nowrap; }
.ds-sender .ds-chip-st i{ width:6px; height:6px; border-radius:50%; flex:0 0 6px; }
.ds-sender .ds-chip-st.ds-st-sent{ color:var(--st-sent-fg); background:var(--st-sent-bg); }
.ds-sender .ds-chip-st.ds-st-sent i{ background:var(--st-sent-dot); }
.ds-sender .ds-chip-st.ds-st-viewed{ color:var(--st-viewed-fg); background:var(--st-viewed-bg); }
.ds-sender .ds-chip-st.ds-st-viewed i{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--st-viewed-dot); }
.ds-sender .ds-chip-st.ds-st-signed{ color:var(--st-signed-fg); background:var(--st-signed-bg); }
.ds-sender .ds-chip-st.ds-st-signed i{ background:var(--st-signed-dot); }
.ds-sender .ds-chip-st.ds-st-declined{ color:var(--st-declined-fg); background:var(--st-declined-bg); }
.ds-sender .ds-chip-st.ds-st-declined i{ background:var(--st-declined-dot); }
.ds-sender .ds-chip-st.ds-st-voided{ color:var(--st-voided-fg); background:var(--st-voided-bg); }
.ds-sender .ds-chip-st.ds-st-voided i{ background:var(--st-voided-dot); }

/* Documents */
.ds-sender .ds-docs-count{ font-size:13px; color:var(--meta); }
.ds-sender .ds-docs-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0 16px; }
.ds-sender .ds-docs-search{ flex:1 1 260px; max-width:520px; height:38px; padding:0 14px; border:1px solid var(--app-line); border-radius:var(--r-control); background:#fff; font:400 14px var(--ff); color:var(--navy); transition:border-color var(--t-hover); }
.ds-sender .ds-docs-search::placeholder{ color:var(--meta); opacity:1; }
@media (hover:hover){ .ds-sender .ds-docs-search:hover{ border-color:var(--ctl-line); } }
.ds-sender .ds-docs-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.ds-sender .ds-pill{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:var(--r-pill); border:1px solid var(--app-line); background:#fff;
  font:700 12.5px/1 var(--ff); color:var(--navy); transition:background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-pill:hover:not(:disabled){ border-color:var(--ctl-line); } }
.ds-sender .ds-pill:disabled{ color:var(--meta); }
.ds-sender .ds-pill i{ width:7px; height:7px; border-radius:50%; background:var(--navy); }
.ds-sender .ds-pill-awaiting i{ background:var(--navy); }
.ds-sender .ds-pill-signed i{ background:var(--teal); }
.ds-sender .ds-pill-declined i{ background:var(--error); }
.ds-sender .ds-pill-voided i{ background:var(--meta); }
.ds-sender .ds-pill.ds-pill-on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ds-sender .ds-pill.ds-pill-on i{ box-shadow:0 0 0 1.5px #fff; }
.ds-sender .ds-docs-empty{ padding:28px 18px; color:var(--meta); }
.ds-sender .ds-wait-w{ display:none; }

/* Reports */
.ds-sender .ds-rep-hero{ margin-top:8px; padding:26px 32px 20px; border-radius:var(--r-widget); background:var(--navy); color:#fff; }
.ds-sender .ds-rep-kicker{ margin:0 0 20px; font:700 11.5px/1 var(--ff); letter-spacing:.16em; text-transform:uppercase; color:var(--navy-body); }
.ds-sender .ds-flow{ display:flex; align-items:stretch; gap:10px; }
.ds-sender .ds-flow-seg{ flex-basis:0; min-width:120px; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:14px 16px; border-radius:14px; }
.ds-sender .ds-flow-val{ font:900 30px/1 var(--ff); color:#fff; font-variant-numeric:tabular-nums; }
.ds-sender .ds-flow-lbl{ font:700 11px/1 var(--ff); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.ds-sender .ds-flow-joint{ flex:0 0 auto; min-width:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0 2px; }
.ds-sender .ds-flow-pct{ padding:4px 8px; border-radius:var(--r-pill); background:var(--orange); color:var(--navy); font:700 11px/1 var(--ff); font-variant-numeric:tabular-nums; }
.ds-sender .ds-flow-cap{ max-width:128px; font:400 10.5px/1.25 var(--ff); color:var(--navy-body); text-align:center; }
.ds-sender .ds-rep-states{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
/* the status pills are the status filter: buttons, colour-only hover, inert at zero */
.ds-sender .ds-rep-states .ds-st{ display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 14px; margin:0; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.18); background:transparent;
  font:700 13px/1 var(--ff); color:#fff; text-align:left; transition:border-color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-rep-states .ds-st:hover:not(:disabled){ border-color:rgba(255,255,255,.5); } }
.ds-sender .ds-rep-states .ds-st i{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--navy-meta); }
.ds-sender .ds-rep-states .ds-st-awaiting i{ background:#fff; }
.ds-sender .ds-rep-states .ds-st-declined i{ background:#F87171; }
.ds-sender .ds-rep-states .ds-zero{ color:var(--navy-meta); }
.ds-sender .ds-dim{ font-weight:400; color:var(--navy-body); }
.ds-sender .ds-rep-asof{ margin-top:14px; text-align:right; font-size:11.5px; color:var(--navy-meta); }
.ds-sender .ds-rep-grid{ display:grid; grid-template-columns:170px minmax(0, 1fr); gap:28px; margin-top:28px; }
.ds-sender .ds-rep-rail{ position:sticky; top:12px; align-self:start; display:flex; flex-direction:column; border-left:2px solid var(--app-line); }
.ds-sender .ds-rail-btn{ min-height:44px; margin-left:-2px; padding:0 14px; border:0; border-left:2px solid transparent; background:none; text-align:left; font:700 13px/1.2 var(--ff); color:var(--meta); transition:color var(--t-hover), border-color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-rail-btn:hover{ color:var(--navy); } }
.ds-sender .ds-rail-btn.ds-rail-on{ color:var(--navy); border-left-color:var(--navy); }
.ds-sender .ds-rep-sec{ padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--app-line); }
.ds-sender .ds-rep-sec:last-child{ border-bottom:0; }
.ds-sender .ds-rep-h{ margin:0 0 16px; font:900 24px/1.2 var(--ff); letter-spacing:-.2px; color:var(--navy); }
.ds-sender .ds-rep-hint{ font:400 14px/1.2 var(--ff); letter-spacing:0; color:var(--meta); }
.ds-sender .ds-rep-empty{ margin:0; color:var(--meta); }
.ds-sender .ds-rep-sec .ds-table td{ padding:12px 14px; }
.ds-sender .ds-rep-sec .ds-table th{ padding:10px 14px; }
.ds-sender .ds-doc{ min-width:220px; }
.ds-sender .ds-flag{ display:block; font:700 11.5px/1.5 var(--ff); color:var(--meta); }
.ds-sender .ds-flag-opened_not_signed{ color:var(--navy); }
.ds-sender .ds-flag-reminded_twice, .ds-sender .ds-flag-stuck_later_signer{ color:var(--error); }
.ds-sender .ds-reasons{ margin-top:22px; }
.ds-sender .ds-reasons-lbl{ margin:0 0 8px; font:700 11px/1 var(--ff); letter-spacing:.08em; text-transform:uppercase; color:var(--meta); }
.ds-sender .ds-reason{ padding:10px 0; border-top:1px solid var(--line-2); }
.ds-sender .ds-reason-q{ font-size:14px; color:var(--navy); }

/* ---------- Prepare: form (with its actions beneath) | the paper; the dock full width under both ---------- */
/* the form takes 460px but never squeezes the paper under 560px (400px floor) */
.ds-sender .ds-prep{ flex:1 1 auto; min-height:0; display:grid;
  grid-template-columns:minmax(0, max(var(--form-min), min(var(--form-w), calc(100% - var(--paper-min) - 16px)))) minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr) auto; column-gap:16px; padding:0 20px 10px; }
.ds-sender .ds-form, .ds-sender .ds-docpane{ min-height:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--app-line); border-radius:var(--r-panel); box-shadow:0 1px 2px rgba(11,29,58,.04); overflow:hidden; }
.ds-sender .ds-form{ grid-column:1; grid-row:1; border-bottom:0; border-radius:var(--r-panel) var(--r-panel) 0 0; box-shadow:none; }
.ds-sender .ds-docpane{ grid-column:2; grid-row:1 / span 2; }
.ds-sender .ds-form-actions{ grid-column:1; grid-row:2; display:flex; gap:10px; padding:12px 20px; background:#fff; border:1px solid var(--app-line); border-radius:0 0 var(--r-panel) var(--r-panel); }
.ds-sender .ds-form-head{ flex:0 0 40px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#fff; border-bottom:1px solid var(--app-line); }
.ds-sender .ds-form-h{ margin:0; font:700 12px/1 var(--ff); letter-spacing:.1em; color:var(--meta); }
/* the counter changes colour only (never weight, so never width) */
.ds-sender .ds-count{ font:700 12.5px/1 var(--ff); color:var(--meta); transition:color var(--t-state); }
.ds-sender .ds-count.ds-count-done{ color:var(--navy); }
/* the note's slot is reserved only where a note can arrive (a recall for this person, or a carried copy) */
.ds-sender .ds-recall-slot{ flex:0 0 0; height:0; padding:0 20px; overflow:hidden; background:#fff; }
.ds-sender .ds-recall-slot.ds-slot-open{ flex-basis:58px; height:58px; padding-top:8px; }
.ds-sender .ds-recall{ padding:6px 10px; border-radius:8px; border:1px solid var(--recall-line); background:var(--recall-tint);
  font-size:12.5px; line-height:1.4; color:var(--recall); opacity:0; transition:opacity var(--t-fade); }
.ds-sender .ds-recall.ds-in{ opacity:1; }
.ds-sender .ds-recall-clear{ padding:0; margin:0 0 0 2px; border:0; background:none; font:700 12.5px/1.4 var(--ff); color:var(--navy); text-decoration:underline; text-underline-offset:2px; transition:color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-recall-clear:hover{ color:var(--teal-ink); } }
.ds-sender .ds-form-body{ flex:1 1 auto; min-height:0; overflow:auto; position:relative; padding:6px 20px 12px; overscroll-behavior:contain; }
.ds-sender .ds-field{ margin:0 0 12px; }
.ds-sender .ds-label{ display:block; margin:0 0 6px; font:700 13px/1.3 var(--ff); color:var(--navy); }
.ds-sender .ds-req{ margin-left:2px; color:var(--error); }
.ds-sender .ds-input{ display:block; width:100%; height:36px; margin:0; padding:0 12px; border:1px solid var(--app-line); border-radius:var(--r-control); background:#fff;
  font:400 14px/1 var(--ff); color:var(--navy); transition:border-color 240ms linear, background-color 240ms linear; }
.ds-sender .ds-input::placeholder{ color:var(--meta); opacity:1; }
@media (hover:hover){ .ds-sender .ds-input:hover{ border-color:var(--ctl-line); } }
.ds-sender .ds-input:focus{ outline:none; border-color:var(--navy); }
.ds-sender .ds-input:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:1px; }
.ds-sender .ds-input.ds-recalled{ background:var(--recall-tint); border-color:var(--recall-line); }
/* a landing: teal for 600ms, then the 240ms fade the base transition gives */
.ds-sender .ds-field.ds-flash .ds-input{ border-color:var(--teal); background-color:var(--teal-tint); transition:none; }
.ds-sender .ds-input.ds-invalid{ border-color:var(--error); }
.ds-sender .ds-ferr{ font-size:12px; line-height:1.4; color:var(--error); }
.ds-sender .ds-ferr:empty{ display:none; }
.ds-sender .ds-divider{ height:1px; margin:16px 0; background:var(--app-line); }
.ds-sender .ds-copyhead{ display:flex; align-items:center; gap:12px; margin:4px 0 14px; font:700 12px/1 var(--ff); letter-spacing:.08em; color:var(--meta); }
.ds-sender .ds-copyhead::after{ content:''; flex:1 1 auto; height:1px; background:var(--app-line); }
.ds-sender .ds-copy{ margin:0 0 6px; }
.ds-sender .ds-copy-hdr{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; font:700 12px/1 var(--ff); color:var(--meta); }
.ds-sender .ds-copy-rm{ width:28px; height:28px; padding:0; border:0; border-radius:6px; background:none; color:var(--meta); font-size:13px; transition:color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-copy-rm:hover{ color:var(--error); } }
.ds-sender .ds-addcopy{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border:1px dashed var(--ctl-line); border-radius:var(--r-pill); background:transparent;
  font:700 12.5px/1 var(--ff); color:var(--navy); transition:border-color var(--t-hover), color var(--t-hover); }
@media (hover:hover){ .ds-sender .ds-addcopy:hover{ border-color:var(--navy); } }

/* buttons */
.ds-sender .ds-btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border-radius:var(--r-control); border:1px solid var(--app-line); background:#fff;
  font:700 13px/1 var(--ff); color:var(--navy); white-space:nowrap; transition:background-color var(--t-state), border-color var(--t-state), color var(--t-state); }
@media (hover:hover){ .ds-sender .ds-btn:hover:not(:disabled){ border-color:var(--ctl-line); } }
.ds-sender .ds-btn:active:not(:disabled), .ds-sender .ds-btn.ds-pressed{ background:var(--ground-2); }
.ds-sender .ds-btn:disabled{ color:var(--meta); border-color:var(--line); }
.ds-sender .ds-btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
@media (hover:hover){ .ds-sender .ds-btn-primary:hover:not(:disabled):not([aria-disabled="true"]){ background:var(--navy-2); border-color:var(--navy-2); } }
.ds-sender .ds-btn-primary:active:not(:disabled), .ds-sender .ds-btn-primary.ds-pressed{ background:var(--navy-2); border-color:var(--navy-2); }
.ds-sender .ds-btn-primary:disabled, .ds-sender .ds-btn-primary[aria-disabled="true"]{ background:var(--meta); border-color:var(--meta); color:#fff; cursor:default; }
/* in flight: "Sending…" in --meta (the label swap holds the width) */
.ds-sender .ds-btn-primary.ds-busy:disabled{ background:var(--meta); border-color:var(--meta); }

/* the dock, full width under the panes: the assistant's one line (a reserved two-line slot, centred) over the bar */
.ds-sender .ds-dock{ flex:0 0 auto; padding:0 20px 14px; }
.ds-sender .ds-aline-slot{ height:46px; margin:0 0 6px; display:flex; align-items:flex-end; justify-content:center; min-width:0; }
.ds-sender .ds-aline{ display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:28px; padding:5px 12px 5px 8px; border-radius:14px; border:1px solid var(--aline-line); background:#fff; font-size:13px; line-height:1.3; color:var(--navy); overflow:hidden; }
.ds-sender .ds-aline i{ width:12px; height:12px; flex:0 0 12px; border-radius:50%; background:var(--navy); }
.ds-sender .ds-aline.ds-waiting i{ background:var(--teal); animation:ds-sender-pulse var(--t-think) ease-in-out infinite; }
.ds-sender .ds-aline-txt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ds-sender .ds-dock-bar{ position:relative; }
.ds-sender .ds-dock-input{ display:block; width:100%; height:40px; margin:0; padding:0 14px; border:1px solid var(--app-line); border-radius:var(--r-control); background:#fff; font:400 14px/1 var(--ff); color:var(--navy); transition:border-color var(--t-hover); }
.ds-sender .ds-dock-input::placeholder{ color:var(--meta); opacity:1; }
@media (hover:hover){ .ds-sender .ds-dock-input:hover:not(:disabled){ border-color:var(--ctl-line); } }
.ds-sender .ds-dock-input:focus{ outline:none; border-color:var(--navy); }
.ds-sender .ds-dock-input:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:1px; }
.ds-sender .ds-dock-input:disabled{ background:var(--surface-2); }

/* the document pane: the paper, stacked (paper.css styles B3's .ds-page; the placeholder page is styled here) */
.ds-sender .ds-docpane-head{ flex:0 0 50px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid var(--app-line); }
.ds-sender .ds-docpane-title{ font:700 14px/1 var(--ff); color:var(--navy); }
/* the zoom and page count are labels here (the demo has no zoom control) */
.ds-sender .ds-docpane-tools{ display:flex; align-items:center; gap:16px; flex:0 0 auto; font:400 12px/1 var(--ff); color:var(--meta); }
.ds-sender .ds-pagecount{ font-weight:700; color:var(--meta); }
.ds-sender .ds-docpane-body, .ds-sender .ds-review-body{ flex:1 1 auto; min-height:0; overflow:auto; position:relative; padding:10px 16px 24px; background:var(--surface-2); overscroll-behavior:contain; }
.ds-sender .ds-pagewrap{ max-width:840px; margin:0 auto 18px; }
.ds-sender .ds-pagecap{ margin:4px 0 8px; font:700 10.5px/1 var(--ff); letter-spacing:.08em; color:var(--meta); }
.ds-sender .ds-pagehold{ position:relative; width:100%; container-type:inline-size; }
.ds-sender .ds-page-fb{ position:relative; width:100%; aspect-ratio:595 / 842; background:#fff; box-shadow:var(--paper-edge); }
.ds-sender .ds-page-fb > svg{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
.ds-sender .ds-paper-num{ font:700 72px var(--ff); fill:var(--mute); }
.ds-sender .ds-sgpins{ position:absolute; inset:0; pointer-events:none; }
.ds-sender .ds-sgpin{ position:absolute; display:flex; align-items:center; justify-content:center; border:1.5px dashed rgba(11,29,58,.5); border-radius:3px; background:rgba(11,29,58,.06);
  color:var(--navy); font:700 11px/1 var(--ff); font-size:clamp(8px, 1.6cqi, 13px); white-space:nowrap; overflow:hidden; }

/* ---------- Review: one panel, the pages scroll inside it, the actions stay at its foot ---------- */
.ds-sender .ds-review-wrap{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 20px 10px; }
.ds-sender .ds-review-sub{ flex:0 0 auto; min-height:44px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; padding:0 2px 8px; font-size:13px; color:var(--meta); }
.ds-sender .ds-review-sub b{ font-weight:700; color:var(--navy); }
.ds-sender .ds-review-panel{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--app-line); border-radius:var(--r-panel); box-shadow:0 1px 2px rgba(11,29,58,.04); overflow:hidden; }
.ds-sender .ds-review-top{ flex:0 0 50px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid var(--app-line); }
.ds-sender .ds-review-head{ margin:0; min-width:0; font:700 14px/1.2 var(--ff); color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-sender .ds-review-loading{ display:flex; align-items:center; justify-content:center; min-height:100%; font-size:13px; color:var(--meta); }
.ds-sender .ds-review-foot{ flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:12px 16px; border-top:1px solid var(--app-line); }
.ds-sender .ds-review-actions{ display:flex; align-items:center; gap:10px; }
.ds-sender .ds-sendslot{ display:inline-block; width:172px; height:36px; flex:0 0 172px; }
.ds-sender .ds-sendsig{ width:172px; }
.ds-sender .ds-sendslot:not(.ds-ready) .ds-sendsig{ visibility:hidden; }
.ds-sender .ds-sendsig.ds-spring{ animation:ds-sender-spring var(--t-spring) var(--ease-spring) both; }

/* ---------- the yoke wraps on narrow screens: a reserved four-line box, the start of the sentence stays in view ---------- */
@media (max-width:899.98px){
  .ds-sender .ds-greeting{ font-size:30px; }
  .ds-sender .ds-yoke{ flex-basis:160px; height:160px; border-radius:20px; }
  .ds-sender .ds-yoke-input{ height:88px; flex:0 0 88px; padding:0; white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:hidden; overflow-y:auto; line-height:22px; }
}
@media (max-width:700px){
  .ds-sender .ds-home{ width:calc(100% - 28px); padding-bottom:24px; }
  .ds-sender .ds-greeting{ font-size:26px; }
}

/* ---------- narrower frames: the office's own width decides ---------- */
@container ds-sender (max-width:1060px){
  .ds-sender .ds-prep{ padding:0 16px 10px; column-gap:14px; }
  .ds-sender .ds-form-head, .ds-sender .ds-form-actions{ padding-left:16px; padding-right:16px; }
  .ds-sender .ds-form-body{ padding-left:16px; padding-right:16px; }
  .ds-sender .ds-recall-slot{ padding-left:16px; padding-right:16px; }
  .ds-sender .ds-recall{ font-size:12px; padding:5px 9px; }
  .ds-sender .ds-dock{ padding:0 16px 12px; }
  .ds-sender .ds-review-wrap{ padding:0 16px 10px; }
  .ds-sender .ds-rep-grid{ grid-template-columns:minmax(0, 1fr); }
  .ds-sender .ds-rep-rail{ display:none; }
}
/* below ~780 the office stacks: one scroller per screen, the head and note stick at its top, the actions at its foot,
   the dock under it; inputs are 16px (no iOS zoom) and 44px tall; ideas, crumbs and document titles wrap to two lines */
@container ds-sender (max-width:780px){
  .ds-sender .ds-strip{ padding:0 14px; }
  .ds-sender .ds-crumb-path{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.3; }
  .ds-sender .ds-suggest{ left:0; right:0; }
  .ds-sender .ds-idea{ font-size:13.5px; }
  .ds-sender .ds-idea-txt{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .ds-sender .ds-page-inner{ padding:4px 14px 28px; }
  .ds-sender .ds-input, .ds-sender .ds-dock-input, .ds-sender .ds-docs-search{ height:44px; font-size:16px; }
  .ds-sender .ds-docs-search{ flex-basis:100%; max-width:none; }
  .ds-sender .ds-btn{ height:44px; }
  .ds-sender .ds-sendslot{ height:44px; }

  /* Documents: two-line cards (title; recipient · status · waiting) */
  .ds-sender .ds-docs-table thead{ display:none; }
  .ds-sender .ds-docs-table, .ds-sender .ds-docs-table tbody{ display:block; }
  .ds-sender .ds-docs-table tr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 14px; border-bottom:1px solid var(--line-2); transition:background-color var(--t-hover); }
  .ds-sender .ds-docs-table tbody tr:last-child{ border-bottom:0; }
  @media (hover:hover){ .ds-sender .ds-docs-table tr.ds-link:hover{ background:var(--surface-2); } }
  @media (hover:hover){ .ds-sender .ds-docs-table tr.ds-link:hover td{ background:transparent; } }
  .ds-sender .ds-docs-table td{ display:block; padding:0; border:0; text-align:left; }
  .ds-sender .ds-docs-table td.ds-doc-title{ flex:1 1 100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .ds-sender .ds-docs-table td.ds-td-who{ font-size:13px; }
  .ds-sender .ds-docs-table td.ds-td-sent{ display:none; }
  .ds-sender .ds-docs-table .ds-wait-n{ display:none; }
  .ds-sender .ds-docs-table .ds-wait-w{ display:inline; font-size:12.5px; }

  .ds-sender .ds-rep-hero{ padding:20px 18px 16px; }
  .ds-sender .ds-flow{ flex-direction:column; gap:6px; }
  .ds-sender .ds-flow-seg{ flex:none !important; min-width:0; flex-direction:row; align-items:baseline; justify-content:space-between; }
  .ds-sender .ds-flow-joint{ flex-direction:row; justify-content:flex-start; min-width:0; padding:0 4px; gap:8px; }
  .ds-sender .ds-flow-cap{ max-width:none; text-align:left; }
  .ds-sender .ds-rep-asof{ text-align:left; }

  /* Prepare, stacked: form, then the paper; the actions stick to the foot of the scroller */
  .ds-sender .ds-prep{ display:flex; flex-direction:column; gap:12px; padding:0 12px; overflow:auto; overscroll-behavior:contain; }
  /* a field reached by Tab (or scrolled to by the fill) lands clear of the sticky head, the recall note and the actions */
  .ds-sender .ds-prep{ scroll-padding:128px 0 76px; }
  .ds-sender .ds-form{ order:1; flex:none; overflow:visible; border-bottom:1px solid var(--app-line); border-radius:var(--r-panel); }
  .ds-sender .ds-docpane{ order:2; flex:none; overflow:visible; }
  .ds-sender .ds-form-actions{ order:3; position:sticky; bottom:0; z-index:4; flex:none; margin:0 -12px; padding:10px 12px; border-radius:0; border-left:0; border-right:0; border-bottom:0; }
  .ds-sender .ds-form-actions .ds-btn{ flex:1 1 0; }
  .ds-sender .ds-form-body, .ds-sender .ds-docpane-body{ flex:none; overflow:visible; }
  .ds-sender .ds-form-head{ position:sticky; top:0; z-index:3; border-radius:var(--r-panel) var(--r-panel) 0 0; }
  .ds-sender .ds-recall-slot{ padding-left:14px; padding-right:14px; }
  .ds-sender .ds-recall-slot.ds-slot-open{ position:sticky; top:40px; z-index:3; flex-basis:80px; height:80px; }
  .ds-sender .ds-docpane-tools .ds-zoom{ display:none; }
  .ds-sender .ds-dock{ padding:8px 12px 10px; border-top:1px solid var(--app-line); }
  .ds-sender .ds-aline-slot{ justify-content:flex-start; }

  /* Review, narrow: the panel keeps its height, the pages scroll inside it, Send takes its own full-width row */
  .ds-sender .ds-review-wrap{ padding:0 12px 8px; }
  .ds-sender .ds-review-top .ds-zoom{ display:none; }
  .ds-sender .ds-review-head{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:13px; }
  .ds-sender .ds-review-body{ padding:8px 10px 16px; }
  .ds-sender .ds-review-foot{ padding:10px 12px; }
  .ds-sender .ds-review-actions{ flex-wrap:wrap; width:100%; gap:8px; }
  .ds-sender .ds-review-actions .ds-sendslot{ flex:1 1 100%; width:100%; }
  .ds-sender .ds-review-actions .ds-sendsig{ width:100%; }
  .ds-sender .ds-review-actions > .ds-btn{ flex:1 1 0; }
}
@container ds-sender (max-width:480px){
  .ds-sender .ds-strip-user{ display:none; }
  .ds-sender .ds-yoke-left{ gap:6px; }
}