/**
 * Japanese Name Generator — front-end styles.
 *
 * Same design language as the other calculators: Jost, a near white page,
 * near black ink, hairline rules, pill buttons and 12px cards. The accent is
 * shu (朱), the vermilion of torii gates and hanko seals, and kanji are set
 * in Noto Serif JP so they read as calligraphy rather than UI text.
 *
 * Built to sit inside a blog post without taking it over: one row of
 * controls, and names as slim two-column rows rather than tall cards.
 *
 * Everything is namespaced under .jng and driven by custom properties, so a
 * theme can restyle the generator by redefining the variables rather than
 * fighting specificity. This is a deliberately light-only design; all
 * colours are set explicitly so it holds up inside a dark theme.
 */

.jng {
	--jng-font: "Jost", "Century Gothic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--jng-font-ja: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;

	--jng-page: #f8f7f4;
	--jng-card: #ffffff;
	--jng-ink: #15161a;
	--jng-body: #2b2c31;
	--jng-muted: #6c6f7a;
	--jng-line: #e6e4de;
	--jng-accent: #c8412b;
	--jng-accent-ink: #ffffff;
	--jng-accent-tint: #fbeeeb;
	--jng-male: #e8f0fb;
	--jng-male-ink: #234a8a;
	--jng-female: #fbeaf0;
	--jng-female-ink: #9a2a5b;
	--jng-unisex: #ecf5ec;
	--jng-unisex-ink: #2a6a3a;

	--jng-radius: 12px;
	--jng-pill: 100px;

	box-sizing: border-box;
	max-width: 46rem;
	margin: 1.5rem auto;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--jng-page);
	border: 1px solid var(--jng-line);
	border-radius: var(--jng-radius);
	color: var(--jng-body);
	font-family: var(--jng-font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.jng *,
.jng *::before,
.jng *::after {
	box-sizing: inherit;
}

.jng [hidden] {
	display: none !important;
}

.jng__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jng [lang="ja"] {
	font-family: var(--jng-font-ja);
}

/* ---------- Header ---------- */

.jng__head {
	margin: 0 0 0.875rem;
}

.jng__title {
	margin: 0;
	font-family: var(--jng-font);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--jng-ink);
}

.jng__intro {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--jng-muted);
}

/* ---------- Controls: one wrapping row ---------- */

.jng__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem 0.75rem;
	margin: 0 0 0.875rem;
	padding: 0 0 0.875rem;
	border-bottom: 1px solid var(--jng-line);
}

.jng__field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1 1 7.5rem;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.jng__field--narrow {
	flex: 0 1 4.5rem;
}

.jng__label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jng-muted);
}

.jng__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	margin: 0;
	padding: 0.4rem 1.9rem 0.4rem 0.8rem;
	border: 1px solid var(--jng-line);
	border-radius: var(--jng-pill);
	background: var(--jng-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315161a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
	color: var(--jng-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

.jng__select:hover {
	border-color: var(--jng-muted);
}

.jng__select:focus-visible {
	outline: 2px solid var(--jng-accent);
	outline-offset: 2px;
}

.jng__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--jng-accent);
	border-radius: var(--jng-pill);
	background: var(--jng-accent);
	color: var(--jng-accent-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: transform 0.1s, filter 0.15s;
}

.jng__button:hover {
	filter: brightness(0.92);
}

.jng__button:active {
	transform: translateY(1px);
}

.jng__button:focus-visible {
	outline: 2px solid var(--jng-ink);
	outline-offset: 2px;
}

.jng__button-icon {
	font-size: 1.1em;
	line-height: 1;
}

.jng--busy .jng__button-icon {
	display: inline-block;
	animation: jng-spin 0.5s linear;
}

@keyframes jng-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Results: slim rows ---------- */

.jng__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jng__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.55rem 0.7rem 0.55rem 0.9rem;
	background: var(--jng-card);
	border: 1px solid var(--jng-line);
	border-radius: 8px;
	animation: jng-rise 0.25s ease both;
}

.jng__card:nth-child(2)  { animation-delay: 0.03s; }
.jng__card:nth-child(3)  { animation-delay: 0.06s; }
.jng__card:nth-child(4)  { animation-delay: 0.09s; }
.jng__card:nth-child(5)  { animation-delay: 0.12s; }
.jng__card:nth-child(6)  { animation-delay: 0.15s; }
.jng__card:nth-child(7)  { animation-delay: 0.18s; }
.jng__card:nth-child(8)  { animation-delay: 0.21s; }
.jng__card:nth-child(9)  { animation-delay: 0.24s; }
.jng__card:nth-child(10) { animation-delay: 0.27s; }

@keyframes jng-rise {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jng__card,
	.jng--busy .jng__button-icon {
		animation: none;
	}
}

.jng__card::before {
	content: "";
	position: absolute;
	top: 0.7rem;
	bottom: 0.7rem;
	left: 0;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--jng-accent);
}

.jng__card-body {
	flex: 1;
	min-width: 0;
}

.jng__name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin: 0;
	line-height: 1.25;
}

.jng__romaji {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--jng-ink);
}

.jng__kanji {
	font-family: var(--jng-font-ja);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--jng-accent);
}

.jng__meaning {
	margin: 0.1rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--jng-muted);
}

.jng__meaning [lang="ja"] {
	color: var(--jng-body);
}

.jng__dot {
	margin: 0 0.35rem;
}

.jng__tag {
	flex: 0 0 auto;
	padding: 0.1rem 0.5rem;
	border-radius: var(--jng-pill);
	background: var(--jng-page);
	color: var(--jng-muted);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: default;
}

.jng__tag--m { background: var(--jng-male);   color: var(--jng-male-ink); }
.jng__tag--f { background: var(--jng-female); color: var(--jng-female-ink); }
.jng__tag--u { background: var(--jng-unisex); color: var(--jng-unisex-ink); }

.jng__copy {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--jng-line);
	border-radius: var(--jng-pill);
	background: transparent;
	color: var(--jng-ink);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.jng__copy:hover {
	border-color: var(--jng-ink);
}

.jng__copy:focus-visible {
	outline: 2px solid var(--jng-accent);
	outline-offset: 2px;
}

.jng__copy.is-copied {
	background: var(--jng-accent-tint);
	border-color: var(--jng-accent);
	color: var(--jng-accent);
}

/* Copy only makes sense with JavaScript. */
.jng:not(.jng--js) [data-jng-copy-all],
.jng:not(.jng--js) .jng__copy {
	display: none;
}

.jng__empty {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--jng-line);
	border-radius: 8px;
	font-size: 0.9rem;
	color: var(--jng-muted);
	text-align: center;
}

/* ---------- Bottom bar ---------- */

.jng__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--jng-muted);
}

.jng__link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--jng-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jng__link:focus-visible {
	outline: 2px solid var(--jng-accent);
	outline-offset: 2px;
}

.jng__link.is-copied {
	color: var(--jng-ink);
	text-decoration: none;
}

.jng__note {
	flex: 1 1 12rem;
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
	.jng {
		padding: 1rem 0.875rem 0.875rem;
	}

	.jng__field {
		flex-basis: calc(50% - 0.375rem);
	}

	.jng__field--narrow {
		flex-basis: calc(50% - 0.375rem);
	}

	.jng__button {
		flex: 1 1 100%;
		justify-content: center;
	}

	.jng__list {
		grid-template-columns: 1fr;
	}
}