/* Customer-facing signing app. Mobile first: every rule below is written for a 360px-wide phone and
   allowed to grow. Colours come from the V3 tokens so the brand matches the rest of the platform;
   nothing here restates a theme colour. */

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--ls-page-bg, #f5f7f9);
    color: var(--ls-text, #1b2733);
    -webkit-text-size-adjust: 100%;
}

.sign-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 14px 28px;
    box-sizing: border-box;
}

.sign-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid var(--ls-border, #e3e8ec);
    border-radius: 12px;
    padding: 26px 22px;
    box-sizing: border-box;
}

.sign-card h1 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ls-primary, #012d50);
}

.sign-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }

/* The brand lockup (dark-on-light artwork), used on the welcome card and the document header —
   both white surfaces on purpose; it has no white variant for dark grounds. */
.sign-brand-logo {
    display: block;
    height: 34px;
    width: auto;
    margin-bottom: 16px;
}

/* Touch targets stay at least 44px, per WCAG, because this is used one-handed on a phone. */
.sign-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--ls-primary, #012d50);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.sign-btn:disabled { opacity: .45; cursor: not-allowed; }

.sign-btn.subtle {
    background: transparent;
    color: var(--ls-primary, #012d50);
    border: 1px solid var(--ls-border, #e3e8ec);
}

.sign-muted { color: var(--ls-muted, #6b7785); font-size: 13px; }

.sign-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 16px;
    padding: 12px 14px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
    border: 1px solid var(--ls-border, #e3e8ec);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ls-text, #1b2733);
}

.sign-linkish {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ls-primary, #012d50);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.sign-problem {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fdf2f2;
    border: 1px solid #f3d2d2;
}

.sign-problem p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.sign-problem p:last-child { margin-bottom: 0; }

/* ---- document view ---- */

.sign-doc { padding-bottom: 92px; }   /* room for the fixed guided bar */

.sign-doc-head {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--ls-border, #e3e8ec);
}
.sign-doc-head .sign-brand-logo { height: 28px; margin: 0; flex-shrink: 0; }
.sign-doc-title { display: flex; flex-direction: column; min-width: 0; }
.sign-doc-subject {
    font-size: 13px; font-weight: 600; color: var(--ls-primary, #012d50);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sign-doc-file {
    font-size: 11.5px; color: var(--ls-text-muted, #5b6b7a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sign-pages { display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; align-items: center; }

.sign-page {
    position: relative;
    width: 100%;
    max-width: 820px;
    background: #ffffff;
    border: 1px solid var(--ls-border, #e3e8ec);
    border-radius: 6px;
    overflow: hidden;
}
.sign-page > img { display: block; width: 100%; height: auto; }

/* Overlays are positioned as a PERCENTAGE of the page, so they stay correct at any width or zoom. */
.sign-field {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    overflow: hidden;
}
.sign-field.outstanding {
    border: 2px dashed var(--ls-primary, #012d50);
    background: rgba(1, 45, 80, .07);
}
.sign-field.filled { border: 1px solid transparent; background: transparent; }
/* Supplied by the server (name, date). No dashed "fill me" outline and no pointer cursor — nothing
   here responds to a tap, and looking clickable is what made people click it. */
.sign-field.readonly { cursor: default; border: 1px solid transparent; background: transparent; }
.sign-field > img { width: 100%; height: 100%; object-fit: contain; }
.sign-field-text { font-size: 13px; color: var(--ls-text, #1b2733); white-space: nowrap; }
.sign-field-hint { font-size: 11px; font-weight: 600; color: var(--ls-primary, #012d50); }

.sign-consent { max-width: 820px; margin: 0 auto; padding: 4px 16px 12px; border-radius: 8px; }
.sign-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.sign-consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
/* Two agreements stack; without this they read as one paragraph with two ticks in it. */
.sign-consent label + label { margin-top: 10px; }

/* The electronic-records disclosure. Long by nature, so it collapses — a signer who wants to read it
   opens it, and one who does not is not made to scroll a page of statute to reach the button. */
.sign-ersd {
    border: 1px solid var(--ls-border, #e3e8ec); border-radius: 8px;
    margin-bottom: 12px; background: #fbfcfd;
}
.sign-ersd > summary {
    cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 600;
    letter-spacing: .02em; color: var(--ls-primary, #012d50);
}
.sign-ersd > summary:focus-visible { outline: 2px solid var(--ls-primary, #012d50); outline-offset: 2px; }
.sign-ersd-body {
    max-height: 320px; overflow-y: auto; padding: 0 14px 12px;
    font-size: 13px; line-height: 1.55; color: var(--ls-text, #333);
}
.sign-ersd-body h3 { font-size: 13px; margin: 14px 0 4px; }
.sign-ersd-body p { margin: 0 0 10px; }

/* A signer walked to the agreement box at the end of a long document needs to see WHAT they were sent
   to. A brief pulse does that without a permanent highlight that would nag afterwards. */
.sign-pulse { animation: sign-consent-pulse 1.4s ease-out 2; }
@keyframes sign-consent-pulse {
    0%   { background: rgba(1, 45, 80, 0);   box-shadow: 0 0 0 0 rgba(1, 45, 80, .45); }
    30%  { background: rgba(1, 45, 80, .16); box-shadow: 0 0 0 8px rgba(1, 45, 80, .16); }
    100% { background: rgba(1, 45, 80, 0);   box-shadow: 0 0 0 0 rgba(1, 45, 80, 0); }
}
@media (prefers-reduced-motion: reduce) {
    /* No pulse, but still land on the box — the scroll is the essential part. */
    .sign-pulse { animation: none; }
}

.sign-guide {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border-top: 1px solid var(--ls-border, #e3e8ec);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.sign-guide-label { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; }
.sign-guide-count { font-size: 12px; font-weight: 400; color: var(--ls-muted, #6b7785); }

/* ---- signature pad ---- */

.sign-modal {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(11, 25, 38, .55);
}
.sign-modal-card {
    width: 100%; max-width: 560px;
    background: #ffffff; border-radius: 12px; padding: 20px;
    box-sizing: border-box;
}
.sign-modal-card h2 { margin: 0 0 14px; font-size: 18px; color: var(--ls-primary, #012d50); }

.sign-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.sign-tab {
    flex: 1; min-height: 44px; border: 1px solid var(--ls-border, #e3e8ec);
    background: #ffffff; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
}
.sign-tab.active { background: var(--ls-primary, #012d50); color: #ffffff; border-color: var(--ls-primary, #012d50); }

.sign-canvas {
    display: block; width: 100%; height: 180px;
    border: 1px dashed var(--ls-border, #e3e8ec); border-radius: 8px; background: #fcfdfe;
}

.sign-input {
    display: block; width: 100%; box-sizing: border-box; min-height: 46px;
    padding: 10px 14px; font-size: 16px;
    border: 1px solid var(--ls-border, #e3e8ec); border-radius: 8px;
}
.sign-typed-preview {
    min-height: 76px; display: flex; align-items: center;
    margin-top: 10px; padding: 0 12px;
    font-family: 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 34px; color: var(--ls-primary, #012d50);
    border: 1px dashed var(--ls-border, #e3e8ec); border-radius: 8px;
    overflow: hidden; white-space: nowrap;
}

.sign-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Adopt-your-signature. Wider than the plain pad because it carries the name, the initials and a
   preview of both — the signer needs to see exactly what is about to go on every page. */
.sign-modal-card.adopt { max-width: 640px; }
.adopt-lead { margin: 0 0 14px; font-size: 14px; color: var(--ls-text-secondary, #55616e); line-height: 1.5; }

.adopt-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 16px; }
.adopt-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adopt-field > label {
    font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    color: var(--ls-text-label, #7c8894);
}
/* The name is not editable: it comes from the record, not from a box the signer can type into. */
.adopt-readonly {
    min-height: 46px; display: flex; align-items: center; padding: 10px 14px;
    font-size: 16px; border: 1px solid var(--ls-border, #e3e8ec); border-radius: 8px;
    background: var(--ls-surface-alt, #f5f7f9); color: var(--ls-text, #1b2733);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.adopt-preview, .adopt-draw { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.adopt-preview-cell, .adopt-draw-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adopt-preview-label {
    font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    color: var(--ls-text-label, #7c8894);
}
.adopt-script {
    min-height: 76px; display: flex; align-items: center; padding: 0 12px;
    font-family: 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 34px; color: var(--ls-primary, #012d50);
    border: 1px dashed var(--ls-border, #e3e8ec); border-radius: 8px;
    overflow: hidden; white-space: nowrap;
}
.adopt-draw-cell .sign-canvas { height: 130px; }

.adopt-problem { margin: 12px 0 0; font-size: 13px; color: var(--ls-danger-text, #c0392b); }
.adopt-consent {
    margin: 14px 0 0; font-size: 12px; line-height: 1.5;
    color: var(--ls-text-muted, #6b7785);
}

@media (max-width: 560px) {
    /* Side by side stops working once the initials box is narrower than a finger. */
    .adopt-grid, .adopt-preview, .adopt-draw { grid-template-columns: 1fr; }
}

/* Declining is a real choice, not fine print, so it is a button — but a quiet, outlined one, since it
   is not the action we are guiding the signer toward. It sits close under the agreement, not adrift at
   the bottom of the page, and leaves room above the fixed guided bar so the bar never covers it. */
.sign-decline-row { max-width: 820px; margin: 0 auto; padding: 4px 16px 96px; text-align: center; }
.sign-btn-decline {
    min-height: 44px; padding: 10px 22px; font: inherit; font-size: 14px; cursor: pointer;
    color: var(--ls-text-secondary, #55616e);
    background: transparent;
    border: 1px solid var(--ls-border-mid, #d5dbe1);
    border-radius: 8px;
}
.sign-btn-decline:hover {
    color: var(--ls-danger, #c0392b);
    border-color: var(--ls-danger, #c0392b);
    background: rgba(192, 57, 43, .04);
}