.signatures-page { min-height: 100dvh; background: #f4f7fa; color: #172b42; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.signatures-shell { max-width: 1040px; margin: 0 auto; }
.signatures-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid #dce4eb; }
.signatures-nav img { width: 148px; height: auto; }
.signature-back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #41566d; text-decoration: none; font-size: .875rem; font-weight: 600; }
.signature-back-link:hover { color: #155dfc; }
.signature-back-link span { font-size: 1.4rem; }
.signatures-heading { padding: 32px 0 28px; }
.signature-eyebrow { display: block; margin-bottom: 10px; color: #246c73; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.signatures-heading h1 { font-size: clamp(1.6rem, 3vw, 2rem); }
/* Preserve navigation focus for screen readers without outlining the page title. */
.signatures-heading h1:focus { outline: none; }
.signatures-heading p { margin-top: 10px; color: #52657a; line-height: 1.6; }
.signature-card { padding: 28px; border: 1px solid #dce4eb; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px rgb(23 43 66 / 3%); }
.signatures-page h2 { max-width: none; color: #172b42; font-size: 1.125rem; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
.signature-description { margin-top: 6px; color: #52657a; font-size: .875rem; line-height: 1.7; }
.signature-registration-fields { display: flex; align-items: end; gap: 16px; margin-top: 24px; }
.signature-registration-fields > div { flex: 1; min-width: 0; }
.signatures-page input:not([type=checkbox]) { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #b8c6d4; border-radius: 10px; }
.signatures-page input[readonly] { background: #f4f7fa; color: #41566d; }
.signatures-page button { min-height: 52px; }
.signatures-page button:disabled { background: #e9eef3; color: #52657a; box-shadow: none; }
#tablet-status { display: flex; align-items: center; gap: 12px; margin: 20px 0; padding: 16px 20px; border: 1px solid #cedfe9; border-radius: 12px; background: #eaf2f8; color: #284c68; font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
#tablet-status::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
#tablet-queue { display: grid; gap: 12px; }
#tablet-queue:not(:empty) { margin-top: 24px; }
#tablet-queue button { justify-content: space-between; text-align: left; background: #f0f5ff; border: 1px solid #cbdafa; color: #164ec2; box-shadow: none; }
#tablet-queue button::after { content: '→'; font-size: 1.25rem; }
#tablet-queue button:hover { background: #e2ecff; }
.signature-queue-item { display: flex; flex-wrap: wrap; gap: 12px; }
.signature-queue-item > .primary-button { flex: 1 1 260px; }
.signatures-page .signature-cancel, #tablet-queue .signature-cancel { color: #b42318; background: #fff; border: 1px solid #e6b8b4; }
.signatures-page .signature-cancel:hover, #tablet-queue .signature-cancel:hover { background: #fff1f0; }
#tablet-queue .signature-cancel::after { content: none; }
.signature-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 16px 20px; }
.signature-empty svg { width: 44px; height: 44px; padding: 10px; box-sizing: content-box; color: #64839a; background: #f0f5f8; border-radius: 16px; stroke-width: 1.4; }
.signature-empty h3 { margin: 18px 0 6px; font-size: .95rem; font-weight: 600; }
.signature-empty p { color: #52657a; font-size: .875rem; line-height: 1.7; }
#tablet-signing > p { margin: 10px 0 20px; color: #52657a; line-height: 1.6; }
#tablet-signing > button { margin: 12px 8px 0 0; }
#tablet-document { max-height: 60vh; overflow: auto; background: #e2e8f0; padding: 12px; margin-bottom: 24px; border-radius: 10px; }
#tablet-document canvas { width: 100%; height: auto; display: block; margin-bottom: 10px; background: white; }
#signature-pad { display: block; width: 100%; aspect-ratio: 17/6; height: auto; background: #fff; border: 2px dashed #859aaf; border-radius: 10px; touch-action: none; }
.signature-consent { display: flex; align-items: start; gap: 12px; margin: 24px 0 8px; line-height: 1.7; }
.signature-consent input { width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px; margin: 0; padding: 0; accent-color: #155dfc; }
[hidden] { display: none !important; }
@media (max-width: 700px) { .signature-registration-fields { flex-direction: column; align-items: stretch; } .signature-card { padding: 20px; } .signatures-heading { padding: 24px 0; } #tablet-signing > button { width: 100%; margin-right: 0; } }