/**
 * Schema generator — module styles.
 * Shared components (inputs, buttons, mode toggle, CTA banner, notices)
 * come from the shared stylesheet; the dynamic field grid, repeat groups
 * and the highlighted code output live here.
 */

.svt-wrap[data-tool="schema-generator"] {
	max-width: 880px;
}

.svt-required {
	color: var(--svt-primary);
}

.svt-sg-optional {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--svt-muted);
	margin-left: 4px;
}

/* Mode toggle first (its own row), then the type select. */
.svt-sg-modewrap {
	flex: 1 1 100%;
}

.svt-sg-typefield {
	flex: 1 1 calc(50% - 7px);
	min-width: 240px;
}

/* URL mode row: field grows, button hugs it. */
.svt-sg-urlrow {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	width: 100%;
}

.svt-sg-urlrow[hidden] {
	display: none !important;
}

.svt-sg-urlfield {
	flex: 1 1 auto;
	margin: 0;
}

.svt-sg-extract {
	flex: 0 0 auto;
}

.svt-sg-extract.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

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

.svt-sg-fields {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.svt-sg-field {
	margin: 0;
	flex: 1 1 calc(50% - 7px);
	min-width: 220px;
}

.svt-sg-field--textarea,
.svt-sg-field--repeat {
	flex: 1 1 100%;
}

.svt-sg-hint {
	margin: 5px 0 0;
	font-size: 12px;
	color: var(--svt-muted);
}

/* ---------- Repeat groups ---------- */

.svt-sg-repeat {
	flex: 1 1 100%;
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	padding: 16px;
	background: var(--svt-tile);
}

.svt-sg-repeat-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--svt-text);
	margin-bottom: 12px;
}

.svt-sg-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.svt-sg-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--svt-bg);
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	padding: 14px;
}

.svt-sg-row-fields {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.svt-sg-row-fields .svt-sg-field {
	flex: 1 1 calc(50% - 6px);
	min-width: 180px;
}

.svt-sg-row-fields .svt-sg-field--textarea {
	flex: 1 1 100%;
}

.svt-sg-row-tools {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.svt-sg-add {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin-top: 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--svt-primary);
	cursor: pointer;
}

.svt-sg-add:hover,
.svt-sg-add:focus-visible {
	text-decoration: underline;
}

.svt-sg-add:focus {
	outline: none;
}

.svt-sg-extractnote[hidden],
.svt-sg-typefield[hidden],
.svt-sg-fields[hidden],
.svt-sg-modehint[hidden] {
	display: none !important;
}

.svt-sg-modehint {
	width: 100%;
	margin: 0;
	font-size: 13.5px;
	color: var(--svt-muted);
}

/* Submit: 1/3 right-aligned, no lone-flex-child grow. */
.svt-sg-form .svt-button[type="submit"] {
	flex: 0 1 calc(33.333% - 7px);
	min-width: 170px;
	margin-left: auto;
}

/* ---------- Output ---------- */

.svt-sg-toolbar {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 10px;
}

.svt-sg-copy.is-copied {
	border-color: var(--svt-teal, #38e1d0);
	color: #0f766e;
}

.svt-sg-code {
	margin: 0;
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	background: #1d2333;
	color: #dfe5f1;
	padding: 18px 20px;
	font-size: 13px;
	line-height: 1.65;
	overflow-x: auto;
	tab-size: 2;
}

.svt-sg-code code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	white-space: pre;
}

.svt-js-key  { color: #9fb4ff; }
.svt-js-str  { color: #7fe3d4; }
.svt-js-num  { color: #f2c46d; }
.svt-js-bool { color: #f092e6; }

/* ---------- Tip box ---------- */

.svt-sg-tip {
	margin-top: 18px;
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	padding: 16px 20px;
	background: var(--svt-bg);
}

.svt-sg-tip p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--svt-text);
}

.svt-sg-tip .svt-lq-ai-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svt-slate);
	margin-bottom: 8px;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
	.svt-sg-typefield {
		flex: 1 1 100%;
	}

	.svt-sg-mode {
		display: flex;
		width: 100%;
	}

	.svt-sg-mode .svt-mode-btn {
		flex: 1 1 auto;
		padding: 8px 10px;
		text-align: center;
	}

	.svt-sg-urlrow {
		flex-wrap: wrap;
	}

	.svt-sg-extract {
		flex: 1 1 100%;
	}

	.svt-sg-field,
	.svt-sg-row-fields .svt-sg-field {
		flex: 1 1 100%;
	}

	.svt-sg-row {
		flex-direction: column;
	}

	.svt-sg-row-tools {
		flex-direction: row;
		align-self: flex-end;
	}

	.svt-sg-form .svt-button[type="submit"] {
		flex: 1 1 100%;
	}

	.svt-sg-toolbar .svt-button {
		flex: 1 1 100%;
	}
}