/**
 * grantcookie/scanner — shared editor + front-end styles.
 */

.gc-scanner {
	--gc-scanner-fg: var( --wp--preset--color--contrast );
	--gc-scanner-muted: var( --wp--preset--color--ink-soft );
	--gc-scanner-field-bg: var( --wp--preset--color--base );
	--gc-scanner-field-border: var( --wp--preset--color--line );

	max-width: 34rem;
	color: var( --gc-scanner-fg );
	/* The block sits in columns of very different widths, so it adapts to its
	   own container rather than to the viewport. */
	container-type: inline-size;
	container-name: gc-scanner;
}

.gc-scanner.is-tone-dark {
	--gc-scanner-fg: #fff;
	--gc-scanner-muted: rgba( 255, 255, 255, 0.75 );
	--gc-scanner-field-bg: rgba( 255, 255, 255, 0.12 );
	--gc-scanner-field-border: rgba( 255, 255, 255, 0.28 );
}

.gc-scanner__heading {
	margin: 0 0 0.35rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.gc-scanner__description {
	margin: 0 0 1.1rem;
	color: var( --gc-scanner-muted );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
}

/* Field ------------------------------------------------------------------- */

.gc-scanner__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
	padding: 0.35rem;
	background: var( --gc-scanner-field-bg );
	border: 1px solid var( --gc-scanner-field-border );
	border-radius: var( --wp--custom--radius--pill );
	transition: border-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-scanner__form:focus-within {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 4px rgba( 11, 95, 88, 0.15 );
}

.gc-scanner.is-tone-dark .gc-scanner__form:focus-within {
	border-color: #fff;
	box-shadow: 0 0 0 4px rgba( 255, 255, 255, 0.18 );
}

.gc-scanner__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.7rem 1.15rem;
	border: 0;
	border-radius: var( --wp--custom--radius--pill );
	background: transparent;
	color: var( --gc-scanner-fg );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4;
}

.gc-scanner__input::placeholder {
	color: var( --gc-scanner-muted );
	opacity: 1;
}

.gc-scanner__input:focus {
	outline: none;
}

.gc-scanner__input.is-placeholder {
	color: var( --gc-scanner-muted );
	display: flex;
	align-items: center;
}

.gc-scanner__submit {
	flex: none;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--primary );
	color: #fff;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 180ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.gc-scanner__submit:hover {
	background: var( --wp--preset--color--primary-hover );
}

.gc-scanner.is-tone-dark .gc-scanner__submit {
	background: #fff;
	color: var( --wp--preset--color--primary );
}

.gc-scanner.is-tone-dark .gc-scanner__submit:hover {
	background: rgba( 255, 255, 255, 0.9 );
}

.gc-scanner__submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Messages ---------------------------------------------------------------- */

.gc-scanner__error {
	flex: 1 0 100%;
	margin: 0.15rem 0.5rem 0.35rem;
	color: var( --wp--preset--color--danger );
	font-size: var( --wp--preset--font-size--x-small );
}

.gc-scanner.is-tone-dark .gc-scanner__error {
	color: #fecaca;
}

.gc-scanner__error[hidden] {
	display: none;
}

.gc-scanner__note {
	margin: 0.75rem 0 0;
	color: var( --gc-scanner-muted );
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.5;
}

/* Narrow container: stack the button under the field and drop the pill shape,
   which only reads correctly on a single row. */

@container gc-scanner ( max-width: 27rem ) {
	.gc-scanner__form {
		flex-direction: column;
		border-radius: var( --wp--custom--radius--lg );
		padding: 0.5rem;
		gap: 0.45rem;
	}

	.gc-scanner__input {
		flex: 1 1 auto;
		width: 100%;
	}

	.gc-scanner__submit {
		width: 100%;
		justify-content: center;
	}
}

/* Fallback for browsers without container queries. */

@supports not ( container-type: inline-size ) {
	@media ( max-width: 560px ) {
		.gc-scanner__form {
			flex-direction: column;
			border-radius: var( --wp--custom--radius--lg );
		}

		.gc-scanner__submit {
			width: 100%;
		}
	}
}