:root {
	--sopdoc-ink: #2b241d;
	--sopdoc-maroon: #8a3324;
	--sopdoc-maroon-dark: #6c2419;
	--sopdoc-cream: #faf7f2;
	--sopdoc-paper: #ffffff;
	--sopdoc-border: #c9beae;
	--sopdoc-header-fill: #f5e6a3;
	--sopdoc-muted: #7a7266;
	--sopdoc-success: #2f6f4e;
	--sopdoc-pending: #a1481f;
}

.sopdoc-wrap { color: var(--sopdoc-ink); }

.sopdoc-page-shell {
	max-width: 900px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.sopdoc-toolbar {
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.sopdoc-btn {
	font: inherit;
	background: var(--sopdoc-maroon);
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: .55em 1.1em;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	font-size: .9rem;
	letter-spacing: .01em;
}
.sopdoc-btn:hover { background: var(--sopdoc-maroon-dark); color: #fff; }
.sopdoc-btn-cancel, .sopdoc-btn-clear { background: #6b675f; }
.sopdoc-btn-large { font-size: 1rem; padding: .75em 1.5em; }

.sopdoc-document {
	background: var(--sopdoc-paper);
	border: 1px solid var(--sopdoc-border);
	padding: 2.25rem 2.5rem;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1.5;
}

.sopdoc-letterhead {
	text-align: center;
	border-bottom: 3px solid var(--sopdoc-maroon);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}
.sopdoc-logo { max-height: 70px; margin-bottom: .5rem; }
.sopdoc-title {
	font-size: 1.4rem;
	margin: .25rem 0 0;
	color: var(--sopdoc-maroon-dark);
	font-family: Georgia, serif;
}

.sopdoc-header-table, .sopdoc-activity-table, .sopdoc-amendments-table, .sopdoc-related-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.75rem;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .92rem;
}

.sopdoc-header-table th, .sopdoc-header-table td,
.sopdoc-activity-table th, .sopdoc-activity-table td,
.sopdoc-amendments-table th, .sopdoc-amendments-table td,
.sopdoc-related-table th, .sopdoc-related-table td {
	border: 1px solid var(--sopdoc-border);
	padding: .55em .7em;
	vertical-align: top;
	text-align: left;
}

.sopdoc-header-table th {
	width: 220px;
	background: var(--sopdoc-cream);
	font-weight: 700;
}

.sopdoc-activity-table thead th, .sopdoc-amendments-table thead th, .sopdoc-related-table thead th {
	background: var(--sopdoc-header-fill);
	font-weight: 700;
}

.sopdoc-col-no { width: 90px; white-space: nowrap; }
.sopdoc-col-resp { width: 170px; }
.sopdoc-section-row td { background: #f1ece1; }

.sopdoc-subheading {
	font-family: Arial, Helvetica, sans-serif;
	color: var(--sopdoc-maroon-dark);
	border-bottom: 1px solid var(--sopdoc-border);
	padding-bottom: .3em;
	margin: 1.75rem 0 .75rem;
	font-size: 1.05rem;
}

.sopdoc-muted { color: var(--sopdoc-muted); font-family: Arial, sans-serif; }

.sopdoc-numbered-section { font-family: Georgia, serif; margin-bottom: 1.5rem; }
.sopdoc-numbered-item { margin: 0 0 .6em; }
.sopdoc-heading-input {
	font-family: Arial, Helvetica, sans-serif;
	color: var(--sopdoc-maroon-dark);
	font-size: 1.05rem;
	font-weight: 700;
	border: 1px solid var(--sopdoc-border);
	padding: .2em .4em;
	width: 100%;
	max-width: 320px;
}

/* ---- signatures ---- */
.sopdoc-signature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	font-family: Arial, Helvetica, sans-serif;
}
.sopdoc-signature-block {
	border: 1px solid var(--sopdoc-border);
	border-radius: 4px;
	padding: .75rem;
	text-align: center;
	background: var(--sopdoc-cream);
}
.sopdoc-sig-area { min-height: 70px; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; }
.sopdoc-sig-image { max-height: 65px; max-width: 100%; }
.sopdoc-sig-typed {
	font-family: 'Brush Script MT', 'Segoe Script', cursive;
	font-size: 1.6rem;
	color: var(--sopdoc-maroon-dark);
}
.sopdoc-sig-meta { font-size: .72rem; color: var(--sopdoc-muted); }
.sopdoc-sig-pending { color: var(--sopdoc-pending); font-size: .85rem; font-style: italic; }
.sopdoc-sig-link-copy input { width: 100%; font-size: .7rem; margin-top: .4rem; }
.sopdoc-sig-name { font-weight: 700; margin-top: .4rem; }
.sopdoc-sig-role { font-size: .82rem; color: var(--sopdoc-muted); }
.sopdoc-status-signed { border-color: var(--sopdoc-success); }
.sopdoc-status-pill { padding: .1em .5em; border-radius: 10px; font-size: .8rem; }
.sopdoc-status-signed.sopdoc-status-pill, .sopdoc-status-pill.sopdoc-status-signed { background: #e2f2e8; color: var(--sopdoc-success); }
.sopdoc-status-pending.sopdoc-status-pill, .sopdoc-status-pill.sopdoc-status-pending { background: #fbe8dd; color: var(--sopdoc-pending); }

.sopdoc-banner { padding: .9rem 1.2rem; border-radius: 4px; margin-bottom: 1rem; font-family: Arial, sans-serif; }
.sopdoc-banner-success { background: #e2f2e8; color: var(--sopdoc-success); border: 1px solid var(--sopdoc-success); }

/* ---- editable / frontend form ---- */
.sopdoc-editable input, .sopdoc-editable textarea, .sopdoc-editable select {
	width: 100%; font-family: inherit; font-size: .92rem; border: 1px solid var(--sopdoc-border); padding: .3em;
}
.sopdoc-remove-row-fe { background: none; border: none; color: var(--sopdoc-maroon); cursor: pointer; font-size: 1.1rem; }

.sopdoc-richtext-wrap { border: 1px solid var(--sopdoc-border); border-radius: 3px; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.sopdoc-richtext-toolbar { display: flex; gap: 2px; padding: 4px; background: var(--sopdoc-cream); border-bottom: 1px solid var(--sopdoc-border); flex-wrap: wrap; }
.sopdoc-richtext-toolbar button { border: 1px solid transparent; background: transparent; padding: 3px 8px; cursor: pointer; border-radius: 2px; font-size: .8rem; }
.sopdoc-richtext-toolbar button:hover { background: #e4ddce; border-color: var(--sopdoc-border); }
.sopdoc-richtext-editable { min-height: 60px; padding: 6px 9px; outline: none; font-family: Georgia, serif; font-size: .92rem; }
.sopdoc-richtext-editable ul, .sopdoc-richtext-editable ol { margin: 0 0 0 1.2em; padding: 0; }
.sopdoc-richtext-editable:focus { box-shadow: inset 0 0 0 1px var(--sopdoc-maroon); }

.ims-linked-list { list-style: none; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
.ims-linked-list li { padding: .4em 0; border-bottom: 1px solid var(--sopdoc-border); }
.ims-linked-type { display: inline-block; background: var(--sopdoc-cream); border: 1px solid var(--sopdoc-border); border-radius: 3px; padding: .1em .5em; font-size: .75rem; margin-right: .5em; color: var(--sopdoc-maroon-dark); }
.ims-linked-status { color: var(--sopdoc-muted); font-size: .85em; }
.ims-link-filter { width: 100%; margin-bottom: 6px; padding: .4em; border: 1px solid var(--sopdoc-border); }

/* ---- signing form ---- */
.sopdoc-sign-form-wrap { font-family: Arial, Helvetica, sans-serif; }
.sopdoc-doc-preview { max-height: 480px; overflow: auto; border: 1px solid var(--sopdoc-border); margin: 1rem 0; padding: 1rem; background: #fff; }
.sopdoc-sign-tabs { display: flex; gap: .5rem; margin: 1rem 0 .5rem; }
.sopdoc-sign-tab {
	background: var(--sopdoc-cream); border: 1px solid var(--sopdoc-border); padding: .5em 1em; cursor: pointer; border-radius: 3px 3px 0 0;
}
.sopdoc-sign-tab.active { background: var(--sopdoc-maroon); color: #fff; border-color: var(--sopdoc-maroon); }
.sopdoc-typed-name-input { font-size: 1rem; padding: .5em; width: 100%; max-width: 420px; }
.sopdoc-typed-preview {
	font-family: 'Brush Script MT', 'Segoe Script', cursive;
	font-size: 2.2rem; color: var(--sopdoc-maroon-dark); margin-top: .75rem; min-height: 3rem;
}
#sopdoc_signature_canvas {
	border: 1px dashed var(--sopdoc-border); background: #fff; touch-action: none; display: block; max-width: 100%;
}
.sopdoc-consent { display: block; margin: 1.25rem 0; font-size: .9rem; }
.sopdoc-sign-complete { padding: 1rem; background: #e2f2e8; border-radius: 4px; }

@media (max-width: 640px) {
	.sopdoc-document { padding: 1.25rem; }
	.sopdoc-header-table th { width: 40%; }
}