/**
 * ShahCalc calculator styles.
 *
 * Loaded inside the calculator's Shadow DOM (or, in the block editor preview,
 * the light DOM). Everything is scoped under .shahcalc-root so it can never
 * leak into the surrounding page. Theming happens through --shahcalc-* custom
 * properties, which are set as sanitised inline styles on the host element and
 * inherit into the shadow tree.
 */

:host {
	display: block;
}

.shahcalc-host {
	display: block;
}

.shahcalc-root,
.shahcalc-root *,
.shahcalc-root *::before,
.shahcalc-root *::after {
	box-sizing: border-box;
}

.shahcalc-root {
	font-family: var(--shahcalc-font, system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--shahcalc-text, #333);
	background: var(--shahcalc-bg, #fff);
	border-radius: var(--shahcalc-radius, 8px);
	border-style: var(--shahcalc-border-type, solid);
	border-width: var(--shahcalc-border-width, 1px);
	border-color: var(--shahcalc-border-color, #e5e7eb);
	padding: var(--shahcalc-padding, 24px);
	box-shadow: var(--shahcalc-box-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
}

.shahcalc-root .shahcalc-title {
	font-family: var(--shahcalc-title-font, inherit);
	font-size: var(--shahcalc-title-size, 24px);
	font-weight: var(--shahcalc-title-weight, 700);
	color: var(--shahcalc-title-color, var(--shahcalc-text, #333));
	text-align: var(--shahcalc-title-align, center);
	line-height: var(--shahcalc-title-line-height, 1.2);
	text-transform: var(--shahcalc-title-transform, none);
	margin-bottom: 24px;
}

.shahcalc-root .shahcalc-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

@media (min-width: 768px) {
	.shahcalc-root .shahcalc-container {
		flex-direction: row;
	}
}

.shahcalc-root .shahcalc-fields {
	flex: 2;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-content: start;
}

/* Per-field responsive widths (mobile first): m = mobile, t >= 768px, d >= 1025px. */
.shahcalc-root .shahcalc-w-m-100 { grid-column: span 2; }
.shahcalc-root .shahcalc-w-m-50 { grid-column: span 1; }

@media (min-width: 768px) {
	.shahcalc-root .shahcalc-w-t-100 { grid-column: span 2; }
	.shahcalc-root .shahcalc-w-t-50 { grid-column: span 1; }
}

@media (min-width: 1025px) {
	.shahcalc-root .shahcalc-w-d-100 { grid-column: span 2; }
	.shahcalc-root .shahcalc-w-d-50 { grid-column: span 1; }
}

.shahcalc-root .shahcalc-results {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(0, 0, 0, 0.02);
	padding: var(--shahcalc-results-padding, 24px);
	box-shadow: var(--shahcalc-results-box-shadow, none);
	border-radius: 8px;
	text-align: center;
}

.shahcalc-root .shahcalc-field label {
	display: block;
	font-family: var(--shahcalc-label-font, inherit);
	font-size: var(--shahcalc-label-size, 14px);
	font-weight: var(--shahcalc-label-weight, 600);
	color: var(--shahcalc-label-color, inherit);
	letter-spacing: var(--shahcalc-label-spacing, 0);
	text-transform: var(--shahcalc-label-transform, none);
	margin-bottom: 6px;
}

.shahcalc-root .shahcalc-field input,
.shahcalc-root .shahcalc-field select {
	width: 100%;
	padding: var(--shahcalc-input-padding, 10px);
	border-width: var(--shahcalc-input-border-width, 1px);
	border-style: solid;
	border-color: var(--shahcalc-input-border, #ddd);
	border-radius: var(--shahcalc-input-radius, 6px);
	font-size: var(--shahcalc-input-size, 16px);
	font-weight: var(--shahcalc-input-weight, 400);
	background: var(--shahcalc-input-bg, #fff);
	color: var(--shahcalc-input-color, inherit);
	transition: border-color 0.2s;
}

.shahcalc-root .shahcalc-field input:focus,
.shahcalc-root .shahcalc-field select:focus {
	outline: none;
	border-color: var(--shahcalc-input-focus, var(--shahcalc-accent, #007cba));
}

.shahcalc-root .shahcalc-field input:focus-visible,
.shahcalc-root .shahcalc-field select:focus-visible {
	outline: 2px solid var(--shahcalc-input-focus, var(--shahcalc-accent, #007cba));
	outline-offset: 2px;
}

.shahcalc-root .shahcalc-field input[type="range"] {
	padding: 0;
	cursor: pointer;
	accent-color: var(--shahcalc-accent, #007cba);
}

.shahcalc-root .shahcalc-field input[type="checkbox"] {
	width: auto;
	margin-right: 8px;
	transform: scale(1.2);
	cursor: pointer;
	accent-color: var(--shahcalc-accent, #007cba);
}

.shahcalc-root .shahcalc-field .shahcalc-checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.shahcalc-root .shahcalc-chart {
	width: 150px;
	height: 150px;
	margin-bottom: 20px;
}

.shahcalc-root .shahcalc-chart svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.shahcalc-root .shahcalc-chart-segment {
	transition: stroke-dasharray 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
	.shahcalc-root .shahcalc-chart-segment,
	.shahcalc-root .shahcalc-field input,
	.shahcalc-root .shahcalc-field select {
		transition: none;
	}
}

.shahcalc-root .shahcalc-result-label {
	margin: 0 0 10px;
	font-size: var(--shahcalc-heading-size, 18px);
	font-weight: var(--shahcalc-heading-weight, 600);
	color: var(--shahcalc-text, #333);
}

.shahcalc-root .shahcalc-result-value {
	font-size: var(--shahcalc-result-size, 2.5em);
	font-weight: var(--shahcalc-result-weight, 700);
	color: var(--shahcalc-accent, #007cba);
	line-height: 1;
}