/**
 * Portal styles.
 *
 * Every colour and face resolves through a custom property set by
 * SCP\Branding::css_variables(), so the whole portal re-themes from the
 * Branding tab without touching this file. Fallbacks are supplied so the
 * stylesheet still renders if the inline block is ever stripped by an
 * optimiser.
 */

.scp {
	--scp-space: 1.5rem;
	background: var(--scp-surface, #f5f3ee);
	font-family: var(--scp-font-body, sans-serif);
	color: var(--scp-ink, #3a3a34);
	line-height: 1.7;
}

.scp *,
.scp *::before,
.scp *::after {
	box-sizing: border-box;
}

/* Themes style inputs, labels and fieldsets to suit their own forms, and those
   rules land on ours too. Rather than hope they are compatible, every control
   the portal renders is reset to a known state first.
   
   The handful of !important declarations below are deliberate and confined to
   properties that break layout outright when a theme overrides them. A theme
   setting `input { width: 100% }` makes a checkbox fill its container and shove
   its own label outside the box, which is not a difference of taste. */

.scp input,
.scp select,
.scp textarea,
.scp button {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	max-width: 100%;
	margin: 0;
}

.scp input[type="checkbox"],
.scp input[type="radio"] {
	width: 1.05rem !important;
	min-width: 1.05rem;
	max-width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	-webkit-appearance: checkbox;
	appearance: auto;
}

.scp input[type="radio"] {
	-webkit-appearance: radio;
}

.scp fieldset,
.scp .scp-qfield fieldset,
.scp .scp-field fieldset {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.scp legend,
.scp .scp-qfield legend,
.scp .scp-field legend {
	display: block;
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* Structural resets on lists, so a theme cannot print its own markers beside
   the numbering the portal draws itself. */
.scp ul,
.scp ol {
	margin-left: 0;
	padding-left: 0;
}

.scp label {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.scp-list,
.scp-files,
.scp-steps,
.scp-timeline,
.scp-outcomes,
.scp-versions,
.scp-choices {
	list-style: none !important;
}

.scp-list li,
.scp-files li,
.scp-steps li,
.scp-timeline li,
.scp-outcomes li,
.scp-versions li {
	list-style: none !important;
	margin-left: 0;
}

.scp textarea {
	display: block;
	resize: vertical;
}

/* Panels ------------------------------------------------------------------ */

.scp-panel {
	background: var(--scp-panel, #fff);
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	padding: var(--scp-space);
	margin-bottom: var(--scp-space);
}

.scp-panel--narrow {
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}

.scp-panel--tinted {
	background: var(--scp-signature, #ede8dc);
}

.scp-grid {
	display: grid;
	gap: var(--scp-space);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Type -------------------------------------------------------------------- */

.scp-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-title {
	margin: 0 0 0.5rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--scp-primary, #2f4a38);
}

.scp-subtitle {
	margin: 0;
	color: var(--scp-muted, #6f6e62);
}

.scp-stat {
	margin: 0;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--scp-primary, #2f4a38);
}

.scp-meta {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-hint {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-strong {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.scp-rule {
	border: 0;
	border-top: 1px solid var(--scp-line, #dcd8cc);
	margin: 1.25rem 0;
}

/* Header and tabs --------------------------------------------------------- */

.scp-header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.scp-link-quiet {
	color: var(--scp-muted, #6f6e62);
	font-size: 0.875rem;
	text-decoration: underline;
}

.scp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
	margin-bottom: var(--scp-space);
}

.scp-tab {
	padding: 0.6rem 1rem;
	border-bottom: 2px solid transparent;
	color: var(--scp-muted, #6f6e62);
	font-size: 0.9375rem;
	text-decoration: none;
}

.scp-tab:hover,
.scp-tab:focus {
	color: var(--scp-primary, #2f4a38);
}

.scp-tab.is-current {
	border-bottom-color: var(--scp-accent, #8ca96b);
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-badge,
.scp-pill {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--scp-accent, #8ca96b);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	vertical-align: middle;
}

/* Lists and files --------------------------------------------------------- */

.scp-list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.scp-list li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-list li:last-child {
	border-bottom: 0;
}

.scp-stage {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-stage:last-of-type {
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-stage__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0.25rem;
	cursor: pointer;
	list-style: none;
}

.scp-stage__summary::-webkit-details-marker {
	display: none;
}

.scp-stage__label {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.0625rem;
	color: var(--scp-primary, #2f4a38);
}

.scp-stage__label::before {
	content: "\203A";
	display: inline-block;
	margin-right: 0.6rem;
	transition: transform 0.2s ease;
}

.scp-stage[open] .scp-stage__label::before {
	transform: rotate(90deg);
}

.scp-files {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0 0 0 1.4rem;
}

.scp-file {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 0;
	border-top: 1px dotted var(--scp-line, #dcd8cc);
}

.scp-file__main {
	flex: 1 1 14rem;
	min-width: 0;
}

.scp-file__name {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Forms ------------------------------------------------------------------- */

.scp-field {
	flex: 1 1 12rem;
	min-width: 0;
	margin-bottom: 1rem;
}

.scp-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	align-items: flex-start;
}

/* Without a minimum, a two-up row collapses into unreadable slivers on a
   phone before the wrap ever kicks in. */
@media (max-width: 30rem) {
	.scp-field-row {
		display: block;
	}
}

.scp-field > label,
.scp-field > fieldset > legend {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--scp-primary, #2f4a38);
}

.scp-field input:not([type="checkbox"]):not([type="radio"]),
.scp-field select,
.scp-field textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
	color: var(--scp-ink, #3a3a34);
	font-family: inherit;
	font-size: 1rem;
}

.scp-field input:focus {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 1px;
	border-color: var(--scp-accent, #8ca96b);
}

.scp-field input[readonly] {
	background: var(--scp-surface, #f5f3ee);
	color: var(--scp-muted, #6f6e62);
}

.scp-hidden-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scp-button {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--scp-primary, #2f4a38);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-primary, #2f4a38);
	color: #fff;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.scp-button:hover,
.scp-button:focus {
	background: var(--scp-primary-dark, #22372a);
	border-color: var(--scp-primary-dark, #22372a);
	color: #fff;
	box-shadow: 0 0 20px rgba(var(--scp-primary-rgb, 47, 74, 56), 0.35);
}

.scp-button--quiet {
	background: transparent;
	color: var(--scp-primary, #2f4a38);
}

.scp-button--quiet:hover,
.scp-button--quiet:focus {
	background: var(--scp-primary, #2f4a38);
	color: #fff;
}

/* EOI section grouping. Each question group is still its own fieldset
   (see public/views/enquiry.php) so Fix List can identify which part of
   the form an issue belongs to, and so a future revision has a seam to
   work with — but nothing steps between them or hides any of them. */
.scp-eoi-step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.scp-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1rem;
	margin: 0.5rem 0;
}

.scp-choice-row {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
}

.scp-choice-row .scp-choice {
	flex: 1 1 auto;
}

.scp-info {
	flex: none;
	position: relative;
}

.scp-info summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	border-radius: 999px;
	border: 1px solid var(--scp-line, #dcd8cc);
	color: var(--scp-muted, #6f6e62);
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.scp-info summary::-webkit-details-marker {
	display: none;
}

.scp-info summary:hover,
.scp-info[open] summary {
	border-color: var(--scp-primary, #2f4a38);
	color: var(--scp-primary, #2f4a38);
}

.scp-info p {
	position: absolute;
	z-index: 5;
	right: 0;
	top: 1.7rem;
	width: max-content;
	max-width: 16rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: var(--scp-panel, #fff);
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--scp-ink, #3a3a34);
}

@media (max-width: 640px) {
	.scp-choice-grid {
		grid-template-columns: 1fr;
	}

	.scp-info p {
		right: auto;
		left: 0;
	}
}

/* Notices ----------------------------------------------------------------- */

.scp-notice {
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
	border-left: 3px solid var(--scp-accent, #8ca96b);
	background: var(--scp-signature, #ede8dc);
	border-radius: 0;
	font-size: 0.9375rem;
}

.scp-notice--error {
	border-left-color: var(--scp-danger, #8c3a2e);
	color: var(--scp-danger, #8c3a2e);
}

.scp-notice--success {
	border-left-color: var(--scp-accent, #8ca96b);
}

@media (max-width: 600px) {
	.scp-file {
		align-items: flex-start;
	}

	.scp-header {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scp *,
	.scp *::before {
		transition: none !important;
	}
}

/* Project progress ---------------------------------------------------------
   A stepper, not a progress bar. Stages are named states a client recognises,
   and "in progress" is genuinely different from "60% done". */

.scp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: scp-step;
}

.scp-step {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
	padding: 0.6rem 0 0.6rem 1.75rem;
}

.scp-step::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 1.6rem;
	bottom: -0.6rem;
	width: 1px;
	background: var(--scp-line, #dcd8cc);
}

.scp-step:last-child::before {
	display: none;
}

.scp-step__dot {
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 0.7rem;
	height: 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 50%;
	background: var(--scp-panel, #fff);
}

.scp-step__label {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.0625rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-step__status {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-step--complete .scp-step__dot {
	background: var(--scp-accent, #8ca96b);
	border-color: var(--scp-accent, #8ca96b);
}

.scp-step--complete .scp-step__label {
	color: var(--scp-ink, #3a3a34);
}

.scp-step--in-progress .scp-step__dot {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
	box-shadow: 0 0 0 3px rgba(var(--scp-accent-rgb, 140, 169, 107), 0.3);
}

.scp-step--in-progress .scp-step__label {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-step--in-progress .scp-step__status {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-step--on-hold .scp-step__dot {
	background: var(--scp-danger, #8c3a2e);
	border-color: var(--scp-danger, #8c3a2e);
}

/* Activity timeline -------------------------------------------------------- */

.scp-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scp-timeline li {
	display: flex;
	gap: 0.9rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-timeline li:last-child {
	border-bottom: 0;
}

.scp-timeline__when {
	flex: 0 0 3.2rem;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
	white-space: nowrap;
}

.scp-timeline__what {
	flex: 1 1 auto;
	font-size: 0.9375rem;
}

.scp-timeline__what .scp-meta {
	display: block;
}

/* Attention panel ---------------------------------------------------------- */

.scp-panel--attention {
	border-left: 4px solid var(--scp-accent, #8ca96b);
	box-shadow: 0 0 24px rgba(var(--scp-accent-rgb, 140, 169, 107), 0.15);
}

/* Agreement ---------------------------------------------------------------
   Heavier than the rest of the portal on purpose. This page asks for a
   commitment, and it should not look like a file listing. */

.scp-deed {
	background: var(--scp-panel, #fff);
	border: 1px solid var(--scp-line, #dcd8cc);
	border-top: 4px solid var(--scp-primary, #2f4a38);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.scp-deed__head {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
	margin-bottom: 1.5rem;
}

.scp-deed__title {
	margin: 0 0 1.25rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--scp-primary, #2f4a38);
}

.scp-deed__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 0;
}

.scp-deed__facts div {
	margin: 0;
}

.scp-deed__facts dt {
	margin: 0 0 0.15rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-deed__facts dd {
	margin: 0;
	font-size: 1rem;
}

.scp-deed__section {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-deed__section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.scp-deed__section h2 {
	margin: 0 0 0.9rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-amount {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.5rem;
	color: var(--scp-primary, #2f4a38);
}

.scp-mono {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	word-break: break-all;
}

.scp-terms {
	max-height: 24rem;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #f5f3ee);
	font-size: 0.9375rem;
}

.scp-commercial {
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border: 1px solid var(--scp-primary, #2f4a38);
	border-left-width: 4px;
	background: var(--scp-surface, #f5f3ee);
}

.scp-commercial.is-expired {
	border-color: var(--scp-danger, #8c3a2e);
}

.scp-commercial__label {
	margin: 0 0 0.4rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-commercial.is-expired .scp-commercial__label {
	color: var(--scp-danger, #8c3a2e);
}

.scp-commercial p:last-child {
	margin-bottom: 0;
}

.scp-seal {
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	border: 2px solid var(--scp-primary, #2f4a38);
}

.scp-seal p {
	margin: 0 0 0.4rem;
}

.scp-seal p:last-child {
	margin-bottom: 0;
}

.scp-seal__mark {
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-check {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #f5f3ee);
	cursor: pointer;
	font-size: 0.9375rem;
}

.scp-check input {
	margin-top: 0.15rem;
}

.scp-check > span {
	flex: 1 1 auto;
	min-width: 0;
}

.scp-button--commit {
	padding: 0.9rem 2rem;
	font-size: 0.875rem;
}

.scp-versions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scp-versions li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
}

.scp-versions li:last-child {
	border-bottom: 0;
}

.scp-pill--accepted {
	background: var(--scp-primary, #2f4a38);
}

.scp-pill--issued {
	background: var(--scp-accent, #8ca96b);
}

.scp-pill--draft,
.scp-pill--superseded,
.scp-pill--withdrawn {
	background: var(--scp-muted, #6f6e62);
}

/* Covering note ------------------------------------------------------------
   Visibly outside the agreement body. Two voices, two treatments: the note is
   a person talking, the deed is an instrument. */

.scp-note {
	padding: 1.25rem 1.5rem;
	margin: 0 0 0.5rem;
	background: var(--scp-signature, #ede8dc);
	border-left: 3px solid var(--scp-accent, #8ca96b);
}

.scp-note__label {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-note p {
	margin: 0 0 0.75rem;
}

.scp-note__caveat {
	margin: 0.9rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-notices:empty {
	display: none;
}

.scp-seal__done {
	font-weight: 600;
}

.scp-button[aria-busy="true"],
.scp-button:disabled {
	opacity: 0.65;
	cursor: default;
}

/* Feedback ----------------------------------------------------------------- */

.scp-subhead {
	margin: 0 0 0.75rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--scp-primary, #2f4a38);
}

.scp-quote {
	margin: 0 0 1rem;
	padding: 0.9rem 1.25rem;
	background: var(--scp-surface, #f5f3ee);
	border-left: 3px solid var(--scp-line, #dcd8cc);
	font-size: 0.9375rem;
}

.scp-quote p:last-child {
	margin-bottom: 0;
}

.scp-due {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	margin: 0 0 1rem;
	background: var(--scp-signature, #ede8dc);
	font-size: 0.8125rem;
	font-weight: 600;
}

.scp-due.is-overdue {
	background: var(--scp-danger, #8c3a2e);
	color: #fff;
}

.scp-field textarea {
	padding: 0.7rem 0.8rem;
	line-height: 1.6;
}

.scp-field textarea:focus,
.scp-field select:focus {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 1px;
	border-color: var(--scp-accent, #8ca96b);
}

.scp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.scp-badge--dot {
	min-width: 1.15rem;
	text-align: center;
	background: var(--scp-danger, #8c3a2e);
}

.scp-outcomes {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.scp-outcome {
	padding: 0.85rem 0 0.85rem 0.9rem;
	border-left: 3px solid var(--scp-line, #dcd8cc);
	margin-bottom: 0.6rem;
}

.scp-outcome--actioned {
	border-left-color: var(--scp-accent, #8ca96b);
}

.scp-outcome--variation-raised {
	border-left-color: var(--scp-danger, #8c3a2e);
}

.scp-outcome__what {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.scp-outcome__status {
	margin: 0 0 0.4rem;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--scp-muted, #6f6e62);
}

.scp-outcome__reply p:last-child {
	margin-bottom: 0;
}

.scp-quote--added {
	margin-left: 1.25rem;
	border-left-color: var(--scp-accent, #8ca96b);
}

.scp-outcome--completed {
	border-left-color: var(--scp-accent, #8ca96b);
	opacity: 0.75;
}

.scp-outcome--answered {
	border-left-color: var(--scp-primary, #2f4a38);
}

.scp-file__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

.scp-field input[type="text"],
.scp-field input[type="email"],
.scp-field input[type="tel"],
.scp-field input[type="password"] {
	width: 100%;
}

.scp-ack {
	padding-top: 0.5rem;
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-ack__note {
	font-size: 0.875rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-ack__note strong {
	display: block;
	margin-top: 0.5rem;
	color: var(--scp-ink, #3a3a34);
}

/* Enquiry form -------------------------------------------------------------- */

.scp-enquiry .scp-panel {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

/* Selectable options.
   
   The native checkbox is taken out of the layout entirely rather than styled,
   because a theme can set its width, float, appearance or display and there is
   no reliable way to anticipate which. It stays in the document so it is still
   focusable, keyboard-operable and submitted; the visible control is drawn on
   the label, which nothing else has an opinion about. */

.scp-choices {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.scp-choice__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scp-choice {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--scp-ink, #3a3a34);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scp-choice__tick {
	position: relative;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 3px;
	background: var(--scp-panel, #fff);
}

.scp-choice__tick::after {
	content: "";
	position: absolute;
	top: 0.12rem;
	left: 0.34rem;
	width: 0.3rem;
	height: 0.62rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.12s ease;
}

.scp-choice__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scp-choice__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.scp-choice__body .scp-choice__text {
	flex: none;
}

.scp-choice__desc {
	overflow-wrap: anywhere;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--scp-muted, #6f6e62);
}

.scp-choice--described {
	align-items: flex-start;
}

.scp-choice--described .scp-choice__tick {
	margin-top: 0.15rem;
}

.scp-choice:hover {
	border-color: var(--scp-accent, #8ca96b);
}

.scp-choice__input:checked + .scp-choice {
	border-color: var(--scp-primary, #2f4a38);
	background: var(--scp-signature, #ede8dc);
}

.scp-choice__input:checked + .scp-choice .scp-choice__tick {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
}

.scp-choice__input:checked + .scp-choice .scp-choice__tick::after {
	transform: rotate(45deg) scale(1);
}

.scp-choice__input:focus-visible + .scp-choice {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 2px;
}

.scp-recap {
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	background: var(--scp-surface, #f5f3ee);
	border-radius: var(--scp-radius, 4px);
}

.scp-recap .scp-quote {
	margin-bottom: 0;
	background: transparent;
	padding-left: 0;
	border-left: 0;
}

/* Questionnaire ------------------------------------------------------------- */

.scp-questionnaire .scp-panel {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

.scp-quest__head {
	max-width: 44rem;
	margin: 0 auto 1.5rem;
}

.scp-progress {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin: 0.75rem 0 1.25rem;
}

.scp-progress__value {
	flex: 0 0 auto;
	min-width: 2.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-progress__track {
	flex: 1 1 auto;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--scp-line, #dcd8cc);
	overflow: hidden;
}

.scp-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--scp-accent, #8ca96b);
	transition: width 0.3s ease;
}

.scp .scp-steps-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp .scp-steps-nav > li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp .scp-steps-nav > li::marker,
.scp .scp-choices > li::marker {
	content: none;
}

.scp-steps-nav__item {
	display: flex;
	gap: 0.45rem;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-steps-nav__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: 50%;
	font-size: 0.6875rem;
	font-weight: 600;
}

.scp-steps-nav__item.is-done .scp-steps-nav__num {
	background: var(--scp-accent, #8ca96b);
	border-color: var(--scp-accent, #8ca96b);
	color: #fff;
}

.scp-steps-nav__item.is-current {
	color: var(--scp-primary, #2f4a38);
	font-weight: 600;
}

.scp-steps-nav__item.is-current .scp-steps-nav__num {
	background: var(--scp-primary, #2f4a38);
	border-color: var(--scp-primary, #2f4a38);
	color: #fff;
}

.scp-quest__intro {
	margin: 0 0 1.5rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-quest__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.scp-qfield {
	flex: 1 1 100%;
	min-width: 0;
	margin-bottom: 1.5rem;
}

.scp-qfield--half {
	flex: 1 1 calc(50% - 0.625rem);
}

.scp-qfield[hidden] {
	display: none;
}

.scp-qfield__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-qfield .scp-hint {
	margin: 0 0 0.5rem;
}

.scp-qfield input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.scp-qfield select,
.scp-qfield textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
	color: var(--scp-ink, #3a3a34);
}

.scp-qfield input:focus,
.scp-qfield select:focus,
.scp-qfield textarea:focus {
	outline: 2px solid var(--scp-accent, #8ca96b);
	outline-offset: 1px;
	border-color: var(--scp-accent, #8ca96b);
}

.scp-choices--tight {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.scp-choice__tick--round {
	border-radius: 50%;
}

.scp-choice__tick--round::after {
	top: 0.26rem;
	left: 0.26rem;
	width: 0.5rem;
	height: 0.5rem;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
}

.scp-choice__input:checked + .scp-choice .scp-choice__tick--round::after {
	transform: scale(1);
}

/* Sliders ------------------------------------------------------------------
   A range input cannot be styled either side of its thumb, so the filled part
   is painted as a gradient driven by a custom property the script updates. */

.scp-slider__value {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.5rem;
	color: var(--scp-primary, #2f4a38);
}

.scp-slider {
	--scp-slider-fill: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 1.5rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.scp-slider::-webkit-slider-runnable-track {
	height: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--scp-primary, #2f4a38) var(--scp-slider-fill),
		var(--scp-line, #dcd8cc) var(--scp-slider-fill)
	);
}

.scp-slider::-moz-range-track {
	height: 0.4rem;
	border-radius: 999px;
	background: var(--scp-line, #dcd8cc);
}

.scp-slider::-moz-range-progress {
	height: 0.4rem;
	border-radius: 999px;
	background: var(--scp-primary, #2f4a38);
}

.scp-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: -0.475rem;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--scp-primary, #2f4a38);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.scp-slider::-moz-range-thumb {
	width: 1.35rem;
	height: 1.35rem;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--scp-primary, #2f4a38);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.scp-slider:focus-visible {
	outline: none;
}

.scp-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(var(--scp-accent-rgb, 140, 169, 107), 0.6);
}

.scp-slider__ends {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-quest__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	padding-top: 0.5rem;
	border-top: 1px solid var(--scp-line, #dcd8cc);
	margin-top: 0.5rem;
}

/* Mobile.

   The step list is dropped entirely rather than shrunk: the panel already says
   "Section 2 of 5" immediately below it, so on a narrow screen it is a second
   copy of the same information taking up a third of the first screenful. The
   percentage bar stays, because that is the part that tells somebody the end is
   in sight. */

@media (max-width: 48rem) {
	.scp .scp-steps-nav {
		display: none;
	}
}

@media (max-width: 30rem) {
	.scp-qfield--half {
		flex: 1 1 100%;
	}

	.scp-questionnaire .scp-panel,
	.scp-enquiry .scp-panel {
		padding: 1.15rem;
	}

	.scp-quest__fields {
		gap: 0;
	}

	.scp-qfield {
		margin-bottom: 1.25rem;
	}

	/* One option per row. Two cramped columns is how a tap lands on the wrong
	   answer. */
	.scp-choices,
	.scp-choices--tight {
		grid-template-columns: 1fr;
	}

	.scp-slider__value {
		font-size: 1.25rem;
	}

	.scp-slider__ends {
		font-size: 0.75rem;
	}

	.scp-quest__actions .scp-button {
		flex: 1 1 100%;
		text-align: center;
	}

	.scp-title {
		font-size: 1.25rem;
	}
}

/* Touch targets. A 1.05rem checkbox is fine to look at and awkward to hit, so
   the whole card is the target and it is tall enough to land on. */
@media (pointer: coarse) {
	.scp-choice {
		min-height: 3rem;
		padding: 0.9rem 1rem;
	}

	.scp-slider {
		height: 2.5rem;
	}

	.scp-slider::-webkit-slider-thumb {
		width: 1.75rem;
		height: 1.75rem;
		margin-top: -0.7rem;
	}

	.scp-slider::-moz-range-thumb {
		width: 1.75rem;
		height: 1.75rem;
	}
}

/* What has changed --------------------------------------------------------- */

.scp-whatsnew {
	padding: 1rem 1.25rem;
	margin: 0 0 var(--scp-space);
	border: 1px solid var(--scp-accent, #8ca96b);
	border-left-width: 4px;
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-panel, #fff);
}

.scp-whatsnew__label {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scp-primary, #2f4a38);
}

.scp-whatsnew__list {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp-whatsnew__list li {
	display: flex;
	gap: 0.9rem;
	align-items: baseline;
	padding: 0.35rem 0;
	font-size: 0.9375rem;
	list-style: none !important;
}

.scp-whatsnew__list li + li {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-whatsnew__when {
	flex: 0 0 3rem;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
	white-space: nowrap;
}

.scp-whatsnew__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	color: var(--scp-ink, #3a3a34);
	text-decoration: none;
}

.scp-whatsnew__link:hover {
	color: var(--scp-primary, #2f4a38);
	text-decoration: underline;
}

.scp-whatsnew__go {
	color: var(--scp-accent, #8ca96b);
	font-size: 0.8125rem;
}

/* Deep-link target ----------------------------------------------------- */

.scp-highlighted {
	animation: scp-highlight-fade 3s ease-out;
	border-radius: var(--scp-radius, 4px);
}

@keyframes scp-highlight-fade {
	0% {
		box-shadow: 0 0 0 3px var(--scp-accent, #8ca96b);
		background-color: rgba(140, 169, 107, 0.14);
	}
	70% {
		box-shadow: 0 0 0 3px var(--scp-accent, #8ca96b);
		background-color: rgba(140, 169, 107, 0.14);
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
		background-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scp-highlighted {
		animation: none;
		box-shadow: 0 0 0 3px var(--scp-accent, #8ca96b);
		background-color: rgba(140, 169, 107, 0.14);
	}
}

.scp-step.is-new .scp-step__label {
	font-weight: 600;
	color: var(--scp-primary, #2f4a38);
}

.scp-eyebrow .scp-pill,
.scp-strong .scp-pill,
.scp-step .scp-pill {
	margin-left: 0.4rem;
	vertical-align: middle;
}

.scp-tab .scp-badge {
	margin-left: 0.3rem;
}

@media (max-width: 30rem) {
	.scp-whatsnew {
		padding: 0.85rem 1rem;
	}
}

.scp-field input[type="file"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px dashed var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-surface, #f5f3ee);
	font-size: 0.9375rem;
}

.scp-file__actions .scp-link-quiet {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
}

.scp-people {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp-person {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0.85rem 0;
	list-style: none !important;
}

.scp-person + .scp-person {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-person__main {
	min-width: 0;
}

.scp-person__main p {
	margin: 0 0 0.15rem;
}

/* Dropzone ------------------------------------------------------------------ */

.scp-drop {
	padding: 1.25rem;
	border: 2px dashed var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	background: var(--scp-surface, #f5f3ee);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scp-drop.is-over {
	border-color: var(--scp-accent, #8ca96b);
	background: var(--scp-panel, #fff);
}

.scp-drop__prompt {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-drop__or {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
}

.scp-drop input[type="file"] {
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
}

.scp-drop__list {
	list-style: none !important;
	margin: 0.9rem 0 0;
	padding: 0;
}

.scp-drop__list li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.45rem 0;
	list-style: none !important;
	font-size: 0.875rem;
}

.scp-drop__list li + li {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-drop__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--scp-ink, #3a3a34);
}

.scp-drop__size {
	flex: 0 0 auto;
	color: var(--scp-muted, #6f6e62);
	font-size: 0.8125rem;
}

.scp-drop__remove {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
	text-decoration: underline;
}

.scp-drop__remove:hover {
	color: var(--scp-primary, #2f4a38);
}

@media (pointer: coarse) {
	.scp-drop {
		padding: 1rem;
	}

	.scp-drop__remove {
		min-height: 2.25rem;
	}
}

/* Action required ----------------------------------------------------------- */

.scp-actions {
	border-left: 4px solid var(--scp-primary, #2f4a38);
}

.scp-actions__late {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--scp-warning, #8a6d3b);
}

.scp-actions__list {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.scp-action {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 0;
	list-style: none !important;
}

.scp-action + .scp-action {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-action__main {
	min-width: 0;
}

.scp-action__main p {
	margin: 0 0 0.15rem;
}

.scp-action__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--scp-ink, #3a3a34);
}

.scp-action__due {
	font-size: 0.8125rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-action__due.is-late {
	color: var(--scp-warning, #8a6d3b);
	font-weight: 600;
}

.scp-action__go {
	flex: 0 0 auto;
}

.scp-action.is-late .scp-action__title {
	color: var(--scp-primary, #2f4a38);
}

@media (max-width: 32rem) {
	.scp-action {
		display: block;
	}

	.scp-action__go {
		margin-top: 0.7rem;
		display: inline-block;
	}
}

/* Requests ------------------------------------------------------------------ */

.scp-backlink {
	margin: 0 0 1rem;
	font-size: 0.875rem;
}

.scp-request__prompt {
	font-size: 1rem;
}

.scp-numbered {
	list-style: none !important;
	counter-reset: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.scp-numbered li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 0.45rem 0;
	list-style: none !important;
	font-size: 0.9375rem;
}

.scp-numbered li + li {
	border-top: 1px solid var(--scp-line, #dcd8cc);
}

.scp-numbered__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--scp-signature, #ede8dc);
	color: var(--scp-primary, #2f4a38);
	font-size: 0.75rem;
	font-weight: 700;
}

.scp-inline-form {
	margin: 0;
	margin-left: auto;
}

.scp-inline-form .scp-link-quiet {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
}

.scp-outcome--variation-raised,
.scp-outcome--variation-declined {
	border-left-color: var(--scp-warning, #8a6d3b);
}

.scp-outcome--variation-declined {
	opacity: 0.7;
}

/* Quote lines --------------------------------------------------------------- */

.scp-quote-lines {
	margin: 0 0 var(--scp-space);
}

.scp-lines {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.scp-lines td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--scp-line, #dcd8cc);
	vertical-align: top;
}

.scp-lines__what {
	padding-right: 1rem;
}

.scp-lines__amount {
	width: 8rem;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.scp-lines tr.is-estimate .scp-lines__amount {
	color: var(--scp-muted, #6f6e62);
}

.scp-lines tfoot td {
	border-bottom: 0;
	padding-top: 0.5rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-lines__total td {
	padding-top: 0.75rem;
	border-top: 2px solid var(--scp-primary, #2f4a38);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--scp-ink, #3a3a34);
}

.scp-lines__note {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-figure {
	margin: 0.25rem 0 0.5rem;
	font-family: var(--scp-font-heading, sans-serif);
	font-size: 1.75rem;
	color: var(--scp-primary, #2f4a38);
}

/* Signature pad ------------------------------------------------------------- */

.scp-signpad__canvas {
	display: block;
	width: 100%;
	height: 180px;
	border: 1px solid var(--scp-line, #dcd8cc);
	border-radius: var(--scp-radius, 4px);
	/* Deliberately always white, not themed — a signing surface follows
	   paper/pad convention regardless of the portal's own colour scheme,
	   the same way a physical signature pad doesn't change colour to
	   match the room it's in. */
	background: #fff;
	touch-action: none;
	cursor: crosshair;
}

.scp-signpad .scp-hint {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
}

.scp-signpad .scp-link-quiet {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
}

.scp-code-input {
	max-width: 9rem;
	letter-spacing: 0.4em;
	font-size: 1.25rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.scp-consent {
	padding: 0.9rem 1.1rem;
	margin: 0 0 1rem;
	border-left: 3px solid var(--scp-line, #dcd8cc);
	background: var(--scp-surface, #f5f3ee);
	font-size: 0.875rem;
	color: var(--scp-muted, #6f6e62);
}

.scp-consent p:last-child {
	margin-bottom: 0;
}

/* Document lifecycle ---------------------------------------------------- */

.scp-pill--muted {
	background: var(--scp-muted, #6f6e62);
}

.scp-file--superseded {
	opacity: 0.65;
}

.scp-file--superseded .scp-file__name {
	text-decoration: line-through;
	text-decoration-color: var(--scp-muted, #6f6e62);
}