/* Self-branded signing surface. Tokens from docs/design.md; mobile first,
   640px cap on the form, gold reserved for completion emphasis. */

:root {
	--exr-ink: #0F1C2E;
	--exr-ink-soft: #31435A;
	--exr-accent: #1E5BB8;
	--exr-accent-hover: #17478F;
	--exr-accent-soft: #E8F0FB;
	--exr-gold: #B8862A;
	--exr-surface: #FFFFFF;
	--exr-surface-warm: #F7F8FA;
	--exr-surface-sunken: #EEF1F5;
	--exr-border: #DCE1E8;
	--exr-border-strong: #B9C1CD;
	--exr-success: #1E7E4F;
	--exr-success-soft: #E4F3EB;
	--exr-warning: #B26A00;
	--exr-warning-soft: #FBEEDD;
	--exr-danger: #B3261E;
	--exr-danger-soft: #FADBD8;
	--exr-neutral: #5A6675;
	--exr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--exr-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--exr-text-xs: 12px;
	--exr-text-sm: 14px;
	--exr-text-base: 16px;
	--exr-text-lg: 18px;
	--exr-text-xl: 22px;
	--exr-text-2xl: 28px;
	--exr-weight-regular: 400;
	--exr-weight-medium: 500;
	--exr-weight-semibold: 600;
	--exr-weight-bold: 700;
	--exr-space-1: 4px;
	--exr-space-2: 8px;
	--exr-space-3: 12px;
	--exr-space-4: 16px;
	--exr-space-5: 24px;
	--exr-space-6: 32px;
	--exr-space-7: 48px;
	--exr-space-8: 64px;
	--exr-radius-sm: 6px;
	--exr-radius-md: 10px;
	--exr-radius-lg: 16px;
	--exr-radius-full: 999px;
	--exr-border-width: 1px;
	--exr-shadow-sm: 0 1px 2px rgba(15, 28, 46, 0.06);
	--exr-shadow-md: 0 4px 12px rgba(15, 28, 46, 0.10);
	--exr-shadow-lg: 0 12px 32px rgba(15, 28, 46, 0.16);
}

.exr-sign-wrap {
	background: var(--exr-surface-warm);
	font-family: var(--exr-font-sans);
	font-size: var(--exr-text-base);
	line-height: 24px;
	padding: var(--exr-space-5);
}

.exr-sign-container {
	margin: 0 auto;
	max-width: 640px;
	width: 100%;
}

@media (min-width: 700px) {
	.exr-sign-wrap {
		padding: var(--exr-space-7);
	}
	.exr-sign-container {
		padding-top: var(--exr-space-7);
	}
}

.exr-sign-notice,
.exr-sign-done {
	background: var(--exr-surface);
	border: var(--exr-border-width) solid var(--exr-border);
	border-radius: var(--exr-radius-lg);
	color: var(--exr-ink);
	margin: 0 auto;
	max-width: 640px;
	padding: var(--exr-space-5);
	text-align: center;
}

.exr-sign-done {
	background: var(--exr-success-soft);
	border-color: var(--exr-success);
	color: var(--exr-success);
}

.exr-sign-complete {
	background: var(--exr-success-soft);
	border-radius: var(--exr-radius-lg);
	color: var(--exr-success);
	padding: var(--exr-space-7) var(--exr-space-5);
	text-align: center;
}

.exr-sign-complete h2 {
	color: var(--exr-ink);
	font-family: var(--exr-font-serif);
	font-size: var(--exr-text-2xl);
	font-weight: var(--exr-weight-bold);
	margin: var(--exr-space-4) 0 var(--exr-space-2);
}

.exr-sign-complete p {
	color: var(--exr-ink-soft);
	font-size: var(--exr-text-base);
	margin: 0;
}

.exr-sign-complete-seal {
	align-items: center;
	background: var(--exr-surface);
	border: 2px solid var(--exr-gold);
	border-radius: 999px;
	color: var(--exr-gold);
	display: inline-flex;
	font-size: var(--exr-text-xl);
	font-weight: var(--exr-weight-bold);
	height: 48px;
	justify-content: center;
	width: 48px;
}