/*
 * Apartment Cats motion and interaction layer (theme 1.2.0).
 *
 * One authored moment: on the home page the hero is drafting paper, and its litter box drawing measures itself
 * as you type. Everything else is feedback (hover, press, focus) or the hub tiles arriving once, as a list.
 * Nothing is hidden unless the head script has marked the page (html.ac-js), and html.ac-ready (set after 3 s)
 * reveals anything a failed script left hidden. Every effect has a reduced-motion path at the end of this file.
 */

:root {
	--ac-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ac-bp-ground: #14307f;
	--ac-bp-line: rgba(186, 204, 255, 0.09);
	--ac-bp-line-major: rgba(186, 204, 255, 0.18);
	--ac-bp-ink: #ffffff;
	--ac-bp-ink-2: rgba(234, 240, 255, 0.88);
	--ac-bp-accent: #a9beff;
	--ac-shadow-tint: rgba(31, 69, 198, 0.42);
	--ac-grid-tint: rgba(31, 69, 198, 0.06);
	/* Text fields: a fill and a border that read as "type here" on any surface (WCAG 1.4.11: 3:1 for boundaries). */
	--ac-field-bg: var(--wp--preset--color--page);
	--ac-field-border: var(--wp--preset--color--ink-3);
}

/* Dark values, only when the header switch chose dark (html[data-theme="dark"]; light is the default, 1.5.0).
   In dark mode a field filled with the page color looked like a hole in its card, so readers could not tell where
   to type (Bader, 16 Oct 2026): dark fields are lighter than the card, with a border at 3.6:1 against it. */
:root[data-theme="dark"] {
	--ac-bp-ground: #0e1e52;
	--ac-shadow-tint: rgba(0, 0, 0, 0.55);
	--ac-grid-tint: rgba(143, 168, 255, 0.07);
	--ac-field-bg: #2e3646;
	--ac-field-border: #6b768c;
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], textarea, select),
.ac-search-form .wp-block-search__input {
	background: var(--ac-field-bg);
	border-color: var(--ac-field-border);
	color: var(--wp--preset--color--ink);
}

:where(input, textarea)::placeholder {
	color: var(--wp--preset--color--ink-3);
	opacity: 1;
}

/* Light and dark switch in the header (theme 1.3.0). Moon when the page is light, sun when it is dark (Phosphor
   regular icons). Hidden without JavaScript, since it would do nothing. */
.ac-theme-toggle {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z'/%3E%3C/svg%3E");
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control, 8px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 160ms;
}

.ac-theme-toggle[aria-pressed="true"] {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
}

.ac-theme-toggle:hover {
	background: var(--wp--preset--color--surface-2);
}

.ac-theme-toggle__icon {
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--ac-icon) center / contain no-repeat;
	mask: var(--ac-icon) center / contain no-repeat;
}

.ac-theme-toggle[aria-pressed="true"] .ac-theme-toggle__icon {
	animation: ac-turn-in 450ms var(--ac-ease-out);
}

.ac-theme-toggle[aria-pressed="false"] .ac-theme-toggle__icon {
	animation: ac-turn-back 450ms var(--ac-ease-out);
}

@keyframes ac-turn-in {
	from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
	to { opacity: 1; transform: none; }
}

@keyframes ac-turn-back {
	from { opacity: 0; transform: rotate(90deg) scale(0.6); }
	to { opacity: 1; transform: none; }
}

html:not(.ac-js) .ac-theme-toggle {
	display: none;
}

@media (forced-colors: active) {
	.ac-theme-toggle__icon {
		forced-color-adjust: none;
		background: ButtonText;
	}
}

/* A short color cross-fade while the theme switches (the head script adds the class for 450 ms). */
@media (prefers-reduced-motion: no-preference) {
	html.ac-theme-fading,
	html.ac-theme-fading *,
	html.ac-theme-fading *::before,
	html.ac-theme-fading *::after {
		transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, fill 300ms ease, stroke 300ms ease !important;
	}
}

/* Browser surfaces in the site's colors. */
html {
	scrollbar-color: var(--wp--preset--color--accent) var(--wp--preset--color--surface-2);
}

input,
textarea,
select {
	caret-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- blueprint hero (home) */

.ac-hero {
	position: relative;
	color: var(--ac-bp-ink);
	background-color: var(--ac-bp-ground);
	background-image:
		linear-gradient(var(--ac-bp-line-major) 1px, transparent 1px),
		linear-gradient(90deg, var(--ac-bp-line-major) 1px, transparent 1px),
		linear-gradient(var(--ac-bp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ac-bp-line) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	overflow: hidden;
}

.ac-hero h1,
.ac-hero p,
.ac-hero li {
	color: inherit;
}

.ac-hero .ac-hero__copy > p {
	color: var(--ac-bp-ink-2);
}

.ac-hero a:not(.wp-element-button) {
	color: var(--ac-bp-ink);
}

/* The hero's white and glass buttons are set in ui.css (theme 1.9.0, 3D buttons). */

.ac-hero :focus-visible {
	outline-color: var(--ac-bp-accent);
}

/* The measured words: a tape line with ticks under them, drawn left to right. Backgrounds (not a pseudo-element)
   so the words can wrap on phones; box-decoration-break gives each line its own tape. */
.ac-measure {
	color: var(--ac-bp-accent);
	padding-bottom: 0.14em;
	background-image:
		linear-gradient(currentColor, currentColor),
		repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 0.5em),
		repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 2em);
	background-repeat: no-repeat;
	background-position: left 100%, left 100%, left 100%;
	background-size: 100% 2px, 100% 0.16em, 100% 0.28em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ac-hero__photo img {
	border-radius: 10px;
	box-shadow: 0 28px 56px -28px rgba(5, 12, 40, 0.7);
}

/* The tool card sits on the photo's lower corner, like a sheet pinned on a drawing board. */
.ac-hero__stack .ac-box-tool {
	position: relative;
	z-index: 1;
	margin-top: -2rem;
	margin-inline: 0.75rem;
}

@media (min-width: 782px) {
	.ac-hero__stack .ac-box-tool {
		margin-top: -6rem;
		margin-inline: -2.5rem 2.5rem;
	}
}

/* The focal sequence: copy rises in order, the tape line draws, the card settles. Runs once on load. */
.ac-js .ac-hero .ac-hero__copy > *,
.ac-js .ac-hero .ac-hero__stack > * {
	opacity: 0;
	transform: translateY(12px);
}

.ac-js .ac-hero .ac-measure {
	background-size: 0% 2px, 0% 0.16em, 0% 0.28em;
}

.ac-js .ac-hero.is-drawn .ac-hero__copy > *,
.ac-js .ac-hero.is-drawn .ac-hero__stack > *,
.ac-ready .ac-hero .ac-hero__copy > *,
.ac-ready .ac-hero .ac-hero__stack > * {
	opacity: 1;
	transform: none;
	transition: opacity 700ms var(--ac-ease-out), transform 700ms var(--ac-ease-out);
}

.ac-js .ac-hero.is-drawn .ac-hero__copy > :nth-child(2) { transition-delay: 90ms; }
.ac-js .ac-hero.is-drawn .ac-hero__copy > :nth-child(3) { transition-delay: 180ms; }
.ac-js .ac-hero.is-drawn .ac-hero__copy > :nth-child(4) { transition-delay: 270ms; }
.ac-js .ac-hero.is-drawn .ac-hero__stack > :nth-child(1) { transition-delay: 120ms; }
.ac-js .ac-hero.is-drawn .ac-hero__stack > :nth-child(2) { transition-delay: 320ms; }

.ac-js .ac-hero.is-drawn .ac-measure,
.ac-ready .ac-hero .ac-measure {
	background-size: 100% 2px, 100% 0.16em, 100% 0.28em;
	transition: background-size 900ms var(--ac-ease-out) 420ms;
}

/* Trust chips under the hero copy. */
.ac-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.ac-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(186, 204, 255, 0.35);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--ac-bp-ink-2);
}

.ac-chips li::before {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: var(--ac-bp-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 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='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- litter box size tool */

.ac-box-tool {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border-radius: 10px;
	padding: 1.25rem 1.25rem 1rem;
	box-shadow: 0 32px 64px -32px rgba(5, 12, 40, 0.8), 0 2px 6px rgba(5, 12, 40, 0.16);
	font-variant-numeric: tabular-nums;
}

.ac-box-tool p {
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.ac-box-tool > :first-child,
.ac-box-tool .ac-box-tool__title {
	margin-top: 0;
	margin-bottom: 0;
}

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

.ac-hero .ac-box-tool .ac-box-tool__source a {
	color: var(--wp--preset--color--accent);
}

/*
 * The measuring tool band under the home hero (theme 1.12.1, Bader: "the home page hero section looks too long").
 * The hero is the copy and the photo, about one screen; the tool has its own room right below it, on drafting paper.
 */
.ac-measure-band {
	margin-top: 0 !important;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background:
		linear-gradient(var(--ac-grid-tint) 1px, transparent 1px) -1px -1px / 24px 24px,
		linear-gradient(90deg, var(--ac-grid-tint) 1px, transparent 1px) -1px -1px / 24px 24px,
		var(--wp--preset--color--surface-2);
}

.ac-measure-band__cols {
	gap: var(--wp--preset--spacing--60) !important;
}

.ac-measure-band .ac-peyebrow {
	margin: 0;
	color: var(--wp--preset--color--accent);
}

.ac-measure-band__copy h2 {
	margin-top: 0.6rem;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.ac-measure-band__copy > p:not(.ac-peyebrow) {
	color: var(--wp--preset--color--ink-2);
}

/* Fact cards beside the tool (theme 1.16.0): each one is the rule behind a check, and a click opens that check
   (motion.js). The card for the open check is marked. */
.ac-mt-picks {
	list-style: none;
	display: grid;
	gap: 0.5rem;
	margin: 1.25rem 0 1rem;
	padding: 0;
}

.ac-mt-picks a {
	display: grid;
	grid-template-columns: 5.75rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid transparent;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.45;
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, transform 220ms var(--ac-ease-out);
}

.ac-mt-picks strong {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

@media (hover: hover) {
	.ac-mt-picks a:hover {
		border-color: var(--wp--preset--color--accent);
		transform: translateX(3px);
	}
}

/* An arrow says the card opens something. */
.ac-mt-picks a::after {
	content: "";
	align-self: center;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	opacity: 0.55;
	transition: opacity 160ms ease;
}

.ac-mt-picks a:hover::after,
.ac-mt-picks a[aria-current="true"]::after {
	opacity: 1;
}

.ac-mt-picks a[aria-current="true"] {
	border-color: var(--wp--preset--color--line);
	border-left-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
}

.ac-mt-picks a:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ac-measure-band__more a {
	color: var(--wp--preset--color--accent);
	font-weight: 650;
}

.ac-measure-band .ac-box-tool {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--ac-card-shadow), 0 30px 60px -40px rgba(20, 48, 127, 0.45);
}

.ac-measure-band__tool .ac-box-tool {
	max-width: 640px;
	margin-left: auto;
}

/* On phones the tabs already name the five checks, so the fact cards step aside and the tool starts sooner. */
@media (max-width: 781.98px) {
	.ac-measure-band {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.ac-mt-picks {
		display: none;
	}

	.ac-measure-band__tool .ac-box-tool {
		max-width: none;
	}
}

/*
 * Home bands (theme 1.13.0, Bader, 17 Oct 2026: "the home page need some background colors to separate sessions be
 * creative"). Below the hero and the measuring tool band, each section is a full-width band with its own ground, like
 * the rooms of one floor plan: the topics on the hero's blueprint blue with the footer's tape-measure edge, the latest
 * guides on warm drafting paper with a dot grid, the first four moves on white with the steps joined by a dashed path,
 * and how we research on the blue tint as a spec sheet (.ac-start corners). Groups in site/pages/home.html carry
 * .ac-band plus one modifier. Contrast: ink on paper #FBF7F0 16.6:1, accent #1F45C6 on it 7.2:1, white on #14307F
 * 11.9:1, ink on the dark paper #1A1813 15.0:1; step numbers are accent-ink on accent, as on buttons.
 */

:root {
	--ac-paper: #fbf7f0;
	--ac-paper-dot: rgba(122, 67, 0, 0.16);
	--ac-step-path: rgba(31, 69, 198, 0.35);
}

:root[data-theme="dark"] {
	--ac-paper: #1a1813;
	--ac-paper-dot: rgba(255, 214, 153, 0.12);
	--ac-step-path: rgba(143, 168, 255, 0.4);
}

.ac-band {
	position: relative;
	margin-block-start: 0 !important;
}

/* The label above a band's heading is a block, so the band's content width and centering apply to it. */
.ac-band .ac-peyebrow {
	display: flex;
	margin: 0;
	color: var(--wp--preset--color--accent);
}

.ac-band .ac-peyebrow + .wp-block-heading {
	margin-top: 0.6rem;
}

/* A jump link (the hero's "Browse the six topics") lands with the label in view, not under the header. */
.ac-band .ac-peyebrow + .wp-block-heading[id] {
	scroll-margin-top: calc(88px + 2.5rem);
}

/* Topics: the hero's blueprint board again, with the six tiles pinned on it, and the footer's tape-measure edge. */
.ac-band--blueprint {
	color: var(--ac-bp-ink);
	background-color: var(--ac-bp-ground);
	background-image:
		linear-gradient(var(--ac-bp-line-major) 1px, transparent 1px),
		linear-gradient(90deg, var(--ac-bp-line-major) 1px, transparent 1px),
		linear-gradient(var(--ac-bp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ac-bp-line) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
}

.ac-band--blueprint::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 14px;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 1px, transparent 1px 120px) -1px 0 / 100% 14px no-repeat,
		repeating-linear-gradient(90deg, rgba(214, 225, 255, 0.5) 0 1px, transparent 1px 12px) -1px 0 / 100% 7px no-repeat;
}

.ac-band--blueprint > .wp-block-heading {
	color: inherit;
}

.ac-band--blueprint .ac-peyebrow {
	color: var(--ac-bp-accent);
}

.ac-band--blueprint .ac-hub-tile {
	color: var(--wp--preset--color--ink);
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(5, 12, 40, 0.25), 0 24px 40px -26px rgba(5, 12, 40, 0.8);
}

.ac-band--blueprint :focus-visible,
.ac-band--blueprint .ac-hub-tile:focus-within {
	outline-color: var(--ac-bp-accent);
}

/* Latest guides: warm drafting paper with an engineer's dot grid. */
.ac-band--paper {
	background-color: var(--ac-paper);
	background-image: radial-gradient(circle, var(--ac-paper-dot) 1.2px, transparent 1.7px);
	background-size: 24px 24px;
	background-position: 11px 11px;
}

/* The first four moves: a clean white sheet, the steps joined by a dashed path like a route drawn on a plan. */
.ac-band--steps {
	background-color: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--line);
}

.ac-band--steps ol {
	list-style: none;
	counter-reset: ac-step;
	padding-left: 0;
}

.ac-band--steps ol > li {
	counter-increment: ac-step;
	position: relative;
	min-height: 2.25rem;
	padding-left: 3.25rem;
}

.ac-band--steps ol > li + li {
	margin-top: 1.25rem;
}

.ac-band--steps ol > li::before {
	content: counter(ac-step);
	position: absolute;
	top: -0.1rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.ac-band--steps ol > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.4rem;
	bottom: -1.2rem;
	left: calc(1.125rem - 1px);
	border-left: 2px dashed var(--ac-step-path);
}

/* How we research: the blue tint, with the note as a spec sheet (drafting grid and corner marks, .ac-start). */
.ac-band--tint {
	background-color: var(--wp--preset--color--accent-tint);
}

.ac-band--tint .ac-start {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--ac-card-shadow);
}

/* When the page ends on a band, the footer's tape edge meets it with no strip of page color between them. */
.wp-site-blocks:has(.entry-content > .ac-band:last-child) > footer {
	margin-block-start: 0;
}

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

.ac-box-tool__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 0.85rem;
}

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

.ac-box-tool__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-box-tool__input:focus-within {
	border-color: var(--wp--preset--color--accent);
}

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

.ac-box-tool__input input:focus-visible {
	outline: none;
}

.ac-box-tool__input span {
	display: flex;
	align-items: center;
	padding-inline: 0.6rem;
	color: var(--wp--preset--color--ink-3);
	font-size: var(--wp--preset--font-size--small);
}

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

.ac-unit {
	display: inline-flex;
	margin-top: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
}

.ac-unit button {
	min-width: 44px;
	min-height: 40px;
	padding: 0 0.85rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-2);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background-color 160ms, color 160ms;
}

.ac-unit button[aria-pressed="true"] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

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

.ac-box-tool__plan {
	display: block;
	width: 100%;
	height: auto;
	margin: 0.75rem 0 0.25rem;
	color: var(--wp--preset--color--accent);
	overflow: visible;
}

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

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

.ac-plan-mine {
	fill: none;
	stroke: var(--wp--preset--color--ink-3);
	stroke-width: 2;
	stroke-dasharray: 6 4;
	transition: stroke 200ms, opacity 200ms;
}

.ac-plan-mine.is-short { stroke: var(--wp--preset--color--warn-ink); }
.ac-plan-mine.is-ok { stroke: var(--wp--preset--color--tip-ink); }
.ac-plan-mine[hidden] { display: none; }

.ac-plan-dim,
.ac-plan-tick {
	stroke: currentColor;
	stroke-width: 1.5;
}

.ac-plan-cat,
.ac-plan-cat-tick {
	stroke: var(--wp--preset--color--ink-2);
	stroke-width: 1.5;
}

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

.ac-box-tool__plan .ac-plan-cat-label {
	fill: var(--wp--preset--color--ink-2);
}

.ac-box-tool__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.ac-box-tool__result strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.ac-box-tool__verdict:empty,
.ac-box-tool__error:empty {
	display: none;
}

.ac-box-tool__verdict {
	margin-top: 0.4rem !important;
	font-weight: 600;
}

.ac-box-tool__verdict.is-short { color: var(--wp--preset--color--warn-ink) !important; }
.ac-box-tool__verdict.is-ok { color: var(--wp--preset--color--tip-ink) !important; }

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

.ac-box-tool__source {
	margin-top: 0.6rem !important;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3) !important;
}

.ac-box-tool__source a {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- measuring tool (home, theme 1.10.0)
 * Bader, 16 Oct 2026: the litter box card became "What are you measuring?" with five choices. The choice buttons
 * are 3D keys like the site's buttons; each panel slides in; sliders fill as you drag; the answer arrives as a chip
 * that pops when it changes. Without JavaScript only the litter box panel shows, as before. */

.ac-mt__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

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

.ac-box-tool .ac-mt__ask {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Theme 1.16.0: the five checks sit in one row at every width, each an icon over a short label, instead of wrapping
   into a ragged second row. The tool is a size container, so the row and the drawing follow the card, not the
   window. */
.ac-mt__tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.4rem;
	margin: 0.7rem 0 1rem;
}

html:not(.ac-js) .ac-mt__ask,
html:not(.ac-js) .ac-mt__tabs {
	display: none;
}

.ac-mt__tab,
.ac-key {
	--k-depth: 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	box-sizing: border-box;
	min-width: 0;
	min-height: 64px;
	padding: 0.5rem 0.25rem;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-2);
	font: inherit;
	font-size: 0.75rem;
	line-height: 1.15;
	font-weight: 650;
	cursor: pointer;
	box-shadow: 0 var(--k-depth) 0 var(--wp--preset--color--line);
	transition: transform 200ms var(--ac-ease-out), box-shadow 200ms var(--ac-ease-out), background-color 160ms, color 160ms, border-color 160ms;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	.ac-mt__tab:hover,
	.ac-key:hover {
		--k-depth: 3px;
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
		transform: translateY(-1px);
	}
}

.ac-mt__tab:active,
.ac-key:active {
	--k-depth: 0px;
	transform: translateY(2px);
}

.ac-mt__tab[aria-selected="true"],
.ac-key[aria-pressed="true"] {
	border-color: #1a3cad;
	background: linear-gradient(180deg, #3a62e6, var(--wp--preset--color--accent));
	color: #ffffff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 var(--k-depth) 0 #112a7c;
}

:root[data-theme="dark"] .ac-mt__tab[aria-selected="true"],
:root[data-theme="dark"] .ac-key[aria-pressed="true"] {
	border-color: #9fb5ff;
	background: linear-gradient(180deg, #b4c5ff, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--accent-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 var(--k-depth) 0 #4c66c4;
}

.ac-mt__panel.is-entering {
	animation: ac-mt-in 420ms var(--ac-ease-out);
}

@keyframes ac-mt-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Fields line up at the bottom, so a label that wraps to two lines does not push its input lower. */
.ac-mt .ac-box-tool__fields {
	align-items: end;
}

.ac-box-tool__fields.ac-mt__fields--one {
	grid-template-columns: minmax(0, 1fr);
}

.ac-mt__field--wide {
	grid-column: 1 / -1;
}

/* Sliders: the track fills up to the thumb (motion.js sets --p). */
.ac-mt__range {
	--p: 50%;
	display: block;
	width: 100%;
	height: 30px;
	margin: 0.75rem 0 0.15rem;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

html:not(.ac-js) .ac-mt__range {
	display: none;
}

.ac-mt__range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) var(--p), var(--wp--preset--color--surface-2) var(--p));
}

.ac-mt__range::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) var(--p), var(--wp--preset--color--surface-2) var(--p));
}

.ac-mt__range::-webkit-slider-thumb {
	width: 26px;
	height: 26px;
	margin-top: -10px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px rgba(20, 48, 127, 0.35);
	transition: transform 160ms var(--ac-ease-out);
	-webkit-appearance: none;
	appearance: none;
}

.ac-mt__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 8px rgba(20, 48, 127, 0.35);
}

.ac-mt__range:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

.ac-mt__range:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* The answer as a chip: green with a check when it passes, red with a cross when it falls short, gray for notes. */
.ac-mt .ac-box-tool__verdict,
.ac-verdict {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.55rem !important;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-2) !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.ac-mt .ac-box-tool__verdict.is-ok,
.ac-verdict.is-ok {
	background: var(--wp--preset--color--tip-bg);
	color: var(--wp--preset--color--tip-ink) !important;
}

.ac-mt .ac-box-tool__verdict.is-short,
.ac-verdict.is-short {
	background: var(--wp--preset--color--warn-bg);
	color: var(--wp--preset--color--warn-ink) !important;
}

.ac-mt .ac-box-tool__verdict.is-ok::before,
.ac-mt .ac-box-tool__verdict.is-short::before,
.ac-verdict.is-ok::before,
.ac-verdict.is-short::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin-top: 0.15em;
	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='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 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='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ac-mt .ac-box-tool__verdict.is-short::before,
.ac-verdict.is-short::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
}

.ac-mt .ac-box-tool__verdict.is-pop,
.ac-verdict.is-pop {
	animation: ac-mt-pop 460ms var(--ac-ease-out);
}

@keyframes ac-mt-pop {
	0% { opacity: 0.4; transform: scale(0.96); }
	60% { opacity: 1; transform: scale(1.015); }
	100% { transform: none; }
}

.ac-box-tool .ac-mt__extra {
	margin-top: 0.55rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.ac-box-tool .ac-mt__extra:empty {
	display: none;
}

.ac-box-tool .ac-mt__extra.is-hint {
	color: var(--wp--preset--color--ink-3);
}

.ac-box-tool .ac-mt__more {
	margin-top: 0.75rem;
}

/* Next step under an answer (theme 1.12.0). */
.ac-box-tool .ac-mt__next {
	margin: 0.35rem 0 0;
}

.ac-box-tool .ac-mt__next[hidden] {
	display: none;
}

.ac-mt__more a,
.ac-mt__next a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	color: var(--wp--preset--color--accent);
	font-weight: 650;
	text-decoration: none;
}

.ac-mt__more a::after,
.ac-mt__next a::after {
	content: "";
	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;
	transition: transform 220ms var(--ac-ease-out);
}

.ac-mt__more a:hover,
.ac-mt__next a:hover {
	text-decoration: underline;
}

.ac-mt__more a:hover::after,
.ac-mt__next a:hover::after {
	transform: translateX(3px);
}

/* ---- Theme 1.16.0 (Bader: "upgrade and optimize the Measure before you buy"): icon tabs, a drawing sized to the
   card, the how-to-measure tip at the first input, and the next guide as a clear button. */
.ac-box-tool {
	container-type: inline-size;
}

.ac-mt__icon {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ac-mt__tab > span {
	max-width: 100%;
	overflow-wrap: anywhere;
}

@container (min-width: 480px) {
	.ac-mt__tab {
		font-size: 0.8125rem;
	}

	/* On a wide card the drawing stops growing, so its labels stay label-sized and the answer stays near the inputs. */
	.ac-box-tool__plan {
		max-width: 470px;
		margin-inline: auto;
	}

	.ac-box-tool__plan text {
		font-size: 12px;
	}
}

.ac-mt__how {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-2);
}

.ac-mt__how summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 32px;
	color: var(--wp--preset--color--accent);
	font-weight: 650;
	cursor: pointer;
	list-style: none;
}

.ac-mt__how summary::-webkit-details-marker {
	display: none;
}

.ac-mt__how summary::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 200ms var(--ac-ease-out);
}

.ac-mt__how[open] summary::before {
	transform: rotate(45deg);
}

.ac-box-tool .ac-mt__how p {
	margin: 0.3rem 0 0;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-2);
	line-height: 1.5;
}

.ac-box-tool .ac-mt__next a {
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-tint);
	line-height: 1.3;
}

.ac-box-tool .ac-mt__next a:hover {
	text-decoration: none;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--accent-tint));
}

/* The cat in the litter box (theme 1.17.0): the Canva cat stands in the box; the box's front wall is drawn again
   over its legs, see-through, so the paws sit in the litter. Dotted guides drop from the tape line above the cat
   to the nose and the base of the tail. */
.ac-mt-tray-front {
	fill: var(--wp--preset--color--accent-tint);
	fill-opacity: 0.55;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
}

.ac-mt-guide {
	stroke: var(--wp--preset--color--ink-3);
	stroke-width: 1.2;
	stroke-dasharray: 2 3;
}

.ac-mt-boxplan .ac-plan-cat-label {
	fill: var(--wp--preset--color--ink);
	font-weight: 650;
}

/* The Canva cats are pictures in the site's blue, so in dark mode they are lifted to read on the dark card the way
   the accent itself turns lighter there. */
:root[data-theme="dark"] .ac-mt-catimg {
	filter: brightness(1.75) saturate(0.9);
}

/* Where a starting value comes from (theme 1.17.1). */
.ac-box-tool .ac-mt__typical {
	margin: 0.45rem 0 0;
	color: var(--wp--preset--color--ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.ac-box-tool .ac-mt__typical a {
	color: var(--wp--preset--color--accent);
}

/* Drawings. */
.ac-box-tool__plan .ac-mt-room,
.ac-box-tool__plan .ac-mt-mark-label,
.ac-box-tool__plan .ac-mt-spot-n {
	font-size: 10px;
}

.ac-box-tool__plan .ac-mt-room {
	fill: var(--wp--preset--color--ink-3);
	letter-spacing: 0.04em;
}

.ac-mt-wall {
	fill: none;
	stroke: var(--wp--preset--color--ink-2);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ac-mt-spot {
	opacity: 0;
	transform: scale(0.2);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 220ms ease var(--d, 0ms), transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms);
}

.ac-mt-spot.is-on {
	opacity: 1;
	transform: none;
}

.ac-mt-spot-box {
	fill: var(--wp--preset--color--accent-tint);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
}

.ac-mt-spot-litter {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.2;
	stroke-dasharray: 2 2;
}

.ac-box-tool__plan .ac-mt-spot-n {
	fill: var(--wp--preset--color--accent);
	font-weight: 700;
}

.ac-mt-boxwall {
	fill: none;
	stroke: var(--wp--preset--color--ink-2);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.ac-mt-litter {
	fill: var(--wp--preset--color--accent-tint);
}

.ac-mt-grain {
	fill: var(--wp--preset--color--accent);
	opacity: 0.4;
}

.ac-mt-litter-top {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
}

.ac-mt-mark {
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

.ac-mt-mark--min {
	stroke: var(--wp--preset--color--warn-ink);
}

.ac-mt-mark--top,
.ac-mt-mark--goal {
	stroke: var(--wp--preset--color--tip-ink);
}

.ac-box-tool__plan .ac-mt-mark-label {
	fill: var(--wp--preset--color--ink-2);
}

.ac-mt-floor,
.ac-mt-wall-side {
	stroke: var(--wp--preset--color--ink-3);
	stroke-width: 2;
	stroke-linecap: round;
}

.ac-mt-post {
	fill: var(--wp--preset--color--accent-tint);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
	transition: fill 300ms, stroke 300ms;
}

.ac-mt-post.is-tall {
	fill: var(--wp--preset--color--tip-bg);
	stroke: var(--wp--preset--color--tip-ink);
}

.ac-mt-sisal {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1;
	opacity: 0.45;
}

.ac-mt-post-base,
.ac-mt-bracket {
	fill: var(--wp--preset--color--accent);
}

.ac-mt-shelf {
	fill: var(--wp--preset--color--accent-tint);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
}

.ac-mt-cat-fill {
	fill: var(--wp--preset--color--accent);
}

.ac-mt-cat-eye {
	fill: var(--wp--preset--color--surface);
}

.ac-mt-cat-tail,
.ac-mt-cat-paws {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 4;
	stroke-linecap: round;
}

.ac-mt-over {
	stroke: var(--wp--preset--color--warn-ink);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

/* A shelf longer than the drawing runs to its edge with a break mark (theme 1.12.6): the cat keeps one size. */
.ac-mt-break {
	fill: none;
	stroke: var(--wp--preset--color--surface);
	stroke-width: 4;
}

@media (prefers-reduced-motion: reduce) {
	.ac-mt__panel.is-entering,
	.ac-mt .ac-box-tool__verdict.is-pop {
		animation: none;
	}

	.ac-mt-spot,
	.ac-mt__tab {
		transition: none;
	}

	.ac-mt__tab:active,
	.ac-mt__tab:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- hub tiles (home) */

.ac-hub-tile {
	position: relative;
	transition: border-color 200ms, box-shadow 400ms var(--ac-ease-out), transform 400ms var(--ac-ease-out);
}

.ac-hub-tile .wp-block-image {
	overflow: hidden;
	border-radius: 6px;
}

.ac-hub-tile .wp-block-image img {
	transition: transform 700ms var(--ac-ease-out);
}

.ac-hub-tile h3 a {
	text-decoration-color: transparent;
	transition: text-decoration-color 200ms;
}

/* The whole tile is the link; the heading keeps the accessible name. */
.ac-hub-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

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

.ac-hub-tile h3 a:focus-visible {
	outline: none;
}

/* The tiles arrive once, in reading order. The entrance moves the translate property, so the 3D tilt and lift in
   ui.css (theme 1.9.0, on transform) keep working during and after it. */
.ac-js .ac-hub-tiles > .ac-hub-tile {
	opacity: 0;
	translate: 0 16px;
}

.ac-js .ac-hub-tiles.is-in > .ac-hub-tile,
.ac-ready .ac-hub-tiles > .ac-hub-tile {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity 600ms var(--ac-ease-out) calc(var(--ac-i, 0) * 70ms),
		translate 600ms var(--ac-ease-out) calc(var(--ac-i, 0) * 70ms),
		transform var(--ac-tilt-t, 650ms) var(--ac-tilt-e, var(--ac-ease-out)),
		box-shadow 450ms var(--ac-ease-out),
		border-color 220ms ease,
		scale 90ms ease;
}

.ac-hub-tiles > .ac-hub-tile:hover .wp-block-image img {
	transform: scale(1.05);
}

.ac-hub-tiles > .ac-hub-tile:hover h3 a {
	text-decoration-color: currentColor;
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- hub "start with" blocks: drafting paper */

.ac-start {
	position: relative;
	background-image:
		linear-gradient(var(--ac-grid-tint) 1px, transparent 1px),
		linear-gradient(90deg, var(--ac-grid-tint) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: -1px -1px;
}

.ac-start::before,
.ac-start::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 0 solid var(--wp--preset--color--accent);
	pointer-events: none;
}

.ac-start::before {
	top: 10px;
	left: 10px;
	border-width: 2px 0 0 2px;
}

.ac-start::after {
	right: 10px;
	bottom: 10px;
	border-width: 0 2px 2px 0;
}

/* Buttons acknowledge the press everywhere. */
.wp-element-button {
	transition: background-color 160ms, color 160ms, border-color 160ms, transform 120ms;
}

/* ---------------------------------------------------------------- tool design kit (theme 1.20.0)
 * Bader, 22 Oct 2026: "optimize and upgrade all the tool page to have like the design of the calculators in the home
 * page". One tool look for the home measuring tool, its own page and the Core tools (assets/tools.css uses these):
 * the drafting-paper ground (.ac-tool-wrap), the raised card (--ac-tool-shadow), the 3D keys (.ac-key, shared with the
 * measuring tool's tabs above), the verdict chip (.ac-verdict, shared with its answer chip above), and the printables'
 * download panel (.ac-download). */
:root {
	--ac-tool-paper:
		linear-gradient(var(--ac-grid-tint) 1px, transparent 1px) -1px -1px / 24px 24px,
		linear-gradient(90deg, var(--ac-grid-tint) 1px, transparent 1px) -1px -1px / 24px 24px;
	--ac-tool-shadow: var(--ac-card-shadow), 0 30px 60px -40px rgba(20, 48, 127, 0.45);
}

:root[data-theme="dark"] {
	--ac-tool-shadow: var(--ac-card-shadow), 0 30px 60px -40px rgba(0, 0, 0, 0.75);
}

/* The ground: every tool on a tool page sits on drafting paper, as the home tool does in its band. */
.entry-content .ac-tool-wrap {
	box-sizing: border-box;
	padding: clamp(0.75rem, 2.2vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--ac-tool-paper), var(--wp--preset--color--surface-2);
}

.entry-content .ac-tool-wrap > * {
	margin-block: 0;
}

.entry-content .ac-tool-wrap .ac-box-tool {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--ac-tool-shadow);
}

/* On a phone the paper runs edge to edge, so the card keeps its full width for the fields. */
@media (max-width: 599.98px) {
	.entry-content .ac-tool-wrap {
		margin-inline: calc(50% - 50vw);
		padding: 0.75rem 0.5rem;
		border-inline: 0;
		border-radius: 0;
	}
}

/* Keys: a choice made with one press, the measuring tool's tab without its icon. */
.ac-keys {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr));
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.ac-key {
	flex-direction: row;
	min-height: 48px;
	padding: 0.5rem 0.6rem;
	font-size: 0.875rem;
	line-height: 1.2;
}

.ac-key:focus-visible,
.ac-mt__tab:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Chips for tool notes: a vet note in the vet colors, as on the guides; a plain note stays gray. */
.ac-verdict.is-vet {
	background: var(--wp--preset--color--vet-bg);
	color: var(--wp--preset--color--vet-ink) !important;
}

/* The printables: preview and download buttons together on the same paper, as one panel. */
.entry-content .ac-download {
	box-sizing: border-box;
	display: grid;
	justify-items: center;
	gap: 1.1rem;
	padding: clamp(1rem, 3vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--ac-tool-paper), var(--wp--preset--color--surface-2);
}

.entry-content .ac-download > * {
	margin: 0;
}

.entry-content .ac-download .ac-printable-preview img {
	box-shadow: var(--ac-tool-shadow);
}

.entry-content .ac-download .wp-block-buttons {
	justify-content: center;
}

/* Tools hub cards: the tool card's blue top edge over the same paper. */
.ac-link-cards > .ac-link-card {
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / 100% 4px no-repeat,
		var(--ac-tool-paper),
		var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.ac-js .ac-hero .ac-hero__copy > *,
	.ac-js .ac-hero .ac-hero__stack > *,
	.ac-js .ac-hub-tiles > .ac-hub-tile {
		opacity: 1 !important;
		translate: none !important;
		transform: none !important;
		transition: border-color 160ms, box-shadow 160ms !important;
	}

	.ac-js .ac-hero .ac-measure {
		background-size: 100% 2px, 100% 0.16em, 100% 0.28em !important;
		transition: none !important;
	}

	.ac-hub-tiles > .ac-hub-tile:hover .wp-block-image img {
		transform: none;
	}

	.ac-unit button:active,
	.wp-element-button:active {
		transform: none;
	}

	.ac-theme-toggle .ac-theme-toggle__icon {
		animation: none !important;
	}
	.ac-key:hover,
	.ac-key:active,
	.ac-verdict.is-pop {
		transform: none;
		animation: none !important;
	}
}

/* ---- Review fixes for the measuring tool (theme 1.23.6; calculators review of 22 Oct, item 15): the site's 44px tap
   size on the unit switch and the five tabs, a slider that is easier to grab, and the same 2px accent ring the Core
   tools draw around a field being typed in (Core 1.15.1). Looks and drawings unchanged. */
.ac-unit button {
	min-height: 44px;
}

.ac-unit button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

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

/* On the narrowest cards (a 320px phone on the tool page) the five tabs were 41px wide: a tighter gap and 4px of
   the card's padding give each one 44px, still in one row. */
@container (max-width: 240px) {
	.ac-mt__tabs {
		gap: 0.25rem;
		margin-inline: -0.25rem;
	}

	/* labels whole, not split inside a word ("lengt / h") */
	.ac-mt__tab {
		padding-inline: 2px;
		font-size: 0.6875rem;
	}

	.ac-mt__tab > span {
		overflow-wrap: normal;
	}
}

/* The unit switch no longer gets pushed past the card's edge beside a two-line question on a narrow phone. */
.ac-mt__head .ac-unit {
	flex: none;
}

.ac-mt__range {
	height: 44px;
}

.ac-mt__range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
}

.ac-mt__range::-moz-range-track {
	height: 8px;
	border-radius: 4px;
}

.ac-mt__range::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	margin-top: -11px;
}

.ac-mt__range::-moz-range-thumb {
	width: 26px;
	height: 26px;
}

.ac-mt__range:focus-visible {
	outline-width: 2px;
}