/**
 * Free Schema Generator — styles.
 * Own design: card layout, 8-12px radius, light/dark via [data-theme] or
 * prefers-color-scheme when data-theme="auto". No horizontal overflow on
 * mobile. Scoped under .fsg to avoid leaking into the theme.
 */

.fsg {
	--fsg-bg: #f6f7f9;
	--fsg-card-bg: #ffffff;
	--fsg-border: #e2e5ea;
	--fsg-text: #1c2430;
	--fsg-text-muted: #667085;
	--fsg-primary: #2563eb;
	--fsg-primary-text: #ffffff;
	--fsg-danger: #d92d20;
	--fsg-warning: #b54708;
	--fsg-ok: #067647;
	--fsg-radius: 10px;
	--fsg-radius-sm: 8px;
	--fsg-code-bg: #0f172a;
	--fsg-code-text: #e2e8f0;

	color: var( --fsg-text );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	box-sizing: border-box;
}

.fsg *,
.fsg *::before,
.fsg *::after {
	box-sizing: inherit;
}

.fsg[data-theme='dark'],
.fsg[data-theme='auto'] {
	color-scheme: light dark;
}

@media ( prefers-color-scheme: dark ) {
	.fsg[data-theme='auto'] {
		--fsg-bg: #12151c;
		--fsg-card-bg: #1a1f2a;
		--fsg-border: #2b3140;
		--fsg-text: #e6e9ef;
		--fsg-text-muted: #97a1b3;
		--fsg-code-bg: #0b0e14;
		--fsg-code-text: #d6deeb;
	}
}

.fsg[data-theme='dark'] {
	--fsg-bg: #12151c;
	--fsg-card-bg: #1a1f2a;
	--fsg-border: #2b3140;
	--fsg-text: #e6e9ef;
	--fsg-text-muted: #97a1b3;
	--fsg-code-bg: #0b0e14;
	--fsg-code-text: #d6deeb;
}

.fsg-inner {
	background: var( --fsg-bg );
	padding: 20px;
	border-radius: var( --fsg-radius );
}

.fsg-h1 {
	font-size: 1.7rem;
	margin: 0 0 16px;
}

.fsg-noscript {
	background: #fff3cd;
	color: #664d03;
	padding: 12px 16px;
	border-radius: var( --fsg-radius-sm );
}

.fsg-card {
	background: var( --fsg-card-bg );
	border: 1px solid var( --fsg-border );
	border-radius: var( --fsg-radius );
	padding: 16px;
	min-width: 0;
}

.fsg-card__title {
	font-size: 1.05rem;
	margin: 0 0 12px;
}

.fsg-row {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.fsg-row--top {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 320px );
}

.fsg-row--bottom {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: start;
}

/* ---- SERP preview card ---- */

.fsg-serp__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
	margin-bottom: 14px;
}

.fsg-field--full {
	grid-column: 1 / -1;
}

.fsg-serp__preview {
	border: 1px solid var( --fsg-border );
	border-radius: var( --fsg-radius-sm );
	padding: 14px 16px;
	background: var( --fsg-card-bg );
}

.fsg-serp__sitename {
	font-size: 0.85rem;
	color: var( --fsg-text-muted );
}

.fsg-serp__url {
	font-size: 0.8rem;
	color: #4d5a6b;
	word-break: break-all;
}

.fsg-serp__title {
	color: #1a0dab;
	font-size: 1.15rem;
	margin: 2px 0;
	text-decoration: none;
}

.fsg[data-theme='dark'] .fsg-serp__title,
.fsg[data-theme='auto'] .fsg-serp__title {
	color: #8ab4f8;
}

.fsg-serp__rating {
	color: #e37400;
	font-size: 0.85rem;
	margin: 2px 0;
}

.fsg-serp__desc {
	color: var( --fsg-text-muted );
	font-size: 0.9rem;
}

/* ---- Schema picker ---- */

.fsg-picker__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 420px;
	overflow-y: auto;
}

/* ---- Tabs ---- */

.fsg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.fsg-tab {
	border: 1px solid var( --fsg-border );
	background: var( --fsg-card-bg );
	color: var( --fsg-text );
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.85rem;
	cursor: pointer;
}

.fsg-tab.is-active {
	background: var( --fsg-primary );
	border-color: var( --fsg-primary );
	color: var( --fsg-primary-text );
}

/* ---- Forms ---- */

.fsg-empty {
	color: var( --fsg-text-muted );
	margin: 0;
}

.fsg-panel__title {
	margin: 0 0 12px;
	font-size: 1rem;
}

.fsg-field {
	margin-bottom: 12px;
}

.fsg-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.fsg-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var( --fsg-border );
	border-radius: var( --fsg-radius-sm );
	background: var( --fsg-card-bg );
	color: var( --fsg-text );
	font: inherit;
}

.fsg-input:focus-visible,
.fsg-btn:focus-visible,
.fsg-tab:focus-visible,
.fsg-iconbtn:focus-visible,
.fsg-chip:focus-visible {
	outline: 2px solid var( --fsg-primary );
	outline-offset: 1px;
}

.fsg-textarea {
	resize: vertical;
}

.fsg-group {
	border: 1px solid var( --fsg-border );
	border-radius: var( --fsg-radius-sm );
	padding: 12px;
	margin: 0 0 14px;
}

.fsg-group__title {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0 4px;
}

.fsg-group__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
}

.fsg-field--list .fsg-label {
	margin-bottom: 8px;
}

.fsg-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.fsg-list__row {
	display: flex;
	gap: 6px;
	align-items: center;
}

.fsg-list__row .fsg-input {
	flex: 1;
}

.fsg-list__objrow {
	border: 1px solid var( --fsg-border );
	border-radius: var( --fsg-radius-sm );
	padding: 10px;
}

.fsg-list__objhead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8rem;
	color: var( --fsg-text-muted );
	margin-bottom: 8px;
}

.fsg-list__objactions {
	display: flex;
	gap: 4px;
}

.fsg-iconbtn {
	border: 1px solid var( --fsg-border );
	background: var( --fsg-card-bg );
	color: var( --fsg-text );
	border-radius: var( --fsg-radius-sm );
	width: 28px;
	height: 28px;
	cursor: pointer;
	line-height: 1;
}

.fsg-chip {
	border: 1px dashed var( --fsg-border );
	background: transparent;
	color: var( --fsg-primary );
	border-radius: var( --fsg-radius-sm );
	padding: 6px 12px;
	font-size: 0.85rem;
	cursor: pointer;
}

.fsg-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	cursor: pointer;
}

.fsg-check input[disabled] + span {
	opacity: 0.5;
}

.fsg-help {
	font-size: 0.8rem;
	color: var( --fsg-text-muted );
	margin: 8px 0 0;
}

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

.fsg-output {
	position: sticky;
	top: 16px;
}

.fsg-output__status {
	margin-bottom: 10px;
}

.fsg-status {
	margin: 0 0 4px;
	font-size: 0.82rem;
}

.fsg-status--ok {
	color: var( --fsg-ok );
}

.fsg-status--error {
	color: var( --fsg-danger );
}

.fsg-status--warning {
	color: var( --fsg-warning );
}

.fsg-status--info {
	color: var( --fsg-text-muted );
}

.fsg-output__code {
	background: var( --fsg-code-bg );
	color: var( --fsg-code-text );
	border-radius: var( --fsg-radius-sm );
	padding: 14px;
	overflow-x: auto;
	max-height: 480px;
	overflow-y: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	white-space: pre;
}

.fsg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.fsg-actions--test {
	margin-top: 8px;
}

.fsg-btn {
	border: 1px solid var( --fsg-border );
	background: var( --fsg-card-bg );
	color: var( --fsg-text );
	border-radius: var( --fsg-radius-sm );
	padding: 8px 14px;
	font-size: 0.85rem;
	cursor: pointer;
}

.fsg-btn--primary {
	background: var( --fsg-primary );
	border-color: var( --fsg-primary );
	color: var( --fsg-primary-text );
}

.fsg-btn--outline {
	background: transparent;
}

/* ---- Toast ---- */

.fsg-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate( -50%, 12px );
	background: var( --fsg-text );
	color: var( --fsg-card-bg );
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 0.85rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 100;
	max-width: calc( 100vw - 32px );
}

.fsg-toast.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
}

/* ---- Responsive ---- */

@media ( max-width: 960px ) {
	.fsg-row--top,
	.fsg-row--bottom {
		grid-template-columns: 1fr;
	}
	.fsg-output {
		position: static;
	}
}

@media ( max-width: 600px ) {
	.fsg-inner {
		padding: 12px;
	}
	.fsg-serp__fields,
	.fsg-group__grid {
		grid-template-columns: 1fr;
	}
	.fsg-card {
		padding: 12px;
	}
	.fsg-actions {
		flex-direction: column;
	}
	.fsg-actions .fsg-btn {
		width: 100%;
	}
}