/**
 * Material Calculator styles.
 *
 * Deliberately quiet. This is a utility sitting inside an existing branded
 * site, so it inherits the theme's typography and only defines what it must.
 * Every colour is a custom property — retheme by overriding .nmc in the
 * theme's own stylesheet rather than editing this file.
 */

.nmc {
	--nmc-accent: #c8102e;
	--nmc-border: #d5d8dc;
	--nmc-border-focus: var( --nmc-accent );
	--nmc-field-bg: #fff;
	--nmc-text: inherit;
	--nmc-muted: #6b7280;
	--nmc-error: #b3261e;
	--nmc-radius: 2px;
	--nmc-gap: 0.75rem;

	color: var( --nmc-text );
	container-type: inline-size;
}

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

.nmc-heading {
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var( --nmc-gap );
}

/* Fields ------------------------------------------------------------------ */

.nmc-field {
	margin-bottom: var( --nmc-gap );
}

/**
 * The original design used placeholders alone. Real labels are kept in the
 * markup for screen readers and hidden visually so the look is unchanged.
 */
.nmc-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.nmc-input {
	width: 100%;
	padding: 0.85em 1em;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: inherit;
	background-color: var( --nmc-field-bg );
	border: 1px solid var( --nmc-border );
	border-radius: var( --nmc-radius );
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nmc-input::placeholder {
	color: var( --nmc-muted );
	opacity: 1;
}

.nmc-input:focus-visible {
	outline: none;
	border-color: var( --nmc-border-focus );
	box-shadow: 0 0 0 2px rgba( 200, 16, 46, 0.18 );
}

/* Fall back for browsers without :focus-visible on form controls. */
.nmc-input:focus {
	border-color: var( --nmc-border-focus );
}

select.nmc-input {
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 12px 8px;
	padding-right: 2.75em;
}

.nmc-field.has-error .nmc-input {
	border-color: var( --nmc-error );
}

.nmc-error {
	display: block;
	min-height: 0;
	margin-top: 0.35em;
	font-size: 0.85em;
	line-height: 1.4;
	color: var( --nmc-error );
}

.nmc-error:empty {
	display: none;
}

/* Actions ----------------------------------------------------------------- */

.nmc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0;
}

.nmc-button {
	padding: 0.8em 2em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	background-color: var( --nmc-accent );
	border: 1px solid var( --nmc-accent );
	border-radius: var( --nmc-radius );
	transition: opacity 120ms ease;
}

.nmc-button:hover,
.nmc-button:focus-visible {
	opacity: 0.88;
}

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

.nmc-button--ghost {
	color: var( --nmc-accent );
	background-color: transparent;
}

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

.nmc-results {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --nmc-gap );
}

@container ( min-width: 30rem ) {
	.nmc-results {
		grid-template-columns: 1fr 1fr;
	}
}

/* Container queries are widely supported, but keep a width fallback. */
@supports not ( container-type: inline-size ) {
	@media ( min-width: 600px ) {
		.nmc-results {
			grid-template-columns: 1fr 1fr;
		}
	}
}

.nmc-result-label {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --nmc-muted );
}

.nmc-input--result {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	background-color: transparent;
}

.nmc-input--result:read-only {
	cursor: default;
}

@media ( prefers-reduced-motion: reduce ) {
	.nmc-input,
	.nmc-button {
		transition: none;
	}
}