/* /sign demo: paper (the document pages, printed values, ink, the certificate) + the templates scene.
   Motion is opacity / transform only; hover moves colour and border only. Tokens: tokens.css. */

/* ---------- a page: 595×842 held at 1:1.414 before the art arrives (the caller gives it a width) ---------- */
.ds-page{ position:relative; width:100%; aspect-ratio:595/842; background:#fff; box-shadow:var(--paper-edge); border-radius:2px; overflow:hidden; }
.ds-page-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ds-print text{ white-space:pre; }
.ds-val{ transition:fill var(--t-state) var(--ease-std); }
.ds-val.ds-flash{ fill:var(--teal); }
.ds-caret{ animation:ds-caret 1.06s steps(1,end) infinite; }
@keyframes ds-caret{ 0%{ opacity:1; } 50%{ opacity:0; } }
.ds-ink{ opacity:0; transition:opacity var(--t-fade) var(--ease-out); }
.ds-ink.ds-in{ opacity:1; }
.ds-ink-stroke{ stroke:var(--sig-ink); }
.ds-ink-typed{ fill:var(--sig-ink); }

/* the Signing Certificate: audit rows appear 120ms apart the first time */
.ds-cert-row{ opacity:0; transition:opacity var(--t-fade) var(--ease-out); }
.ds-cert-row.ds-in{ opacity:1; }

/* ---------- template-editor pins (sized to the page: 1cqw = 1% of its width) ---------- */
.ds-pins{ position:absolute; inset:0; pointer-events:none; }
.ds-pins .ds-pin{ position:absolute; box-sizing:border-box; opacity:0; transition:opacity 120ms var(--ease-out); font-family:var(--ff); font-weight:700; line-height:1; white-space:nowrap; }
.ds-pins .ds-pin.ds-in{ opacity:1; }
.ds-pin-field{ display:flex; align-items:center; min-height:1.35em; padding:0 .5em; background:var(--pin-fill); border-bottom:2px solid var(--pin-edge); border-radius:6px 6px 0 0; color:var(--pin-label); font-size:clamp(9px,1.75cqw,12px); overflow:hidden; text-overflow:ellipsis; }
.ds-pin-label{ overflow:hidden; text-overflow:ellipsis; }
.ds-pins .ds-pin-sig,.ds-pins .ds-pin-date,.ds-pins .ds-pin-name,.ds-pins .ds-pin-check,.ds-pins .ds-pin-text{ pointer-events:auto; cursor:grab; touch-action:none; border:1.5px solid var(--signer-1); border-radius:6px; font-size:clamp(9px,1.6cqw,12px); transition:opacity 120ms var(--ease-out), box-shadow var(--t-state), border-color var(--t-hover); }
.ds-pin-sig{ background:rgba(11,29,58,.08); }
.ds-pin-date,.ds-pin-name{ background:rgba(11,29,58,.04); }
.ds-pins .ds-pin-check{ border-radius:2px; background:rgba(11,29,58,.1); }
.ds-pins .ds-pin-text{ border-color:rgba(11,29,58,.45); border-bottom:2px solid var(--signer-1); border-radius:6px 6px 0 0; background:rgba(11,29,58,.04); }
.ds-pin-tab{ position:absolute; left:-1.5px; bottom:100%; padding:.28em .55em .22em; border-radius:4px 4px 0 0; background:var(--signer-1); color:#fff; }
.ds-pin-date .ds-pin-tab{ background:#fff; color:var(--signer-1); box-shadow:inset 0 0 0 1.5px var(--signer-1); }
.ds-pin-line{ position:absolute; left:6%; right:6%; top:50%; height:1px; background:var(--signer-1); opacity:.55; }
.ds-pins .ds-pin.is-lifted{ cursor:grabbing; box-shadow:0 0 0 2px var(--navy); }
.ds-pins .ds-pin.dt-travel{ transition:transform var(--t-object) var(--ease-out), opacity 120ms var(--ease-out), box-shadow var(--t-state); }
.ds-guide{ position:absolute; background:var(--guide); pointer-events:none; z-index:2; }
.ds-guide.h{ left:0; right:0; height:1px; margin-top:-.5px; }
.ds-guide.v{ top:0; bottom:0; width:1px; margin-left:-.5px; }
.ds-guide[hidden]{ display:none; }

/* ---------- the templates scene (a product surface on its own light canvas) ---------- */
#ds-templates .dt-scene{ position:relative; display:flex; flex-direction:column; height:100%; min-height:560px; background:var(--app-canvas); color:var(--navy); font-family:var(--ff); font-size:var(--fs-ui); }
#ds-templates .dt-stripwrap{ flex:0 0 auto; height:auto; overflow:visible; }
#ds-templates .dt-body{ position:relative; flex:1 1 auto; min-height:0; overflow:auto; }
#ds-templates .dt-stage[hidden]{ display:none; }
#ds-templates .dt-stage{ animation:dt-in var(--t-fade) var(--ease-out); }
@keyframes dt-in{ from{ opacity:0; } }
#ds-templates .dt-h{ margin:0; font-size:17px; font-weight:700; color:var(--navy); }
#ds-templates .dt-h:focus{ outline:none; }
#ds-templates .dt-sub{ margin:0 0 8px; font-size:13px; font-weight:700; color:var(--navy); }
#ds-templates .dt-btn{ min-height:44px; padding:0 18px; border-radius:var(--r-control); font-weight:700; font-size:13.5px; border:1px solid transparent; transition:background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover); }
#ds-templates .dt-primary{ background:var(--navy); color:#fff; }
@media (hover:hover){ #ds-templates .dt-primary:hover{ background:var(--navy-2); } }
#ds-templates .dt-ghost{ background:#fff; color:var(--navy); border-color:var(--line); }
@media (hover:hover){ #ds-templates .dt-ghost:hover{ border-color:var(--ctl-line); } }
#ds-templates .ds-pressed{ background:var(--navy-2); }

/* library */
#ds-templates .dt-lib{ padding:24px 28px 28px; }
#ds-templates .dt-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px 24px 24px; box-shadow:var(--sh-raised); }
#ds-templates .dt-lib-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
#ds-templates .dt-lib-title{ display:flex; align-items:center; gap:10px; }
#ds-templates .dt-count{ font-size:12.5px; font-weight:700; color:var(--meta); background:var(--ground-2); border:1px solid var(--line); padding:2px 9px; border-radius:var(--r-pill); }
#ds-templates .dt-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#ds-templates .dt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--r-small); background:#fff; }
#ds-templates .dt-row-main{ display:grid; gap:2px; min-width:0; }
#ds-templates .dt-row-name{ font-size:14.5px; color:var(--navy); }
#ds-templates .dt-row-meta{ font-size:12.5px; color:var(--meta); }
#ds-templates .dt-active{ flex:none; font-size:11px; font-weight:700; color:var(--teal-ink); background:var(--teal-tint); border:1px solid var(--teal-tint-line); padding:2px 9px; border-radius:var(--r-pill); }

/* upload modal */
#ds-templates .dt-scrim{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(11,29,58,.55); animation:dt-in var(--t-fade) var(--ease-out); }
#ds-templates .dt-scrim[hidden]{ display:none; }
#ds-templates .dt-modal{ width:min(520px,100%); background:#fff; border-radius:var(--r-chassis); padding:20px 24px 24px; box-shadow:var(--sh-float); }
#ds-templates .dt-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#ds-templates .dt-modal-h{ margin:0; font-size:16px; font-weight:700; }
#ds-templates .dt-x{ width:44px; height:44px; margin:-10px -12px -10px 0; border:0; background:none; color:var(--meta); font-size:22px; border-radius:var(--r-control); transition:color var(--t-hover); }
@media (hover:hover){ #ds-templates .dt-x:hover{ color:var(--navy); } }
#ds-templates .dt-x:disabled{ color:var(--mute); cursor:default; }
#ds-templates .dt-zone{ position:relative; display:grid; justify-items:center; gap:4px; padding:26px 18px 20px; border:1.5px dashed var(--mute); border-radius:12px; background:var(--surface-2); text-align:center; cursor:pointer; transition:border-color var(--t-state), background-color var(--t-state); }
#ds-templates .dt-zone.is-over{ border-color:var(--teal); }
@media (hover:hover){ #ds-templates .dt-zone:hover{ border-color:var(--teal); } }
#ds-templates .dt-zone.is-over{ background:var(--teal-tint); }
#ds-templates .dt-zone.is-busy{ cursor:default; }
#ds-templates .dt-zone .dt-ico{ width:30px; height:30px; color:var(--navy); margin-bottom:6px; }
#ds-templates .dt-zone-t{ font-size:15px; font-weight:700; }
#ds-templates .dt-zone-s{ font-size:12.5px; color:var(--meta); }
#ds-templates .dt-slot{ display:grid; margin-top:14px; min-height:48px; }
#ds-templates .dt-slot > *{ grid-area:1/1; justify-self:center; align-self:center; }
#ds-templates .dt-sample{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-control); color:var(--navy); font-weight:700; font-size:13.5px; box-shadow:0 1px 2px rgba(11,29,58,.05); transition:opacity 240ms var(--ease-out), transform 360ms var(--ease-out), border-color var(--t-hover); }
@media (hover:hover){ #ds-templates .dt-sample:hover{ border-color:var(--ctl-line); } }
#ds-templates .dt-sample .dt-ico{ width:18px; height:18px; color:var(--meta); }
#ds-templates .dt-sample-meta{ font-weight:400; color:var(--meta); font-size:12.5px; }
#ds-templates .dt-sample.dt-waiting{ opacity:0; transform:translateY(12px); }
#ds-templates .dt-zone.is-busy .dt-sample{ opacity:0; pointer-events:none; }
#ds-templates .dt-status{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--navy); opacity:0; pointer-events:none; transition:opacity var(--t-fade); }
#ds-templates .dt-zone.is-busy .dt-status{ opacity:1; }
#ds-templates .dt-spin{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--navy); animation:dt-spin .8s linear infinite; }
@keyframes dt-spin{ to{ transform:rotate(360deg); } }
#ds-templates .dt-note{ min-height:18px; margin-top:6px; font-size:12.5px; color:var(--meta); }

/* field editor: head + actions on one row, then the signer card and field list beside a page sized to the pane */
#ds-templates .dt-editor{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr); grid-template-areas:"head act" "cols cols"; height:100%; padding:14px 24px 0; }
#ds-templates .dt-ed-head{ grid-area:head; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; align-self:stretch; padding:12px 0; border-bottom:1px solid var(--line); }
#ds-templates .dt-ed-name{ font-size:13px; color:var(--meta); }
#ds-templates .dt-actions{ grid-area:act; display:flex; align-items:center; gap:10px; padding:4px 0; border-bottom:1px solid var(--line); }
#ds-templates .dt-cols{ grid-area:cols; display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; min-height:0; padding-top:14px; }
#ds-templates .dt-side{ min-height:0; overflow:auto; padding:0 2px 16px; }
#ds-templates .dt-signers{ margin:0 0 18px; }
#ds-templates .dt-fields{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
#ds-templates .dt-field{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; min-height:36px; padding:0 10px 0 12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-small); opacity:0; transition:opacity 120ms var(--ease-out); }
#ds-templates .dt-field.ds-in{ opacity:1; }
#ds-templates .dt-f-label{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ds-templates .dt-f-type{ font-size:12px; color:var(--meta); }
#ds-templates .dt-f-chip{ font-size:11px; font-weight:700; color:var(--navy); background:#EEF1F6; padding:2px 8px; border-radius:var(--r-pill); }
#ds-templates .dt-signer{ padding:12px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--signer-1); border-radius:var(--r-small); }
#ds-templates .dt-signer-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
#ds-templates .dt-badge{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--signer-1); color:#fff; font-size:11px; font-weight:700; }
#ds-templates .dt-signer-name{ font-weight:700; font-size:13.5px; }
#ds-templates .dt-chips{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; }
#ds-templates .dt-chip{ min-height:44px; padding:0 14px; border-radius:var(--r-control); font-weight:700; font-size:13px; text-align:left; touch-action:none; background:#fff; color:var(--signer-1); border:1.5px solid var(--signer-1); transition:background-color var(--t-hover), border-color var(--t-hover); }
#ds-templates .dt-chip.ds-pressed{ background:var(--ground-2); }
@media (hover:hover){ #ds-templates .dt-chip:hover{ background:var(--ground-2); } }
#ds-templates .dt-chip-sig{ background:var(--signer-1); color:#fff; }
#ds-templates .dt-chip-sig.ds-pressed{ background:var(--navy-2); }
@media (hover:hover){ #ds-templates .dt-chip-sig:hover{ background:var(--navy-2); } }
#ds-templates .dt-state{ justify-self:start; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); background:var(--ground-2); color:var(--meta); border:1px solid var(--line); }
#ds-templates .dt-state.is-placed{ background:#EEF1F6; color:var(--navy); border-color:#D5DCE7; }
/* the page fits the pane's height (the whole page, signature line included) but never drops below a readable width */
#ds-templates .dt-doc{ min-height:0; overflow:auto; padding:18px; background:var(--ground-2); border-radius:var(--r-small); container-type:size; }
#ds-templates .dt-doc .ds-page{ width:clamp(min(440px,100%), calc((100cqh - 36px) * 595 / 842), min(620px,100%)); margin:0 auto; container-type:inline-size; }
#ds-templates .dt-approve{ opacity:0; pointer-events:none; transition:opacity var(--t-state) var(--ease-out), background-color var(--t-hover); }
#ds-templates .dt-approve.ds-in{ opacity:1; pointer-events:auto; }

@media (max-width:899px){
  #ds-templates .dt-scene{ min-height:0; height:auto; }
  #ds-templates .dt-body{ overflow:visible; }
  #ds-templates .dt-lib{ padding:16px; }
  #ds-templates .dt-card{ padding:16px; }
  #ds-templates .dt-editor{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:"head" "cols" "act"; height:auto; padding:8px 16px 0; }
  #ds-templates .dt-cols{ grid-template-columns:minmax(0,1fr); gap:16px; }
  /* one pane: the signer's pieces, then the page, then what the assistant found */
  #ds-templates .dt-side{ display:contents; }
  #ds-templates .dt-signers{ order:1; margin:0; }
  #ds-templates .dt-doc{ order:2; padding:12px 8px; container-type:normal; }
  #ds-templates .dt-fieldset{ order:3; }
  #ds-templates .dt-doc .ds-page{ width:100%; }
  #ds-templates .dt-actions{ position:sticky; bottom:0; z-index:3; padding:12px 0; border-bottom:0; border-top:1px solid var(--line); background:var(--app-canvas); }
  #ds-templates .dt-approve:not(.ds-in){ display:none; }
}