/*
 * Minimal, dependency-free styling for the Hanzi Writer widget. Uses CSS custom properties so
 * a theme can override colors globally; falls back to Start Mandarin's provisional palette
 * (from the brand skill) if nothing overrides them. Confirm these values before production -
 * they're marked provisional in the brand guidelines too.
 */

.smhw-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.smhw-widget {
	--smhw-ink: var( --sm-chinese-ink, #101211 );
	--smhw-accent: var( --sm-chinese-red, #d71920 );
	--smhw-outline: var( --sm-stone-grey, #d8d4cb );
	--smhw-surface: var( --sm-warm-off-white, #f7f3e9 );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border: 1px solid var( --smhw-outline );
	border-radius: 8px;
	background: var( --smhw-surface );
	max-width: 100%;
	box-sizing: border-box;
}

.smhw-canvas {
	display: inline-block;
}

.smhw-canvas svg,
.smhw-canvas canvas {
	max-width: 100%;
	height: auto;
}

.smhw-controls {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

.smhw-btn {
	font: inherit;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var( --smhw-ink );
	background: transparent;
	color: var( --smhw-ink );
	cursor: pointer;
}

.smhw-btn:hover,
.smhw-btn:focus-visible {
	background: var( --smhw-accent );
	border-color: var( --smhw-accent );
	color: #fff;
}

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

.smhw-status {
	min-height: 1.2em;
	font-size: 0.9rem;
	margin: 0;
	text-align: center;
}

.smhw-fallback-text {
	font-size: 0.85rem;
	color: var( --smhw-ink );
	opacity: 0.75;
	margin: 0;
	text-align: center;
}

.smhw-decomposition {
	font-size: 0.85rem;
	color: var( --smhw-ink );
	margin: 0;
	text-align: center;
	font-weight: 600;
}