@layer reset, base, layout, components, state;

/* --------------------------------------------------------------------------
	Custom properties. Two palettes and the shared brand colours.
	The theme is chosen by data-theme on <html> (written by the inline bootstrap
	script), with prefers-color-scheme as the no-JS fallback.
	-------------------------------------------------------------------------- */

:root {
	--red: #e5122e;
	--red-dark: #b30d24;
	--red-bright: #ff5a6e;
	--black: #0b0b0c;
	--display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--body: var(--display);
}

:root,
html[data-theme="light"] {
	--bg: #f4f4f6;
	--text: #141416;
	--text-muted: #6d6d74;
	--surface: #ffffff;
	--surface-2: #f8f8fa;
	--surface-border: #e4e4e7;
	--header-bg: #0b0b0c;
	--header-border: #1f1f22;
	--card-shadow: 0 30px 80px #0b0b0c24;
	--input-caret: var(--red);
	--accent: var(--red);
	--accent-soft: #e5122e14;
	--accent-softer: #e5122e0f;
	--accent-hover: #e5122e1f;
	--accent-border: #e5122e33;
}

html[data-theme="dark"] {
	--bg: #0b0b0c;
	--text: #f2f2f5;
	--text-muted: #9a9aa3;
	--surface: #141417;
	--surface-2: #17171b;
	--surface-border: #26262b;
	--header-bg: #101014;
	--header-border: #232329;
	--card-shadow: 0 30px 80px #00000080;
	--input-caret: var(--red-bright);
	--accent: var(--red-bright);
	--accent-soft: #ff5a6e21;
	--accent-softer: #ff5a6e14;
	--accent-hover: #ff5a6e2b;
	--accent-border: #ff5a6e45;
}

/* No JavaScript (or storage blocked): honour the browser preference. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		--bg: #0b0b0c;
		--text: #f2f2f5;
		--text-muted: #9a9aa3;
		--surface: #141417;
		--surface-2: #17171b;
		--surface-border: #26262b;
		--header-bg: #101014;
		--header-border: #232329;
		--card-shadow: 0 30px 80px #00000080;
		--input-caret: var(--red-bright);
		--accent: var(--red-bright);
		--accent-soft: #ff5a6e21;
		--accent-softer: #ff5a6e14;
		--accent-hover: #ff5a6e2b;
		--accent-border: #ff5a6e45;
	}
}

/* --------------------------------------------------------------------------
	Reset. Everything here is :where()-wrapped so it carries zero specificity.
	-------------------------------------------------------------------------- */

@layer reset {

	:where(*, *::before, *::after) {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

}

/* --------------------------------------------------------------------------
	Base — document, links, focus rings, selection list, shared inline icons.
	-------------------------------------------------------------------------- */

@layer base {

	html {
		color-scheme: light dark;
	}

	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: var(--bg);

		/* The freed row wrapper on the home page is an orphan for the
		   purposes of element selectors, so it is targeted by its class
		   (see the "chrome" section). It inherits the page font. */
		font-family: var(--body);
		line-height: 1.6;
		color: var(--text);
		-webkit-font-smoothing: antialiased;
		transition: background 0.3s, color 0.3s;

		&.page-error {
			--bg: #ffffff;
		}

		&.page-error header .wrapper {
			max-width: 1100px;
		}
	}

	html[data-theme="dark"] body.page-error {
		--bg: #0b0b0c;
	}

	html:not([data-theme]) body.page-error {
		--bg: #0b0b0c;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	svg {
		display: block;
	}

	a:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--red);
		outline-offset: 2px;
	}

	::selection {
		background: var(--accent);
		color: #fff;
	}

}

/* --------------------------------------------------------------------------
	Layout — the three stacked regions: header bar, main, footer line.
	Both templates use the same three landmarks.
	-------------------------------------------------------------------------- */

@layer layout {

	body > header {
		flex-shrink: 0;
		background: var(--header-bg);
		border-bottom: 1px solid var(--header-border);

		.wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64px;
			margin-inline: auto;
			padding-inline: 24px;
		}

		h1 {
			display: flex;
			align-items: center;
			gap: 12px;
			font-family: var(--display);
			font-size: 18px;
			font-weight: 900;
			letter-spacing: -0.02em;
			text-transform: uppercase;

			& > a {
				display: flex;
				align-items: center;
				gap: 12px;
				color: #fff;
			}
		}
	}

	body > main {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		padding: 48px 24px;
	}	body > footer {
		flex-shrink: 0;
		padding: 20px 24px;
		border-top: 1px solid var(--surface-border);
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-align: center;
		text-transform: uppercase;
		color: var(--text-muted);
		transition: border-color 0.3s, color 0.3s;

		a {
			border-bottom: 1px solid transparent;
			color: var(--accent);
			transition: border-color 0.2s;

			&:hover {
				border-color: var(--accent);
			}
		}
	}

	/* Home header logo mark, and the wordmark's two-tone treatment. */
	.logo-mark {
		display: grid;
		flex-shrink: 0;
		place-items: center;
		inline-size: 32px;
		block-size: 32px;
		border-radius: 3px;
		background: var(--red);
		color: #fff;
		transition: transform 0.2s;
	}

	body > header h1 > a:hover .logo-mark {
		transform: translateY(-1px) rotate(-3deg);
	}

	.wordmark {
		white-space: nowrap;
	}

	.name-last {
		color: var(--red);
	}

	.theme-toggle {
		display: flex;
		align-items: center;
		padding: 4px;
		border: 0;
		background: none;
		color: #fff;
		cursor: pointer;
		transition: opacity 0.3s, transform 0.3s;

		&:hover {
			opacity: 0.8;
			transform: scale(1.1);
		}
	}

}

/* --------------------------------------------------------------------------
	Home page — the translator card and everything inside it.
	The card is an orphan (no sectioning parent), so it is targeted by class;
	the structural parts below it use element selectors from that anchor.
	-------------------------------------------------------------------------- */

@layer components {

	.translator-card {
		position: relative;
		inline-size: 100%;
		max-inline-size: 960px;
		border: 1px solid var(--surface-border);
		border-radius: 4px;
		background: var(--surface);
		box-shadow: var(--card-shadow);
		transition: background 0.3s, border-color 0.3s;

		&::before {
			content: "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			z-index: 3;
			inline-size: 100%;
			block-size: 3px;
			border-radius: 4px 4px 0 0;
			background: var(--red);
		}

		/* --- Language bar: source group, target group, swap button --- */

		& > .lang-bar {
			position: relative;
			display: flex;
			border-bottom: 1px solid var(--surface-border);

			& > .lang-group {
				position: relative;
				display: flex;
				flex: 1;
				align-items: center;
				gap: 4px;
				min-inline-size: 0;
				padding: 10px 16px;

				&:first-child {
					padding-inline-end: 48px;
				}

				&:nth-of-type(2) {
					padding-inline-start: 48px;
					border-inline-start: 1px solid var(--surface-border);
				}

				& > .lang-tabs {
					display: flex;
					align-items: center;
					gap: 2px;
					min-inline-size: 0;

					& > button {
						max-inline-size: 160px;
						padding: 7px 12px;
						overflow: hidden;
						border: 0;
						border-radius: 99px;
						background: transparent;
						font-family: var(--display);
						font-size: 14px;
						font-weight: 600;
						color: var(--text-muted);
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						transition: color 0.2s, background 0.2s;

						&:hover {
							background: var(--accent-softer);
							color: var(--accent);
						}
					}

					/* The current pair: source is highlighted on both sides. */
					& > button:first-child {
						background: var(--accent-soft);
						font-weight: 700;
						color: var(--accent);
					}
				}

				/* ...and on the right-hand side the target is highlighted. */
				#target-tabs > button:nth-child(2) {
					background: var(--accent-soft);
					font-weight: 700;
					color: var(--accent);
				}

				/* On the right-hand side the source is the quiet one.
				   ID-anchored so it outranks the rule above. */
				#target-tabs > button:first-child {
					background: transparent;
					font-weight: 600;
					color: var(--text-muted);

					&:hover {
						background: var(--accent-softer);
						color: var(--accent);
					}
				}

				& > .lang-select {
					display: grid;
					flex-shrink: 0;
					place-items: center;
					inline-size: 34px;
					block-size: 34px;
					margin-inline-start: 28px;
					border: 1px solid transparent;
					border-radius: 99px;
					background: var(--accent-soft);
					color: var(--accent);
					cursor: pointer;
					transition: background 0.2s, border-color 0.2s;

					&:hover {
						background: var(--accent-hover);
						border-color: var(--accent-border);
					}

					&[aria-expanded="true"] {
						border-color: var(--accent-border);

						& .chevron {
							transform: rotate(180deg);
						}
					}

					& .chevron {
						opacity: 0.8;
						transition: transform 0.2s;
					}
				}
			}

			/* The pulldown each .lang-select opens; its contents are built
			   by scripts.js with .lang-search/.lang-options/.lang-option. */
			& > .lang-menu {
				position: absolute;
				inset-block-start: calc(100% + 8px);
				inset-inline-start: 50%;
				z-index: 60;
				display: flex;
				flex-direction: column;
				inline-size: min(760px, calc(100vw - 32px));
				max-block-size: min(70vh, 480px);
				overflow: hidden;
				border: 1px solid var(--surface-border);
				border-radius: 4px;
				background: var(--surface);
				box-shadow: 0 24px 48px #00000040;
				transform: translateX(-50%);

				&[hidden] {
					display: none;
				}

				&:not([hidden]) {
					animation: menu-in 0.16s ease-out;
				}

				& > .lang-search {
					display: flex;
					flex-shrink: 0;
					align-items: center;
					gap: 10px;
					padding: 12px 16px;
					border-bottom: 1px solid var(--surface-border);
					color: var(--text-muted);

					& > svg {
						flex-shrink: 0;
					}

					& > input {
						flex: 1;
						min-inline-size: 0;
						padding: 2px 0;
						border: 0;
						background: transparent;
						font-family: var(--display);
						font-size: 15px;
						font-weight: 600;
						color: var(--text);
						outline: none;

						&::placeholder {
							color: var(--text-muted);
						}
					}

					& > button {
						display: grid;
						flex-shrink: 0;
						place-items: center;
						inline-size: 26px;
						block-size: 26px;
						border: 0;
						border-radius: 50%;
						background: transparent;
						color: var(--text-muted);
						cursor: pointer;

						&:hover {
							background: var(--accent-softer);
							color: var(--accent);
						}

						&[hidden] {
							display: none;
						}
					}
				}

				& > .lang-options {
					display: grid;
					grid-template-columns: repeat(3, minmax(0, 1fr));
					gap: 2px;
					align-content: start;
					padding: 10px;
					overflow-y: auto;
					scrollbar-width: thin;
					scrollbar-color: var(--surface-border) transparent;

					&::-webkit-scrollbar {
						width: 10px;
					}

					&::-webkit-scrollbar-track {
						background: transparent;
					}

					&::-webkit-scrollbar-thumb {
						border: 3px solid var(--surface);
						border-radius: 99px;
						background: var(--surface-border);

						&:hover {
							background: var(--text-muted);
						}
					}

					& > button {
						display: flex;
						align-items: baseline;
						gap: 10px;
						min-inline-size: 0;
						padding: 8px 10px;
						border: 0;
						border-radius: 2px;
						background: transparent;
						font-family: var(--display);
						font-size: 13.5px;
						font-weight: 600;
						color: var(--text);
						text-align: left;
						cursor: pointer;

						&:hover {
							background: var(--accent-softer);
							color: var(--accent);
						}

						& > span:first-child {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						& > span:nth-child(2) {
							max-inline-size: 46%;
							margin-inline-start: auto;
							overflow: hidden;
							font-size: 12px;
							font-weight: 600;
							color: var(--text-muted);
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						& > span:last-child {
							display: block;
							flex-shrink: 0;
							inline-size: 14px;
							block-size: 14px;
							color: var(--accent);
							visibility: hidden;
						}

						&.is-active > span:last-child {
							visibility: visible;
						}
					}

					& > p {
						grid-column: 1 / -1;
						padding: 28px 12px;
						font-size: 13px;
						color: var(--text-muted);
						text-align: center;
					}
				}
			}

			& > button {
				position: absolute;
				inset-block-start: 50%;
				inset-inline-start: 50%;
				z-index: 2;
				display: grid;
				place-items: center;
				inline-size: 42px;
				block-size: 42px;
				border: 1px solid var(--surface-border);
				border-radius: 50%;
				background: var(--surface);
				color: var(--text-muted);
				cursor: pointer;
				transform: translate(-50%, -50%);
				transition: color 0.2s, border-color 0.2s, background 0.3s, transform 0.4s;

				&:hover {
					border-color: var(--accent);
					color: var(--accent);
					transform: translate(-50%, -50%) rotate(180deg);
				}
			}
		}

		/* --- Text panels: source (textarea) and target (output) --- */

		& > .panels {
			display: grid;
			grid-template-columns: 1fr 1fr;

			& > .panel {
				display: flex;
				flex-direction: column;
				min-inline-size: 0;
				min-block-size: 320px;
				padding: 26px 30px 14px;

				& + .panel {
					border-inline-start: 1px solid var(--surface-border);
				}

				&.target {
					background: var(--surface-2);
					transition: background 0.3s;
				}

				& textarea {
					flex: 1;
					inline-size: 100%;
					min-block-size: 200px;
					border: 0;
					background: transparent;
					font-family: var(--body);
					font-size: clamp(18px, 2.2vw, 22px);
					line-height: 1.6;
					color: var(--text);
					caret-color: var(--input-caret);
					resize: none;
					transition: color 0.3s;

					&:focus {
						outline: none;
					}

					&::placeholder {
						color: var(--text-muted);
					}
				}

				& > p {
					flex: 1;
					font-size: clamp(18px, 2.2vw, 22px);
					line-height: 1.6;
					color: var(--text);
					transition: color 0.3s;

					&:empty::before {
						content: "Translation appears here";
						color: var(--text-muted);
					}
				}

				& > .panel-footer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 12px;
					margin-block-start: 14px;

					&:empty {
						display: none;
					}

					& > span {
						font-family: var(--display);
						font-size: 12px;
						font-weight: 600;
						letter-spacing: 0.04em;
						color: var(--text-muted);
						transition: color 0.2s;

						&.warn {
							color: var(--accent);
						}
					}

					& > div {
						display: flex;
						align-items: center;
						gap: 6px;
						margin-inline-start: auto;

						& > button {
							display: grid;
							place-items: center;
							inline-size: 38px;
							block-size: 38px;
							border: 1.5px solid transparent;
							border-radius: 50%;
							background: transparent;
							color: var(--text-muted);
							cursor: pointer;
							transition: color 0.2s, border-color 0.2s, background 0.2s;

							&:hover {
								border-color: var(--accent);
								background: var(--accent-softer);
								color: var(--accent);
							}

							&:disabled {
								opacity: 0.35;
								cursor: default;
								pointer-events: none;
							}

							&[hidden] {
								display: none;
							}

							& .icon-stop {
								display: none;
							}

							&.is-speaking {
								border-color: var(--accent);
								background: var(--accent-softer);
								color: var(--accent);

								& .icon-listen {
									display: none;
								}

								& .icon-stop {
									display: block;
								}
							}
						}
					}
				}
			}
		}

		/* --- Writing style bar --- */

		& > .style-bar {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px 16px;
			padding: 12px 20px;
			border-top: 1px solid var(--surface-border);

			& > span {
				font-family: var(--display);
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 0.14em;
				text-transform: uppercase;
				color: var(--text-muted);
			}

			& > div {
				display: flex;
				flex-wrap: wrap;
				gap: 6px;

				& > button {
					padding: 7px 14px;
					border: 0;
					border-radius: 99px;
					background: transparent;
					font-family: var(--display);
					font-size: 12.5px;
					font-weight: 600;
					color: var(--text-muted);
					cursor: pointer;
					transition: color 0.2s, background 0.2s;

					&:hover {
						background: var(--accent-softer);
						color: var(--text);
					}

					&.active {
						background: var(--accent-soft);
						font-weight: 700;
						color: var(--accent);
					}
				}
			}
		}
	}

}

/* --------------------------------------------------------------------------
	Error page — the apology card and its disclosure panel.
	The card is an orphan like the translator card, so it carries a class.
	-------------------------------------------------------------------------- */

@layer components {

	.error-card {
		position: relative;
		overflow: hidden;
		inline-size: 100%;
		max-inline-size: 720px;
		padding: 56px 44px 48px;
		border: 1px solid var(--surface-border);
		border-radius: 4px;
		background: var(--surface);
		box-shadow: var(--card-shadow);
		text-align: center;
		transition: background 0.3s, border-color 0.3s;

		&::before {
			content: "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			z-index: 3;
			inline-size: 100%;
			block-size: 3px;
			border-radius: 4px 4px 0 0;
			background: var(--red);
		}

		/* --- Status number, category, title, joke, advice --- */

		/* The status number is the bare child <div>; the other child <div>
		   is the actions row, so exclude it explicitly. */
		& > div:not(:has(> a)) {
			font-family: var(--display);
			font-size: clamp(84px, 20vw, 160px);
			font-weight: 900;
			line-height: 0.9;
			letter-spacing: -0.06em;
			color: transparent;
			-webkit-text-stroke: 2px var(--red);
			user-select: none;
		}

		& > p:first-of-type {
			margin-block-start: 14px;
			font-family: var(--display);
			font-size: 12px;
			font-weight: 800;
			letter-spacing: 0.16em;
			text-transform: uppercase;
			color: var(--red);
		}

		& > h2 {
			margin-block-start: 12px;
			font-family: var(--display);
			font-size: clamp(26px, 4.6vw, 40px);
			font-weight: 900;
			line-height: 1.15;
			letter-spacing: -0.02em;
		}

		& > p:nth-of-type(2) {
			max-inline-size: 46ch;
			margin: 18px auto 0;
			font-size: clamp(15px, 1.7vw, 17px);
			line-height: 1.65;
			color: var(--text);
		}

		& > p:nth-of-type(3) {
			max-inline-size: 48ch;
			margin: 14px auto 0;
			font-size: 14px;
			color: var(--text-muted);
		}

		& > p:nth-of-type(4) {
			margin-block-start: 26px;
			font-family: var(--display);
			font-size: 22px;
			letter-spacing: 0;
			color: var(--text-muted);
			user-select: none;
		}

		/* --- Primary and ghost actions --- */

		/* The actions wrapper is the child <div> that holds a link. */
		& > div:has(> a) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 10px;
			margin-block-start: 32px;
			font-size: 16px;
			line-height: 1.6;

			& > a,
			& > button {
				display: inline-flex;
				align-items: center;
				padding: 13px 24px;
				border: 1px solid transparent;
				border-radius: 99px;
				font-family: var(--display);
				font-size: 12.5px;
				font-weight: 800;
				letter-spacing: 0.08em;
				text-transform: uppercase;
				cursor: pointer;
				transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
			}

			& > a {
				background: var(--red);
				color: #fff;

				&:hover {
					background: var(--red-dark);
					transform: translateY(-1px);
				}
			}

			& > button {
				border-color: var(--surface-border);
				background: transparent;
				color: var(--text-muted);

				&:hover {
					border-color: var(--red);
					color: var(--red);
				}
			}
		}

		/* --- "What actually happened?" disclosure --- */

		& > details {
			margin-block-start: 34px;
			padding-block-start: 18px;
			border-top: 1px solid var(--surface-border);
			text-align: left;

			& > summary {
				font-family: var(--display);
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 0.14em;
				text-transform: uppercase;
				color: var(--text-muted);
				list-style: none;
				cursor: pointer;

				&::-webkit-details-marker {
					display: none;
				}

				&:hover {
					color: var(--red);
				}
			}

			& > dl {
				display: grid;
				grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
				gap: 6px 16px;
				margin-block-start: 14px;

				& > dt {
					padding-block-start: 2px;
					font-family: var(--display);
					font-size: 11px;
					font-weight: 700;
					letter-spacing: 0.06em;
					text-transform: uppercase;
					color: var(--text-muted);
				}

				& > dd {
					font-size: 13.5px;
					word-break: break-word;
				}
			}
		}
	}

}

/* --------------------------------------------------------------------------
	State — theme-dependent icon swap, the toast, and reduced motion.
	-------------------------------------------------------------------------- */

@layer state {

	.theme-toggle .icon-sun {
		display: none;
	}

	html[data-theme="dark"] .theme-toggle .icon-sun {
		display: block;
	}

	html[data-theme="dark"] .theme-toggle .icon-moon {
		display: none;
	}

	@media (prefers-color-scheme: dark) {

		html:not([data-theme]) .theme-toggle .icon-sun {
			display: block;
		}

		html:not([data-theme]) .theme-toggle .icon-moon {
			display: none;
		}

	}

	/* The error page centres its card at every width, including where the
	   home page's responsive rule switches main to flex-start. */
	body.page-error > main {
		align-items: center;
	}

	body.page-error > footer a {
		color: var(--red);

		&:hover {
			border-color: var(--red);
		}
	}

	html[data-theme="dark"] body.page-error > footer a {
		color: var(--red-bright);

		&:hover {
			border-color: var(--red-bright);
		}
	}

	/* While the API call is out, the output dims a touch and stops
	   intercepting clicks; the text stays readable rather than blanking. */
	.translator-card.is-translating .panel.target > .translation {
		opacity: 0.45;
		transition: opacity 0.2s;
	}

	/* A failed request replaces the translation with an explanation, in the
	   error colour, so it is not mistaken for a result. */
	.translator-card .panel.target > .translation.is-error {
		color: var(--red);
		font-size: clamp(15px, 1.8vw, 17px);
	}

	html[data-theme="dark"] .translator-card .panel.target > .translation.is-error {
		color: var(--red-bright);
	}

	.toast {
		position: fixed;
		inset-block-end: 24px;
		inset-inline-start: 50%;
		z-index: 200;
		padding: 10px 18px;
		border: 1px solid #2a2a30;
		border-inline-start: 3px solid var(--red);
		border-radius: 3px;
		background: var(--black);
		box-shadow: 0 12px 28px #00000040;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-align: center;
		text-transform: uppercase;
		color: #fff;
		opacity: 0;
		pointer-events: none;
		transform: translate(-50%, 10px);
		transition: opacity 0.25s, transform 0.25s;

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

}

/* --------------------------------------------------------------------------
	Responsive. The language menu grid, the panel stack, the header chrome.
	-------------------------------------------------------------------------- */

@layer components {

	@media (max-width: 900px) {

		.translator-card .lang-bar > .lang-menu > .lang-options {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	}

	@media (max-width: 768px) {

		body > main {
			align-items: flex-start;
			padding: 24px 16px;
		}

		body > header .wrapper {
			height: 56px;
			padding: 0 16px;
		}

		body > header h1 {
			font-size: 16px;
		}

		.logo-mark {
			inline-size: 28px;
			block-size: 28px;
		}

		.translator-card .lang-bar > .lang-group {
			padding: 8px 12px;

			&:nth-of-type(2) {
				padding-inline-start: 40px;
			}

			& > .lang-tabs > button {
				padding: 6px 10px;
				font-size: 13px;
			}

			& > .lang-select {
				inline-size: 30px;
				block-size: 30px;
			}
		}

		.translator-card .lang-bar > .lang-menu {
			max-block-size: min(65vh, 520px);
		}

		.translator-card .lang-bar > button {
			inline-size: 36px;
			block-size: 36px;

			/* Panels stack vertically here, so the swap glyph points that way. */
			& svg {
				transform: rotate(90deg);
			}
		}

		.translator-card .panels {
			grid-template-columns: 1fr;

			& > .panel {
				min-block-size: 240px;
				padding: 20px 20px 12px;

				& + .panel {
					border-inline-start: 0;
					border-top: 1px solid var(--surface-border);
				}

				& textarea {
					min-block-size: 150px;
				}
			}
		}

		.error-card {
			padding: 40px 24px 34px;
		}

	}

	@media (max-width: 600px) {

		.translator-card .lang-bar > .lang-menu > .lang-options {
			grid-template-columns: 1fr;
		}

		.translator-card .lang-bar > .lang-group {
			padding: 8px;
			gap: 2px;

			&:first-child {
				padding-inline-end: 26px;
			}

			&:nth-of-type(2) {
				padding-inline-start: 26px;
			}

			& > .lang-tabs > button {
				max-inline-size: 34vw;
				padding: 6px 8px;
				font-size: 12.5px;
			}

			& > .lang-select {
				margin-inline-start: 16px;
			}
		}

		.translator-card .lang-bar .lang-search > input {
			font-size: 16px;
		}

	}

	@media (max-width: 480px) {

		.error-card details dl {
			grid-template-columns: 1fr;
			gap: 2px;

			& > dd {
				margin-block-end: 10px;
			}
		}

		.error-card div:last-of-type > a,
		.error-card div:last-of-type > button {
			flex: 1;
			justify-content: center;
		}

	}

}

/* --------------------------------------------------------------------------
	Motion preference. The only !important rules in the file: the cascade has
	to win over each component's own transition/animation shorthand.
	-------------------------------------------------------------------------- */

@layer state {

	@media (prefers-reduced-motion: reduce) {

		*,
		*::before,
		*::after {
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
		}

	}

}

/* --------------------------------------------------------------------------
	Keyframes.
	-------------------------------------------------------------------------- */

@keyframes menu-in {

	from {
		opacity: 0;
		translate: 0 -6px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}

}