/* Techclatter name generator.
 *
 * Redesigned 2026-09-12: the dark card read as an image rather than a tool, so the
 * whole surface is light now and every control states that it is a control. The
 * rules that matter: real borders on anything clickable, a hover and an active state
 * on all of them, one unmistakable primary button, and a live status line, because a
 * thing that never visibly responds looks like a picture of a thing.
 */

.techclatter-namegen {
	--tng-ink: #16151f;
	--tng-ink-soft: #5b5872;
	--tng-line: #ddd9e8;
	--tng-line-strong: #b9b3cd;
	--tng-surface: #ffffff;
	--tng-surface-sunk: #f6f5fa;
	--tng-accent: #5b3df5;
	--tng-accent-soft: #efeaff;
	margin: 1.5em 0 2em;
	padding: 1.35em 1.4em 1.5em;
	border: 1px solid var(--tng-line);
	border-radius: 16px;
	background: var(--tng-surface);
	box-shadow: 0 1px 2px rgba(22, 21, 31, .05), 0 8px 24px -16px rgba(22, 21, 31, .3);
	color: var(--tng-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- header ---- */

.tng-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1.15em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--tng-line);
}
.tng-title h3 {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 0.2em;
	font-size: 1.15em;
	line-height: 1.25;
	color: var(--tng-ink);
}
.tng-title h3::before {
	content: "";
	width: 1.5em;
	height: 1.5em;
	flex: 0 0 auto;
	border-radius: 7px;
	background: var(--tng-accent-soft);
	/* a small dice glyph, decoration only */
	background-image: radial-gradient(circle at 32% 32%, var(--tng-accent) 1.6px, transparent 1.7px),
		radial-gradient(circle at 68% 68%, var(--tng-accent) 1.6px, transparent 1.7px),
		radial-gradient(circle at 50% 50%, var(--tng-accent) 1.6px, transparent 1.7px);
}
.tng-title p {
	margin: 0;
	color: var(--tng-ink-soft);
	font-size: 0.9em;
}
.tng-badge {
	flex-shrink: 0;
	background: var(--tng-accent-soft);
	color: var(--tng-accent);
	font-weight: 700;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.4em 0.8em;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---- controls ---- */

.tng-controls {
	background: var(--tng-surface-sunk);
	border: 1px solid var(--tng-line);
	border-radius: 12px;
	padding: 1.3em 1.05em 1.4em;
	text-align: center;
}
.tng-fieldlabel {
	display: block;
	margin: 0 0 0.7em;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tng-ink-soft);
}
.tng-tones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
	margin-bottom: 1.35em;
}
.tng-tone {
	background: var(--tng-surface);
	border: 1px solid var(--tng-line-strong);
	color: var(--tng-ink);
	border-radius: 999px;
	padding: 0.58em 1.3em;
	font-size: 0.98em;
	font-family: inherit;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.tng-tone:hover {
	border-color: var(--tng-accent);
	background: var(--tng-accent-soft);
}
.tng-tone:active { transform: translateY(1px); }
.tng-tone.is-active {
	background: var(--tng-accent);
	border-color: var(--tng-accent);
	color: #fff;
	font-weight: 600;
}
.tng-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
}
.tng-btn {
	border: 1px solid var(--tng-line-strong);
	background: var(--tng-surface);
	color: var(--tng-ink);
	border-radius: 11px;
	padding: 0.8em 1.5em;
	font-size: 1.02em;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.tng-btn:hover { border-color: var(--tng-accent); color: var(--tng-accent); }
.tng-btn:active { transform: translateY(1px); }
.tng-btn:focus-visible { outline: 3px solid var(--tng-accent-soft); outline-offset: 1px; }
.tng-btn:disabled { opacity: .55; cursor: progress; }
.tng-generate {
	background: var(--tng-accent);
	border-color: var(--tng-accent);
	color: #fff;
	padding-inline: 2em;
	box-shadow: 0 1px 0 rgba(22, 21, 31, .12);
}
.tng-generate::before {
	content: "\21bb";
	margin-right: 0.45em;
	font-size: 1.05em;
	display: inline-block;
}
.tng-generate:hover { background: #4a2fe0; border-color: #4a2fe0; color: #fff; }

.tng-status {
	min-height: 1.3em;
	margin: 0.85em 0 0;
	font-size: 0.85em;
	color: var(--tng-ink-soft);
}

/* ---- results ---- */

.tng-results-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 1.3em 0 0.7em;
}
.tng-results-head h4 {
	margin: 0;
	color: var(--tng-ink);
	font-size: 1em;
}
.tng-empty {
	margin: 0;
	padding: 1.1em 0.9em;
	border: 1px dashed var(--tng-line-strong);
	border-radius: 10px;
	text-align: center;
	color: var(--tng-ink-soft);
	font-size: 0.92em;
}
.tng-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 0.5em;
}
.tng-results li {
	background: var(--tng-surface);
	border: 1px solid var(--tng-line);
	border-radius: 10px;
	padding: 0.55em 0.65em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.tng-results li:hover {
	border-color: var(--tng-line-strong);
	box-shadow: 0 2px 8px -4px rgba(22, 21, 31, .25);
}
.tng-name {
	font-weight: 600;
	overflow-wrap: break-word;
	white-space: normal;
}
.tng-copy {
	flex-shrink: 0;
	background: var(--tng-surface-sunk);
	border: 1px solid var(--tng-line);
	color: var(--tng-ink-soft);
	border-radius: 7px;
	font-size: 0.74em;
	font-family: inherit;
	font-weight: 600;
	padding: 0.3em 0.6em;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tng-copy:hover {
	background: var(--tng-accent-soft);
	border-color: var(--tng-accent);
	color: var(--tng-accent);
}
.tng-count {
	margin: 0.85em 0 0;
	font-size: 0.82em;
	color: var(--tng-ink-soft);
}

/* ---- recently generated names, in the article body ---- */

.tng-recent { margin: 2em 0 1.5em; }
.tng-recent-intro { margin: 0 0 1.1em; }
.tng-recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 0.55em;
}
.tng-recent-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	border: 1px solid #e3e1ec;
	border-radius: 8px;
	padding: 0.5em 0.65em;
	background: #fbfbfd;
}
.tng-recent-name {
	font-weight: 600;
	overflow-wrap: break-word;
	white-space: normal;
}
.tng-recent-tone {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6f6b85;
}
.tng-recent .tng-copy { background: #fff; }

/* ---- the article's own name groups (TC-6) ---- */

.tc-namelist {
	list-style: none;
	margin: 0 0 1.8em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 0.4em 0.7em;
}
.tc-namelist li {
	padding: 0.35em 0.6em;
	border: 1px solid #e3e1ec;
	border-radius: 6px;
	background: #fbfbfd;
	font-weight: 600;
	white-space: normal;
	overflow-wrap: break-word;
}

@media (max-width: 480px) {
	.techclatter-namegen { padding: 1.1em 1em 1.2em; }
	.tng-head { flex-direction: column; }
	.tng-results-head { flex-direction: column; align-items: flex-start; }
	.tng-actions .tng-generate { flex: 1 1 100%; }
	.tng-recent-list { grid-template-columns: 1fr; }
	.tc-namelist { grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) ); }
}