/**
 * Email Templates editor (AUD-F8) — Settings → Notifications.
 *
 * Composes on top of settings.css (loaded as a dependency), reusing its
 * design tokens. Only the editor-specific layout lives here. Every value is a
 * --listora-* token with a hex fallback so the file reads correctly even if a
 * token is missing in an older cache.
 */

.listora-email-templates__event {
	margin-block-end: var(--listora-space-2, 8px);
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-md, 8px);
	background: var(--listora-bg-surface);
}

.listora-email-templates__body {
	padding: var(--listora-space-3, 12px);
}

.listora-email-templates__field {
	margin: 0 0 var(--listora-space-3, 12px);
}

.listora-email-templates__field-label {
	display: block;
	margin-block-end: var(--listora-space-1, 4px);
	font-weight: 600;
	color: var(--listora-fg);
}

.listora-email-templates__subject,
.listora-email-templates__textarea {
	width: 100%;
	max-width: 640px;
}

.listora-email-templates__textarea {
	min-height: 120px;
	font-family: var(--listora-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: var(--listora-text-size-sm, 13px);
	line-height: 1.6;
}

.listora-email-templates__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--listora-space-1, 6px);
	margin-block-end: var(--listora-space-3, 12px);
}

.listora-email-templates__legend-label {
	margin-inline-end: var(--listora-space-1, 4px);
	font-size: var(--listora-text-size-xs, 12px);
	color: var(--listora-fg-muted);
}

.listora-email-templates__placeholder {
	padding: 2px 6px;
	border-radius: var(--listora-radius-sm, 4px);
	background: var(--listora-bg-muted);
	font-size: var(--listora-text-size-xs, 12px);
	color: var(--listora-fg);
	cursor: copy;
}

.listora-email-templates__placeholder.is-copied {
	background: var(--listora-success-bg);
	color: var(--listora-success-fg);
}

.listora-email-templates__actions {
	margin: 0;
}

.listora-email-templates__reset {
	display: inline-flex;
	align-items: center;
	gap: var(--listora-space-1, 6px);
	font-size: var(--listora-text-size-sm, 13px);
	color: var(--listora-fg-muted);
}

@media (max-width: 1024px) {
	.listora-email-templates__subject,
	.listora-email-templates__textarea {
		max-width: 100%;
	}
}

@media (max-width: 640px) {

	.listora-email-templates__body {
		padding-inline: var(--listora-space-2, 8px);
	}
}

/* ── One row per email (card 10337185716) ── */

.listora-email-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The list sits in the block's content inset; rows add no side padding. */
.listora-email-row {
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--listora-border-subtle);
}

.listora-email-row:first-child {
	border-top: 0;
}

.listora-email-row__main {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.listora-email-row__main .listora-toggle {
	flex-shrink: 0;
	margin-top: 2px;
}

.listora-email-row__text {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	min-width: 0;
}

.listora-email-row__desc,
.listora-email-row__to {
	flex-basis: 100%;
	color: var(--listora-fg-muted);
	font-size: 13px;
}

.listora-email-row__to {
	font-size: 12px;
}

.listora-email-row__actions {
	display: flex;
	flex-shrink: 0;
	gap: 6px;
}

.listora-email-row__editor {
	margin: 12px 0 0;
	margin-inline-start: 58px;
}

/* Preview dialog: the email as a member receives it, in a sandboxed frame. */
.listora-email-preview-dialog {
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 20px;
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-lg, 12px);
	background: var(--listora-bg-elevated);
	color: var(--listora-fg-default);
	box-shadow: var(--listora-shadow-lg);
}

.listora-email-preview-dialog::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.listora-email-preview-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.listora-email-preview-dialog__title {
	margin: 0;
	font-size: 16px;
}

.listora-email-preview-dialog__subject {
	margin: 12px 0;
}

.listora-email-preview-dialog .listora-email-preview {
	display: block;
	width: 100%;
	height: 60vh;
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md, 8px);
	background: var(--listora-bg-surface);
}

@media (max-width: 782px) {
	.listora-email-row__main {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.listora-email-row__text {
		flex-basis: calc(100% - 56px);
	}

	.listora-email-row__actions {
		flex-wrap: wrap;
		width: 100%;
	}

	.listora-email-row__editor {
		margin-inline-start: 0;
	}
}