/* Optional English learning labels and direct-on-card rank hints. */
.settings-section-title {
	color: var(--text-soft);
	font-family: "Inter Tight", "Noto Sans JP", system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 14px 0 4px;
	text-align: left;
	text-transform: uppercase;
}

#sidebar button {
	position: relative;
}

#sidebar button > [data-i18n] {
	display: block;
}

.english-assist-sublabel {
	display: block;
	font-size: 0.66em;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	margin-top: 3px;
	opacity: 0.82;
}

.english-assist-sublabel[hidden] {
	display: none;
}

#sidebar .kbd-hint {
	margin-left: 0;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.card[data-rank-hint-bound="true"] {
	cursor: help;
}

.card[data-rank-hint-bound="true"]:focus-visible {
	outline: 3px solid #f6d989;
	outline-offset: 4px;
}

.card-rank-hint {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease;
}

.card.is-rank-hint-timed .card-rank-hint,
.card:focus .card-rank-hint {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.card-rank-hint {
		transition: none;
	}
}