/**
 * TL431 Calculator - tool-specific styles.
 * Shared styles live in assets/css/tools-common.css.
 */

/* ---------- Circuit diagram ---------- */

.ediy-tl431 .ediy-tl431__circuit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0 0 var(--ediy-gap);
	padding: 0.75rem 1rem;
	border: 1px solid var(--ediy-border);
	border-radius: var(--ediy-radius-sm);
	background: var(--ediy-surface);
}

.ediy-tl431 .ediy-tl431__diagram {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	max-width: 13rem;
	height: auto;
	color: var(--ediy-text);
	overflow: visible;
}

.ediy-tl431 .ediy-tl431__res {
	stroke: var(--ediy-primary);
	fill: #ffffff;
}

.ediy-tl431 .ediy-tl431__circuit figcaption {
	flex: 1 1 14rem;
	margin: 0;
	font-size: 0.95em;
}

/* ---------- Mode selector ---------- */

.ediy-tl431 .ediy-tl431__mode {
	grid-template-columns: minmax(0, 26rem);
}

.ediy-tl431 .ediy-tl431__mode-desc {
	margin: -0.25rem 0 var(--ediy-gap);
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--ediy-primary);
	background: #fbf2fb;
	font-size: 0.95em;
}

.ediy-tl431 .ediy-tl431__mode-desc:empty {
	display: none;
}

/* ---------- Option groups ---------- */

.ediy-tl431 .ediy-tl431__options {
	margin: 0 0 var(--ediy-gap);
	padding: 0.85rem 1rem 0.25rem;
	border: 1px solid var(--ediy-border);
	border-radius: var(--ediy-radius-sm);
}

.ediy-tl431 .ediy-tl431__options legend {
	padding: 0 0.35rem;
}

.ediy-tl431 .ediy-tl431__options > .ediy-help {
	margin: 0 0 0.75rem;
}

.ediy-tl431 .ediy-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.ediy-tl431 .ediy-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--ediy-primary);
	cursor: pointer;
}

.ediy-tl431 .ediy-check input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--ediy-focus);
	outline-offset: 2px;
}

.ediy-tl431 .ediy-check label {
	margin: 0;
	font-size: 0.95em;
	cursor: pointer;
}

/* ---------- Results ---------- */

.ediy-tl431 .ediy-result.is-primary {
	border-color: var(--ediy-primary);
	box-shadow: inset 3px 0 0 var(--ediy-primary);
}

.ediy-tl431 .ediy-tl431__caution {
	padding: 0.6rem 0.8rem;
	border: 1px solid #e6c200;
	border-radius: var(--ediy-radius-sm);
	background: #fff9db;
}

@media (max-width: 480px) {
	.ediy-tl431 .ediy-tl431__diagram {
		max-width: 11rem;
		margin: 0 auto;
	}
}