@layer components {
	:is(.api-search, .api-results > fieldset, .manual-form > fieldset) {
		padding: var(--panel-pad);
		border: 0;
	}

	:is(.api-results, .manual-form) legend {
		position: relative;
		inline-size: max-content;
		padding: 0;
		margin-block-end: 0.75rem;
		color: var(--color-brand);
		font-family: var(--font-sans);
		font-size: var(--font-size-label);
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;

		&::before {
			position: absolute;
			inset-inline-end: calc(100% + 0.65rem);
			inset-block-start: 50%;
			inline-size: 2rem;
			block-size: 1px;
			background: var(--color-rule);
			content: "";
		}
	}

	:is(.api-results, .manual-form) > .tracking-fields {
		margin-block-start: 0.75rem;
	}

	.form-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;

		label {
			display: grid;
			gap: 0.4rem;
			min-inline-size: 0;
			color: var(--color-brand);
			font-family: var(--font-sans);
			font-size: var(--font-size-label);
			font-weight: 750;

			> span:first-child {
				min-block-size: 0.8rem;
			}
		}

		.field-heading {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			column-gap: 0.45rem;
		}

		small {
			color: var(--color-text-muted);
			font-size: var(--font-size-micro);
			font-weight: 600;
		}

		:is(input, select, textarea) {
			inline-size: 100%;
			min-block-size: 3rem;
			padding: 0.7rem 0.8rem;
			border: 1px solid var(--color-rule);
			border-radius: 0.4rem;
			outline: 0;
			background: var(--color-page);
			color: var(--color-text);
			font-family: var(--font-sans);
			font-size: 0.75rem;
			font-weight: 650;

			&:focus {
				border-color: var(--color-brand);
				outline: 3px solid var(--color-focus);
			}
		}

		select {
			block-size: 3rem;
		}

		textarea {
			min-block-size: 6rem;
			resize: vertical;
		}

		input[type="file"] {
			block-size: 3rem;
			padding: 0.35rem 0.45rem;
			color: var(--color-text-muted);
			cursor: pointer;
			line-height: 2.2rem;

			&::file-selector-button {
				block-size: 2.2rem;
				padding-inline: 0.7rem;
				border: 0;
				border-radius: 0.3rem;
				margin-inline-end: 0.7rem;
				background: var(--color-action);
				color: white;
				cursor: pointer;
				font-family: var(--font-sans);
				font-size: var(--font-size-micro);
				font-weight: 800;
				letter-spacing: 0.04em;
				line-height: 2.2rem;
				text-transform: uppercase;
				vertical-align: top;
			}
		}

		.full-width {
			grid-column: 1 / -1;
		}

		b {
			color: var(--color-accent);
		}
	}

	.form-guidance {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 0.65rem;
		padding: 0.75rem 0.85rem;
		border-radius: 0.4rem;
		background: color-mix(in oklch, var(--color-brand) 6%, var(--color-page));
		color: var(--color-text-muted);
		font-family: var(--font-sans);
		font-size: 0.7rem;
		font-weight: 600;
		line-height: 1.45;

		> span {
			display: grid;
			inline-size: 1.35rem;
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--color-brand);
			color: white;
			font-size: var(--font-size-micro);
			font-weight: 800;
			place-items: center;
		}
	}

	.form-grid > .form-guidance {
		grid-column: 1 / -1;
	}

	.form-guidance label {
		color: var(--color-brand);
		cursor: pointer;
		font-weight: 800;
		text-decoration: underline;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.15em;
	}

	.rating-slider {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 3rem;
		align-items: center;
		gap: 0.8rem;
		min-block-size: 3rem;

		input[type="range"] {
			inline-size: 100%;
			min-block-size: 2rem;
			padding: 0;
			border: 0;
			outline: 0;
			appearance: none;
			background: transparent;
			cursor: pointer;

			&::-webkit-slider-runnable-track {
				block-size: 0.42rem;
				border-radius: 100vmax;
				background: linear-gradient(
					to right,
					var(--color-brand) var(--rating-fill),
					var(--color-surface-muted) var(--rating-fill)
				);
			}

			&::-moz-range-track,
			&::-moz-range-progress {
				block-size: 0.42rem;
				border-radius: 100vmax;
			}

			&::-moz-range-track {
				background: var(--color-surface-muted);
			}

			&::-moz-range-progress {
				background: var(--color-brand);
			}

			&::-webkit-slider-thumb {
				inline-size: 1.25rem;
				block-size: 1.25rem;
				border: 0.22rem solid var(--color-surface);
				border-radius: 50%;
				margin-block-start: -0.42rem;
				appearance: none;
				background: var(--color-accent);
				box-shadow:
					0 0 0 1px var(--color-brand),
					0 0.2rem 0.55rem rgb(22 22 22 / 18%);
			}

			&::-moz-range-thumb {
				inline-size: 0.85rem;
				block-size: 0.85rem;
				border: 0.22rem solid var(--color-surface);
				border-radius: 50%;
				background: var(--color-accent);
				box-shadow:
					0 0 0 1px var(--color-brand),
					0 0.2rem 0.55rem rgb(22 22 22 / 18%);
			}
		}

		output {
			display: grid;
			inline-size: 3rem;
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--color-highlight);
			color: var(--color-brand-deep);
			font-family: var(--font-display);
			font-size: 1.55rem;
			font-weight: 400;
			line-height: 1;
			place-items: center;
		}

		/* a full 10 turns the bubble into a star. Equal negative margins keep
		   the star centered on the circle it replaces (outer box 3rem, so the
		   row never grows) and let it overflow into the panel padding and the
		   neighboring gaps; nothing moves when the rating crosses 10 */
		output.is-star {
			inline-size: 4rem;
			margin: -0.5rem;
			clip-path: polygon(
				50% 0%,
				67.05% 26.54%,
				97.55% 34.55%,
				77.58% 58.96%,
				79.39% 90.45%,
				50% 79%,
				20.61% 90.45%,
				22.42% 58.96%,
				2.45% 34.55%,
				32.95% 26.54%
			);
			font-size: 1.55rem;
		}
	}

	.rating-scale {
		display: flex;
		justify-content: space-between;
		padding-inline-end: 3.8rem;
		color: var(--color-text-muted);
		font-size: var(--font-size-micro);
		font-weight: 650;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.field-error {
		display: block;
		color: var(--color-accent);
		font-family: var(--font-sans);
		font-size: var(--font-size-micro);
		font-weight: 700;
	}

	.form-error-summary {
		padding: 1rem 1.15rem;
		border: 1px solid
			color-mix(in oklch, var(--color-accent) 55%, var(--color-rule));
		border-inline-start: 0.3rem solid var(--color-accent);
		border-radius: 0.45rem;
		margin: 1.5rem 2rem 0;
		background: color-mix(in oklch, var(--color-accent) 9%, var(--color-surface));
		color: var(--color-text);
		font-family: var(--font-sans);

		:is(h2, h3) {
			color: var(--color-brand-deep);
			font-size: 0.88rem;
			font-weight: 850;
		}

		ul {
			padding-inline-start: 1.15rem;
			margin-block-start: 0.45rem;
		}

		li {
			font-size: 0.75rem;
			font-weight: 650;
			line-height: 1.45;
		}
	}

	.form-footer {
		display: flex;
		justify-content: flex-end;
		padding: var(--panel-pad);
	}

	/* the icon-plus-input search pill, shared by the library and the list
	   entry search; pages only tune the surface and height */

	.search-box {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		min-block-size: 3rem;
		padding-inline: 0.9rem;
		border: 1px solid var(--color-rule);
		border-radius: 0.5rem;
		background: var(--color-surface);
		color: var(--color-text-muted);
		font-family: var(--font-sans);

		&:focus-within {
			border-color: var(--color-brand);
			outline: 3px solid var(--color-focus);
		}

		> span:first-child {
			color: var(--color-accent);
			font-size: 1.15rem;
		}

		input {
			inline-size: 100%;
			block-size: 100%;
			min-inline-size: 0;
			padding: 0;
			border: 0;
			outline: 0;
			background: transparent;
			color: var(--color-text);
			font-family: var(--font-sans);
			font-size: 0.85rem;
			font-weight: 650;
		}
	}

	/* the joined field: an input with an action button attached on the
	   right, shared by the add-game search and the list creation */

	.joined-field {
		display: grid;
		grid-template-columns: 1fr auto;
		min-block-size: 3.4rem;
		overflow: clip;
		border: 1px solid var(--color-rule);
		border-radius: 0.5rem;
		background: var(--color-page);

		&:focus-within {
			border-color: var(--color-brand);
			outline: 3px solid var(--color-focus);
		}

		input {
			min-inline-size: 0;
			padding-inline: 1rem;
			border: 0;
			outline: 0;
			background: transparent;
			color: var(--color-text);
			font-family: var(--font-sans);
			font-size: 0.85rem;
			font-weight: 650;
		}

		button {
			min-inline-size: 6.5rem;
			padding-inline: 1rem;
			border: 0;
			background: var(--color-action);
			color: white;
			cursor: pointer;
			font-family: var(--font-sans);
			font-size: var(--font-size-micro);
			font-weight: 800;
			letter-spacing: 0.06em;
			text-transform: uppercase;

			&:is(:hover, :focus-visible) {
				background: var(--color-accent);
			}

			&:disabled {
				background: var(--color-surface-muted);
				color: var(--color-text-muted);
				cursor: not-allowed;
			}
		}
	}

	/* the two-option switcher, shared by add game and lists */

	.method-radio {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.method-switcher {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.35rem;
		padding: 0.3rem;
		border-radius: 0.65rem;
		background: var(--color-surface-muted);

		label {
			display: grid;
			min-block-size: 2.8rem;
			border-radius: 0.4rem;
			/* darkened past 4.5:1 on the muted track (Lighthouse contrast) */
			color: color-mix(in oklch, var(--color-text) 25%, var(--color-text-muted));
			cursor: pointer;
			font-family: var(--font-sans);
			font-size: var(--font-size-label);
			font-weight: 800;
			place-items: center;
			text-align: center;
		}
	}

	.method-panel {
		/* the surface shell lives on the shared .surface-panel class */
		display: none;
		margin-block-start: 1rem;
		overflow: clip;

		> h2 {
			padding: 1rem 0.75rem 0;
			color: var(--color-text);
			font-family: var(--font-sans);
			font-size: 1.25rem;
			font-weight: 800;
		}
	}
}

@layer motion {
	@media (hover: hover) and (pointer: fine) {
		.form-grid input[type="file"]:hover::file-selector-button {
			background: var(--color-accent);
		}
	}
}

@layer accessibility {
	.rating-slider input[type="range"]:focus-visible {
		&::-webkit-slider-thumb {
			box-shadow:
				0 0 0 0.25rem var(--color-highlight),
				0 0 0 0.32rem var(--color-brand);
		}

		&::-moz-range-thumb {
			box-shadow:
				0 0 0 0.25rem var(--color-highlight),
				0 0 0 0.32rem var(--color-brand);
		}
	}

	@media (forced-colors: active) {
		.rating-slider input[type="range"] {
			appearance: auto;
		}
	}
}

@media (width <= 38rem) {
	@layer components {
		.form-grid {
			grid-template-columns: 1fr;

			.full-width {
				grid-column: auto;
			}
		}

		:is(.api-results, .manual-form) > .tracking-fields {
			margin-block-start: 0.5rem;
		}

		.form-footer {
			padding-inline: var(--panel-pad);
		}

		.form-error-summary {
			margin-inline: var(--panel-pad);
		}
	}
}

@media (width <= 52rem) {
	@layer components {
		/* 16px keeps iOS Safari from zooming the page into focused fields */
		.form-grid :is(input, select, textarea) {
			font-size: 1rem;
		}
	}
}

@layer components {
	/* the share link recipe (the x-share-link component): a read-only
	   URL field with a copy button, used by the list editor and stats */
	.share-link {
		label span {
			color: var(--color-brand);
			font-family: var(--font-sans);
			font-size: var(--font-size-label);
			font-weight: 750;
		}
	}

	.share-link-row {
		display: flex;
		align-items: stretch;
		gap: 0.5rem;
		margin-block-start: 0.4rem;

		input {
			flex: 1;
			min-inline-size: 0;
			min-block-size: 2.6rem;
			padding: 0.45rem 0.7rem;
			border: 1px solid var(--color-rule);
			border-radius: 0.4rem;
			background: var(--color-page);
			color: var(--color-text-muted);
			font-family: var(--font-sans);
			font-size: 0.75rem;
			cursor: pointer;
		}

		.share-copy-button {
			padding: 0.45rem 0.9rem;
			border: 1px solid var(--color-rule);
			border-radius: 0.4rem;
			background: var(--color-surface);
			color: var(--color-brand);
			font-family: var(--font-sans);
			font-size: var(--font-size-label);
			font-weight: 750;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			cursor: pointer;

			&:is(:hover, :focus-visible) {
				border-color: var(--color-brand);
			}
		}
	}
}