/* YDO Sign demo: the signer's phone + the office document page (B4). Tokens from tokens.css.
   Geometry is the product's (r4 signing page at 390: 66px band, 370-wide pages, 88px bar; r6 email shell; r7 document
   page), recoloured to Concept 15: overlays navy, never indigo. Hover and focus move colour/border only; the only
   motion is opacity/transform (notification slide, sheet rise, timeline draw, screen fade). Hover colours apply only
   where there is a real pointer (no sticky hover on touch). */

/* ============ the phone: it fills the device B1 draws (402 x 874, scaled; edge to edge on a phone) ============ */
.ds-ph{position:relative;width:100%;height:100%;overflow:hidden;background:var(--sign-canvas);color:var(--navy);
  font-family:var(--ff);font-size:14px;line-height:1.45;-webkit-tap-highlight-color:transparent;isolation:isolate;text-align:left}
.ds-ph [hidden],.ds-lg [hidden]{display:none!important}
.ds-ph button{font-family:var(--ff);cursor:pointer;margin:0}
.ds-ph button:focus-visible,.ds-ph textarea:focus-visible,.ds-ph input:focus-visible,.ds-ph [tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* 44px targets at every phone scale: small controls carry an invisible hit area beyond their box. --ph-hit (director.js
   layout) is the extra device px a scaled-down phone needs so that area is still 44px ON SCREEN (#107); 0 at scale >= 0.815.
   The tabs keep the fixed pad: a taller one would reach the name field under them. */
.ds-ph-primary,.ds-ph-decline,.ds-ph-tab,.ds-ph-link,.ds-ph-btn,.ds-ph-danger,.ds-ph-cta,.ds-ph-dl,.ds-ph-back,.ds-ph-att{position:relative}
.ds-ph-primary::before,.ds-ph-decline::before,.ds-ph-link::before,.ds-ph-btn::before,.ds-ph-danger::before,
.ds-ph-cta::before,.ds-ph-dl::before,.ds-ph-back::before{content:'';position:absolute;inset:calc(-6px - var(--ph-hit, 0px)) -3px}
.ds-ph-tab::before{content:'';position:absolute;inset:-6px -3px}

/* status bar + home indicator: the device chrome (.ds-ph-chrome), gone when the visitor's own phone is the device */
.ds-ph-status{position:absolute;top:0;left:0;right:0;height:54px;z-index:20;display:flex;align-items:center;padding-top:6px;color:#fff;pointer-events:none}
.ds-ph-half{flex:1;display:flex;align-items:center;justify-content:center}
.ds-ph-time{font-weight:700;font-size:16px;letter-spacing:.2px}
.ds-ph-island{flex:none;width:126px;height:37px;border-radius:24px;background:#000;margin-top:-4px}
.ds-ph[data-screen="mail"] .ds-ph-status,.ds-ph[data-screen="mailbox"] .ds-ph-status,.ds-ph[data-screen="pdf"] .ds-ph-status{color:#000;background:#fff}
.ds-ph[data-screen="sign"] .ds-ph-status,.ds-ph[data-screen="done"] .ds-ph-status,
.ds-ph[data-screen="declined"] .ds-ph-status,.ds-ph[data-screen="withdrawn"] .ds-ph-status{background:var(--navy)}
.ds-ph-home{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#000;z-index:21;pointer-events:none}
.ds-ph[data-screen="lock"] .ds-ph-home{background:#fff}

/* screens */
.ds-ph-view{position:absolute;inset:0}
.ds-ph-scr{position:absolute;left:0;right:0;top:54px;bottom:0;display:flex;flex-direction:column}
.ds-ph-scr.ds-ph-enter{opacity:0}
.ds-ph-scr.ds-ph-enter.ds-ph-on{opacity:1;transition:opacity var(--t-fade) var(--ease-std)}

/* lock screen: the date and time, then the notification stack, newest first */
.ds-ph-lock{top:0;background:var(--navy-2);color:#fff;align-items:stretch;overflow:auto}
.ds-ph-lhead{flex:none;text-align:center;padding-top:84px}
.ds-ph-ldate{font-weight:700;font-size:16px;color:rgba(255,255,255,.82)}
.ds-ph-ltime{font-weight:400;font-size:84px;line-height:1.05;letter-spacing:-1px}
.ds-ph-stack{flex:none;display:flex;flex-direction:column;gap:8px;margin:72px 12px 24px}
.ds-ph-notif,.ds-ph-banner{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;border-radius:20px;padding:12px 14px;min-height:64px;font-family:var(--ff);transition:background-color var(--t-hover)}
.ds-ph-notif{position:relative;width:100%;background:rgba(255,255,255,.14);color:#fff}
.ds-ph-banner{position:absolute;left:12px;right:12px;top:58px;z-index:25;background:var(--surface-2);color:var(--navy);box-shadow:var(--sh-float)}
.ds-ph-notif.ds-ph-arrive,.ds-ph-banner.ds-ph-arrive{opacity:0;transform:translateY(-16px)}
.ds-ph-notif.ds-ph-arrive.ds-ph-on,.ds-ph-banner.ds-ph-arrive.ds-ph-on{opacity:1;transform:none;transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.ds-ph-nicon{flex:none;width:38px;height:38px;border-radius:10px;background:var(--navy);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.ds-ph-nbody{flex:1;min-width:0;display:flex;flex-direction:column}
.ds-ph-nmeta{font-size:11.5px;opacity:.72}
.ds-ph-nfrom{font-weight:700;font-size:13.5px;margin-top:1px}
.ds-ph-nsubj{font-size:13px;line-height:1.4;opacity:.92;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* mail (iOS message view + the e-sign email shell, recoloured) */
.ds-ph-mail{background:#fff;overflow:auto;overscroll-behavior:contain;padding-bottom:34px;display:block}
.ds-ph-mhead{padding:2px 16px 12px;border-bottom:1px solid var(--line)}
.ds-ph-back{background:none;border:0;padding:0 4px;min-height:44px;color:var(--navy);font-weight:700;font-size:15px;transition:color var(--t-hover)}
.ds-ph-msubj{margin:0;font-size:18px;line-height:1.3;font-weight:700;color:var(--navy);outline:none}
.ds-ph-mfrom{display:flex;align-items:center;gap:10px;margin-top:10px}
.ds-ph-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.ds-ph-mwho{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--meta)}
.ds-ph-mwho b{color:var(--navy);font-size:14px}
.ds-ph-mwhen{flex:none;font-size:12.5px;color:var(--meta)}
.ds-ph-shell{background:var(--mail-canvas);padding:16px 10px 20px}
.ds-ph-mcard{background:#fff;border-radius:var(--r-small);overflow:hidden}
.ds-ph-mband{background:var(--navy);color:#fff;font-weight:700;font-size:19px;line-height:1.3;padding:22px 24px}
.ds-ph-mb{padding:26px 24px 4px;font-size:15px;line-height:1.6;color:var(--body)}
.ds-ph-mb p{margin:0 0 12px}
.ds-ph-mb strong{font-weight:700;color:var(--navy)}
.ds-ph-mhead2{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 12px}
.ds-ph-panel{background:var(--mail-canvas);border-radius:var(--r-control);padding:16px 18px;margin:20px 0}
.ds-ph-ptitle{font-size:16px;font-weight:700;color:var(--navy);line-height:1.4}
.ds-ph-pnote{font-size:13px;color:var(--meta);margin-top:6px}
.ds-ph-cta{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:var(--r-control);padding:0 34px;min-height:52px;font-weight:700;font-size:16px;margin:4px 0 18px;transition:background-color var(--t-hover),border-color var(--t-hover)}
.ds-ph-mnote{color:var(--meta);font-size:13.5px}
.ds-ph-mlink{font-size:14px;line-height:1.5}
.ds-ph-url{color:var(--navy);word-break:break-all;overflow-wrap:anywhere}
.ds-ph-mfoot{margin:0;padding:18px 24px 24px;color:var(--meta);font-size:12.5px}
.ds-ph-att{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-small);background:#fff;text-align:left;min-height:66px;transition:border-color var(--t-hover)}
.ds-ph-atticon{flex:none;width:34px;height:42px;border-radius:4px;background:#fff;border:1px solid var(--mute);color:var(--st-declined-fg);font-weight:700;font-size:10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.ds-ph-attname{font-size:13px;font-weight:700;color:var(--navy);overflow-wrap:anywhere;min-width:0}

/* the inbox: every mail that reached this phone, newest first */
.ds-ph-box{background:#fff}
.ds-ph-boxhead{padding:12px 16px 10px;border-bottom:1px solid var(--line)}
.ds-ph-boxtitle{margin:0;font-size:28px;font-weight:900;line-height:1.15;color:var(--navy);outline:none}
.ds-ph-rows{list-style:none;margin:0;padding:0}
.ds-ph-row{display:flex;flex-direction:column;gap:3px;width:100%;min-height:64px;text-align:left;border:0;border-bottom:1px solid var(--line-2);background:#fff;padding:12px 16px;color:var(--navy);transition:background-color var(--t-hover)}
.ds-ph-rowtop{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--meta)}
.ds-ph-rowtop b{color:var(--navy);font-size:14px}
.ds-ph-rowsubj{font-size:13.5px;line-height:1.4;color:var(--body)}

/* the signed PDF, opened on the phone: the signed page, then the certificate */
.ds-ph-pdf{background:var(--mail-canvas)}
.ds-ph-pdfbar{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;background:#fff;border-bottom:1px solid var(--line)}
.ds-ph-pdfname{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-ph-pdfdoc{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 10px 2px}
.ds-ph-leaf{position:relative;background:#fff;aspect-ratio:595/842;margin:0 0 12px;border-radius:2px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.ds-ph-leaf > *{position:absolute;inset:0;width:100%;height:100%}

/* the signing page */
.ds-ph-sign{background:var(--sign-canvas)}
.ds-ph-band{flex:none;height:var(--band-sign,66px);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;position:relative;z-index:3}
.ds-ph-bt{margin:0;font-weight:700;font-size:15px;line-height:1.25;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-ph-bp{flex:none;font-size:12px;opacity:.85;white-space:nowrap}
.ds-ph-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 10px 2px;outline:none}
.ds-ph-pg{position:relative;background:#fff;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.12);margin:0 0 14px;aspect-ratio:595/842;overflow:hidden}
.ds-ph-pg > :first-child:not(.ds-ph-sig):not(.ds-ph-chip):not(.ds-sr){position:absolute;inset:0;width:100%;height:100%}
.ds-ph-pg.is-ph{background:#fff}
.ds-ph-sig{position:absolute;z-index:5;border:2px dashed var(--sig-overlay);border-radius:5px;background:rgba(11,29,58,.05);color:var(--sig-overlay);
  font-weight:700;font-size:12px;line-height:1.1;white-space:nowrap;display:flex;align-items:center;justify-content:center;padding:0;overflow:visible;
  transition:background-color 120ms,border-color 120ms,color 120ms}
.ds-ph-sig::before{content:'';position:absolute;inset:calc(-9px - var(--ph-hit, 0px)) -4px}
.ds-ph-sig::after{content:'';position:absolute;inset:0;border-radius:3px;background:rgba(220,38,38,.22);opacity:0;pointer-events:none}
.ds-ph-sig.is-signed{background:transparent}
.ds-ph-sig.is-miss{border-color:var(--sig-miss);color:var(--sig-miss);background:rgba(220,38,38,.08)}
.ds-ph-sig.is-pulse::after{animation:dsPhPulse 900ms ease 2}
@keyframes dsPhPulse{50%{opacity:1}}
.ds-ph-sigink{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;color:var(--sig-ink);pointer-events:none}
.ds-ph-sigink svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ds-ph-typed{font-style:italic;font-weight:400;font-size:20px;line-height:1;padding-bottom:3px;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-ph-chip{position:absolute;z-index:5;border:1px dashed rgba(11,29,58,.45);border-radius:4px;background:rgba(11,29,58,.07);color:var(--navy);font-size:11px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums;transition:color 140ms,background-color 140ms}
.ds-ph-chip.is-pending{background:rgba(11,29,58,.035);border-style:dotted;border-color:rgba(11,29,58,.32);color:rgba(11,29,58,.62);font-style:italic}
.ds-ph-chip.is-printed{color:transparent}

/* the bar: one status line reserved, the button's width reserved — nothing moves between pending/error/ready/completing */
.ds-ph-bar{flex:none;height:var(--bar-h,88px);background:#fff;border-top:1px solid var(--app-line);padding:10px 12px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:3}
.ds-ph-st{font-size:12px;line-height:1.35;min-height:16.2px;height:16.2px;color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-ph-st.is-err{color:var(--st-declined-fg);font-weight:700}
.ds-ph-actions{display:flex;gap:10px;align-items:center}
.ds-ph-decline{flex:none;background:none;border:0;color:var(--meta);font-size:13px;text-decoration:underline;padding:0 4px;min-height:44px;transition:color var(--t-hover)}
.ds-ph-primary{flex:1;min-width:178px;min-height:44px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:var(--r-control);padding:0 14px;font-weight:700;font-size:15px;
  transition:background-color var(--t-state),color var(--t-state),border-color var(--t-state)}
.ds-ph-primary.is-pending{background:#fff;color:var(--navy);border-color:var(--navy)}
.ds-ph-primary[disabled]{opacity:.55;cursor:default}
.ds-ph-safe{flex:none;height:34px;background:#fff}

/* sheets: the signature sheet and the decline sheet (navy scrim; the card rises 240ms) */
.ds-ph-modal{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}
.ds-ph-scrim{position:absolute;inset:0;background:rgba(11,29,58,.55);opacity:0;transition:opacity 200ms var(--ease-std)}
.ds-ph-mc{position:relative;background:#fff;border-radius:var(--r-small);width:100%;max-width:480px;padding:20px;opacity:0;transform:translateY(16px);
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.ds-ph-modal.ds-ph-on .ds-ph-scrim,.ds-ph-modal.ds-ph-on .ds-ph-mc{opacity:1;transform:none}
.ds-ph-h2{margin:0 0 12px;font-size:17px;font-weight:700;color:var(--navy);outline:none}
.ds-ph-tabs{display:flex;gap:6px;margin-bottom:14px}
.ds-ph-tab{flex:1;min-height:44px;border:1px solid var(--app-line);background:var(--surface-2);border-radius:var(--r-control);font-weight:700;font-size:14px;color:var(--meta);transition:background-color var(--t-state),color var(--t-state),border-color var(--t-state)}
.ds-ph-tab.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* both tabs hold one box: switching Type and Draw never resizes or moves the sheet */
.ds-ph-pane{height:170px}
.ds-ph-in{width:100%;height:44px;padding:0 12px;font-size:16px;font-family:var(--ff);border:1px solid var(--ctl-line);border-radius:var(--r-control);color:var(--navy);background:#fff}
.ds-ph-typedprev{margin-top:12px;height:114px;border:1px dashed var(--mute);border-radius:var(--r-control);display:flex;align-items:center;justify-content:center;font-style:italic;font-weight:400;font-size:30px;color:var(--sig-ink);overflow:hidden;white-space:nowrap}
.ds-ph-pad{display:block;width:100%;height:170px;border:1px dashed var(--mute);border-radius:var(--r-control);touch-action:none;cursor:crosshair;color:var(--sig-ink);background:#fff}
.ds-ph-autopath{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ds-ph-reveal{transform:scaleX(0);transform-box:view-box;transform-origin:0 0}
.ds-ph-reveal.is-on{transform:scaleX(1);transition:transform 1400ms linear}
.ds-ph-reveal.is-now{transform:none}
.ds-ph-mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.ds-ph-mbtns{display:flex;align-items:center;gap:6px}
.ds-ph-link{background:none;border:0;color:var(--meta);text-decoration:underline;font-size:13px;min-height:44px;padding:0 8px;transition:color var(--t-hover)}
.ds-ph-btn{min-height:44px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:var(--r-control);padding:0 22px;font-weight:700;font-size:15px;transition:background-color var(--t-hover),border-color var(--t-hover),opacity var(--t-state)}
.ds-ph-btn.is-dim{opacity:.45}
/* the blank-signature line keeps its line whether or not it is showing */
.ds-ph-merr{min-height:18px;margin:8px 0 0;font-size:13px;line-height:18px;font-weight:700;color:var(--st-declined-fg)}
.ds-ph .ds-ph-merr[hidden]{display:block!important;visibility:hidden}
.ds-ph-note{color:var(--meta);font-size:12px;line-height:1.45;margin:8px 0 0}
.ds-ph-sub{color:var(--meta);font-size:14px;line-height:1.45;margin:0 0 12px}
.ds-ph-reason{width:100%;border:1px solid var(--ctl-line);border-radius:var(--r-control);padding:10px;font-family:var(--ff);font-size:16px;resize:none;color:var(--navy);background:#fff}
.ds-ph-danger{min-height:44px;background:var(--error);color:#fff;border:1px solid var(--error);border-radius:var(--r-control);padding:0 25px;font-weight:700;font-size:15px;transition:background-color var(--t-hover),border-color var(--t-hover)}

/* terminal pages: All signatures complete / declined / withdrawn (the product's .wrap .card) */
.ds-ph-page{background:var(--sign-canvas)}
.ds-ph-wrap{padding:16px 10px}
.ds-ph-card{background:#fff;border-radius:var(--r-small);box-shadow:0 1px 4px rgba(0,0,0,.08);padding:24px}
.ds-ph-done{text-align:center;padding:26px 8px}
.ds-ph-big{font-size:44px;line-height:1.1;color:var(--navy)}
.ds-ph-h{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--navy);outline:none}
.ds-ph-dl{display:inline-block;margin-top:16px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:var(--r-control);padding:0 22px;min-height:44px;font-weight:700;font-size:15px;transition:background-color var(--t-hover),border-color var(--t-hover)}

/* the visitor's own phone is the device: no second status bar, clock, home indicator or safe strip; pages run
   edge to edge (370 wide at 390, as the product); an exhausted inner scroll hands the swipe to the page */
@media (max-width:700px),(max-width:899.98px) and (pointer:coarse) and (max-height:500px){
  .ds-ph .ds-ph-chrome{display:none!important}
  .ds-ph-scr{top:0}
  .ds-ph-lhead{padding-top:40px}
  .ds-ph-stack{margin-top:32px}
  .ds-ph-banner{top:8px}
  .ds-ph-mail{padding-bottom:0}
  .ds-ph-mail,.ds-ph-scroll,.ds-ph-pdfdoc{overscroll-behavior:auto}
}

/* one pane at a time: a swipe that exhausts a phone scroller carries on into the page */
@media (max-width:899.98px){
  .ds-ph-mail,.ds-ph-scroll,.ds-ph-pdfdoc,.ds-ph-lock{overscroll-behavior:auto}
}

@media (hover:hover){
  .ds-ph-notif:hover{background:rgba(255,255,255,.22)}
  .ds-ph-banner:hover{background:#fff}
  .ds-ph-back:hover{color:var(--navy-2)}
  .ds-ph-cta:hover{background:var(--navy-2);border-color:var(--navy-2)}
  .ds-ph-att:hover{border-color:var(--ctl-line)}
  .ds-ph-row:hover{background:var(--surface-2)}
  .ds-ph-sig:hover{background:rgba(11,29,58,.12)}
  .ds-ph-sig.is-signed:hover{background:rgba(11,29,58,.06)}
  .ds-ph-decline:hover{color:var(--navy)}
  .ds-ph-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
  .ds-ph-primary.is-pending:hover{background:var(--track)}
  .ds-ph-tab:hover{border-color:var(--ctl-line)}
  .ds-ph-tab.is-on:hover{border-color:var(--navy)}
  .ds-ph-link:hover{color:var(--navy)}
  .ds-ph-btn:hover{background:var(--navy-2);border-color:var(--navy-2)}
  .ds-ph-danger:hover{background:var(--st-declined-fg);border-color:var(--st-declined-fg)}
  .ds-ph-dl:hover{background:var(--navy-2);border-color:var(--navy-2)}
}

/* ============ the office document page ============ */
.ds-lg{position:relative;min-height:100%;background:var(--app-canvas);color:var(--navy);font-family:var(--ff);font-size:13px;line-height:1.45;container-type:inline-size;text-align:left}
.ds-lg button{font-family:var(--ff);cursor:pointer;margin:0}
.ds-lg button:focus-visible,.ds-lg input:focus-visible,.ds-lg [tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ds-lg-col{max-width:1236px;margin:0 auto;padding:18px 28px 40px}
.ds-lg-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ds-lg-back{background:none;border:0;padding:0;min-height:44px;color:var(--meta);font-weight:700;font-size:12.5px;transition:color var(--t-hover)}
.ds-lg-h1{font-weight:900;font-size:26px;line-height:1.15;letter-spacing:-.4px;margin:0;color:var(--navy);overflow-wrap:anywhere;outline:none}
.ds-lg-sub{font-size:13px;color:var(--meta);margin-top:8px}
.ds-lg-chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap;
  color:var(--st-sent-fg);background:var(--st-sent-bg);transition:background-color var(--t-state),color var(--t-state)}
.ds-lg-chip i{width:6px;height:6px;border-radius:50%;background:var(--st-sent-dot);transition:background-color var(--t-state),box-shadow var(--t-state)}
.ds-lg-chip[data-st="viewed"]{color:var(--st-viewed-fg);background:var(--st-viewed-bg)}
.ds-lg-chip[data-st="viewed"] i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--st-viewed-dot)}
.ds-lg-chip[data-st="signed"]{color:var(--st-signed-fg);background:var(--st-signed-bg)}
.ds-lg-chip[data-st="signed"] i{background:var(--st-signed-dot)}
.ds-lg-chip[data-st="declined"]{color:var(--st-declined-fg);background:var(--st-declined-bg)}
.ds-lg-chip[data-st="declined"] i{background:var(--st-declined-dot)}
.ds-lg-chip[data-st="voided"]{color:var(--st-voided-fg);background:var(--st-voided-bg)}
.ds-lg-chip[data-st="voided"] i{background:var(--st-voided-dot)}
.ds-lg-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ds-lg-btn{min-height:44px;padding:0 16px;font-size:12.5px;font-weight:700;line-height:1.1;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:var(--r-control);
  box-shadow:0 1px 2px rgba(11,29,58,.04);white-space:nowrap;transition:background-color var(--t-hover),border-color var(--t-hover),color var(--t-hover)}
.ds-lg-btn.is-primary{color:#fff;background:var(--navy);border-color:var(--navy)}
.ds-lg-btn.is-danger{color:var(--st-declined-fg);background:#fff;border-color:rgba(220,38,38,.32);box-shadow:none}
.ds-lg-btn.is-fill-danger{color:#fff;background:var(--error);border-color:var(--error)}
.ds-lg-aline{min-height:20px;margin-top:8px;font-size:13px;color:var(--meta)}
.ds-lg-aline.is-err{color:var(--st-declined-fg)}
.ds-lg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:16px;margin-top:10px;align-items:start}
.ds-lg-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ds-lg-main{min-width:0}
@container (max-width:720px){.ds-lg-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.ds-lg-col{padding:14px 16px 32px}.ds-lg-grid{grid-template-columns:minmax(0,1fr)}}
.ds-lg-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-small);box-shadow:0 1px 2px rgba(11,29,58,.04);padding:16px 20px;min-width:0}
.ds-lg-lbl{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--meta)}

/* What happened: each row draws the rail segment from its own dot down to the next one, in its own state's colour */
.ds-lg-tl{list-style:none;margin:0;padding:0}
.ds-lg-item{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.ds-lg-item:last-child{border-bottom:0}
.ds-lg-seg{position:absolute;left:5px;top:23px;height:calc(100% + 1px);width:2px;border-radius:1px;background:var(--mute);transform-origin:50% 0}
.ds-lg-item:last-child .ds-lg-seg{display:none}
.ds-lg-seg.is-sent,.ds-lg-seg.is-reminder{background:var(--st-sent-dot)}
.ds-lg-seg.is-opened{background:var(--st-viewed-dot)}
.ds-lg-seg.is-signed{background:var(--st-signed-dot)}
.ds-lg-seg.is-declined{background:var(--st-declined-dot)}
.ds-lg-seg.is-never{background:var(--line)}
.ds-lg-seg.ds-lg-draw{transform:scaleY(0)}
.ds-lg-seg.ds-lg-draw.ds-lg-on{transform:none;transition:transform var(--t-draw) var(--ease-out)}
.ds-lg-dot{position:relative;z-index:1;width:12px;height:12px;margin-top:4px;border-radius:50%;background:var(--mute);box-shadow:0 0 0 2px #fff}
.ds-lg-dot.is-sent{background:var(--st-sent-dot)}
.ds-lg-dot.is-opened{background:var(--st-viewed-dot)}
.ds-lg-dot.is-signed{background:var(--st-signed-dot)}
.ds-lg-dot.is-declined{background:var(--st-declined-dot)}
.ds-lg-dot.is-reminder{background:#fff;box-shadow:inset 0 0 0 2px var(--st-sent-dot),0 0 0 2px #fff}
.ds-lg-dot.is-never{background:#fff;box-shadow:inset 0 0 0 2px var(--mute),0 0 0 2px #fff}
.ds-lg-tt{min-width:0;color:var(--meta);line-height:1.45}
.ds-lg-tt b{color:var(--navy);font-weight:700}
.ds-lg-when{padding-top:1px;font-size:12px;color:var(--meta);white-space:nowrap;text-align:right}
.ds-lg-reason{margin-top:7px;padding-left:11px;font-style:italic;color:var(--navy);border-left:2px solid rgba(220,38,38,.3);overflow-wrap:anywhere}
.ds-lg-item.ds-lg-new{opacity:0;transform:translateY(8px)}
.ds-lg-item.ds-lg-new.ds-lg-on{opacity:1;transform:none;transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out)}
/* rows that arrive with the scene only fade (the scene itself is rising) */
.ds-lg-item.ds-lg-fade{opacity:0}
.ds-lg-item.ds-lg-fade.ds-lg-on{opacity:1;transition:opacity var(--t-enter) var(--ease-out)}

.ds-lg-rows{display:flex;flex-direction:column}
.ds-lg-srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.ds-lg-who{display:flex;flex-direction:column;min-width:0}
.ds-lg-who b{font-weight:700;color:var(--navy)}
.ds-lg-mail{font-size:12px;color:var(--meta);overflow-wrap:anywhere}
.ds-lg-sw{flex:none;font-size:12px;font-weight:700}
.ds-lg-sw.is-signed{color:var(--teal-ink)}
.ds-lg-sw.is-declined{color:var(--st-declined-fg)}
.ds-lg-sw.is-ink{color:var(--navy)}
.ds-lg-sw.is-muted{color:var(--meta)}
.ds-lg-cw{flex:none;font-size:12px;color:var(--meta);text-align:right}
.ds-lg-kv{display:grid;grid-template-columns:118px minmax(0,1fr);gap:9px 14px;margin:0;font-size:13px;align-items:baseline}
.ds-lg-k{color:var(--meta);margin:0}
.ds-lg-v{color:var(--navy);font-weight:700;margin:0;overflow-wrap:anywhere}

/* the overlay layer: a zero-height strip pinned to the top of the visible pane; everything in it is as tall as the pane
   (--lg-vh, measured), so a sheet, the viewer or the toast is always inside the office frame however far it scrolled */
.ds-lg-layer{position:sticky;top:0;height:0;z-index:25}
.ds-lg-toasts{position:absolute;left:0;right:0;top:0;height:var(--lg-vh,100vh);z-index:30;pointer-events:none}
.ds-lg-toast{position:absolute;left:50%;bottom:24px;max-width:calc(100% - 32px);background:var(--navy);color:#fff;font-weight:700;font-size:13px;line-height:1.35;padding:10px 16px;border-radius:var(--r-pill);
  box-shadow:var(--sh-float);transform:translateX(-50%);opacity:0;transition:opacity var(--t-fade) var(--ease-std)}
.ds-lg-toast:empty{padding:0;box-shadow:none}
.ds-lg-toast.ds-lg-on{opacity:1}

/* sheets (Remind / Void / Signing link / the receipt) */
.ds-lg-sheet{position:absolute;left:0;right:0;top:0;height:var(--lg-vh,100vh);z-index:20;display:flex;justify-content:center;align-items:flex-start;padding:72px 16px 16px;overflow:auto;overscroll-behavior:contain;
  background-color:rgba(11,29,58,0);transition:background-color 200ms var(--ease-std)}
.ds-lg-sheet.ds-lg-on{background-color:rgba(11,29,58,.35)}
.ds-lg-scrim{position:absolute;inset:0}
.ds-lg-card{position:relative;width:100%;max-width:560px;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-float);padding:20px 24px;opacity:0;transform:translateY(8px);
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.ds-lg-card.is-wide{max-width:640px}
.ds-lg-sheet.ds-lg-on .ds-lg-card{opacity:1;transform:none}
.ds-lg-stitle{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--navy)}
.ds-lg-meta{font-size:13px;color:var(--meta);margin:0}
.ds-lg-sst{min-height:20px;margin-top:8px;font-size:13px;color:var(--meta)}
.ds-lg-sst.is-err{color:var(--st-declined-fg)}
.ds-lg-sacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ds-lg-in{width:100%;margin-top:10px;padding:10px 12px;font-family:var(--ff);font-size:16px;border:1px solid var(--ctl-line);border-radius:var(--r-control);color:var(--navy);background:#fff}
.ds-lg-rc{border:1px solid var(--line);border-radius:var(--r-nested);padding:28px 32px 20px;color:var(--navy)}
.ds-lg-rc hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.ds-lg-rh{font-size:22px;font-weight:700}
.ds-lg-rt{font-size:12px;color:var(--meta);margin-top:4px}
.ds-lg-rgrid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 12px;margin:0;font-size:12.5px}
.ds-lg-rgrid dt{color:var(--meta)}
.ds-lg-rgrid dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.ds-lg-rgrid dd.is-navy{color:var(--navy)}
.ds-lg-rs{font-size:13px;font-weight:700;margin:0 0 10px}
.ds-lg-rwhy{font-size:12px;color:var(--meta);margin:10px 0 0}
.ds-lg-ratt{font-size:12.5px;font-weight:700;margin:12px 0 0}
.ds-lg-rgen{font-size:11.5px;color:var(--meta);margin:0}
.ds-lg-rfoot{font-size:11.5px;color:var(--meta);text-align:center;margin:18px 0 0}
/* a narrow pane: the receipt's labels sit over their values, the sheet uses the width */
@container (max-width:720px){
  .ds-lg-sheet{padding:16px 8px 16px}
  .ds-lg-card{padding:16px}
  .ds-lg-rc{padding:16px}
  .ds-lg-rgrid{grid-template-columns:minmax(0,1fr);gap:0}
  .ds-lg-rgrid dd{margin-bottom:9px}
}

/* the idle ring (colour only); a performed beat's pressed state is the stage's own .ds-pressed */
.ds-ph .ds-ring,.ds-lg .ds-ring{outline:2px solid var(--orange);outline-offset:2px}

/* the certificate viewer: a solid navy ground over the whole pane (nothing of the page shows through); the Signing Certificate at print size (595px,
   9pt reads as 12px) leads, the signed page sits beside it (or beneath it, when the pane is narrow). A pane narrower
   than the certificate pans it at print size rather than shrinking it. */
.ds-lg-viewer{position:absolute;left:0;right:0;top:0;height:var(--lg-vh,100vh);z-index:25;display:flex;flex-direction:column;outline:none}
.ds-lg-vscrim{position:absolute;inset:0;background:var(--navy);opacity:0;transition:opacity 200ms var(--ease-std)}
.ds-lg-vbar{position:relative;flex:none;display:flex;justify-content:flex-end;align-items:center;height:64px;padding:0 16px}
.ds-lg-vscroll{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 16px 24px;outline:none;opacity:0;transform:translateY(16px);
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.ds-lg-viewer.ds-lg-on .ds-lg-vscrim,.ds-lg-viewer.ds-lg-on .ds-lg-vscroll{opacity:1;transform:none}
.ds-lg .ds-lg-vscroll:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.ds-lg-spread{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start;min-width:595px}
.ds-lg-leaf{position:relative;flex:none;background:#fff;aspect-ratio:595/842;overflow:hidden;border-radius:2px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.ds-lg-leaf > *{position:absolute;inset:0;width:100%;height:100%}
.ds-lg-leaf.is-cert{width:595px}
.ds-lg-leaf.is-page{width:clamp(200px,calc(100cqi - 651px),300px)}
@container (max-width:850px){.ds-lg-leaf.is-page{width:min(360px,calc(100cqi - 32px))}}
@container (max-width:660px){.ds-lg-spread{justify-content:flex-start}}

@media (hover:hover){
  .ds-lg-back:hover{color:var(--navy)}
  .ds-lg-btn:hover{background:var(--surface-2);border-color:var(--mute)}
  .ds-lg-btn.is-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
  .ds-lg-btn.is-danger:hover{background:var(--st-declined-bg);border-color:rgba(220,38,38,.5)}
  .ds-lg-btn.is-fill-danger:hover{background:var(--st-declined-fg);border-color:var(--st-declined-fg)}
}