/* Readability of Wikipedia — checker styles.
   Scoped under .row-checker so nothing leaks into theme/editorial content. */

.row-checker {
	margin: 0 0 2em;
}

.row-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: flex-end;
}

.row-field {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.row-label {
	font-weight: 600;
}

.row-input {
	width: 100%;
	padding: 0.55em 0.75em;
	border: 1px solid #b9bcc2;
	border-radius: 6px;
	font-size: 1em;
}

.row-submit {
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: 6px;
	background: #2c5aa0;
	color: #fff;
	font-size: 1em;
	cursor: pointer;
}

.row-submit:hover,
.row-submit:focus {
	background: #234a85;
}

.row-submit:disabled {
	background: #8ea4c4;
	cursor: wait;
}

.row-error {
	margin-top: 0.75em;
	padding: 0.75em 1em;
	border-left: 4px solid #b32d2e;
	background: #fcf0f1;
	border-radius: 0 6px 6px 0;
}

.row-loading {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.75em;
}

.row-loading__spinner {
	width: 1.1em;
	height: 1.1em;
	border: 2px solid #b9bcc2;
	border-top-color: #2c5aa0;
	border-radius: 50%;
	animation: row-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.row-loading__spinner { animation: none; }
}

/* Results card */

.row-results {
	margin-top: 1.25em;
}

.row-card {
	border: 1px solid #dcdfe4;
	border-radius: 10px;
	padding: 1.25em 1.5em;
	background: #fff;
}

.row-card__title {
	margin: 0 0 0.25em;
	font-size: 1.25em;
}

.row-notice {
	margin: 0.4em 0 0;
	font-size: 0.9em;
	color: #50575e;
}

.row-notice--warning {
	padding: 0.5em 0.75em;
	background: #fcf9e8;
	border-left: 4px solid #dba617;
	border-radius: 0 6px 6px 0;
	color: #3c3b37;
}

.row-headline {
	margin: 1em 0 0.75em;
}

.row-headline__grade {
	margin: 0;
	font-size: 1.35em;
}

.row-headline__label {
	margin: 0.15em 0 0;
	color: #50575e;
}

/* Gauge — color is decorative; the text labels carry the meaning. */

.row-gauge {
	margin: 0.75em 0 1em;
	max-width: 480px;
}

.row-gauge__track {
	position: relative;
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(90deg, #7fbf7f, #e8d477, #d98080);
}

.row-gauge__marker {
	position: absolute;
	top: -4px;
	width: 4px;
	height: 18px;
	margin-left: -2px;
	background: #1d2327;
	border-radius: 2px;
}

.row-gauge__ends {
	display: flex;
	justify-content: space-between;
	font-size: 0.85em;
	color: #50575e;
	margin-top: 0.25em;
}

/* Breakdown table */

.row-breakdown {
	margin: 0.5em 0 1em;
}

.row-breakdown summary {
	cursor: pointer;
	font-weight: 600;
}

.row-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.75em;
	font-size: 0.95em;
}

.row-table th,
.row-table td {
	text-align: left;
	padding: 0.45em 0.6em;
	border-bottom: 1px solid #eceef1;
}

/* Stats */

.row-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	margin: 0;
	font-size: 0.9em;
}

.row-stats dt {
	color: #50575e;
	margin: 0;
}

.row-stats dd {
	margin: 0;
	font-weight: 600;
}

/* Suggestions / recent lookups */

.row-suggestions,
.row-recent__list {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.row-suggestion {
	border: 1px solid #b9bcc2;
	background: #f6f7f7;
	border-radius: 999px;
	padding: 0.25em 0.9em;
	font-size: 0.9em;
	cursor: pointer;
}

.row-suggestion:hover,
.row-suggestion:focus {
	background: #eef2f8;
	border-color: #2c5aa0;
}

.row-recent {
	margin-top: 1.5em;
}

.row-recent__title {
	font-size: 1em;
	margin: 0 0 0.25em;
}