/**
 * Plugin-scoped styling for the Gräsbloggen tool blocks (Gödselkalkylator,
 * Frökalkylator, Dressjord/sand-kalkylator). Uses only the theme's CSS
 * custom properties (assets/css/tokens.css) — no theme classes, no theme
 * CSS files touched.
 *
 * If a token is missing (this stylesheet loaded on its own, e.g. in a
 * style-guide context) every var() falls back to a sane default so the
 * calculator still renders usably.
 */

.grasbloggen-tool {
	--gt-radius: var(--radius, 4px);
	--gt-line: var(--hairline, rgba(22, 33, 26, 0.15));
	--gt-line-strong: var(--hairline-strong, rgba(22, 33, 26, 0.32));
	--gt-field-border: var(--field-border, #767e78);
	margin-block: var(--sp-6, 2rem);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-radius);
	overflow: hidden;
	font-family: var(--font-sans, sans-serif);
	background: var(--color-bg, #fff);
	color: var(--color-ink, #16211a);
}

.grasbloggen-tool__intro {
	padding: var(--sp-5, 1.5rem) var(--sp-5, 1.5rem) 0;
	max-width: var(--measure, 68ch);
}

.grasbloggen-tool__intro p {
	font-size: var(--step-0, 1rem);
	color: var(--color-accent-dim, #4d6b57);
	margin: 0 0 var(--sp-4, 1rem);
}

.grasbloggen-tool__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 760px) {
	.grasbloggen-tool__grid {
		grid-template-columns: 1.1fr 1fr;
		/* Grid items stretch to the row's tallest
		   child by default, so the dark result panel (usually far shorter
		   than the multi-field input column) stretched to match it and
		   showed a large empty flat-green filler area below its real
		   content. align-items:start lets each column size to its own
		   content height instead. */
		align-items: start;
	}
}

.grasbloggen-tool__inputs {
	padding: var(--sp-5, 1.5rem);
	border-top: 1px solid var(--gt-line);
}

@media (min-width: 760px) {
	.grasbloggen-tool__inputs {
		border-right: 1px solid var(--gt-line);
	}
}

.grasbloggen-tool__kicker {
	font-family: var(--font-mono, monospace);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--step--1, 0.85rem);
	color: var(--color-accent-dim, #4d6b57);
	margin: 0 0 var(--sp-4, 1rem);
}

.grasbloggen-tool__field {
	margin-bottom: var(--sp-4, 1rem);
}

.grasbloggen-tool__field label,
.grasbloggen-tool__field legend {
	display: block;
	font-weight: 600;
	margin-bottom: var(--sp-1, 0.25rem);
	padding: 0;
}

.grasbloggen-tool__field fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.grasbloggen-tool__radio-row {
	display: flex;
	gap: var(--sp-4, 1rem);
	flex-wrap: wrap;
}

.grasbloggen-tool__radio-row label {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 0.5rem);
	font-weight: 400;
}

.grasbloggen-tool__field input[type="text"],
.grasbloggen-tool__field select {
	width: 100%;
	max-width: 22rem;
	padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
	border: 1px solid var(--gt-field-border);
	border-radius: var(--gt-radius);
	font: inherit;
	font-variant-numeric: tabular-nums;
	background: var(--color-bg, #fff);
	color: var(--color-ink, #16211a);
}

.grasbloggen-tool__field input[type="text"]:focus,
.grasbloggen-tool__field select:focus {
	outline: 2px solid var(--color-action, #2e7a3e);
	outline-offset: 1px;
}

.grasbloggen-tool__hint {
	display: block;
	font-size: var(--step--1, 0.85rem);
	color: var(--color-accent-dim, #4d6b57);
	margin-top: var(--sp-1, 0.25rem);
	max-width: 40ch;
}

.grasbloggen-tool__error {
	display: none;
	font-size: var(--step--1, 0.85rem);
	color: var(--color-caution, #8a5a2e);
	margin-top: var(--sp-1, 0.25rem);
}

.grasbloggen-tool__field.has-error .grasbloggen-tool__error {
	display: block;
}

.grasbloggen-tool__field.has-error input,
.grasbloggen-tool__field.has-error select {
	border-color: var(--color-caution, #8a5a2e);
}

.grasbloggen-tool__mode-toggle {
	margin-bottom: var(--sp-5, 1.5rem);
	padding-bottom: var(--sp-4, 1rem);
	border-bottom: 1px dashed var(--gt-line);
}

.grasbloggen-tool__annual-fields {
	padding-left: var(--sp-4, 1rem);
	border-left: 2px solid var(--gt-line);
}

.grasbloggen-tool__annual-fields[hidden] {
	display: none;
}

.grasbloggen-tool__output {
	padding: var(--sp-5, 1.5rem);
	background: var(--color-band, #0f2e1d);
	color: var(--color-band-text, #f2f0e9);
	border-top: 1px solid var(--gt-line);
}

.grasbloggen-tool__output .grasbloggen-tool__kicker {
	color: rgba(242, 240, 233, 0.7);
}

.grasbloggen-tool__result-primary {
	font-family: var(--font-display, serif);
	font-size: var(--step-4, 2.4rem);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--sp-5, 1.5rem);
}

.grasbloggen-tool__result-primary .grasbloggen-tool__unit {
	display: block;
	font-family: var(--font-sans, sans-serif);
	font-size: var(--step-0, 1rem);
	font-weight: 400;
	opacity: 0.75;
	margin-top: var(--sp-1, 0.25rem);
}

.grasbloggen-tool__result-list {
	list-style: none;
	margin: 0 0 var(--sp-5, 1.5rem);
	padding: 0;
	border-top: 1px solid var(--color-band-line, rgba(242, 240, 233, 0.22));
}

.grasbloggen-tool__result-list li {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3, 0.75rem);
	padding: var(--sp-2, 0.5rem) 0;
	border-bottom: 1px solid var(--color-band-line, rgba(242, 240, 233, 0.22));
	font-variant-numeric: tabular-nums;
}

.grasbloggen-tool__warning {
	display: none;
	border: 1px solid var(--color-caution, #8a5a2e);
	background: var(--color-caution-bg, #f3eadd);
	color: var(--p-ink, #16211a);
	border-radius: var(--gt-radius);
	padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
	margin-bottom: var(--sp-4, 1rem);
}

.grasbloggen-tool__warning.is-visible {
	display: block;
}

.grasbloggen-tool__warning strong {
	display: block;
	margin-bottom: var(--sp-1, 0.25rem);
}

.grasbloggen-tool__disclaimer {
	font-size: var(--step--1, 0.85rem);
	opacity: 0.75;
	margin: 0;
}

.grasbloggen-tool__formula {
	padding: var(--sp-5, 1.5rem);
	border-top: 1px solid var(--gt-line);
	background: var(--color-instrument-bg, #edefe9);
}

.grasbloggen-tool__formula-line {
	font-family: var(--font-mono, monospace);
	font-size: var(--step--1, 0.85rem);
	margin: 0 0 var(--sp-2, 0.5rem);
	word-break: break-word;
}

.grasbloggen-tool__method {
	padding: var(--sp-5, 1.5rem);
	border-top: 1px solid var(--gt-line);
}

.grasbloggen-tool__method ol,
.grasbloggen-tool__method ul {
	margin: 0;
	padding-left: 1.2em;
}

.grasbloggen-tool__method li {
	margin-bottom: var(--sp-2, 0.5rem);
}

.grasbloggen-tool__guide-link {
	display: inline-block;
	margin-top: var(--sp-2, 0.5rem);
	font-weight: 600;
	color: var(--color-action, #2e7a3e);
}

/* JS-only affordance: while JS is present the results region is live, but
   there is nothing visual to gate — the block already renders a full
   server-computed result with default values, so no-JS users see a
   complete, correct example instead of a blank/broken panel. */