/**
 * Signature Foundry — builder styles.
 *
 * Everything is namespaced under .signature-foundry-* so the plugin never leaks into a theme or
 * fights wp-admin. Colours come from tokens declared on .signature-foundry-app and .signature-foundry-wrap,
 * with a dark set for viewers whose system asks for one.
 */

.signature-foundry-app,
.signature-foundry-wrap,
.signature-foundry-output,
.signature-foundry-paywall {
	--signature-foundry-paper: #e7ebed;
	--signature-foundry-surface: #f7f9fa;
	--signature-foundry-surface2: #ffffff;
	--signature-foundry-sunk: #eef2f4;
	--signature-foundry-line: #cfd8dc;
	--signature-foundry-line-soft: #e2e8ea;
	--signature-foundry-ink: #141b1e;
	--signature-foundry-body: #2e3b40;
	--signature-foundry-muted: #5f6f76;
	--signature-foundry-faint: #87979e;
	--signature-foundry-accent: #0e6e86;
	--signature-foundry-accent-ink: #0a5468;
	--signature-foundry-accent-soft: #d6e9f0;
	--signature-foundry-accent-line: #9ccbd9;
	--signature-foundry-on-accent: #ffffff;
	--signature-foundry-emerald: #1b6b4a;
	--signature-foundry-radius: 10px;
	--signature-foundry-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media ( prefers-color-scheme: dark ) {
	.signature-foundry-app,
	.signature-foundry-wrap,
	.signature-foundry-output,
	.signature-foundry-paywall {
		--signature-foundry-paper: #0d1214;
		--signature-foundry-surface: #151e21;
		--signature-foundry-surface2: #1b262a;
		--signature-foundry-sunk: #101819;
		--signature-foundry-line: #2a383d;
		--signature-foundry-line-soft: #223034;
		--signature-foundry-ink: #e9f0f2;
		--signature-foundry-body: #c6d3d7;
		--signature-foundry-muted: #93a6ad;
		--signature-foundry-faint: #77898f;
		--signature-foundry-accent: #57bad1;
		--signature-foundry-accent-ink: #8ad3e4;
		--signature-foundry-accent-soft: #123039;
		--signature-foundry-accent-line: #245c6c;
		--signature-foundry-on-accent: #08181d;
		--signature-foundry-emerald: #63c398;
	}
}

/* wp-admin keeps its own light chrome, so pin the light set back on inside it. */
body.wp-admin .signature-foundry-app,
body.wp-admin .signature-foundry-wrap {
	--signature-foundry-paper: #e7ebed;
	--signature-foundry-surface: #ffffff;
	--signature-foundry-surface2: #ffffff;
	--signature-foundry-sunk: #f2f5f7;
	--signature-foundry-line: #ccd6da;
	--signature-foundry-line-soft: #e4eaec;
	--signature-foundry-ink: #141b1e;
	--signature-foundry-body: #2e3b40;
	--signature-foundry-muted: #5f6f76;
	--signature-foundry-faint: #87979e;
	--signature-foundry-accent: #0e6e86;
	--signature-foundry-accent-ink: #0a5468;
	--signature-foundry-on-accent: #ffffff;
}

.signature-foundry-lede {
	max-width: 68ch;
	color: var( --signature-foundry-muted );
	font-size: 13.5px;
}

.signature-foundry-heading {
	margin: 0 0 14px;
	color: var( --signature-foundry-ink );
}

/* ------------------------------------------------------------------ layout */

.signature-foundry-app {
	color: var( --signature-foundry-body );
	font-size: 14px;
	line-height: 1.5;
}

.signature-foundry-grid {
	display: grid;
	grid-template-columns: minmax( 320px, 400px ) minmax( 0, 1fr );
	gap: 20px;
	align-items: start;
	margin-top: 14px;
}

@media ( max-width: 1100px ) {
	.signature-foundry-grid {
		grid-template-columns: 1fr;
	}
}

.signature-foundry-panel {
	background: var( --signature-foundry-surface );
	border: 1px solid var( --signature-foundry-line );
	border-radius: var( --signature-foundry-radius );
	box-shadow: 0 1px 2px rgba( 20, 27, 30, 0.05 );
}

.signature-foundry-controls {
	display: flex;
	flex-direction: column;
}

.signature-foundry-out {
	position: sticky;
	top: 46px;
	overflow: hidden;
}

.signature-foundry-locknote {
	margin: 0;
	padding: 11px 16px;
	font-size: 12.5px;
	color: var( --signature-foundry-muted );
	background: var( --signature-foundry-accent-soft );
	border-bottom: 1px solid var( --signature-foundry-line-soft );
	border-radius: var( --signature-foundry-radius ) var( --signature-foundry-radius ) 0 0;
}

/* --------------------------------------------------------------- accordion */

.signature-foundry-sec {
	border-bottom: 1px solid var( --signature-foundry-line-soft );
}

.signature-foundry-sec:last-child {
	border-bottom: 0;
}

.signature-foundry-sec > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	user-select: none;
}

.signature-foundry-sec > summary::-webkit-details-marker {
	display: none;
}

.signature-foundry-sec[ open ] > summary {
	background: var( --signature-foundry-sunk );
}

.signature-foundry-num {
	font-family: var( --signature-foundry-mono );
	font-size: 11px;
	color: var( --signature-foundry-faint );
	width: 18px;
	flex: none;
}

.signature-foundry-title {
	font-weight: 600;
	color: var( --signature-foundry-ink );
	font-size: 13.5px;
}

.signature-foundry-hint {
	margin-left: auto;
	font-size: 11.5px;
	color: var( --signature-foundry-faint );
	font-family: var( --signature-foundry-mono );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 44%;
}

.signature-foundry-chev {
	width: 12px;
	height: 12px;
	flex: none;
	color: var( --signature-foundry-faint );
	transition: transform 0.18s;
}

.signature-foundry-sec[ open ] > summary .signature-foundry-chev {
	transform: rotate( 90deg );
}

.signature-foundry-sec-body {
	padding: 4px 16px 18px;
}

/* ------------------------------------------------------------------ fields */

.signature-foundry-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.signature-foundry-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 11px;
	min-width: 0;
}

.signature-foundry-field > label,
.signature-foundry-lbl {
	font-family: var( --signature-foundry-mono );
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var( --signature-foundry-faint );
}

.signature-foundry-app input[ type="text" ],
.signature-foundry-app input[ type="url" ],
.signature-foundry-app input[ type="email" ],
.signature-foundry-app input[ type="tel" ],
.signature-foundry-app select,
.signature-foundry-app textarea {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 7px;
	padding: 7px 9px;
	width: 100%;
	min-width: 0;
	color: var( --signature-foundry-ink );
	font-size: 13px;
	box-shadow: none;
	line-height: 1.4;
	max-width: none;
}

.signature-foundry-app textarea {
	resize: vertical;
	min-height: 64px;
}

.signature-foundry-app input:focus,
.signature-foundry-app select:focus,
.signature-foundry-app textarea:focus {
	outline: 2px solid var( --signature-foundry-accent );
	outline-offset: 1px;
	border-color: var( --signature-foundry-accent );
}

.signature-foundry-check {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	cursor: pointer;
	font-size: 13px;
	color: var( --signature-foundry-body );
}

.signature-foundry-check input {
	accent-color: var( --signature-foundry-accent );
	width: 15px;
	height: 15px;
	flex: none;
	margin: 0;
}

.signature-foundry-rangerow {
	display: flex;
	align-items: center;
	gap: 10px;
}

.signature-foundry-rangerow input[ type="range" ] {
	flex: 1;
	accent-color: var( --signature-foundry-accent );
	min-width: 0;
}

.signature-foundry-rangerow output {
	font-family: var( --signature-foundry-mono );
	font-size: 11.5px;
	color: var( --signature-foundry-muted );
	width: 44px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.signature-foundry-colorrow {
	display: flex;
	gap: 8px;
	align-items: center;
}

.signature-foundry-colorrow input[ type="color" ] {
	width: 34px;
	height: 30px;
	padding: 2px;
	border: 1px solid var( --signature-foundry-line );
	border-radius: 6px;
	background: var( --signature-foundry-surface2 );
	cursor: pointer;
	flex: none;
}

.signature-foundry-note {
	font-size: 11.5px;
	color: var( --signature-foundry-faint );
	line-height: 1.5;
	margin: 10px 0 0;
}

/* ---------------------------------------------------------------- segments */

.signature-foundry-seg {
	display: flex;
	background: var( --signature-foundry-sunk );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 7px;
	padding: 2px;
	gap: 2px;
}

.signature-foundry-seg button {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 5px 6px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12px;
	color: var( --signature-foundry-muted );
	white-space: nowrap;
}

.signature-foundry-seg button[ aria-pressed="true" ] {
	background: var( --signature-foundry-surface2 );
	color: var( --signature-foundry-ink );
	font-weight: 500;
}

/* ---------------------------------------------------------------- template */

.signature-foundry-tpl-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 10px;
	margin-top: 12px;
}

.signature-foundry-tpl {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 8px;
	padding: 7px 7px 5px;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.signature-foundry-tpl:hover {
	border-color: var( --signature-foundry-accent-line );
}

.signature-foundry-tpl[ aria-pressed="true" ] {
	border-color: var( --signature-foundry-accent );
	box-shadow: 0 0 0 1px var( --signature-foundry-accent );
}

.signature-foundry-tpl svg {
	width: 100%;
	height: auto;
	display: block;
}

.signature-foundry-tpl span {
	font-size: 11px;
	color: var( --signature-foundry-muted );
}

.signature-foundry-tpl[ aria-pressed="true" ] span {
	color: var( --signature-foundry-ink );
	font-weight: 500;
}

/* -------------------------------------------------------------------- inks */

.signature-foundry-inks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.signature-foundry-ink {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	cursor: pointer;
	padding: 0;
}

.signature-foundry-ink[ aria-pressed="true" ] {
	box-shadow: 0 0 0 2px var( --signature-foundry-surface ), 0 0 0 4px var( --signature-foundry-accent );
}

/* ------------------------------------------------------------------ social */

.signature-foundry-soc-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 12px;
}

.signature-foundry-soc {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 9px;
	align-items: center;
}

.signature-foundry-badge {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	flex: none;
}

.signature-foundry-soc.signature-foundry-off .signature-foundry-badge {
	filter: grayscale( 1 );
	opacity: 0.35;
}

/* ------------------------------------------------------- icon style picker */

.signature-foundry-iconstyles {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 8px;
	margin-top: 8px;
}

.signature-foundry-iconstyle {
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: flex-start;
	padding: 10px 11px;
	border: 1px solid var( --signature-foundry-line-soft );
	border-radius: 8px;
	background: var( --signature-foundry-surface2 );
	cursor: pointer;
	text-align: left;
	min-height: 62px;
	justify-content: space-between;
}

.signature-foundry-iconstyle:hover {
	border-color: var( --signature-foundry-accent-line );
}

.signature-foundry-iconstyle[ aria-pressed="true" ] {
	border-color: var( --signature-foundry-accent );
	box-shadow: inset 0 0 0 1px var( --signature-foundry-accent );
}

.signature-foundry-iconstyle-locked {
	cursor: default;
	opacity: 0.72;
}

.signature-foundry-iconstyle-locked:hover {
	border-color: var( --signature-foundry-line-soft );
}

/* The sample is real signature markup, so it is pinned to a white ground the way a
   mail client would show it, whatever theme the builder is wearing. */
.signature-foundry-iconstyle-sample {
	display: block;
	width: 100%;
	background: #ffffff;
	border-radius: 5px;
	padding: 2px 6px 6px;
	overflow: hidden;
}

.signature-foundry-iconstyle-name {
	font-size: 11px;
	color: var( --signature-foundry-muted );
	line-height: 1.3;
}

.signature-foundry-iconstyle[ aria-pressed="true" ] .signature-foundry-iconstyle-name {
	color: var( --signature-foundry-accent );
	font-weight: 600;
}

/* ----------------------------------------------------------------- buttons */

.signature-foundry-btnlist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0;
}

.signature-foundry-btnrow {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 11px 11px;
	border: 1px solid var( --signature-foundry-line-soft );
	border-radius: 8px;
	background: var( --signature-foundry-sunk );
}

.signature-foundry-btnrow-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.signature-foundry-btnrow-x {
	border: 0;
	background: transparent;
	color: var( --signature-foundry-faint );
	font-size: 17px;
	line-height: 1;
	padding: 2px 5px;
	cursor: pointer;
	border-radius: 5px;
}

.signature-foundry-btnrow-x:hover {
	color: var( --signature-foundry-ink );
	background: var( --signature-foundry-surface2 );
}

.signature-foundry-btnrow-opts {
	display: flex;
	gap: 7px;
	align-items: center;
	flex-wrap: wrap;
}

.signature-foundry-btnrow-opts select {
	flex: 1 1 120px;
	min-width: 0;
}

.signature-foundry-btnrow-opts input[ type="color" ] {
	flex: none;
	width: 38px;
	padding: 2px;
}

/* ------------------------------------------------------------------ output */

.signature-foundry-tabs {
	display: flex;
	border-bottom: 1px solid var( --signature-foundry-line );
	background: var( --signature-foundry-sunk );
	padding: 0 8px;
	flex-wrap: wrap;
}

.signature-foundry-tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 11px 13px;
	cursor: pointer;
	color: var( --signature-foundry-muted );
	font-size: 13px;
	font-weight: 500;
}

.signature-foundry-tab[ aria-selected="true" ] {
	color: var( --signature-foundry-ink );
	border-bottom-color: var( --signature-foundry-accent );
}

.signature-foundry-cnt {
	font-family: var( --signature-foundry-mono );
	font-size: 10.5px;
	color: var( --signature-foundry-faint );
	margin-left: 5px;
}

.signature-foundry-pane {
	padding: 18px;
}

.signature-foundry-pane[ hidden ] {
	display: none;
}

.signature-foundry-toolbar {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.signature-foundry-spacer {
	flex: 1;
}

.signature-foundry-status {
	font-size: 12px;
	color: var( --signature-foundry-emerald );
	font-family: var( --signature-foundry-mono );
	opacity: 0;
	transition: opacity 0.2s;
}

.signature-foundry-status.signature-foundry-on {
	opacity: 1;
}

.signature-foundry-btn {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	color: var( --signature-foundry-body );
	padding: 7px 13px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.signature-foundry-btn:hover {
	border-color: var( --signature-foundry-accent-line );
	color: var( --signature-foundry-ink );
}

.signature-foundry-btn-primary {
	background: var( --signature-foundry-accent );
	border-color: var( --signature-foundry-accent );
	color: var( --signature-foundry-on-accent );
	font-weight: 600;
}

.signature-foundry-btn-primary:hover {
	background: var( --signature-foundry-accent-ink );
	border-color: var( --signature-foundry-accent-ink );
	color: var( --signature-foundry-on-accent );
}

.signature-foundry-btn[ disabled ] {
	opacity: 0.6;
	cursor: default;
}

/* ------------------------------------------------------------- compose mock */

.signature-foundry-compose {
	background: #fff;
	border: 1px solid var( --signature-foundry-line );
	border-radius: 8px;
	overflow: hidden;
	margin: 0 auto;
	max-width: 100%;
	transition: max-width 0.2s;
}

.signature-foundry-compose-bar {
	background: #f1f3f4;
	border-bottom: 1px solid #e3e6e8;
	padding: 8px 12px;
	display: flex;
	gap: 6px;
	align-items: center;
}

.signature-foundry-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d5d9dc;
}

.signature-foundry-subj {
	font-size: 11.5px;
	color: #5f6f76;
	font-family: var( --signature-foundry-mono );
	margin-left: 6px;
}

.signature-foundry-compose-body {
	padding: 20px;
	color: #202124;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.signature-foundry-signoff {
	color: #3c4043;
	margin: 0 0 16px;
}

.signature-foundry-sigwrap {
	overflow-x: auto;
}

/* -------------------------------------------------------------------- code */

.signature-foundry-code {
	background: var( --signature-foundry-sunk );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 8px;
	padding: 14px;
	overflow: auto;
	max-height: 520px;
	font-family: var( --signature-foundry-mono );
	font-size: 11.5px;
	line-height: 1.6;
	color: var( --signature-foundry-body );
	margin: 0;
	white-space: pre;
}

.signature-foundry-code .signature-foundry-t {
	color: var( --signature-foundry-accent );
}

.signature-foundry-code .signature-foundry-a {
	color: #8a6216;
}

@media ( prefers-color-scheme: dark ) {
	.signature-foundry-code .signature-foundry-a {
		color: #d6ab57;
	}
}

/* ----------------------------------------------------------------- install */

.signature-foundry-install {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 14px;
}

.signature-foundry-card {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 9px;
	padding: 14px 16px;
}

.signature-foundry-card h4 {
	margin: 0 0 4px;
	font-size: 15px;
	color: var( --signature-foundry-ink );
}

.signature-foundry-path {
	font-family: var( --signature-foundry-mono );
	font-size: 11px;
	color: var( --signature-foundry-faint );
	margin-bottom: 9px;
}

.signature-foundry-card ol {
	margin: 0;
	padding-left: 17px;
	font-size: 12.8px;
	line-height: 1.65;
	color: var( --signature-foundry-body );
}

/* ----------------------------------------------------------------- paywall */

.signature-foundry-paywall {
	border: 1px solid var( --signature-foundry-accent-line );
	background: var( --signature-foundry-accent-soft );
	border-radius: var( --signature-foundry-radius );
	padding: 30px 26px;
}

.signature-foundry-paywall-inner {
	max-width: 56ch;
	margin: 0 auto;
	text-align: center;
}

.signature-foundry-paywall-eyebrow {
	font-family: var( --signature-foundry-mono );
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --signature-foundry-accent-ink );
	margin: 0 0 6px;
}

.signature-foundry-paywall h3 {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.25;
	color: var( --signature-foundry-ink );
	text-wrap: balance;
}

.signature-foundry-paywall-body {
	margin: 0 0 18px;
	color: var( --signature-foundry-body );
	font-size: 14px;
}

.signature-foundry-plans {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
}

.signature-foundry-plan {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 9px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.signature-foundry-plan-name {
	font-weight: 600;
	color: var( --signature-foundry-ink );
}

.signature-foundry-plan-price {
	font-size: 20px;
	color: var( --signature-foundry-accent-ink );
}

.signature-foundry-plan-price del {
	opacity: 0.55;
	font-size: 15px;
}

.signature-foundry-paywall-note {
	font-size: 12.5px;
	color: var( --signature-foundry-muted );
	margin: 8px 0 0;
}

/* ------------------------------------------------------- admin extras */

.signature-foundry-team td.signature-foundry-team-preview {
	background: #fff;
	padding: 16px;
}

.signature-foundry-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	background: var( --signature-foundry-sunk );
	border: 1px solid var( --signature-foundry-line );
	color: var( --signature-foundry-muted );
}

.signature-foundry-pill-on {
	background: var( --signature-foundry-accent-soft );
	border-color: var( --signature-foundry-accent-line );
	color: var( --signature-foundry-accent-ink );
}

.signature-foundry-profile-preview {
	background: #fff;
	border: 1px solid var( --signature-foundry-line );
	border-radius: 8px;
	padding: 16px;
	max-width: 640px;
	overflow-x: auto;
}

.signature-foundry-editor-placeholder {
	border: 1px dashed var( --signature-foundry-line );
	border-radius: 8px;
	padding: 26px;
	text-align: center;
	color: var( --signature-foundry-muted );
	display: grid;
	gap: 4px;
}

.signature-foundry-quick-product {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.signature-foundry-snippets code {
	white-space: nowrap;
}

/* ------------------------------------------------------------ plans & tiers */

.signature-foundry-planchip {
	margin: 0;
	padding: 10px 16px;
	font-size: 12.5px;
	color: var( --signature-foundry-ink );
	background: var( --signature-foundry-sunk );
	border-bottom: 1px solid var( --signature-foundry-line-soft );
	border-radius: var( --signature-foundry-radius ) var( --signature-foundry-radius ) 0 0;
	font-weight: 600;
}

.signature-foundry-planchip span {
	font-family: var( --signature-foundry-mono );
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --signature-foundry-faint );
	font-weight: 400;
	margin-right: 6px;
}

.signature-foundry-sec-locked > summary .signature-foundry-title {
	color: var( --signature-foundry-muted );
}

.signature-foundry-sec-locked > summary .signature-foundry-hint {
	color: var( --signature-foundry-accent-ink );
}

.signature-foundry-tpl-locked {
	opacity: 0.45;
	cursor: default;
	position: relative;
}

.signature-foundry-tpl-locked::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: repeating-linear-gradient( 135deg, transparent 0 6px, rgba( 0, 0, 0, 0.04 ) 6px 12px );
}

.signature-foundry-upsell {
	border: 1px solid var( --signature-foundry-accent-line );
	background: var( --signature-foundry-accent-soft );
	border-radius: 9px;
	padding: 16px;
	margin-top: 12px;
	display: grid;
	gap: 6px;
	justify-items: start;
}

.signature-foundry-upsell-plan {
	margin: 0;
	font-weight: 600;
	color: var( --signature-foundry-ink );
	font-size: 14px;
}

.signature-foundry-upsell-blurb {
	margin: 0 0 4px;
	font-size: 12.8px;
	color: var( --signature-foundry-body );
	line-height: 1.5;
}

.signature-foundry-plan-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 16px;
	margin: 18px 0;
	align-items: start;
}

.signature-foundry-plan-card {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 10px;
	padding: 16px 18px 18px;
}

.signature-foundry-plan-card header h2 {
	margin: 0 0 2px;
	font-size: 17px;
	color: var( --signature-foundry-ink );
}

.signature-foundry-plan-card header p {
	margin: 0 0 12px;
	font-size: 12.5px;
	color: var( --signature-foundry-muted );
	line-height: 1.5;
}

.signature-foundry-plan-card h3 {
	font-family: var( --signature-foundry-mono );
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var( --signature-foundry-faint );
	margin: 14px 0 6px;
	font-weight: 400;
}

.signature-foundry-hint-inline {
	text-transform: none;
	letter-spacing: 0;
	color: var( --signature-foundry-faint );
	margin-left: 6px;
}

.signature-foundry-feature-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 3px;
}

.signature-foundry-feature-list label {
	font-size: 12.5px;
	color: var( --signature-foundry-body );
	display: flex;
	gap: 7px;
	align-items: flex-start;
	line-height: 1.4;
}

.signature-foundry-limit-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
	gap: 8px;
}

.signature-foundry-limit-grid label {
	display: grid;
	gap: 3px;
	font-size: 11.5px;
	color: var( --signature-foundry-muted );
}

.signature-foundry-limit-grid input {
	width: 100%;
}

.signature-foundry-org-switch,
.signature-foundry-range {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0 18px;
}

.signature-foundry-btn-sm {
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 6px;
}

/* ------------------------------------------------------------- stats & charts */

.signature-foundry-stat-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) );
	gap: 14px;
	margin: 6px 0 26px;
	max-width: 720px;
}

.signature-foundry-stat {
	border-left: 3px solid var( --signature-foundry-accent );
	padding: 2px 0 2px 12px;
	display: grid;
	gap: 2px;
}

.signature-foundry-stat-label {
	font-family: var( --signature-foundry-mono );
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --signature-foundry-faint );
}

.signature-foundry-stat-value {
	font-size: 27px;
	line-height: 1.1;
	color: var( --signature-foundry-ink );
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.signature-foundry-chart-title {
	font-size: 14px;
	color: var( --signature-foundry-ink );
	margin: 26px 0 6px;
}

.signature-foundry-chart-wrap {
	max-width: 760px;
	overflow-x: auto;
}

.signature-foundry-chart {
	width: 100%;
	height: auto;
	display: block;
}

.signature-foundry-chart-a {
	fill: #0091b5;
}

.signature-foundry-chart-b {
	fill: #c25518;
}

.signature-foundry-chart-grid {
	stroke: var( --signature-foundry-line );
	stroke-width: 1;
}

.signature-foundry-chart-tick {
	fill: var( --signature-foundry-faint );
	font-size: 10px;
	font-family: var( --signature-foundry-mono );
}

.signature-foundry-chart-peak {
	fill: var( --signature-foundry-muted );
	font-size: 11px;
	font-family: var( --signature-foundry-mono );
	font-variant-numeric: tabular-nums;
}

@media ( prefers-color-scheme: dark ) {
	.signature-foundry-chart-a {
		fill: #2c9ebd;
	}

	.signature-foundry-chart-b {
		fill: #ce7a45;
	}
}

body.wp-admin .signature-foundry-chart-a {
	fill: #0091b5;
}

body.wp-admin .signature-foundry-chart-b {
	fill: #c25518;
}


/* ------------------------------------------------------ handwriting picker */
/* The ten bundled faces, all SIL Open Font License 1.1. Paths are relative to
   this stylesheet, so they resolve wherever the plugin is installed. */
@font-face {
	font-family: 'Great Vibes';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/great-vibes.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Allura';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/allura.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Parisienne';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/parisienne.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Petit Formal Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/petit-formal-script.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Alex Brush';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/alex-brush.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Sacramento';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/sacramento.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Dancing Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/dancing-script.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Yellowtail';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/yellowtail.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/caveat.woff2' ) format( 'woff2' );
}

@font-face {
	font-family: 'Homemade Apple';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/homemade-apple.woff2' ) format( 'woff2' );
}

.signature-foundry-hands {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.signature-foundry-hand {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 9px;
	padding: 10px 12px 8px;
	cursor: pointer;
	text-align: left;
	display: grid;
	gap: 2px;
	overflow: hidden;
}

.signature-foundry-hand:hover {
	border-color: var( --signature-foundry-accent-line );
}

.signature-foundry-hand[ aria-pressed="true" ] {
	border-color: var( --signature-foundry-accent );
	box-shadow: 0 0 0 1px var( --signature-foundry-accent );
}

.signature-foundry-hand-sample {
	font-size: 27px;
	line-height: 1.35;
	color: var( --signature-foundry-ink );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.signature-foundry-hand-name {
	font-family: var( --signature-foundry-mono );
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --signature-foundry-faint );
}

.signature-foundry-hand-great-vibes .signature-foundry-hand-sample { font-family: 'Great Vibes', cursive; }
.signature-foundry-hand-allura .signature-foundry-hand-sample { font-family: 'Allura', cursive; }
.signature-foundry-hand-parisienne .signature-foundry-hand-sample { font-family: 'Parisienne', cursive; }
.signature-foundry-hand-petit-formal-script .signature-foundry-hand-sample { font-family: 'Petit Formal Script', cursive; }
.signature-foundry-hand-alex-brush .signature-foundry-hand-sample { font-family: 'Alex Brush', cursive; }
.signature-foundry-hand-sacramento .signature-foundry-hand-sample { font-family: 'Sacramento', cursive; }
.signature-foundry-hand-dancing-script .signature-foundry-hand-sample { font-family: 'Dancing Script', cursive; }
.signature-foundry-hand-yellowtail .signature-foundry-hand-sample { font-family: 'Yellowtail', cursive; }
.signature-foundry-hand-caveat .signature-foundry-hand-sample { font-family: 'Caveat', cursive; }
.signature-foundry-hand-homemade-apple .signature-foundry-hand-sample { font-family: 'Homemade Apple', cursive; }

.signature-foundry-warn {
	background: var( --signature-foundry-accent-soft );
	border: 1px solid var( --signature-foundry-accent-line );
	border-radius: 8px;
	padding: 10px 12px;
	color: var( --signature-foundry-body );
}

/* ------------------------------------------------------- stock banner library */

.signature-foundry-lib-filter {
	margin-bottom: 10px;
}

.signature-foundry-lib-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-height: 320px;
	overflow-y: auto;
	padding-right: 4px;
}

.signature-foundry-lib-tile {
	background: var( --signature-foundry-surface2 );
	border: 1px solid var( --signature-foundry-line );
	border-radius: 9px;
	padding: 6px;
	cursor: pointer;
	display: grid;
	gap: 5px;
	text-align: left;
}

.signature-foundry-lib-tile:hover {
	border-color: var( --signature-foundry-accent-line );
}

.signature-foundry-lib-tile[ aria-pressed="true" ] {
	border-color: var( --signature-foundry-accent );
	box-shadow: 0 0 0 1px var( --signature-foundry-accent );
}

.signature-foundry-lib-tile img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 5px;
}

.signature-foundry-lib-tile span {
	font-size: 11.5px;
	color: var( --signature-foundry-muted );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.signature-foundry-lib-tile[ hidden ] {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.signature-foundry-app * {
		transition: none !important;
	}
}