/**
 * Embeddable widget: the standalone /embed/{tool}/ document, plus the snippet
 * builder UI. Depends on calculator.css for the design tokens.
 */

/* ---------------------------------------------------------------- frame -- */

.cmr-embed-root,
body.cmr-embed {
	margin: 0;
	padding: 0;
	background: var(--cmr-bg);
}

body.cmr-embed--white,
.cmr-embed-root--white {
	background: #fff;
}

body.cmr-embed {
	font-family: var(--cmr-font);
	color: var(--cmr-ink);
	/* The host page owns scrolling; the frame reports its height instead. */
	overflow: hidden;
}

.cmr-embed__inner {
	padding: 16px;
}

/* The calculator's page-level max-width is meaningless inside a frame. */
.cmr-embed .cmr-tool {
	width: 100%;
}

.cmr-embed .cmr-tool__shell {
	box-shadow: 0 6px 18px rgba( 20, 20, 19, 0.07 );
}

.cmr-embed__brand {
	margin: 12px 0 0;
	text-align: right;
	font-size: 13px;
	line-height: 1.4;
}

.cmr-embed__brand a {
	color: var(--cmr-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--cmr-border);
}

.cmr-embed__brand a:hover,
.cmr-embed__brand a:focus-visible {
	color: var(--cmr-accent);
	border-bottom-color: currentColor;
}

/* Narrow columns are the common embed case — drop the frame padding so the
   calculator keeps as much width as possible. */
@media (max-width: 560px) {
	.cmr-embed__inner {
		padding: 10px;
	}
}

/* -------------------------------------------------------------- builder -- */

.cmr-embedder {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	margin: 2rem 0;
}

@media (min-width: 900px) {
	.cmr-embedder {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		align-items: start;
	}

	.cmr-embedder__preview {
		grid-column: 1 / -1;
	}
}

.cmr-embedder__controls,
.cmr-embedder__code {
	background: var(--cmr-surface);
	border: 1px solid var(--cmr-border);
	border-radius: var(--cmr-radius-card, 16px);
	padding: 1.25rem;
}

.cmr-embedder__field {
	margin: 0 0 1rem;
	display: grid;
	gap: 0.35rem;
}

.cmr-embedder__field:last-child {
	margin-bottom: 0;
}

.cmr-embedder__field > label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cmr-ink-soft);
}

.cmr-embedder__field select,
.cmr-embedder__field input[type="number"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font: inherit;
	color: var(--cmr-ink);
	background: var(--cmr-surface);
	border: 1px solid var(--cmr-border);
	border-radius: 10px;
}

.cmr-embedder__field select:focus-visible,
.cmr-embedder__field input:focus-visible,
.cmr-embedder__code textarea:focus-visible {
	outline: 2px solid var(--cmr-accent);
	outline-offset: 1px;
}

.cmr-embedder__field--check > label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.cmr-embedder__hint {
	font-size: 0.78rem;
	color: var(--cmr-muted);
	line-height: 1.45;
}

.cmr-embedder__codehead {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.cmr-embedder__codehead strong {
	font-size: 0.9rem;
}

.cmr-embedder__code textarea {
	width: 100%;
	padding: 0.9rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--cmr-ink);
	background: var(--cmr-lifted);
	border: 1px solid var(--cmr-border);
	border-radius: 10px;
	resize: vertical;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.cmr-embedder__note {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--cmr-muted);
}

.cmr-embedder__previewhead {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
}

.cmr-embedder__preview iframe {
	width: 100%;
	max-width: 100%;
	border: 1px dashed var(--cmr-border);
	border-radius: var(--cmr-radius-card, 16px);
	background: var(--cmr-bg);
}