/*
 * Apartment Cats Core 1.3.0: tool panels (space-fit planner, weekend cost calculator, enrichment plan builder, and
 * from 1.8.0 the cat litter calculator; from 1.9.0 the What to buy block; from 1.9.3 stepper arrows; from 1.10.0
 * the shared tool look with the theme's design kit) and
 * the contact form. Colors, fonts and field colors come from the theme's tokens, so light and dark both work.
 * Shape rules from the design system: 8px controls, 10px containers, one raised shadow on tool panels only.
 */

/* ---------------------------------------------------------------- panel */

/* A tool never grows past its column, even inside a flex or grid parent. */
[data-ac-tool],
.ac-tp {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.ac-tp {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: clamp(1rem, 3vw, 1.75rem);
	box-shadow: var(--ac-tool-shadow, 0 20px 40px -28px var(--ac-shadow-tint, rgba(31, 69, 198, 0.42)));
	font-variant-numeric: tabular-nums;
}

.ac-tp :where(h3, h4, p) {
	margin-block: 0;
}

.ac-tp__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.ac-tp__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
}

.ac-tp .ac-unit {
	margin-top: 0;
}

.ac-tp__section + .ac-tp__section {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ac-tp__label {
	margin-bottom: 0.6rem !important;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	letter-spacing: 0.01em;
}

.ac-tp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 0.75rem;
	max-width: 760px;
}

.ac-tp__field label,
.ac-tp__field legend {
	display: block;
	margin-bottom: 0.3rem;
	padding: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

.ac-tp__input {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ac-field-border);
	border-radius: 8px;
	background: var(--ac-field-bg);
	transition: border-color 160ms;
}

.ac-tp__input:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.ac-tp__input[aria-invalid="true"],
.ac-tp__input.is-invalid {
	border-color: var(--wp--preset--color--warn-ink);
}

.ac-tp__input input,
.ac-tp__input select {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
}

.ac-tp__input select {
	cursor: pointer;
}

.ac-tp__input :focus-visible {
	outline: none;
}

.ac-tp__input input::placeholder {
	color: var(--wp--preset--color--ink-3);
	opacity: 1;
}

/* Houseplant checker: our own suggestion list under the name field, opened by the arrow or by typing. It replaced a
 * <datalist>, whose arrow opened nothing on Android Chrome (Core 1.18.3, 25 Oct 2026). */
.ac-plant__combo {
	position: relative;
}

.ac-plant__toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: transparent;
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
}

.ac-plant__toggle::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 200ms ease;
}

.ac-plant__toggle[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

.ac-plant__toggle:hover {
	color: var(--wp--preset--color--accent);
}

.ac-plant .ac-plant__list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	z-index: 30;
	max-height: min(18rem, 55vh);
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.4);
	list-style: none;
}

.ac-plant .ac-plant__list[hidden] {
	display: none;
}

.ac-plant .ac-plant__opt {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}

.ac-plant .ac-plant__opt::marker {
	content: none;
}

.ac-plant .ac-plant__opt:hover,
.ac-plant .ac-plant__opt[aria-selected="true"] {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
	.ac-plant__toggle::before {
		transition: none;
	}
}

.ac-tp__suffix {
	display: flex;
	align-items: center;
	padding-inline: 0.6rem;
	color: var(--wp--preset--color--ink-3);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.ac-tp__prefix {
	display: flex;
	align-items: center;
	padding-left: 0.7rem;
	color: var(--wp--preset--color--ink-3);
}

.ac-tp__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms, color 160ms;
}

.ac-tp__btn:hover {
	background: var(--wp--preset--color--accent-tint);
}

.ac-tp__btn:active {
	transform: translateY(1px);
}

.ac-tp__btn--solid {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

.ac-tp__btn--solid:hover {
	background: var(--wp--preset--color--accent-hover);
}

.ac-tp__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--ink-2);
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.ac-tp__icon-btn:hover {
	border-color: var(--wp--preset--color--warn-ink);
	color: var(--wp--preset--color--warn-ink);
}

.ac-tp__note {
	margin-top: 0.75rem !important;
	color: var(--wp--preset--color--ink-3);
	font-size: var(--wp--preset--font-size--small);
}

.ac-tp__error:empty {
	display: none;
}

.ac-tp__error {
	margin-top: 0.5rem !important;
	color: var(--wp--preset--color--warn-ink);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------- results */

.ac-tp__result {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--ac-tool-paper, none), var(--wp--preset--color--surface-2);
}

.ac-tp__big {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--wp--preset--color--accent);
}

.ac-tp__big.is-warn {
	color: var(--wp--preset--color--warn-ink);
}

.ac-tp__big.is-ok {
	color: var(--wp--preset--color--tip-ink);
}

.ac-tp__sub {
	margin-top: 0.35rem !important;
	color: var(--wp--preset--color--ink-2);
}

.ac-tp__flags {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.ac-tp__flags li {
	position: relative;
	margin-top: 0.4rem;
	padding-left: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
}

.ac-tp__flags li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 2px;
	background: currentColor;
}

.ac-tp__flags .is-warn { color: var(--wp--preset--color--warn-ink); }
.ac-tp__flags .is-vet { color: var(--wp--preset--color--vet-ink); }
.ac-tp__flags .is-ok { color: var(--wp--preset--color--tip-ink); }

/* ---------------------------------------------------------------- space-fit planner */

.ac-fit-rows {
	display: grid;
	gap: 0.6rem;
	max-width: 760px;
}

.ac-fit-row {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
	gap: 0.5rem;
	align-items: end;
}

.ac-fit-row .ac-tp__field label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 599.98px) {
	.ac-fit-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.ac-fit-row > :first-child {
		grid-column: 1 / -1;
	}
}

.ac-fit-add {
	margin-top: 0.75rem;
}

.ac-fit-plan {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	max-height: 70vh;
	margin-top: 1rem;
	overflow: visible;
}

.ac-fit-plan .ac-fit-floor {
	fill: var(--wp--preset--color--page);
	stroke: var(--wp--preset--color--ink-2);
	stroke-width: 2;
}

.ac-fit-plan .ac-fit-grid {
	stroke: var(--wp--preset--color--line);
	stroke-width: 1;
}

.ac-fit-plan .ac-fit-item {
	fill: var(--wp--preset--color--accent-tint);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
}

.ac-fit-plan .ac-fit-item.is-litter {
	fill: var(--wp--preset--color--surface-2);
}

.ac-fit-plan .ac-fit-item.is-over {
	fill: var(--wp--preset--color--warn-bg);
	stroke: var(--wp--preset--color--warn-ink);
	stroke-dasharray: 6 4;
}

.ac-fit-plan text {
	fill: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ac-fit-plan .ac-fit-dim {
	fill: var(--wp--preset--color--ink-2);
}

.ac-fit-plan .ac-fit-dimline {
	stroke: var(--wp--preset--color--ink-3);
	stroke-width: 1;
}

/* ---------------------------------------------------------------- weekend cost calculator */

.ac-cost-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0.75rem;
}

.ac-cost-option {
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.ac-cost-option.is-low {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.ac-cost-option h4 {
	font-size: 1rem;
	font-weight: 700;
}

.ac-cost-option .ac-tp__grid {
	margin-top: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
}

.ac-cost-total {
	margin-top: 0.85rem !important;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ac-cost-total strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

.ac-cost-option.is-low .ac-cost-total strong {
	color: var(--wp--preset--color--accent);
}

.ac-cost-total span {
	color: var(--wp--preset--color--ink-3);
	font-size: var(--wp--preset--font-size--small);
}

/* 1.10.1: the amount and the badge sit in spans too; they keep the total's size and the badge's own colors (the
   badge text had taken the gray above, under 3:1 on its blue). */
.ac-cost-total strong .ac-cost-amt {
	color: inherit;
	font-size: inherit;
}

.ac-cost-total .ac-cost-badge {
	color: var(--wp--preset--color--accent-ink);
	font-size: 0.75rem;
}

.ac-cost-badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-size: 0.75rem;
	font-weight: 700;
	vertical-align: middle;
}

/* ---------------------------------------------------------------- enrichment plan builder */

.ac-plan-toys {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

/* 1.10.0: two toys a row on a phone, so the plan starts sooner. */
@media (max-width: 599.98px) {
	.ac-plan-toys {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ac-plan-toy {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 160ms, background-color 160ms;
}

.ac-plan-toy:has(input:checked) {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-tint);
}

.ac-plan-toy input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
}

.ac-plan-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}

.ac-plan-choices fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ac-plan-week {
	width: 100%;
	margin-top: 1rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.ac-plan-week th,
.ac-plan-week td {
	padding: 0.6rem 0.7rem;
	border-top: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.ac-plan-week thead th {
	border-top: 0;
	color: var(--wp--preset--color--ink-2);
	font-weight: 600;
}

.ac-plan-week tbody th {
	width: 5.5rem;
	font-weight: 700;
}

.ac-plan-week td strong {
	display: block;
	color: var(--wp--preset--color--ink);
}

.ac-plan-week td span {
	color: var(--wp--preset--color--ink-2);
}

@media (max-width: 699.98px) {
	.ac-plan-week thead {
		display: none;
	}

	.ac-plan-week tr {
		display: block;
		padding: 0.5rem 0;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.ac-plan-week th,
	.ac-plan-week td {
		display: block;
		padding: 0.25rem 0;
		border-top: 0;
	}

	.ac-plan-week td::before {
		content: attr(data-label);
		display: block;
		color: var(--wp--preset--color--ink-3);
		font-size: 0.8125rem;
	}
}

.ac-plan-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.ac-plan-card {
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--ink-3);
	border-radius: 10px;
	break-inside: avoid;
}

.ac-plan-card h4 {
	font-size: 1rem;
}

.ac-plan-card ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
}

.ac-plan-card p {
	margin-top: 0.5rem !important;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
}

.ac-plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Printing the plan: only the week and the cards go on paper (the button adds body.ac-printing for one print). */
@media print {
	body.ac-printing * {
		visibility: hidden !important;
	}

	body.ac-printing .ac-plan-out,
	body.ac-printing .ac-plan-out * {
		visibility: visible !important;
	}

	body.ac-printing .ac-plan-out {
		position: absolute;
		inset: 0 0 auto 0;
		color: #000;
	}

	body.ac-printing .ac-plan-actions {
		display: none !important;
	}

	body.ac-printing .ac-plan-week {
		font-size: 10pt;
	}
}

/* ---------------------------------------------------------------- cat litter calculator (1.8.0) */

.ac-tp__hint {
	margin-top: 0.3rem !important;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.ac-litter-summary,
.ac-food-summary {
	color: var(--wp--preset--color--ink-2);
	line-height: 1.5;
}

.ac-litter-summary .ac-tp__big,
.ac-food-summary .ac-tp__big {
	display: inline;
}

.ac-litter-rows,
.ac-food-rows {
	display: grid;
	grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
	gap: 0.55rem 1.25rem;
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ac-litter-rows[hidden],
.ac-food-rows[hidden],
.ac-litter-next[hidden],
.ac-food-next[hidden],
.ac-litter-next [hidden],
.ac-food-next [hidden] {
	display: none;
}

.ac-litter-rows dt,
.ac-food-rows dt {
	padding-top: 0.1em;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

.ac-litter-rows dd,
.ac-food-rows dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.ac-litter-rows dd.is-hint,
.ac-food-rows dd.is-hint {
	color: var(--wp--preset--color--ink-2);
	font-weight: 400;
}

@media (max-width: 479.98px) {
	.ac-litter-rows,
	.ac-food-rows {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}

	.ac-litter-rows dd,
	.ac-food-rows dd {
		margin-bottom: 0.55rem;
	}
}

/* Next steps: the page's own links, moved in under the answer; same tinted button as the measuring tool. */
.ac-litter-next,
.ac-food-next {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.ac-litter-next p,
.ac-food-next p {
	margin: 0;
}

.ac-litter-next a,
.ac-food-next a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
	font-weight: 650;
	line-height: 1.3;
	text-decoration: none;
	box-sizing: border-box;
}

.ac-litter-next a::after,
.ac-food-next a::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ac-litter-next a:hover,
.ac-food-next a:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--accent-tint));
}

.ac-litter-next a:focus-visible,
.ac-food-next a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- stepper arrows (1.9.3, assets/steps.js) */

/* Up and down arrows at the end of a number field: each half is at least 24px tall (WCAG 2.5.8), the field 48px. */
.ac-tp__input.has-step input {
	min-height: 48px;
}

.ac-step {
	display: flex;
	flex: none;
	flex-direction: column;
	width: 2.5rem;
	border-left: 1px solid var(--ac-field-border);
}

.ac-step__btn {
	display: flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color 140ms, color 140ms;
}

.ac-step__btn:first-child {
	border-top-right-radius: 7px;
}

.ac-step__btn:last-child {
	border-top: 1px solid var(--ac-field-border);
	border-bottom-right-radius: 7px;
}

.ac-step__btn:hover {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
}

.ac-step__btn:active {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, var(--wp--preset--color--accent-tint));
}

.ac-step__btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The word "optional" beside a field label, and a currency picker inside the price field. */
.ac-tp__opt {
	margin-left: 0.35rem;
	color: var(--wp--preset--color--ink-3);
	font-size: 0.8125rem;
}

.ac-tp__input select.ac-tp__cur {
	flex: none;
	width: auto;
	padding: 0 0.3rem 0 0.65rem;
	border-right: 1px solid var(--ac-field-border);
	border-radius: 8px 0 0 8px;
	color: var(--wp--preset--color--ink-2);
}

/* ---------------------------------------------------------------- litter calculator layout (1.9.3)
 * Core 1.11.0: the food calculator (.ac-food) shares this layout and the result rows above. */

/* Inputs on the left, the answer on the right (it stays in view on tall screens); one even two-column grid in
   every section, so fields line up from section to section and inputs sit on one line whatever the label length. */
.ac-litter__body,
.ac-food__body {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.5rem 2.25rem;
	align-items: start;
}

.ac-litter .ac-tp__grid,
.ac-food .ac-tp__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem 1rem;
	max-width: none;
}

.ac-litter .ac-tp__field,
.ac-food .ac-tp__field {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.ac-litter .ac-tp__note,
.ac-food .ac-tp__note {
	margin-top: 0.7rem !important;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.ac-litter .ac-tp__result,
.ac-food .ac-tp__result {
	margin-top: 0;
}

@media (min-width: 900px) and (min-height: 760px) {
	.ac-litter .ac-tp__result,
	.ac-food .ac-tp__result {
		position: sticky;
		top: 5.5rem;
	}
}

@media (max-width: 899.98px) {
	.ac-litter__body,
	.ac-food__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599.98px) {
	.ac-litter .ac-tp__field.is-wide-sm,
	.ac-food .ac-tp__field.is-wide-sm {
		grid-column: 1 / -1;
	}

	/* The bag fields carry a prefix, a unit and arrows, so on a phone they take a full row each. */
	.ac-litter .ac-tp__grid.is-stack-sm,
	.ac-food .ac-tp__grid.is-stack-sm {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 339.98px) {
	.ac-litter .ac-tp__grid,
	.ac-food .ac-tp__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- What to buy on tool pages (1.9.0) */

/* picks.js shows the cards that fit the answer (at most data-max) and hides the rest; the cards are the theme's
   Will it fit? cards, so Core adds each one's Amazon photo. */
.ac-picks {
	margin-top: 1.75rem;
}

.ac-picks[hidden],
.ac-picks .ac-fit[hidden] {
	display: none !important;
}

.entry-content .ac-picks .ac-picks__title {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--large);
}

.ac-picks__intro {
	margin: 0 0 1rem !important;
	color: var(--wp--preset--color--ink-2);
}

.ac-picks__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: 1rem;
}

/* 1.19.0: two cards side by side stand the same height, as columns with the price and button held at the foot, so the
   two buttons line up. (A grid card stretched to its neighbor's height would share the spare height out between every
   line, the gaps urbanhydrospace's two-picks box had on 2 Nov 2026; until now these cards sat at their own heights.) */
.entry-content .ac-picks__cards > .ac-fit {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

.entry-content .ac-picks__cards > .ac-fit > .ac-fit-img {
	align-self: flex-start;
}

.entry-content .ac-picks__cards > .ac-fit > :is(.ac-price, .ac-fit-foot) {
	margin-top: auto;
}

.entry-content .ac-picks__cards > .ac-fit > .ac-price + .ac-fit-foot {
	margin-top: 0;
}

/* 1.9.1: in the block the photo sits under the title and above the specs at every width, so a card in a two-up row
   keeps a readable specs column (the theme puts it beside the specs on a wide guide). */
.entry-content .ac-picks .ac-fit.has-img > dl,
.entry-content .ac-picks .ac-fit.has-img > .ac-fit-img {
	grid-column: 1 / -1;
	grid-row: auto;
}

.entry-content .ac-picks .ac-fit.has-img > .ac-fit-img {
	width: 7rem;
	height: 7rem;
}

/* ---------------------------------------------------------------- shared tool look (1.10.0)
 * Bader, 22 Oct 2026: the tools look and move like the home measuring tool. The theme (motion.css, "tool design
 * kit") holds the shared pieces: the drafting-paper ground, --ac-tool-shadow, the keys (.ac-key) and the verdict chip
 * (.ac-verdict). Here only what the Core tools add to them. Motion comes from assets/tool-ui.js. */

/* Notes as chips: the theme's chip, without the old square bullet. */
.ac-tp__flags {
	display: grid;
	gap: 0.45rem;
}

.ac-tp__flags li.ac-verdict {
	margin: 0;
	padding: 0.55rem 0.7rem;
}

.ac-tp__flags li.ac-verdict::before {
	position: static;
	border-radius: 0;
}

.ac-tp__flags li.ac-verdict:not(.is-ok):not(.is-short)::before {
	content: none;
}

/* A verdict or a badge that changed pops once, like the measuring tool's answer. */
.ac-tp__big.is-pop,
.ac-cost-badge.is-pop {
	animation: ac-mt-pop 460ms var(--ac-ease-out, ease-out);
}

.ac-tp__big {
	transition: color 220ms ease;
}

/* The litter calculator's choices as keys: five litter types in one row on a wide card, the six routines in three. */
.ac-litter fieldset.ac-litter__choice,
.ac-food fieldset.ac-food__choice {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ac-litter .ac-keys--type {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 599.98px) {
	.ac-litter .ac-keys--type {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ac-litter .ac-keys--routine {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The answer within reach on a phone (tool-ui.js peek): a bar at the bottom while the result is still below. Kept
   clear of the back-to-top button on the right. */
.ac-peek {
	position: fixed;
	left: 0.75rem;
	right: 4.75rem;
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.45rem 0.45rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--ac-tool-shadow, 0 12px 28px -12px rgba(20, 48, 127, 0.45));
	opacity: 0;
	visibility: hidden;
	transform: translateY(140%);
	transition: transform 280ms var(--ac-ease-out, ease-out), opacity 200ms ease, visibility 0s linear 280ms;
}

.ac-peek.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: transform 280ms var(--ac-ease-out, ease-out), opacity 200ms ease;
}

.ac-peek__text {
	flex: 1;
	min-width: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.ac-peek__go {
	flex: none;
	min-height: 44px;
	padding-inline: 0.8rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.ac-peek {
		display: none;
	}
}

/* The space-fit drawing glides; its labels wait for it. */
.ac-fit-plan text {
	transition: opacity 160ms ease;
}

.ac-fit-plan.is-gliding text {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ac-peek,
	.ac-peek.is-on {
		transition: none;
	}

	.ac-tp__big.is-pop,
	.ac-cost-badge.is-pop {
		animation: none;
	}
}

/* ---------------------------------------------------------------- contact form */

/* Same width as the text column, so the form lines up with the paragraphs around it (1.3.1). */
.ac-contact {
	display: grid;
	gap: 1rem;
	max-width: var(--wp--style--global--content-size, 680px);
	margin-block: var(--wp--preset--spacing--40);
}

.ac-contact p {
	margin: 0;
}

.ac-contact label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.ac-contact__hint {
	color: var(--wp--preset--color--ink-3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.ac-contact__field > .ac-contact__hint {
	display: block;
	margin-top: 0.35rem;
}

.ac-contact input[type="text"],
.ac-contact input[type="email"],
.ac-contact textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--ac-field-border);
	border-radius: 8px;
	background: var(--ac-field-bg);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.ac-contact textarea {
	min-height: 10rem;
	resize: vertical;
}

.ac-contact :where(input, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
}

/* The spam trap stays out of sight and out of the tab order. */
.ac-contact__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ac-contact__notice {
	padding: 0.85rem 1rem;
	border-radius: 10px;
	font-weight: 600;
}

.ac-contact__notice--ok {
	background: var(--wp--preset--color--tip-bg);
	color: var(--wp--preset--color--tip-ink);
}

.ac-contact__notice--error {
	background: var(--wp--preset--color--warn-bg);
	color: var(--wp--preset--color--warn-ink);
}

@media (prefers-reduced-motion: reduce) {
	.ac-tp *,
	.ac-contact * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- cat food calculator (1.11.0) */

/* Its choices as keys: two or three to a row, the same on a phone. */
.ac-food .ac-keys--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ac-food .ac-keys--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ac-food .ac-tp__input select:not(.ac-tp__cur) {
	width: 100%;
	min-height: 48px;
}

/* What to buy: each feeder card is marked with its own words (food-portion.js sets the title's data-mark), and its
   setting line reads as part of the answer. */
.entry-content .ac-picks[data-ac-picks="food-portion"] .ac-fit.is-fit h3::after,
.entry-content .ac-picks[data-ac-picks="food-portion"] .ac-fit.is-nofit h3::after,
.entry-content .ac-picks[data-ac-picks="water-intake"] .ac-fit.is-fit h3::after,
.entry-content .ac-picks[data-ac-picks="cat-cost"] .ac-fit.is-fit h3::after {
	content: attr(data-mark);
}

.ac-picks[data-ac-picks="food-portion"] [data-ac-setting],
.ac-picks[data-ac-picks="water-intake"] [data-ac-setting] {
	font-weight: 650;
}

/* ---------------------------------------------------------------- review fixes (1.15.1)
 * The tools review of 22 Oct 2026: the unit switch's buttons at the 44px tap size on the Core tools (the theme's
 * own switch is 40px tall); a ring around a field while it is being typed in, beside the border's color change; and
 * space-fit item rows that keep their numbers readable on a 320px screen. */
.ac-tp .ac-unit button {
	min-height: 44px;
}

.ac-tp__input:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

@media (max-width: 379.98px) {
	.ac-fit-row {
		grid-template-columns: minmax(0, 1fr) 44px;
	}

	.ac-fit-row > .ac-tp__field {
		grid-column: 1 / -1;
	}

	.ac-fit-row > .ac-tp__icon-btn {
		grid-column: 2;
	}
}

/* ---------------------------------------------------------------- design audit (1.18.0)
 * The site design audit of 24 Oct 2026 (08-site-design/audits/DESIGN-AUDIT-20261024.md). */

/* A wrong field says what fits right under it (tool-ui.js); the tool's message used to show only in the result. */
.ac-tp__err {
	margin: 0.35rem 0 0 !important;
	color: var(--wp--preset--color--warn-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Space-fit on a 380 to 599px phone: the remove button moves up beside the item's type, so Width and Depth share
   the full row. In a third of the row each, "19.5" and "15.25" were cut to "19.!" and "15.2". */
@media (min-width: 380px) and (max-width: 599.98px) {
	.ac-fit-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.ac-fit-row > :first-child {
		grid-row: 1;
		grid-column: 1 / -1;
		margin-right: calc(44px + 0.5rem);
	}

	.ac-fit-row > .ac-tp__icon-btn {
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
		align-self: end;
	}
}

/* The enrichment plan's toy boxes kept their size: a checkbox beside a label that wraps shrank to 13 to 16px, and
   the labels started at four different places. */
.ac-plan-toy input {
	flex: none;
}

/* Notes and labels at the site's 15px meta size and 14px label size (they were 13px), and about 70 characters a
   line inside the wide tool cards (up to 150 before): 32em, as an average Atkinson letter is 0.455em wide (1.18.1). */
.ac-litter .ac-tp__note,
.ac-food .ac-tp__note {
	font-size: 0.9375rem;
}

.ac-tp__opt {
	font-size: 0.875rem;
}

@media (max-width: 699.98px) {
	.ac-plan-week td::before {
		font-size: 0.875rem;
	}
}

.ac-tp__note,
.ac-tp__err,
.ac-picks__intro,
.ac-tp__flags li {
	max-width: 32em;
}