/**
 * GyanPustak Calculator Suite - frontend styles.
 *
 * Mobile first, token driven. Targets WCAG 2.2 AA: visible focus, 24px minimum
 * target size, reduced motion support, forced colours support and a usable
 * print layout.
 *
 * Theming contract: PHP injects an inline :root block setting --gpcalc-accent,
 * --gpcalc-radius and --gpcalc-font-size from the admin settings. Everything
 * below reads those through *local* aliases (--gpc-*), because a custom
 * property may never fall back to itself: `--x: var(--x, default)` is a
 * self-reference cycle and CSS discards it, which silently zeroed every
 * border radius on the page.
 */

/* =========================================================================
   1. Design tokens
   ========================================================================= */

.gpcalc,
.gpcalc-directory,
.gpcalc-gone,
.gpcalc-breadcrumb {
	/* Accent ramp. Derived from the admin accent with colour-mix so a single
	   setting produces a coherent scale; the fallbacks keep older browsers
	   on the default blue rather than unstyled. */
	--gpc-accent: var(--gpcalc-accent, #1a73e8);
	--gpc-accent-hover: color-mix(in srgb, var(--gpc-accent) 86%, #000);
	--gpc-accent-soft: color-mix(in srgb, var(--gpc-accent) 10%, transparent);
	--gpc-accent-line: color-mix(in srgb, var(--gpc-accent) 32%, transparent);
	--gpc-accent-ink: var(--gpc-accent);

	--gpc-radius: var(--gpcalc-radius, 12px);
	--gpc-radius-sm: calc(var(--gpc-radius) * 0.5);
	--gpc-radius-lg: calc(var(--gpc-radius) * 1.35);
	--gpc-radius-pill: 999px;

	/* Surfaces */
	--gpc-bg: #fff;
	--gpc-surface: #f6f8fa;
	--gpc-surface-2: #eef1f5;
	--gpc-border: #dfe3e8;
	--gpc-border-strong: #c4cad2;

	/* Ink */
	--gpc-text: #1a1d21;
	--gpc-muted: #5b6672;
	--gpc-faint: #8ב8f98;
	--gpc-faint: #868e98;

	/* Status */
	--gpc-error: #d93025;
	--gpc-error-soft: #fdeceb;
	--gpc-success: #0f7b43;
	--gpc-success-soft: #e8f6ee;
	--gpc-warning: #9a6700;
	--gpc-warning-soft: #fff6dd;

	/* Elevation. Layered shadows read as depth rather than a grey halo. */
	--gpc-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
	--gpc-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	--gpc-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
	--gpc-shadow-lg: 0 12px 20px -6px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.06);

	/* Rhythm */
	--gpc-space-1: 0.25rem;
	--gpc-space-2: 0.5rem;
	--gpc-space-3: 0.75rem;
	--gpc-space-4: 1rem;
	--gpc-space-5: 1.5rem;
	--gpc-space-6: 2rem;

	--gpc-ease: cubic-bezier(0.2, 0, 0.13, 1);
	--gpc-duration: 180ms;

	--gpc-font: inherit;
	--gpc-font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

	box-sizing: border-box;
	color: var(--gpc-text);
	font-family: var(--gpc-font);
	font-size: var(--gpcalc-font-size, 16px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.gpcalc *,
.gpcalc *::before,
.gpcalc *::after,
.gpcalc-directory *,
.gpcalc-directory *::before,
.gpcalc-directory *::after,
.gpcalc-gone *,
.gpcalc-gone *::before,
.gpcalc-gone *::after,
.gpcalc-breadcrumb *,
.gpcalc-breadcrumb *::before,
.gpcalc-breadcrumb *::after {
	box-sizing: inherit;
}

/* Dark theme. Surfaces lift as they come forward, and the accent is lightened
   so it keeps contrast against a dark background. */
@media (prefers-color-scheme: dark) {
	.gpcalc,
	.gpcalc-directory,
	.gpcalc-gone,
	.gpcalc-breadcrumb {
		--gpc-bg: #16191d;
		--gpc-surface: #1e2227;
		--gpc-surface-2: #262b31;
		--gpc-border: #333a42;
		--gpc-border-strong: #454d57;

		--gpc-text: #e6e9ee;
		--gpc-muted: #a3adba;
		--gpc-faint: #7d8794;

		--gpc-accent-ink: color-mix(in srgb, var(--gpc-accent) 62%, #fff);
		--gpc-accent-soft: color-mix(in srgb, var(--gpc-accent) 18%, transparent);
		--gpc-accent-line: color-mix(in srgb, var(--gpc-accent) 45%, transparent);

		--gpc-error: #f28b82;
		--gpc-error-soft: rgba(217, 48, 37, 0.16);
		--gpc-success: #6dd58c;
		--gpc-success-soft: rgba(15, 123, 67, 0.18);
		--gpc-warning: #f2c94c;
		--gpc-warning-soft: rgba(154, 103, 0, 0.2);

		--gpc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
		--gpc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
		--gpc-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
		--gpc-shadow-lg: 0 14px 28px rgba(0, 0, 0, 0.55);
	}
}

/* =========================================================================
   2. Shell
   ========================================================================= */

.gpcalc {
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-lg);
	box-shadow: var(--gpc-shadow-sm);
	container-type: inline-size;
	margin: 0 0 var(--gpc-space-6);
	padding: clamp(1rem, 3vw, 1.75rem);
	position: relative;
}

.gpcalc__header {
	margin-bottom: var(--gpc-space-5);
}

.gpcalc__title {
	color: var(--gpc-text);
	font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 var(--gpc-space-2);
	text-wrap: balance;
}

.gpcalc__description {
	color: var(--gpc-muted);
	margin: 0;
	max-width: 68ch;
	text-wrap: pretty;
}

/* =========================================================================
   3. Layout
   ========================================================================= */

.gpcalc__layout {
	display: grid;
	gap: var(--gpc-space-5);
	grid-template-columns: 1fr;
}

/* Container queries: the calculator adapts to the space it is given, not the
   viewport, so it behaves correctly inside a narrow sidebar or a wide page. */
@container (min-width: 720px) {
	.gpcalc__layout {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
	@media (min-width: 860px) {
		.gpcalc__layout {
			align-items: start;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		}
	}
}

/* =========================================================================
   4. Form fields
   ========================================================================= */

.gpcalc__form {
	margin: 0;
	min-width: 0;
}

/* On a two column layout the results are usually much taller than the form
   (charts, schedules, steps). Sticking the form keeps the inputs on screen
   while the visitor reads down, instead of leaving a dead column. Only when
   there is real headroom, and never for visitors who prefer reduced motion. */
@container (min-width: 720px) {
	.gpcalc__form {
		position: sticky;
		top: var(--gpc-space-4);
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 860px) {
		.gpcalc__form {
			position: sticky;
			top: var(--gpc-space-4);
		}
	}
}

.gpcalc__fieldset {
	border: 0;
	display: grid;
	gap: var(--gpc-space-4);
	margin: 0;
	min-width: 0;
	padding: 0;
}

.gpcalc-field {
	display: grid;
	gap: var(--gpc-space-1);
	min-width: 0;
	position: relative;
}

.gpcalc-field__label {
	align-items: baseline;
	color: var(--gpc-text);
	display: flex;
	font-size: 0.9rem;
	font-weight: 600;
	gap: var(--gpc-space-2);
	justify-content: space-between;
	line-height: 1.35;
}

.gpcalc-field__unit {
	color: var(--gpc-muted);
	flex: none;
	font-size: 0.8rem;
	font-weight: 500;
}

.gpcalc-field__control {
	appearance: none;
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border-strong);
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-text);
	font: inherit;
	font-variant-numeric: tabular-nums;
	inline-size: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	transition:
		border-color var(--gpc-duration) var(--gpc-ease),
		box-shadow var(--gpc-duration) var(--gpc-ease),
		background-color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-field__control::placeholder {
	color: var(--gpc-faint);
}

.gpcalc-field__control:hover:not(:disabled) {
	border-color: var(--gpc-accent-line);
}

/* Focus ring: a 2px inset plus the accent border reads clearly in both themes
   and never shifts layout. */
.gpcalc-field__control:focus-visible {
	border-color: var(--gpc-accent);
	box-shadow: 0 0 0 3px var(--gpc-accent-soft);
	outline: none;
}

.gpcalc-field__control:disabled {
	background: var(--gpc-surface-2);
	color: var(--gpc-muted);
	cursor: not-allowed;
}

/* Native select chevron, drawn as a background image so no icon font is
   needed. currentColor cannot be used in a data URI, so the stroke matches
   the muted token per theme. */
select.gpcalc-field__control {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6672' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right 0.65rem center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	padding-inline-end: 2.25rem;
}

@media (prefers-color-scheme: dark) {
	select.gpcalc-field__control {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3adba' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	}
}

textarea.gpcalc-field__control {
	min-height: 96px;
	resize: vertical;
}

/* Number inputs: hide the spinners, the values are often large. */
.gpcalc-field__control[type="number"] {
	-moz-appearance: textfield;
}

.gpcalc-field__control[type="number"]::-webkit-outer-spin-button,
.gpcalc-field__control[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Invalid state, driven by the runtime toggling the error paragraph. */
.gpcalc-field__error {
	align-items: flex-start;
	color: var(--gpc-error);
	display: flex;
	font-size: 0.82rem;
	font-weight: 500;
	gap: var(--gpc-space-1);
	line-height: 1.4;
	margin: 0;
}

.gpcalc-field__error[hidden] {
	display: none;
}

.gpcalc-field__error::before {
	content: "⚠";
	flex: none;
	font-size: 0.9em;
	line-height: 1.5;
}

.gpcalc-field:has(.gpcalc-field__error:not([hidden])) .gpcalc-field__control {
	border-color: var(--gpc-error);
}

.gpcalc-field:has(.gpcalc-field__error:not([hidden])) .gpcalc-field__control:focus-visible {
	box-shadow: 0 0 0 3px var(--gpc-error-soft);
}

/* =========================================================================
   5. Buttons
   ========================================================================= */

.gpcalc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpc-space-2);
	margin-top: var(--gpc-space-4);
}

.gpcalc-button {
	align-items: center;
	background: var(--gpc-accent);
	border: 1px solid transparent;
	border-radius: var(--gpc-radius-sm);
	box-shadow: var(--gpc-shadow-xs);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	gap: var(--gpc-space-2);
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 0.55rem 1rem;
	text-decoration: none;
	transition:
		background-color var(--gpc-duration) var(--gpc-ease),
		border-color var(--gpc-duration) var(--gpc-ease),
		box-shadow var(--gpc-duration) var(--gpc-ease),
		transform var(--gpc-duration) var(--gpc-ease);
	white-space: nowrap;
}

.gpcalc-button:hover {
	background: var(--gpc-accent-hover);
	box-shadow: var(--gpc-shadow-sm);
}

.gpcalc-button:active {
	box-shadow: none;
	transform: translateY(1px);
}

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

.gpcalc-button--ghost {
	background: var(--gpc-bg);
	border-color: var(--gpc-border-strong);
	color: var(--gpc-text);
}

.gpcalc-button--ghost:hover {
	background: var(--gpc-surface);
	border-color: var(--gpc-accent-line);
	color: var(--gpc-accent-ink);
}

/* =========================================================================
   6. Results
   ========================================================================= */

.gpcalc__results {
	display: grid;
	gap: var(--gpc-space-4);
	min-width: 0;
}

.gpcalc__error {
	background: var(--gpc-error-soft);
	border: 1px solid color-mix(in srgb, var(--gpc-error) 40%, transparent);
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-error);
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0;
	padding: var(--gpc-space-3) var(--gpc-space-4);
}

.gpcalc__error[hidden] {
	display: none;
}

/* The headline figure. A subtle accent wash and a left rule give it weight
   without a heavy coloured block. */
.gpcalc-result--primary {
	align-items: center;
	background:
		linear-gradient(180deg, var(--gpc-accent-soft), transparent 70%),
		var(--gpc-surface);
	border: 1px solid var(--gpc-accent-line);
	border-radius: var(--gpc-radius);
	display: grid;
	gap: var(--gpc-space-1) var(--gpc-space-3);
	grid-template-areas:
		"label copy"
		"value copy";
	grid-template-columns: minmax(0, 1fr) auto;
	padding: var(--gpc-space-4) var(--gpc-space-5);
	position: relative;
}

.gpcalc-result__label {
	color: var(--gpc-muted);
	font-size: 0.78rem;
	font-weight: 600;
	grid-area: label;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gpcalc-result__value {
	color: var(--gpc-text);
	font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	grid-area: value;
	letter-spacing: -0.03em;
	line-height: 1.1;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Value refresh cue. Kept to opacity so it cannot cause layout shift, and it
   is switched off entirely under reduced motion. */
.gpcalc-result__value.is-updated {
	animation: gpcalc-pop var(--gpc-duration) var(--gpc-ease);
}

@keyframes gpcalc-pop {
	from { opacity: 0.45; }
	to { opacity: 1; }
}

.gpcalc-result__copy {
	align-items: center;
	align-self: center;
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border-strong);
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-muted);
	cursor: pointer;
	display: inline-flex;
	grid-area: copy;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	transition:
		background-color var(--gpc-duration) var(--gpc-ease),
		border-color var(--gpc-duration) var(--gpc-ease),
		color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-result__copy:hover {
	background: var(--gpc-surface-2);
	border-color: var(--gpc-accent-line);
	color: var(--gpc-accent-ink);
}

.gpcalc-result__copy:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

.gpcalc-result__copy.is-copied {
	border-color: var(--gpc-success);
	color: var(--gpc-success);
}

/* Secondary figures. auto-fit keeps them balanced at any width. */
.gpcalc-result-grid {
	display: grid;
	gap: var(--gpc-space-2);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
}

.gpcalc-result-grid__item {
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-sm);
	display: grid;
	gap: 0.15rem;
	padding: var(--gpc-space-3);
	transition: border-color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-result-grid__item:hover {
	border-color: var(--gpc-border-strong);
}

.gpcalc-result-grid__label {
	color: var(--gpc-muted);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.35;
}

.gpcalc-result-grid__value {
	color: var(--gpc-text);
	/* Scale with the card so a long currency figure stays on one line at
	   narrow widths instead of breaking mid-number. Only genuinely unbreakable
	   content falls back to wrapping. */
	font-size: clamp(0.92rem, 0.72rem + 1.1cqi, 1.05rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
	overflow-wrap: break-word;
}

@supports not (font-size: 1cqi) {
	.gpcalc-result-grid__value {
		font-size: 1rem;
	}
}

/* =========================================================================
   7. Notices
   ========================================================================= */

.gpcalc-notice {
	align-items: flex-start;
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-sm);
	border-inline-start: 3px solid var(--gpc-muted);
	color: var(--gpc-text);
	display: flex;
	font-size: 0.88rem;
	gap: var(--gpc-space-3);
	line-height: 1.5;
	margin: 0 0 var(--gpc-space-4);
	padding: var(--gpc-space-3) var(--gpc-space-4);
}

.gpcalc-notice p {
	margin: 0 0 var(--gpc-space-1);
}

.gpcalc-notice p:last-child {
	margin-bottom: 0;
}

.gpcalc-notice .gpcalc-icon {
	color: var(--gpc-muted);
	flex: none;
	margin-top: 0.15em;
}

.gpcalc-notice--warning {
	background: var(--gpc-warning-soft);
	border-color: color-mix(in srgb, var(--gpc-warning) 30%, transparent);
	border-inline-start-color: var(--gpc-warning);
}

.gpcalc-notice--warning .gpcalc-icon {
	color: var(--gpc-warning);
}

/* =========================================================================
   8. Chart
   ========================================================================= */

.gpcalc-chart {
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius);
	display: grid;
	gap: var(--gpc-space-2);
	justify-items: center;
	margin: 0;
	padding: var(--gpc-space-4);
}

.gpcalc-chart[hidden] {
	display: none;
}

.gpcalc-chart__svg {
	block-size: auto;
	display: block;
	inline-size: 100%;
	/* Cap the drawing so a pie chart does not dominate the results column on
	   a wide screen; the SVG scales down freely below this. */
	max-inline-size: 340px;
	overflow: visible;
}

.gpcalc-chart__caption {
	color: var(--gpc-muted);
	font-size: 0.8rem;
	order: 2;
	text-align: center;
}

.gpcalc-chart__label {
	fill: var(--gpc-muted);
	font-size: 11px;
}

/* =========================================================================
   9. Panels
   ========================================================================= */

.gpcalc-panel {
	border-top: 1px solid var(--gpc-border);
	margin-top: var(--gpc-space-4);
	padding-top: var(--gpc-space-1);
}

.gpcalc-panel__title {
	font-size: 1rem;
	margin: 0;
}

.gpcalc-panel__toggle {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-text);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	gap: var(--gpc-space-2);
	inline-size: 100%;
	min-height: 48px;
	padding: var(--gpc-space-2) var(--gpc-space-1);
	text-align: start;
	transition: color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-panel__toggle:hover {
	color: var(--gpc-accent-ink);
}

.gpcalc-panel__toggle:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

.gpcalc-panel__toggle .gpcalc-icon {
	color: var(--gpc-muted);
	flex: none;
}

.gpcalc-panel__toggle:hover .gpcalc-icon {
	color: inherit;
}

/* Chevron drawn in CSS so it needs no icon font. */
.gpcalc-panel__toggle::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	block-size: 0.5em;
	content: "";
	inline-size: 0.5em;
	margin-block-start: -0.25em;
	margin-inline-start: auto;
	opacity: 0.65;
	transform: rotate(45deg);
	transition: transform var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-panel.is-open .gpcalc-panel__toggle::after {
	margin-block-start: 0.15em;
	transform: rotate(-135deg);
}

.gpcalc-panel__body {
	display: none;
	padding: 0 var(--gpc-space-1) var(--gpc-space-4);
}

.gpcalc-panel.is-open .gpcalc-panel__body {
	display: block;
}

/* =========================================================================
   10. Formula
   ========================================================================= */

.gpcalc-formula {
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-sm);
	overflow-x: auto;
	padding: var(--gpc-space-4) var(--gpc-space-4) calc(var(--gpc-space-4) + 2px);
}

.gpcalc-formula__math {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	font-family: "Cambria Math", "Latin Modern Math", Georgia, "Times New Roman", serif;
	font-size: 1.15rem;
	gap: 0.15em;
	line-height: 2;
}

.gpcalc-formula__text {
	font-family: var(--gpc-font);
	font-size: 0.92em;
	font-style: normal;
}

/* Stacked fraction: two inline blocks with a rule between them. */
.gpcalc-frac {
	display: inline-flex;
	flex-direction: column;
	margin: 0 0.25em;
	text-align: center;
	vertical-align: middle;
}

.gpcalc-frac__num {
	border-bottom: 1px solid currentColor;
	padding: 0 0.4em 0.15em;
}

.gpcalc-frac__den {
	padding: 0.15em 0.4em 0;
}

.gpcalc-root__body {
	border-top: 1px solid currentColor;
	padding: 0 0.2em;
}

.gpcalc-bar,
.gpcalc-hat {
	border-top: 1px solid currentColor;
	display: inline-block;
	line-height: 1.1;
	padding-top: 0.05em;
}

.gpcalc-formula sup,
.gpcalc-formula sub {
	font-size: 0.7em;
	line-height: 0;
}

/* Variable key */
.gpcalc-variables {
	display: grid;
	gap: var(--gpc-space-2);
	margin: var(--gpc-space-4) 0 0;
}

.gpcalc-variables__item {
	align-items: baseline;
	display: grid;
	gap: var(--gpc-space-3);
	grid-template-columns: minmax(2.5rem, auto) 1fr;
}

.gpcalc-variables__item dt {
	margin: 0;
}

.gpcalc-variables__item dt code {
	background: var(--gpc-surface-2);
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-accent-ink);
	font-family: var(--gpc-font-num);
	font-size: 0.85em;
	font-weight: 700;
	padding: 0.1rem 0.4rem;
}

.gpcalc-variables__item dd {
	color: var(--gpc-muted);
	font-size: 0.92rem;
	margin: 0;
}

/* =========================================================================
   11. Steps
   ========================================================================= */

.gpcalc-steps__list {
	counter-reset: gpcalc-step;
	display: grid;
	gap: var(--gpc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpcalc-steps__item {
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-sm);
	counter-increment: gpcalc-step;
	display: grid;
	gap: var(--gpc-space-1);
	padding: var(--gpc-space-3) var(--gpc-space-4) var(--gpc-space-3) 3rem;
	position: relative;
}

/* Numbered marker. Decorative: the list is already an <ol>. */
.gpcalc-steps__item::before {
	align-items: center;
	background: var(--gpc-accent-soft);
	border-radius: 50%;
	color: var(--gpc-accent-ink);
	content: counter(gpcalc-step);
	display: flex;
	block-size: 1.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	inset-block-start: var(--gpc-space-3);
	inset-inline-start: var(--gpc-space-3);
	inline-size: 1.6rem;
	justify-content: center;
	position: absolute;
}

.gpcalc-steps__label {
	color: var(--gpc-text);
	font-size: 0.9rem;
	font-weight: 600;
}

.gpcalc-steps__expression {
	color: var(--gpc-muted);
	font-family: var(--gpc-font-num);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.gpcalc-steps__value {
	color: var(--gpc-accent-ink);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* =========================================================================
   12. Tables
   ========================================================================= */

/* Horizontally scrollable region. tabindex is set by the runtime so keyboard
   users can reach the scroll area; the outline confirms it is focused. */
.gpcalc-table-wrap {
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-sm);
	max-block-size: 460px;
	overflow: auto;
	overscroll-behavior: contain;
}

.gpcalc-table-wrap:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

.gpcalc-table {
	border-collapse: collapse;
	font-size: 0.88rem;
	inline-size: 100%;
	min-inline-size: 420px;
}

.gpcalc-table th,
.gpcalc-table td {
	border-bottom: 1px solid var(--gpc-border);
	padding: 0.6rem 0.75rem;
	text-align: end;
}

.gpcalc-table th:first-child,
.gpcalc-table td:first-child {
	text-align: start;
}

/* Sticky header so column meaning survives a long amortization schedule. */
.gpcalc-table thead th {
	background: var(--gpc-surface-2);
	color: var(--gpc-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	inset-block-start: 0;
	position: sticky;
	text-transform: uppercase;
	z-index: 1;
}

.gpcalc-table tbody td {
	font-variant-numeric: tabular-nums;
}

.gpcalc-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--gpc-surface) 55%, transparent);
}

.gpcalc-table tbody tr:hover {
	background: var(--gpc-accent-soft);
}

.gpcalc-table tbody tr:last-child td {
	border-bottom: 0;
}

/* =========================================================================
   13. Example, FAQ, related
   ========================================================================= */

.gpcalc-example {
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-inline-start: 3px solid var(--gpc-accent-line);
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-text);
	margin: 0;
	padding: var(--gpc-space-3) var(--gpc-space-4);
}

.gpcalc-faq__item {
	border-bottom: 1px solid var(--gpc-border);
}

.gpcalc-faq__item:last-child {
	border-bottom: 0;
}

.gpcalc-faq__question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 0.95rem;
	font-weight: 600;
	gap: var(--gpc-space-2);
	list-style: none;
	min-height: 48px;
	padding: var(--gpc-space-3) 0;
	transition: color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-faq__question::-webkit-details-marker {
	display: none;
}

.gpcalc-faq__question::before {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	block-size: 0.45em;
	content: "";
	flex: none;
	inline-size: 0.45em;
	opacity: 0.6;
	transform: rotate(-45deg);
	transition: transform var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-faq__item[open] .gpcalc-faq__question::before {
	transform: rotate(45deg);
}

.gpcalc-faq__question:hover {
	color: var(--gpc-accent-ink);
}

.gpcalc-faq__question:focus-visible {
	border-radius: var(--gpc-radius-sm);
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

.gpcalc-faq__answer {
	color: var(--gpc-muted);
	margin: 0 0 var(--gpc-space-3);
	padding-inline-start: calc(0.45em + var(--gpc-space-2));
	max-width: 72ch;
}

.gpcalc-related {
	border-top: 1px solid var(--gpc-border);
	margin-top: var(--gpc-space-5);
	padding-top: var(--gpc-space-4);
}

.gpcalc-related__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 var(--gpc-space-3);
}

.gpcalc-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpcalc-related__list a {
	background: var(--gpc-surface);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-pill);
	color: var(--gpc-text);
	display: inline-flex;
	align-items: center;
	font-size: 0.88rem;
	font-weight: 500;
	min-height: 36px;
	padding: 0.35rem 0.9rem;
	text-decoration: none;
	transition:
		background-color var(--gpc-duration) var(--gpc-ease),
		border-color var(--gpc-duration) var(--gpc-ease),
		color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-related__list a:hover {
	background: var(--gpc-accent-soft);
	border-color: var(--gpc-accent-line);
	color: var(--gpc-accent-ink);
}

.gpcalc-related__list a:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

/* =========================================================================
   14. Breadcrumb
   ========================================================================= */

.gpcalc-breadcrumb {
	margin: 0 0 var(--gpc-space-4);
}

.gpcalc-breadcrumb__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpcalc-breadcrumb__item {
	align-items: center;
	display: flex;
	gap: 0.15rem;
}

.gpcalc-breadcrumb__link,
.gpcalc-breadcrumb__current {
	align-items: center;
	display: inline-flex;
	gap: 0.3rem;
	/* WCAG 2.2 target size: keep the tap area at least 24px tall. */
	min-height: 24px;
	padding-block: 0.15rem;
}

/* The breadcrumb sits on the theme's page background, not on a plugin
   surface, so it cannot assume our dark canvas. Inheriting the theme colour
   at a reduced opacity keeps it legible on any background and guarantees the
   contrast ratio follows whatever the theme already passes. */
.gpcalc-breadcrumb__link {
	border-radius: var(--gpc-radius-sm);
	color: inherit;
	opacity: 0.72;
	text-decoration: none;
	transition:
		color var(--gpc-duration) var(--gpc-ease),
		opacity var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-breadcrumb__link:hover {
	color: var(--gpc-accent-ink);
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gpcalc-breadcrumb__link:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

.gpcalc-breadcrumb__current {
	color: inherit;
	font-weight: 600;
}

.gpcalc-breadcrumb__icon,
.gpcalc-breadcrumb__sep .gpcalc-icon {
	block-size: 1.05em;
	inline-size: 1.05em;
}

.gpcalc-breadcrumb__sep {
	align-items: center;
	color: inherit;
	display: inline-flex;
	opacity: 0.45;
	padding-inline: 0.1rem;
}

/* =========================================================================
   15. Directory
   ========================================================================= */

.gpcalc-directory {
	margin: 0 auto var(--gpc-space-6);
}

.gpcalc-directory__header {
	margin-bottom: var(--gpc-space-5);
}

/* Page title (h1). The markup uses __title for the page heading and
   __heading for each section, so the sizes follow the markup, not the name. */
.gpcalc-directory__title {
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 var(--gpc-space-2);
	text-wrap: balance;
}

.gpcalc-directory__count {
	color: var(--gpc-muted);
	font-size: 0.92rem;
	margin: 0 0 var(--gpc-space-4);
}

.gpcalc-directory__nav {
	margin-bottom: var(--gpc-space-5);
}

.gpcalc-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpcalc-chip {
	align-items: center;
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border-strong);
	border-radius: var(--gpc-radius-pill);
	color: var(--gpc-text);
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 500;
	gap: var(--gpc-space-2);
	min-height: 40px;
	padding: 0.4rem 0.95rem;
	text-decoration: none;
	transition:
		background-color var(--gpc-duration) var(--gpc-ease),
		border-color var(--gpc-duration) var(--gpc-ease),
		color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-chip:hover {
	background: var(--gpc-accent-soft);
	border-color: var(--gpc-accent-line);
	color: var(--gpc-accent-ink);
}

.gpcalc-chip:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: 2px;
}

.gpcalc-chip[aria-current="page"],
.gpcalc-chip.is-active {
	background: var(--gpc-accent);
	border-color: var(--gpc-accent);
	color: #fff;
}

.gpcalc-chip .gpcalc-icon {
	color: currentColor;
	flex: none;
	opacity: 0.8;
}

.gpcalc-chip__count {
	color: inherit;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

.gpcalc-directory__section {
	margin-bottom: var(--gpc-space-6);
}

.gpcalc-directory__section[hidden] {
	display: none;
}

/* Section heading (h2), one per category plus Featured. */
.gpcalc-directory__heading {
	align-items: center;
	border-bottom: 1px solid var(--gpc-border);
	display: flex;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
	font-weight: 700;
	gap: var(--gpc-space-2);
	letter-spacing: -0.01em;
	margin: 0 0 var(--gpc-space-4);
	padding-bottom: var(--gpc-space-2);
}

.gpcalc-directory__heading .gpcalc-icon {
	color: var(--gpc-accent-ink);
	flex: none;
}

.gpcalc-directory__empty {
	color: var(--gpc-muted);
	font-style: italic;
}

/* Featured cards */
.gpcalc-card-grid {
	display: grid;
	gap: var(--gpc-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	list-style: none;
	margin: 0 0 var(--gpc-space-6);
	padding: 0;
}

.gpcalc-card {
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius);
	box-shadow: var(--gpc-shadow-xs);
	display: flex;
	flex-direction: column;
	gap: var(--gpc-space-2);
	padding: var(--gpc-space-4);
	position: relative;
	transition:
		border-color var(--gpc-duration) var(--gpc-ease),
		box-shadow var(--gpc-duration) var(--gpc-ease),
		transform var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-card:hover {
	border-color: var(--gpc-accent-line);
	box-shadow: var(--gpc-shadow-md);
	transform: translateY(-2px);
}

/* The whole card is clickable via a stretched link, but the link text stays
   the only thing in the accessibility tree. */
.gpcalc-card__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

.gpcalc-card:focus-within {
	border-color: var(--gpc-accent);
	box-shadow: 0 0 0 3px var(--gpc-accent-soft);
}

.gpcalc-card__link:focus-visible {
	outline: none;
}

.gpcalc-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.gpcalc-card__link {
	color: var(--gpc-accent-ink);
	text-decoration: none;
}

.gpcalc-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gpcalc-card__desc {
	color: var(--gpc-muted);
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0;
	/* Keep cards on a tidy grid even with uneven descriptions. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.gpcalc-card--featured {
	border-color: var(--gpc-accent-line);
}

/* Per-category link lists */
.gpcalc-link-grid {
	display: grid;
	gap: var(--gpc-space-1) var(--gpc-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpcalc-link-grid li[hidden] {
	display: none;
}

.gpcalc-link-grid a {
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-text);
	display: block;
	font-size: 0.92rem;
	min-height: 40px;
	padding: 0.5rem 0.6rem;
	text-decoration: none;
	transition:
		background-color var(--gpc-duration) var(--gpc-ease),
		color var(--gpc-duration) var(--gpc-ease);
}

.gpcalc-link-grid a:hover {
	background: var(--gpc-accent-soft);
	color: var(--gpc-accent-ink);
}

.gpcalc-link-grid a:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: -2px;
}

/* =========================================================================
   16. Search combobox
   ========================================================================= */

.gpcalc-search {
	margin-bottom: var(--gpc-space-4);
	max-inline-size: 520px;
	position: relative;
}

.gpcalc-search__input {
	appearance: none;
	background: var(--gpc-bg);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6672' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-position: left 0.85rem center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	border: 1px solid var(--gpc-border-strong);
	border-radius: var(--gpc-radius-pill);
	color: var(--gpc-text);
	font: inherit;
	inline-size: 100%;
	min-height: 48px;
	padding: 0.65rem 1rem 0.65rem 2.7rem;
	transition:
		border-color var(--gpc-duration) var(--gpc-ease),
		box-shadow var(--gpc-duration) var(--gpc-ease);
}

@media (prefers-color-scheme: dark) {
	.gpcalc-search__input {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3adba' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	}
}

.gpcalc-search__input:focus-visible {
	border-color: var(--gpc-accent);
	box-shadow: 0 0 0 3px var(--gpc-accent-soft);
	outline: none;
}

.gpcalc-search__input::-webkit-search-cancel-button {
	cursor: pointer;
}

.gpcalc-search__results {
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border-strong);
	border-radius: var(--gpc-radius);
	box-shadow: var(--gpc-shadow-lg);
	inset-block-start: calc(100% + 0.35rem);
	inset-inline: 0;
	list-style: none;
	margin: 0;
	max-block-size: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--gpc-space-1);
	position: absolute;
	z-index: 40;
}

.gpcalc-search__results[hidden] {
	display: none;
}

.gpcalc-search__results li a {
	border-radius: var(--gpc-radius-sm);
	color: var(--gpc-text);
	display: block;
	font-size: 0.92rem;
	min-height: 40px;
	padding: 0.55rem 0.7rem;
	text-decoration: none;
}

.gpcalc-search__results li[aria-selected="true"] a,
.gpcalc-search__results li a:hover {
	background: var(--gpc-accent-soft);
	color: var(--gpc-accent-ink);
}

.gpcalc-search__results li a:focus-visible {
	outline: 2px solid var(--gpc-accent);
	outline-offset: -2px;
}

/* =========================================================================
   17. 410 Gone page
   ========================================================================= */

.gpcalc-gone {
	background: var(--gpc-bg);
	border: 1px solid var(--gpc-border);
	border-radius: var(--gpc-radius-lg);
	margin: 0 auto var(--gpc-space-6);
	max-inline-size: 640px;
	padding: clamp(1.5rem, 5vw, 3rem);
	text-align: center;
}

.gpcalc-gone h1 {
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
	margin: 0 0 var(--gpc-space-3);
}

.gpcalc-gone p {
	color: var(--gpc-muted);
	margin: 0 0 var(--gpc-space-4);
}

/* =========================================================================
   18. Utilities
   ========================================================================= */

/* Inline SVG icons sit on the text baseline at the current font size. */
.gpcalc-icon {
	block-size: 1.15em;
	flex: none;
	inline-size: 1.15em;
	vertical-align: -0.18em;
}

/* Standard WordPress visually hidden helper. Scoped so it does not fight a
   theme that already defines it globally. */
.gpcalc .screen-reader-text,
.gpcalc-directory .screen-reader-text,
.gpcalc-gone .screen-reader-text {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* =========================================================================
   19. Accessibility and environment
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.gpcalc *,
	.gpcalc *::before,
	.gpcalc *::after,
	.gpcalc-directory *,
	.gpcalc-directory *::before,
	.gpcalc-directory *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.gpcalc-card:hover {
		transform: none;
	}
}

/* Windows High Contrast / forced colours. Decorative colour is dropped and
   borders are restored so structure survives. */
@media (forced-colors: active) {
	.gpcalc,
	.gpcalc-card,
	.gpcalc-result--primary,
	.gpcalc-result-grid__item,
	.gpcalc-steps__item,
	.gpcalc-table-wrap,
	.gpcalc-chart,
	.gpcalc-formula,
	.gpcalc-search__results {
		border: 1px solid CanvasText;
	}

	.gpcalc-button,
	.gpcalc-chip,
	.gpcalc-related__list a {
		border: 1px solid ButtonText;
	}

	.gpcalc-button:focus-visible,
	.gpcalc-field__control:focus-visible,
	.gpcalc-panel__toggle:focus-visible {
		outline: 2px solid Highlight;
	}

	.gpcalc-icon {
		forced-color-adjust: auto;
	}
}

/* Users who ask for less transparency get flat surfaces. */
@media (prefers-contrast: more) {
	.gpcalc,
	.gpcalc-directory {
		--gpc-border: var(--gpc-border-strong);
		--gpc-muted: var(--gpc-text);
	}

	.gpcalc-result--primary {
		background: var(--gpc-surface);
	}
}

/* =========================================================================
   20. Print
   ========================================================================= */

@media print {
	.gpcalc {
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	/* Controls and navigation are meaningless on paper. */
	.gpcalc__actions,
	.gpcalc-result__copy,
	.gpcalc-related,
	.gpcalc-search,
	.gpcalc-directory__nav,
	.gpcalc-breadcrumb__sep {
		display: none !important;
	}

	/* Everything the visitor collapsed still prints: a printed calculation
	   should be complete. */
	.gpcalc-panel__body {
		display: block !important;
	}

	.gpcalc-panel__toggle::after {
		display: none;
	}

	.gpcalc__layout {
		display: block;
	}

	.gpcalc__form {
		margin-bottom: 1rem;
	}

	.gpcalc-result--primary,
	.gpcalc-result-grid__item,
	.gpcalc-steps__item,
	.gpcalc-chart,
	.gpcalc-formula {
		background: transparent !important;
		border: 1px solid #999;
		box-shadow: none;
	}

	.gpcalc-table-wrap {
		max-block-size: none;
		overflow: visible;
	}

	.gpcalc-table thead th {
		position: static;
	}

	/* Avoid orphaned headings and split rows. */
	.gpcalc-panel,
	.gpcalc-steps__item,
	.gpcalc-card {
		break-inside: avoid;
	}

	.gpcalc__title,
	.gpcalc-panel__title {
		break-after: avoid;
	}

	a[href]::after {
		color: #555;
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}

	.gpcalc-breadcrumb a[href]::after,
	.gpcalc-card__link[href]::after {
		content: "";
	}
}