/* [grlca_ai_builder] — sits on top of portal.css tokens (--ink, --paper, --accent…). */

.grlca-portal-wrap.grlca-ai { max-width: 1240px; }

.grlca-ai .grlca-ai-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: 1.5rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-sm);
}
.grlca-ai .grlca-ai-card h2 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.35rem;
	margin: 0 0 1rem;
}

.grlca-ai .grlca-ai-lead { font-size: 1.1rem; line-height: 1.6; margin: 0 0 1rem; }

.grlca-ai .grlca-ai-steps {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	margin: 0 0 1.5rem; padding-left: 1.2rem; color: var(--muted);
}

.grlca-ai .grlca-ai-email label { display: block; font-weight: 600; margin-bottom: .4rem; }
.grlca-ai .grlca-ai-email__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.grlca-ai .grlca-ai-email__row input { flex: 1 1 260px; }

.grlca-ai input[type=text],
.grlca-ai input[type=email],
.grlca-ai textarea {
	width: 100%;
	font: inherit;
	padding: .7rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper-2);
	color: var(--ink);
}
.grlca-ai input:focus,
.grlca-ai textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.grlca-ai .grlca-ai-field { margin: 0 0 1rem; }
.grlca-ai .grlca-ai-field > label { display: block; font-weight: 600; margin-bottom: .35rem; }
.grlca-ai .grlca-ai-field small { display: block; color: var(--muted); margin-top: .35rem; }

.grlca-ai .grlca-ai-radios { display: flex; gap: 1.25rem; }

.grlca-ai .grlca-ai-types {
	display: grid; gap: .75rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grlca-ai .grlca-ai-types label {
	display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; align-items: center;
	padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--paper-2); cursor: pointer; font-weight: 400;
}
.grlca-ai .grlca-ai-types label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.grlca-ai .grlca-ai-types small { grid-column: 2; color: var(--muted); }

.grlca-ai .grlca-ai-grid {
	display: grid; gap: 0 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grlca-ai .grlca-ai-pages {
	display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.grlca-ai .grlca-ai-pages label {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
	background: var(--paper-2); cursor: pointer;
}
.grlca-ai .grlca-ai-pages label.is-fixed { opacity: .7; cursor: default; }

.grlca-ai .grlca-ai-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.25rem 0 1rem; }
.grlca-ai .grlca-ai-thumbs img {
	width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line);
}
.grlca-ai .grlca-ai-thumbs .is-error { color: var(--danger); font-size: .9rem; }

.grlca-ai .grlca-ai-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0 2rem; }
.grlca-ai .grlca-ai-submit button[disabled] { opacity: .6; cursor: progress; }

.grlca-ai .grlca-ai-quota {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
	padding: .8rem 1rem; margin-bottom: 1.25rem;
	border-radius: var(--radius); background: var(--accent-soft); color: var(--ink);
}
.grlca-ai .grlca-ai-quota.is-empty { background: rgba(217,119,6,.1); }

.grlca-ai .grlca-ai-history ul { list-style: none; margin: 0; padding: 0; }
.grlca-ai .grlca-ai-history li {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding: .6rem 0; border-top: 1px solid var(--line-2);
}
.grlca-ai .grlca-ai-history li:first-child { border-top: 0; }

.grlca-ai .grlca-ai-picked {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.25rem; margin: 1rem 0;
	border: 1px solid var(--accent); border-radius: var(--radius-lg);
	background: var(--accent-soft);
}
.grlca-ai .grlca-ai-picked p { margin: 0; }

.grlca-ai .grlca-ai-back { margin: 0 0 .5rem; }
.grlca-ai .grlca-ai-buildtitle { font-family: var(--serif); font-weight: 500; margin: 0 0 .5rem; }

/* ── The three samples ─────────────────────────────────────────────── */

.grlca-ai .grlca-ai-samples {
	display: grid; gap: 1.25rem; margin: 1.5rem 0 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grlca-ai .grlca-ai-sample {
	display: flex; flex-direction: column;
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius-xl); overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: border-color .2s, transform .2s;
}
.grlca-ai .grlca-ai-sample.is-ready:hover { transform: translateY(-2px); border-color: var(--ink); }
.grlca-ai .grlca-ai-sample.is-picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* The preview is the real page at desktop width, scaled down to the card. */
.grlca-ai .grlca-ai-sample__frame {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden;
	background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.grlca-ai .grlca-ai-sample__frame iframe {
	position: absolute; top: 0; left: 0;
	width: 1280px; height: 1600px; border: 0;
	transform-origin: 0 0; transform: scale(var(--grlca-ai-scale, .3));
	pointer-events: none;
}

.grlca-ai .grlca-ai-sample__wait {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
	color: var(--muted);
	background:
		linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%) 0 0 / 250% 100%,
		var(--paper-2);
	animation: grlca-ai-shimmer 2.2s linear infinite;
}
.grlca-ai .grlca-ai-sample.is-failed .grlca-ai-sample__wait { animation: none; background: var(--paper-2); color: var(--danger); }
.grlca-ai .grlca-ai-sample.is-failed .grlca-ai-spinner { display: none; }

.grlca-ai .grlca-ai-spinner {
	width: 28px; height: 28px; border-radius: 50%;
	border: 3px solid var(--line); border-top-color: var(--accent);
	animation: grlca-ai-spin .9s linear infinite;
}

.grlca-ai .grlca-ai-sample__body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.grlca-ai .grlca-ai-sample__body h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; }
.grlca-ai .grlca-ai-sample__body p { margin: 0; color: var(--muted); }
.grlca-ai .grlca-ai-sample__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.grlca-ai .grlca-ai-sample__actions form { margin: 0; }

@keyframes grlca-ai-spin { to { transform: rotate(360deg); } }
@keyframes grlca-ai-shimmer { to { background-position: -250% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
	.grlca-ai .grlca-ai-sample__wait,
	.grlca-ai .grlca-ai-spinner { animation: none; }
}

/* AI Act disclosure under the intro and next to the submit button. */
.grlca-ai-notice { font-size: .875rem; margin: .6rem 0 1rem; }
.grlca-ai-submit + .grlca-ai-notice { margin-top: .4rem; }