/**
 * AIContestList — Search (/search/). Editorial Light with one Immersive Dark band for
 * prompt results (design-system §51). Tokens only.
 *
 * One idea carries the page: the visitor's words are the headline. The query is set in
 * Instrument Serif italic at display size, ink running into Iris; everything else is the
 * site's quiet editorial grammar — column lines, a whisper of light, hairline rules,
 * numbered chapters. The field is a command bar: one generous target, the query kept in
 * place, a gradient edge on focus.
 *
 * Breakpoints: 600 · 900 · 1024.
 */

/* ===============================================================
   HERO
=============================================================== */
.acl .acl-search-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(16px, 2vw, 28px) 0 0;
}

.acl .acl-search-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(to right, var(--overlay-ink-03) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.acl .acl-search-hero__glow {
	position: absolute;
	top: -55%;
	right: -18%;
	z-index: -1;
	width: min(900px, 110vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 50%, var(--iris-12) 0%, transparent 52%),
		radial-gradient(circle at 70% 62%, rgba(88, 199, 255, .08) 0%, transparent 46%),
		radial-gradient(circle at 36% 74%, rgba(255, 121, 198, .06) 0%, transparent 40%);
	pointer-events: none;
}

.acl .acl-search-hero__stage {
	max-width: 1040px;
	padding: clamp(28px, 6vw, 88px) 0 clamp(32px, 4.5vw, 56px);
}

.acl .acl-search-hero__title {
	margin: 0;
	font-size: clamp(3rem, 9.6vw, 8rem);
	font-weight: 600;
	line-height: .92;
	letter-spacing: -.055em;
	overflow-wrap: anywhere;
}

.acl .acl-search-hero__lead,
.acl .acl-search-hero__accent {
	display: block;
}

.acl .acl-search-hero__accent {
	width: fit-content;
	max-width: 100%;
	padding: 0 .08em .1em 0;
	font-style: italic;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.028em;
}

/* With a query, "Results for" steps back and the visitor's words take the stage. */
.acl .acl-search-hero.has-query .acl-search-hero__lead {
	margin-bottom: var(--space-3);
	font-size: clamp(1.125rem, 1.4vw + .6rem, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--text-secondary);
}

.acl .acl-search-hero.has-query .acl-search-hero__accent {
	font-size: clamp(3.25rem, 10vw, 8.5rem);
}

.acl .acl-search-hero.has-query .is-long .acl-search-hero__accent {
	font-size: clamp(2.25rem, 5.2vw, 4.75rem);
	line-height: 1.08;
}

/* Ink into Iris into a breath of Aurora — AA on porcelain throughout the glyph run */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.acl .acl-search-hero__accent {
		background: linear-gradient(100deg, var(--acl-ink) 0%, var(--acl-ink) 18%, var(--acl-iris) 70%, var(--acl-iris-pressed) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* ---------------------------------------------------------------
   COMMAND BAR
--------------------------------------------------------------- */
.acl .acl-search-form {
	max-width: 880px;
	margin: clamp(28px, 4vw, 48px) 0 0;
}

.acl .acl-search-form__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.acl .acl-search-form__box {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 68px;
	padding-right: var(--space-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	box-shadow: var(--shadow-2);
	transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-slow) var(--ease-standard);
}

.acl .acl-search-form__box:hover { border-color: rgba(16, 17, 20, .24); }

/* Focus: a gradient edge and a soft Iris ring (the field itself never shows a second ring) */
.acl .acl-search-form__box:focus-within {
	border-color: transparent;
	background:
		linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
		var(--gradient-ai) border-box;
	box-shadow: 0 0 0 5px var(--iris-12), var(--shadow-3);
}

.acl .acl-search-form__icon {
	position: absolute;
	left: 22px;
	color: var(--text-secondary);
	pointer-events: none;
	transition: color var(--motion-base) var(--ease-standard);
}

.acl .acl-search-form__box:focus-within .acl-search-form__icon { color: var(--interactive-primary); }

.acl .acl-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 64px;
	margin: 0;
	padding: 0 var(--space-2) 0 60px;
	border: 0;
	border-radius: var(--radius-lg);
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: clamp(1.0625rem, .6vw + .9rem, 1.3125rem); /* ≥16px: no iOS zoom */
	letter-spacing: -.01em;
	-webkit-appearance: none;
	appearance: none;
}

.acl .acl-search-form__field::placeholder { color: var(--text-tertiary); opacity: 1; }
.acl .acl-search-form__field::-webkit-search-cancel-button { -webkit-appearance: none; }
.acl .acl-search-form__field:focus,
.acl .acl-search-form__field:focus-visible { outline: none; box-shadow: none; }

.acl .acl-search-form__clear {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.acl .acl-search-form__clear[hidden] { display: none; }
.acl .acl-search-form__clear:hover { background: var(--overlay-ink-05); color: var(--text-primary); }
.acl .acl-search-form__clear:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 0; }

.acl .acl-search-form__submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-2);
	min-height: 52px;
	margin: 0;
	padding: 0 var(--space-5) 0 var(--space-6);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--interactive-primary);
	color: var(--acl-white);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--motion-base) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.acl .acl-search-form__submit:hover { background: var(--interactive-hover); }
.acl .acl-search-form__submit:active { background: var(--interactive-pressed); transform: scale(.98); }
.acl .acl-search-form__submit:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 3px; }
.acl .acl-search-form__submit-icon { transition: transform var(--motion-base) var(--ease-standard); }
.acl .acl-search-form__submit:hover .acl-search-form__submit-icon { transform: translateX(3px); }

.acl .acl-search-hero__answer {
	max-width: 62ch;
	margin: clamp(24px, 3vw, 36px) 0 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--interactive-primary);
	font-size: clamp(1.0625rem, .5vw + .9rem, 1.25rem);
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--text-primary);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------
   TYPE TABS — real links, live counts; a scroll row on phones
--------------------------------------------------------------- */
.acl .acl-search-tabs {
	position: relative;
	margin-inline: calc(var(--gutter) * -1);
	border-top: 1px solid var(--border-strong);
}

.acl .acl-search-tabs::after {
	content: "";
	position: absolute;
	left: var(--gutter);
	bottom: -1px;
	width: clamp(64px, 10vw, 160px);
	height: 1px;
	background: var(--gradient-ai);
}

.acl .acl-search-tabs__list {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.acl .acl-search-tabs__list::-webkit-scrollbar { display: none; }
.acl .acl-search-tabs__list > li { flex: none; scroll-snap-align: start; }
.acl .acl-search-tabs__list > li:last-child { padding-right: 40px; }

.acl .acl-search-tabs__tab {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	min-height: 56px;
	margin-right: var(--space-4);
	padding: var(--space-4) var(--space-4) var(--space-4) 0;
	border-radius: var(--radius-xs);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
	transition: color var(--motion-base) var(--ease-standard);
}

.acl .acl-search-tabs__count {
	font-size: var(--text-xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}

.acl .acl-search-tabs__tab:hover,
.acl .acl-search-tabs__tab.is-current { color: var(--text-primary); }

.acl .acl-search-tabs__tab.is-current::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: var(--space-4);
	height: 2px;
	background: var(--interactive-primary);
}

.acl .acl-search-tabs__tab.is-current .acl-search-tabs__count { color: var(--interactive-soft-text); }
.acl .acl-search-tabs__tab:focus-visible { outline-offset: -2px; }

@media (min-width: 768px) {
	.acl .acl-search-tabs { margin-inline: 0; }
	.acl .acl-search-tabs::after { left: 0; }
	.acl .acl-search-tabs__list { padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
	.acl .acl-search-tabs__list > li:last-child { padding-right: 0; }
	.acl .acl-search-tabs__tab { margin-right: var(--space-8); }
}

/* Staged entrance, once. No JS or reduced motion: static. */
.acl-js .acl .acl-search-hero [data-acl-stage] { animation: acl-rise var(--motion-hero) var(--ease-enter) both; }
.acl-js .acl .acl-search-hero [data-acl-stage="2"] { animation-delay: 90ms; }
.acl-js .acl .acl-search-hero [data-acl-stage="3"] { animation-delay: 170ms; }

@media (prefers-reduced-motion: reduce) {
	.acl-js .acl .acl-search-hero [data-acl-stage] { animation: none; }
}

/* ===============================================================
   RESULT CHAPTERS
=============================================================== */
.acl .acl-search-group {
	position: relative;
	padding: clamp(40px, 6vw, 88px) 0;
	scroll-margin-top: var(--header-h);
}

.acl .acl-search-group + .acl-search-group:not([data-theme]) { padding-top: clamp(8px, 2vw, 24px); }
.acl .acl-search-group[data-theme] + .acl-search-group { padding-top: clamp(40px, 6vw, 88px); }

.acl .acl-search-group__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "index title" "index all";
	column-gap: var(--space-5);
	row-gap: var(--space-2);
	align-items: baseline;
	margin-bottom: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-strong);
}

.acl .acl-search-group--prompts .acl-search-group__head { margin-bottom: var(--space-8); }

.acl .acl-search-group__index {
	grid-area: index;
	margin: 0;
	font-size: clamp(2.25rem, 3.4vw, 3.25rem);
	font-style: italic;
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--interactive-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.acl .acl-search-group__index {
		background: var(--gradient-ai);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.acl .acl-search-group__title {
	grid-area: title;
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
}

.acl .acl-search-group__count {
	margin-left: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	vertical-align: .55em;
	color: var(--text-secondary);
}

.acl .acl-search-group__all,
.acl .acl-search-group__refine,
.acl .acl-search-group__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-link);
	text-decoration: none;
}

.acl .acl-search-group__all { grid-area: all; justify-self: start; }

.acl .acl-search-group__all svg,
.acl .acl-search-group__refine svg { transition: transform var(--motion-base) var(--ease-standard); }
.acl .acl-search-group__all:hover svg { transform: translateX(3px); }
.acl .acl-search-group__refine:hover svg { transform: translate(2px, -2px); }
.acl .acl-search-group__back:hover,
.acl .acl-search-group__all:hover,
.acl .acl-search-group__refine:hover { text-decoration: underline; text-underline-offset: 4px; }

.acl .acl-search-group__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-8);
	margin: var(--space-6) 0 0;
}

@media (min-width: 768px) {
	.acl .acl-search-group__head {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "index title all";
	}

	.acl .acl-search-group__all { justify-self: end; }
}

/* Competitions: the directory's ruled ledger */
.acl .acl-search-ledger {
	margin: 0;
	padding: 0;
	list-style: none;
}

.acl .acl-search-ledger .acl-card--row { padding-left: 0; }

@media (min-width: 1024px) {
	.acl .acl-search-ledger .acl-card--row { padding-left: var(--space-2); }
}

/* Prompts: the gallery on an Immersive Dark band */
.acl .acl-search-group--prompts {
	margin: clamp(8px, 2vw, 24px) 0;
	background:
		radial-gradient(60% 90% at 88% 0%, rgb(var(--acl-iris-rgb) / .22) 0%, transparent 62%),
		radial-gradient(45% 70% at 0% 100%, rgba(255, 121, 198, .08) 0%, transparent 60%),
		var(--bg-page);
	color: var(--text-primary);
}

.acl .acl-search-group--prompts::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to right, var(--overlay-white-04) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
	mask-image: linear-gradient(to bottom, #000, transparent 70%);
	pointer-events: none;
}

.acl .acl-search-group--prompts > .acl-container { position: relative; }

/* AI Academy: contents-page rows */
.acl .acl-search-rows { margin-bottom: 0; }
.acl .acl-search-rows > .acl-acad-list__item:first-child .acl-ac--row { border-top: 0; }

/* The words that matched: a highlighter stroke, not a yellow box */
.acl .acl-hl {
	padding: 0 .04em;
	border-radius: 2px;
	background: linear-gradient(transparent 60%, var(--iris-24) 60%);
	color: inherit;
}

.acl [data-theme="dark"] .acl-hl { background: linear-gradient(transparent 58%, rgb(var(--acl-iris-dark-rgb) / .4) 58%); }

/* ===============================================================
   MISSING A COMPETITION?
=============================================================== */
.acl .acl-search-submit {
	padding: clamp(8px, 2vw, 24px) 0 var(--section-y);
}

.acl .acl-search-submit__inner {
	display: grid;
	gap: var(--space-3) var(--space-12);
	align-items: center;
}

.acl .acl-search-submit__inner::before {
	content: "";
	display: block;
	height: 1px;
	margin-bottom: var(--space-6);
	background: var(--border-strong);
}

.acl .acl-search-submit__title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 600;
	letter-spacing: -.02em;
}

.acl .acl-search-submit__body {
	max-width: 52ch;
	margin: 0 0 var(--space-3);
	color: var(--text-secondary);
}

@media (min-width: 900px) {
	.acl .acl-search-submit__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
	.acl .acl-search-submit__inner::before { grid-column: 1 / -1; }
	.acl .acl-search-submit__body { margin: 0; }
}

/* ===============================================================
   WHERE TO START (blank query, too short, nothing found)
=============================================================== */
.acl .acl-search-explore {
	padding: clamp(8px, 2vw, 24px) 0 var(--section-y);
}

.acl .acl-search-explore__empty {
	padding-top: 0;
}

.acl .acl-search-explore__title {
	margin: 0 0 var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-strong);
	font-size: var(--text-xl);
	font-weight: 600;
	letter-spacing: -.02em;
}

.acl .acl-search-explore__grid {
	display: grid;
	gap: var(--space-12);
}

@media (min-width: 900px) {
	.acl .acl-search-explore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
}

.acl .acl-search-explore__col { min-width: 0; }

.acl .acl-search-explore__index {
	margin: 0 0 var(--space-2);
	font-size: 2.5rem;
	font-style: italic;
	line-height: 1;
	color: var(--interactive-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.acl .acl-search-explore__index {
		width: fit-content;
		padding-right: .1em;
		background: var(--gradient-ai);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.acl .acl-search-explore__name {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: -.015em;
}

.acl .acl-search-explore__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border-default);
}

.acl .acl-search-explore__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 52px;
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--border-default);
	color: var(--text-primary);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--motion-base) var(--ease-standard), padding var(--motion-base) var(--ease-standard);
}

.acl .acl-search-explore__link:hover {
	padding-left: var(--space-2);
	color: var(--interactive-primary);
}

.acl .acl-search-explore__count {
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}

.acl .acl-search-explore__link--all { font-weight: 600; color: var(--text-link); }

.acl .acl-search-explore__submit {
	margin: clamp(40px, 5vw, 64px) 0 0;
	color: var(--text-secondary);
}

.acl .acl-search-explore__submit a { font-weight: 600; }

/* ===============================================================
   PHONES
=============================================================== */
@media (max-width: 599px) {
	.acl .acl-search-hero__stage { padding-top: var(--space-6); }

	.acl .acl-search-form__box {
		min-height: 60px;
		padding-right: 6px;
		border-radius: 18px;
	}

	.acl .acl-search-form__icon { left: 16px; }
	.acl .acl-search-form__field { min-height: 56px; padding-left: 48px; border-radius: 18px; }

	/* Icon-only submit: the label stays for assistive tech */
	.acl .acl-search-form__submit { width: 48px; min-height: 48px; padding: 0; justify-content: center; border-radius: 14px; }
	.acl .acl-search-form__submit-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.acl .acl-search-group__index { font-size: 2rem; }
	.acl .acl-search-explore__index { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.acl .acl-search-form__box,
	.acl .acl-search-explore__link,
	.acl .acl-search-form__submit-icon { transition: none; }
}

/* Phones: the starting points become tappable chips — three short clouds instead of
   three long lists (a 44px target each, counts kept inside the chip). */
@media (max-width: 599px) {
	.acl .acl-search-explore__grid { gap: var(--space-10); }
	.acl .acl-search-explore__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		border-top: 0;
	}
	.acl .acl-search-explore__link {
		gap: var(--space-2);
		min-height: 44px;
		padding: 0 var(--space-4);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-pill);
		background: var(--bg-surface);
		font-size: var(--text-sm);
	}
	.acl .acl-search-explore__link:hover { padding-left: var(--space-4); border-color: var(--interactive-primary); }
	.acl .acl-search-explore__count { font-size: var(--text-xs); }
	.acl .acl-search-explore__link--all { border-color: transparent; background: var(--interactive-soft); color: var(--interactive-soft-text); }
	.acl .acl-search-explore__link--all svg { width: 16px; height: 16px; }
}
