/* Email Signature Generator – public page.
   Everything is scoped under .esg-app so it can live inside a theme page (shortcode). */

.esg-app {
	--esg-accent: #2F5D8A;
	--esg-canvas: #E3E6EA;
	--esg-paper: #FFFFFF;
	--esg-ink: #17202B;
	--esg-muted: #5C6876;
	--esg-line: #D2D7DE;
	--esg-soft: #EDF0F3;
	--esg-warn: #9A4B00;
	--esg-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	display: grid;
	grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	font-family: var(--esg-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--esg-ink);
	background: var(--esg-canvas);
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

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

/* ---------- Standalone page ---------- */

.esg-standalone { margin: 0; background: #E3E6EA; }
.esg-standalone .esg-page { min-height: 100vh; }
.esg-standalone .esg-app { min-height: 100vh; border-radius: 0; }

/* ---------- Left panel ---------- */

.esg-panel {
	background: var(--esg-paper);
	padding: 40px 36px 48px;
	border-right: 1px solid var(--esg-line);
}

.esg-head { margin-bottom: 32px; }
.esg-head__logo {
	display: block;
	max-width: 160px;
	max-height: 48px;
	width: auto;
	height: auto;
	margin-bottom: 28px;
}
.esg-head__title {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--esg-ink);
}
.esg-head__intro {
	margin: 0;
	max-width: 34ch;
	color: var(--esg-muted);
}

.esg-form { margin: 0; }
.esg-field { margin-bottom: 18px; }
.esg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.esg-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--esg-ink);
}
.esg-req { color: var(--esg-accent); }
.esg-opt { font-weight: 400; color: var(--esg-muted); }

.esg-app .esg-input {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	font: inherit;
	color: var(--esg-ink);
	background: var(--esg-paper);
	border: 1px solid var(--esg-line);
	border-radius: 6px;
	box-shadow: none;
	transition: border-color .15s;
}
.esg-app .esg-input::placeholder { color: #9AA3AE; }
.esg-app .esg-input:hover { border-color: #AEB6C0; }
.esg-app .esg-input:focus {
	outline: 2px solid var(--esg-accent);
	outline-offset: 1px;
	border-color: var(--esg-accent);
}
.esg-app .esg-input[aria-invalid="true"] { border-color: var(--esg-warn); }

.esg-hint { margin: 6px 0 0; font-size: 13px; color: var(--esg-warn); }

/* Layout picker: the thumbnails sketch each layout's structure. */
.esg-designs { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.esg-designs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esg-design { position: relative; display: block; cursor: pointer; }
.esg-design input { position: absolute; opacity: 0; pointer-events: none; }
.esg-design__body {
	display: block;
	padding: 12px 12px 10px;
	border: 1px solid var(--esg-line);
	border-radius: 8px;
	background: var(--esg-paper);
	transition: border-color .15s, box-shadow .15s;
}
.esg-design:hover .esg-design__body { border-color: #AEB6C0; }
.esg-design input:checked + .esg-design__body {
	border-color: var(--esg-accent);
	box-shadow: inset 0 0 0 1px var(--esg-accent);
}
.esg-design input:focus-visible + .esg-design__body { outline: 2px solid var(--esg-accent); outline-offset: 2px; }
.esg-design__name { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; }

.esg-thumb { display: block; height: 58px; position: relative; }
.esg-thumb i, .esg-thumb b, .esg-thumb s { display: block; background: #C5CCD4; border-radius: 1px; text-decoration: none; }
.esg-thumb--minimal i { width: 62%; height: 9px; background: #9AA3AE; }
.esg-thumb--minimal b { width: 70%; height: 1px; margin: 7px 0 7px; background: #9AA3AE; }
.esg-thumb--minimal s { height: 4px; margin-bottom: 4px; }
.esg-thumb--minimal s:nth-of-type(1) { width: 38%; background: #9AA3AE; }
.esg-thumb--minimal s:nth-of-type(2) { width: 30%; }
.esg-thumb--minimal s:nth-of-type(3) { width: 44%; }
.esg-thumb--card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--esg-line);
	border-radius: 5px;
	background: var(--esg-soft);
}
.esg-thumb--card i { width: 26%; height: 12px; background: #9AA3AE; border-radius: 6px; }
.esg-thumb--card b { width: 2px; align-self: stretch; background: #9AA3AE; }
.esg-thumb--card span { flex: 1; }
.esg-thumb--card s { height: 4px; margin: 4px 0; }
.esg-thumb--card s:nth-of-type(1) { width: 70%; height: 6px; background: #9AA3AE; }
.esg-thumb--card s:nth-of-type(2) { width: 88%; }
.esg-thumb--card s:nth-of-type(3) { width: 60%; }

/* ---------- Right stage: signature shown inside a new-message window ---------- */

.esg-stage {
	padding: 56px clamp(20px, 5vw, 72px) 64px;
	min-width: 0;
}

.esg-mail {
	max-width: 760px;
	background: var(--esg-paper);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(23, 32, 43, .06), 0 12px 32px -12px rgba(23, 32, 43, .22);
	overflow: hidden;
}
.esg-mail__bar {
	padding: 11px 20px;
	font-size: 13px;
	font-weight: 500;
	color: #FFFFFF;
	background: #2A3440;
}
.esg-mail__line {
	margin: 0 20px;
	padding: 11px 0;
	font-size: 14px;
	color: var(--esg-muted);
	border-bottom: 1px solid var(--esg-soft);
}
.esg-mail__body { padding: 24px 20px 28px; }
.esg-mail__text i {
	display: block;
	height: 9px;
	margin-bottom: 10px;
	border-radius: 5px;
	background: var(--esg-soft);
}
.esg-mail__sig {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px dashed var(--esg-line);
	overflow-x: auto;
}
.esg-preview {
	display: block;
	width: 100%;
	min-width: 280px;
	height: 200px;
	border: 0;
	background: transparent;
}

.esg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 760px;
	margin-top: 24px;
}
.esg-app .esg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--esg-ink);
	background: var(--esg-paper);
	border: 1px solid var(--esg-line);
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s, border-color .15s;
}
.esg-app .esg-btn:hover { border-color: #AEB6C0; }
.esg-app .esg-btn:focus-visible { outline: 2px solid var(--esg-accent); outline-offset: 2px; }
.esg-app .esg-btn--primary {
	min-width: 170px;
	color: #FFFFFF;
	background: var(--esg-accent);
	border-color: var(--esg-accent);
}
.esg-app .esg-btn--primary:hover { filter: brightness(1.08); border-color: var(--esg-accent); }
.esg-app .esg-btn--primary[aria-disabled="true"] { opacity: .55; }
.esg-app .esg-btn--primary.is-done { background: #2E7D4F; border-color: #2E7D4F; }

.esg-status {
	max-width: 760px;
	min-height: 1.5em;
	margin: 12px 0 0;
	font-size: 14px;
	color: #2E6B47;
}
.esg-status[data-tone="warn"] { color: var(--esg-warn); }

.esg-help {
	max-width: 760px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #CDD3DA;
	font-size: 14px;
	color: var(--esg-muted);
}
.esg-help summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--esg-ink);
	width: fit-content;
}
.esg-help summary:focus-visible { outline: 2px solid var(--esg-accent); outline-offset: 3px; border-radius: 2px; }
.esg-help dl { margin: 14px 0 0; }
.esg-help dt { margin-top: 12px; font-weight: 500; color: var(--esg-ink); }
.esg-help dd { margin: 2px 0 0; max-width: 64ch; }
.esg-help p { margin: 16px 0 0; max-width: 64ch; }

/* ---------- Footer ---------- */

.esg-footer {
	grid-column: 1 / -1;
	padding: 18px 36px;
	background: var(--esg-paper);
	border-top: 1px solid var(--esg-line);
}
.esg-footer p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--esg-muted);
}

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
	.esg-app { grid-template-columns: 1fr; grid-template-rows: none; }
	.esg-footer { padding: 16px 20px; }
	.esg-panel { border-right: 0; border-bottom: 1px solid var(--esg-line); padding: 28px 20px 12px; }
	.esg-stage { padding: 28px 16px 40px; }
	.esg-head { margin-bottom: 24px; }
	.esg-head__logo { margin-bottom: 20px; }
	.esg-head__title { font-size: 24px; }
	.esg-actions .esg-btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
	.esg-row { grid-template-columns: 1fr; gap: 0; }
}

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