/* Calculator UI. Uses theme.json custom properties with safe fallbacks. */
.ces-tool {
	--ces-border: var(--wp--preset--color--border, #d0d5dd);
	--ces-accent: var(--wp--preset--color--accent, #0b5cab);
	--ces-accent-text: var(--wp--preset--color--accent-contrast, #ffffff);
	--ces-surface: var(--wp--preset--color--surface, #f5f7fa);
	--ces-text: var(--wp--preset--color--contrast, #14202e);
	--ces-error: var(--wp--preset--color--error, #a1121b);
	margin-block: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--ces-border);
	border-radius: 8px;
	background: var(--ces-surface);
	color: var(--ces-text);
}
.ces-tool.is-ready .ces-tool__fallback { display: none; }
.ces-tool__form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.ces-field[hidden] { display: none; }
.ces-field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.ces-field input, .ces-field select {
	width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; font: inherit; color: inherit;
	background: #fff; border: 1px solid var(--ces-border); border-radius: 6px; box-sizing: border-box;
}
.ces-field__group { position: relative; }
.ces-field__group input { padding-right: 3.5rem; }
.ces-field__unit { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #4a5563; pointer-events: none; }
.ces-field__hint { margin: 0.25rem 0 0; font-size: 0.875rem; color: #4a5563; }
.ces-field__error { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--ces-error); font-weight: 600; }
.ces-field input[aria-invalid="true"], .ces-field select[aria-invalid="true"] { border-color: var(--ces-error); }
.ces-field input:focus-visible, .ces-field select:focus-visible, .ces-button:focus-visible, .ces-table-wrap:focus-visible {
	outline: 3px solid var(--ces-accent); outline-offset: 2px;
}
.ces-button {
	min-height: 44px; padding: 0.5rem 1.5rem; font: inherit; font-weight: 700; cursor: pointer;
	color: var(--ces-accent-text); background: var(--ces-accent); border: 0; border-radius: 6px; justify-self: start;
}
.ces-button:hover { filter: brightness(0.92); }
.ces-tool__status { color: var(--ces-error); font-weight: 600; }
.ces-tool__results { margin-top: 1.25rem; min-height: 8rem; }
.ces-summary { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0; }
.ces-summary__item { padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--ces-border); border-radius: 6px; }
.ces-summary__item.is-emphasis { border-color: var(--ces-accent); box-shadow: inset 4px 0 0 var(--ces-accent); }
.ces-summary dt { font-size: 0.875rem; color: #4a5563; }
.ces-summary dd { margin: 0.25rem 0 0; font-size: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.ces-table-wrap { margin-top: 1rem; overflow-x: auto; }
.ces-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.9375rem; }
.ces-table caption { text-align: left; font-weight: 700; padding: 0.5rem 0; }
.ces-table th, .ces-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ces-border); text-align: right; white-space: nowrap; }
.ces-table th:first-child, .ces-table td:first-child { text-align: left; }
.ces-notes { margin: 1rem 0 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.ces-tool__provenance { margin: 1rem 0 0; font-size: 0.8125rem; color: #4a5563; }
.ces-tool__notice { padding: 0.75rem; border: 1px dashed var(--ces-border); }

/* Ads: separated from the tool, labelled, space reserved once shown. */
.ces-ad { margin: 2rem 0; }
.ces-ad[hidden] { display: none; }
.ces-ad__label { margin: 0 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: #4a5563; }
.ces-ad__box { min-height: 280px; }

.ces-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.ces-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: #4a5563; }
.ces-related ul { padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) { .ces-button { transition: none; } }
@media print { .ces-ad, .ces-button { display: none; } }