/*
 * Apartment Cats interface layer (theme 1.9.0).
 *
 * Bader, 16 Oct 2026: "optimize the website first in appearance and aesthetics ... motion designs in pages, hubs ...
 * a side bar ... the buttons need to be like urbanhydrospace buttons that shine when hover like 3D and the posts or
 * category boxes too", then "copy or make it even better".
 *
 * 1. 3D buttons: a lit top edge, a darker key edge under the face, a lift on hover with a light sweep across it (the
 *    urbanhydrospace shine), and a press that sinks into the edge.
 * 2. Cards (hub tiles, guide cards, link cards, related guides): they lift and tilt toward the pointer in 3D, a soft
 *    light follows the pointer, the border lights up nearest to it, and a sheen crosses the card once on entry.
 * 3. Page header: every page and post opens on the blueprint blue of the home hero and the footer.
 * 4. Layout and sidebar: contents with a reading rail, topics, free tools and the author, sticky on wide screens.
 * 5. Content: drafting ticks on section headings, link cards, guide card grids, author box, related guides.
 * 6. Motion: reveals as content scrolls into view (ui.js adds .ac-rv only when it will reveal them), and a reading
 *    progress line. Every effect has a reduced-motion path at the end; nothing is hidden without JavaScript.
 *
 * Shapes follow the design system: 8px controls, 10px containers. One accent (cobalt), tinted shadows.
 */

:root {
	--ac-gutter: clamp(1rem, 4vw, 1.5rem);
	--ac-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ac-card-glow: rgba(31, 69, 198, 0.1);
	--ac-card-sheen: rgba(255, 255, 255, 0.7);
	--ac-card-edge: rgba(31, 69, 198, 0.75);
	--ac-card-shadow: 0 1px 2px rgba(20, 48, 127, 0.06), 0 12px 28px -22px rgba(20, 48, 127, 0.45);
	--ac-card-shadow-up: 0 2px 6px rgba(20, 48, 127, 0.08), 0 30px 54px -28px rgba(20, 48, 127, 0.55);
	--ac-arrow: 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");
	--ac-check: 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");
	--ac-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 12 160 172'%3E%3Cpath fill-rule='evenodd' d='M 30 104 L 40 22 L 82 56 C 94 52 106 52 118 56 L 160 22 L 170 104 C 170 146 138 174 100 174 C 62 174 30 146 30 104 Z M 54 92 L 54 105 L 67 105 L 67 92 Z M 71 92 L 71 105 L 84 105 L 84 92 Z M 54 109 L 54 122 L 67 122 L 67 109 Z M 71 109 L 71 122 L 84 122 L 84 109 Z M 116 92 L 116 105 L 129 105 L 129 92 Z M 133 92 L 133 105 L 146 105 L 146 92 Z M 116 109 L 116 122 L 129 122 L 129 109 Z M 133 109 L 133 122 L 146 122 L 146 109 Z M 93 138 L 100 147 L 107 138 Z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
	--ac-card-glow: rgba(143, 168, 255, 0.13);
	--ac-card-sheen: rgba(255, 255, 255, 0.09);
	--ac-card-edge: rgba(143, 168, 255, 0.8);
	--ac-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -20px rgba(0, 0, 0, 0.8);
	--ac-card-shadow-up: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 54px -26px rgba(0, 0, 0, 0.9);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==================================================================== 1. 3D buttons */

.wp-element-button,
.ac-ft .ac-ft__btn,
.ac-tp__btn.ac-tp__btn.ac-tp__btn,
.ac-side__all {
	--b-top: #3a62e6;
	--b-bg: var(--wp--preset--color--accent);
	--b-ink: var(--wp--preset--color--accent-ink);
	--b-border: #1a3cad;
	--b-edge: #112a7c;
	--b-hi: rgba(255, 255, 255, 0.32);
	--b-glow: rgba(31, 69, 198, 0.55);
	--b-shine: rgba(255, 255, 255, 0.55);
	--b-depth: 3px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--b-border);
	background: linear-gradient(180deg, var(--b-top) 0%, var(--b-bg) 100%);
	color: var(--b-ink);
	text-decoration: none;
	box-shadow:
		inset 0 1px 0 var(--b-hi),
		0 var(--b-depth) 0 var(--b-edge),
		0 calc(var(--b-depth) + 10px) 20px -12px var(--b-glow);
	transform: translateY(0);
	transition: transform 260ms var(--ac-ease-out), box-shadow 260ms var(--ac-ease-out), filter 200ms ease, color 160ms ease;
	-webkit-tap-highlight-color: transparent;
}

/* The shine: a bright band that sweeps across the face on hover (urbanhydrospace's effect). */
.wp-element-button::after,
.ac-ft .ac-ft__btn::after,
.ac-tp__btn.ac-tp__btn.ac-tp__btn::after,
.ac-side__all::after {
	content: "";
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -85%;
	width: 55%;
	background: linear-gradient(105deg, transparent 0%, var(--b-shine) 50%, transparent 100%);
	transform: skewX(-20deg);
	pointer-events: none;
}

@media (hover: hover) {
	.wp-element-button:hover,
	.ac-ft .ac-ft__btn:hover,
	.ac-tp__btn.ac-tp__btn.ac-tp__btn:hover,
	.ac-side__all:hover {
		--b-depth: 5px;
		color: var(--b-ink);
		text-decoration: none;
		transform: translateY(-2px);
		filter: saturate(1.1) brightness(1.05);
	}

	.wp-element-button:hover::after,
	.ac-ft .ac-ft__btn:hover::after,
	.ac-tp__btn.ac-tp__btn.ac-tp__btn:hover::after,
	.ac-side__all:hover::after {
		animation: ac-shine 850ms var(--ac-ease-out);
	}
}

.wp-element-button:active,
.ac-ft .ac-ft__btn:active,
.ac-tp__btn.ac-tp__btn.ac-tp__btn:active,
.ac-side__all:active {
	--b-depth: 1px;
	transform: translateY(2px);
	transition-duration: 70ms;
}

@keyframes ac-shine {
	from { left: -85%; }
	to { left: 135%; }
}

/* Dark mode: the accent is light, so the face is light with dark text. */
:root[data-theme="dark"] .wp-element-button,
:root[data-theme="dark"] .ac-tp__btn.ac-tp__btn.ac-tp__btn--solid,
:root[data-theme="dark"] .ac-side__all {
	--b-top: #b4c5ff;
	--b-border: #9fb5ff;
	--b-edge: #4c66c4;
	--b-hi: rgba(255, 255, 255, 0.6);
	--b-glow: rgba(143, 168, 255, 0.35);
	--b-shine: rgba(255, 255, 255, 0.7);
}

/* Outline buttons: a light face with an accent border and a soft blue key edge. */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background),
.ac-tp__btn.ac-tp__btn.ac-tp__btn:not(.ac-tp__btn--solid) {
	--b-top: var(--wp--preset--color--surface);
	--b-bg: #f2f5ff;
	--b-ink: var(--wp--preset--color--accent);
	--b-border: var(--wp--preset--color--accent);
	--b-edge: #bccaf3;
	--b-hi: rgba(255, 255, 255, 0.95);
	--b-glow: rgba(31, 69, 198, 0.25);
	--b-shine: rgba(31, 69, 198, 0.16);
	border-width: 1px;
	color: var(--b-ink);
}

:root[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background),
:root[data-theme="dark"] .ac-tp__btn.ac-tp__btn.ac-tp__btn:not(.ac-tp__btn--solid) {
	--b-top: #222a3a;
	--b-bg: #171b22;
	--b-edge: #07090d;
	--b-hi: rgba(255, 255, 255, 0.07);
	--b-glow: rgba(0, 0, 0, 0.6);
	--b-shine: rgba(143, 168, 255, 0.2);
}

/* On the blueprint (home hero, page headers, footer, tools card): white keys and glass keys. */
.ac-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.ac-ft .ac-ft__btn--solid,
.ac-side__tools .ac-side__all {
	--b-top: #ffffff;
	--b-bg: #e3eaff;
	--b-ink: #14307f;
	--b-border: #ffffff;
	--b-edge: #93a9ec;
	--b-hi: #ffffff;
	--b-glow: rgba(3, 10, 40, 0.6);
	--b-shine: rgba(84, 120, 245, 0.32);
}

.ac-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background),
.ac-ft .ac-ft__btn:not(.ac-ft__btn--solid) {
	--b-top: rgba(255, 255, 255, 0.16);
	--b-bg: rgba(255, 255, 255, 0.05);
	--b-ink: #ffffff;
	--b-border: rgba(234, 240, 255, 0.72);
	--b-edge: rgba(255, 255, 255, 0.24);
	--b-hi: rgba(255, 255, 255, 0.22);
	--b-glow: rgba(3, 10, 40, 0.5);
	--b-shine: rgba(255, 255, 255, 0.34);
}

/* One shine on the main call to action once the home hero has drawn itself, and on the footer's when it arrives. */
@media (prefers-reduced-motion: no-preference) {
	.ac-js .ac-hero.is-drawn .wp-block-button:first-child > .wp-block-button__link::after {
		animation: ac-shine 1100ms var(--ac-ease-out) 1300ms both;
	}

	.ac-ft__lead.is-in .ac-ft__btn--solid::after {
		animation: ac-shine 1100ms var(--ac-ease-out) 500ms both;
	}
}

/* ==================================================================== 2. cards */

.ac-hub-tiles > .ac-hub-tile,
.ac-guide-list .wp-block-post-template > li,
.ac-link-card,
.ac-related__item,
.ac-more > a {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 50%;
	--my: 0%;
	--lift: 0px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-shadow: var(--ac-card-shadow);
	transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
	transition:
		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,
		background-color 220ms ease,
		opacity 800ms var(--ac-ease-out) var(--ac-d, 0ms),
		translate 800ms var(--ac-ease-out) var(--ac-d, 0ms),
		scale 90ms ease;
}

/* The light that follows the pointer, and the sheen that crosses the card once on entry. */
.ac-hub-tiles > .ac-hub-tile::before,
.ac-guide-list .wp-block-post-template > li::before,
.ac-link-card::before,
.ac-related__item::before,
.ac-more > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(560px circle at var(--mx) var(--my), var(--ac-card-glow), transparent 45%),
		linear-gradient(105deg, transparent 40%, var(--ac-card-sheen) 50%, transparent 60%);
	background-repeat: no-repeat;
	background-size: 100% 100%, 280% 100%;
	background-position: 0 0, 120% 0;
	opacity: 0;
	transition: opacity 320ms ease;
}

/* The border lights up nearest the pointer. */
.ac-hub-tiles > .ac-hub-tile::after,
.ac-guide-list .wp-block-post-template > li::after,
.ac-link-card::after,
.ac-related__item::after,
.ac-more > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 1.5px;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(300px circle at var(--mx) var(--my), var(--ac-card-edge), transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	transition: opacity 320ms ease;
}

@media (hover: hover) {
	.ac-hub-tiles > .ac-hub-tile:hover,
	.ac-guide-list .wp-block-post-template > li:hover,
	.ac-link-card:hover,
	.ac-related__item:hover,
	.ac-more > a:hover {
		--lift: -6px;
		border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, var(--wp--preset--color--line));
		box-shadow: var(--ac-card-shadow-up);
	}

	.ac-hub-tiles > .ac-hub-tile:hover::before,
	.ac-guide-list .wp-block-post-template > li:hover::before,
	.ac-link-card:hover::before,
	.ac-related__item:hover::before,
	.ac-more > a:hover::before {
		opacity: 1;
		animation: ac-sheen 1000ms var(--ac-ease-out) both;
	}

	.ac-hub-tiles > .ac-hub-tile:hover::after,
	.ac-guide-list .wp-block-post-template > li:hover::after,
	.ac-link-card:hover::after,
	.ac-related__item:hover::after,
	.ac-more > a:hover::after {
		opacity: 1;
	}
}

/* While the pointer moves, the tilt follows it closely; on leave it eases back. */
.is-tilting {
	--ac-tilt-t: 140ms;
	--ac-tilt-e: linear;
}

@keyframes ac-sheen {
	from { background-position: 0 0, 120% 0; }
	to { background-position: 0 0, -20% 0; }
}

/* Touch: a short press instead of hover. */
.ac-hub-tiles > .ac-hub-tile:active,
.ac-guide-list .wp-block-post-template > li:active,
.ac-link-card:active,
.ac-related__item:active,
.ac-more > a:active {
	scale: 0.985;
}

/* Pictures inside cards ease in a little closer on hover. */
.ac-guide-list .wp-block-post-featured-image,
.ac-related__thumb {
	overflow: hidden;
}

.ac-guide-list .wp-block-post-featured-image img,
.ac-related__thumb img {
	transition: transform 800ms var(--ac-ease-out);
}

@media (hover: hover) {
	.ac-guide-list .wp-block-post-template > li:hover .wp-block-post-featured-image img,
	.ac-related__item:hover .ac-related__thumb img {
		transform: scale(1.05);
	}
}

/* Guide cards (the Query Loops on hubs and sub-hubs, search and topic archives). The title link covers the card. */
.ac-guide-list .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ac-guide-list .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ac-guide-list .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 1.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
}

.ac-guide-list .wp-block-post-template > li > * {
	margin: 0;
	padding-inline: 1.15rem;
}

.ac-guide-list .wp-block-post-featured-image {
	margin: 0 0 0.25rem;
	padding: 0 !important;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface-2);
}

.ac-guide-list .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ac-guide-list .wp-block-post-title {
	margin-top: 1rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.ac-guide-list .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ac-guide-list .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ac-guide-list .wp-block-post-template > li:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}

.ac-guide-list .wp-block-post-excerpt {
	margin-top: 0.45rem;
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ac-guide-list .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* The li > * reset above outranks the title and excerpt rules, which left the title touching the photo
   (Bader, 17 Oct 2026). These selectors carry the same weight as the reset, so the spacing holds. */
.ac-guide-list .wp-block-post-template > li > .wp-block-post-title {
	margin-top: 1.1rem;
}

.ac-guide-list .wp-block-post-template > li > .wp-block-post-excerpt {
	margin-top: 0.5rem;
}

.ac-guide-list .wp-block-post-template > li:focus-within {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ac-guide-list .wp-block-post-title a:focus-visible {
	outline: none;
}

/* Card details (theme 1.14.0): the topic above the title, and the reading time and update date at the foot, lined
   up across a row of cards. Used by the guide cards above and the related guides at the end of a guide. */
.ac-card-topic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.45rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ac-card-topic span + span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--ink-3);
}

.ac-card-topic span + span::before {
	content: "";
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	opacity: 0.6;
}

.ac-card-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin-top: auto !important;
	padding-top: 0.9rem;
	color: var(--wp--preset--color--ink-3);
	font-size: 0.8125rem;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.ac-card-facts > span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.ac-card-facts > span::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--ac-icon) center / contain no-repeat;
	mask: var(--ac-icon) center / contain no-repeat;
}

.ac-card-facts__time {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5'/%3E%3C/svg%3E");
}

.ac-card-facts__date {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.2' y='3.2' width='11.6' height='10.6' rx='1.6'/%3E%3Cpath d='M2.2 6.6h11.6M5.4 1.8v2.6M10.6 1.8v2.6'/%3E%3C/svg%3E");
}

.ac-guide-list .wp-block-post-template > li > .ac-card-topic {
	margin-top: 1.1rem;
}

.ac-guide-list .wp-block-post-template > li > .ac-card-topic + .wp-block-post-title {
	margin-top: 0.4rem;
}

/* Link cards: "every guide on one page" links on hubs and sub-hubs (p.ac-more), and the tools hub (.ac-link-card). */
.entry-content > .ac-more {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.ac-more > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	min-height: 60px;
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background:
		linear-gradient(90deg, var(--wp--preset--color--accent) 0 4px, transparent 4px),
		var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.ac-more > a:hover,
.ac-more > a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* The link's own ::before and ::after carry the light, so the arrow is drawn by the paragraph around it. */
.ac-more > a {
	padding-right: 3.25rem;
}

.ac-more {
	position: relative;
}

.ac-more::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.15rem;
	z-index: 4;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	pointer-events: none;
	transition: transform 280ms var(--ac-ease-out);
}

.ac-more:hover::after {
	transform: translateX(4px);
}

.ac-more--back > a {
	padding-right: 1.15rem;
	padding-left: 3.25rem;
}

.ac-more--back::after {
	right: auto;
	left: 1.15rem;
	transform: scaleX(-1);
}

.ac-more--back:hover::after {
	transform: scaleX(-1) translateX(4px);
}

/* Tools hub: two grids of cards; the heading link covers the card. */
.ac-link-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
}

@media (min-width: 640px) {
	.ac-link-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd last card takes the whole row instead of leaving a gap. */
	.ac-link-cards > .ac-link-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.ac-link-cards > .ac-link-card {
	margin: 0;
}

.ac-link-card {
	box-sizing: border-box;
	padding: 1.15rem 1.25rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	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);
}

.ac-link-card > * {
	margin: 0;
}

.ac-link-card > * + * {
	margin-top: 0.4rem;
}

.ac-link-card h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.ac-link-card h3::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	transition: transform 280ms var(--ac-ease-out);
}

.ac-link-card:hover h3::after {
	transform: translateX(4px);
}

.ac-link-card h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ac-link-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ac-link-card:hover h3 a {
	color: var(--wp--preset--color--accent);
}

.ac-link-card p {
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

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

.ac-link-card h3 a:focus-visible {
	outline: none;
}

/* ==================================================================== 3. page header (blueprint) */

.ac-main {
	margin-block-start: 0 !important;
}

.ac-main > * {
	margin-block: 0;
}

.ac-phero {
	--ac-ph-ink: #ffffff;
	--ac-ph-ink-2: #dce5ff;
	--ac-ph-ink-3: #b8c6f0;
	--ac-ph-line: rgba(186, 204, 255, 0.3);
	position: relative;
	z-index: 0;
	overflow: hidden;
	box-sizing: border-box;
	padding: clamp(2rem, 1.2rem + 3.5vw, 4rem) var(--ac-gutter) clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
	background-color: var(--ac-bp-ground);
	color: var(--ac-ph-ink-2);
}

/* The grid lives on its own layer so it can drift without repainting the page. */
.ac-phero::before {
	content: "";
	position: absolute;
	inset: -120px 0 0 -120px;
	z-index: -1;
	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;
	pointer-events: none;
}

/* A tape-measure edge along the bottom: a tick every 12px, a long one every 120px, drawn left to right on load. */
.ac-phero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 14px;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 1px, transparent 1px 120px) -1px 100% / 100% 14px no-repeat,
		repeating-linear-gradient(90deg, rgba(214, 225, 255, 0.5) 0 1px, transparent 1px 12px) -1px 100% / 100% 7px no-repeat;
	transform-origin: left center;
}

.ac-phero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	max-width: 1160px;
	margin: 0 auto;
}

.ac-phero__inner > *,
.ac-phero__copy > * {
	margin-block: 0;
}

.ac-phero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	max-width: 760px;
}

.ac-phero .ac-phero__title {
	color: var(--ac-ph-ink);
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.ac-peyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ac-bp-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* A short drafting tick before the label. */
.ac-peyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 9px;
	background:
		linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 0 / 2px 100% no-repeat,
		linear-gradient(currentColor, currentColor) 100% 0 / 2px 100% no-repeat;
}

.ac-phero .ac-crumbs {
	margin: 0;
	color: var(--ac-ph-ink-3);
}

.ac-phero .ac-crumbs a {
	color: var(--ac-ph-ink-2);
}

.ac-phero .ac-crumbs a:hover,
.ac-phero .ac-crumbs a:focus-visible {
	color: var(--ac-ph-ink);
}

.ac-phero .ac-crumbs__sep {
	color: var(--ac-ph-line);
}

.ac-phero .ac-crumbs .breadcrumb_last {
	color: var(--ac-ph-ink-3);
}

.ac-phero :focus-visible {
	outline-color: var(--ac-ph-ink);
}

/* Byline row: author, updated date, reading time on guides, and the research label. */
.ac-pmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	margin-top: var(--wp--preset--spacing--10) !important;
	color: var(--ac-ph-ink-2);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.ac-pmeta a {
	color: var(--ac-ph-ink);
	text-decoration: none;
}

.ac-pmeta__by {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	font-weight: 650;
}

.ac-pmeta__by:hover span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ac-pmeta__by img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
	background: #ffffff;
}

.ac-pmeta__item {
	display: inline-flex;
	align-items: center;
	gap: 1.1rem;
}

.ac-pmeta__item::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ac-ph-ink-3);
}

.ac-pmeta__by + .ac-pmeta__item::before,
.ac-pmeta > .ac-pmeta__item:first-child::before {
	display: none;
}

.ac-pmeta__by + .ac-pmeta__item {
	gap: 0;
}

.ac-pmeta .ac-pmeta__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 32px;
	padding: 0.2rem 0.7rem 0.2rem 0.55rem;
	border: 1px solid var(--ac-ph-line);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--ac-ph-ink);
	font-size: 0.875rem;
	font-weight: 650;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.ac-pmeta__badge::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	background: var(--ac-bp-accent);
	-webkit-mask: var(--ac-check) center / contain no-repeat;
	mask: var(--ac-check) center / contain no-repeat;
}

.ac-pmeta .ac-pmeta__badge:hover {
	border-color: var(--ac-ph-ink);
	background: rgba(255, 255, 255, 0.12);
}

/* With a featured image (hubs and guides): copy on the left, the photo on the right, turned a little in 3D, with
   drafting corner marks. It straightens when the pointer comes near. */
.ac-phero .wp-block-post-featured-image {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 0;
	perspective: 1300px;
}

.ac-phero .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: -18px 30px 60px -28px rgba(3, 10, 40, 0.85), 0 2px 8px rgba(3, 10, 40, 0.25);
	transform: rotateY(-9deg) rotateX(4deg);
	transition: transform 900ms var(--ac-ease-out);
}

.ac-phero .wp-block-post-featured-image::before,
.ac-phero .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 0 solid rgba(255, 255, 255, 0.8);
	pointer-events: none;
}

.ac-phero .wp-block-post-featured-image::before {
	top: -12px;
	left: -12px;
	border-width: 2px 0 0 2px;
}

.ac-phero .wp-block-post-featured-image::after {
	right: -12px;
	bottom: -12px;
	border-width: 0 2px 2px 0;
}

@media (hover: hover) {
	.ac-phero__inner:hover .wp-block-post-featured-image img {
		transform: rotateY(-2deg) rotateX(1deg) translateY(-4px);
	}
}

@media (min-width: 900px) {
	.ac-phero__inner:has(> .wp-block-post-featured-image) {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--wp--preset--spacing--80);
	}

	.ac-phero__inner > .wp-block-post-featured-image {
		justify-self: end;
	}
}

/* Without a picture: the logo's cat head drawn faintly on the right, like a mark on a drawing sheet. */
@media (min-width: 900px) {
	.ac-phero__inner:not(:has(> .wp-block-post-featured-image))::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 2%;
		width: 230px;
		aspect-ratio: 160 / 172;
		background: rgba(186, 204, 255, 0.1);
		-webkit-mask: var(--ac-mark) center / contain no-repeat;
		mask: var(--ac-mark) center / contain no-repeat;
		transform: translateY(-50%) rotate(-8deg);
		pointer-events: none;
	}
}

/* Search and topic archive headers: the search field sits in the header. */
.ac-phero .wp-block-search {
	width: 100%;
	max-width: 620px;
	margin-top: var(--wp--preset--spacing--20) !important;
}

.ac-phero .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.ac-phero .wp-block-search__input {
	min-height: 48px;
	padding: 0 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--wp--custom--radius--control);
	background: #ffffff;
	color: #15181e;
	font-size: 1.0625rem;
}

.ac-phero .wp-block-search__button {
	--b-top: #ffffff;
	--b-bg: #e3eaff;
	--b-ink: #14307f;
	--b-border: #ffffff;
	--b-edge: #93a9ec;
	--b-hi: #ffffff;
	--b-glow: rgba(3, 10, 40, 0.6);
	--b-shine: rgba(84, 120, 245, 0.32);
	margin: 0;
	min-height: 48px;
}

.ac-phero .wp-block-term-description {
	max-width: 40em;
	color: var(--ac-ph-ink-2);
	font-size: 1.0625rem;
}

.ac-phero .wp-block-term-description p {
	margin: 0;
}

/* ==================================================================== 4. layout and sidebar */

.ac-layout {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1160px + 2 * var(--ac-gutter));
	margin: 0 auto;
	padding: var(--wp--preset--spacing--70) var(--ac-gutter) var(--wp--preset--spacing--80);
}

.ac-layout__main {
	min-width: 0;
}

.ac-layout__main > * {
	margin-block: 0;
}

.ac-layout__main > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.ac-layout__main > .entry-content > :first-child {
	margin-top: 0;
}

/* The post content is a constrained block, so WordPress gives it the root side padding; inside this layout that
   pushed the text 16px in from the title above it. The layout already has its own gutter. */
.ac-layout__main > .wp-block-post-content.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Lists of guides (search, topic archives) use the full width: three cards across on wide screens. */
.ac-layout--list .ac-guide-list .wp-block-post-template {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.ac-layout--list .ac-guide-list .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50);
	}
}

.ac-layout--list .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
	gap: 0.5rem;
	font-weight: 600;
}

.ac-layout--list .wp-block-query-pagination a,
.ac-layout--list .wp-block-query-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border-radius: var(--wp--custom--radius--control);
}

.ac-layout--list .wp-block-query-pagination .current {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

.ac-noresults {
	max-width: 680px;
}

.ac-noresults ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.ac-noresults li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease;
}

.ac-noresults li a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Sidebar: below the content on phones and tablets (two columns from 640px), beside it from 1100px. */
.ac-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	margin-top: var(--wp--preset--spacing--70);
}

@media (min-width: 640px) and (max-width: 1099.98px) {
	.ac-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ac-side__stick {
		display: contents;
	}
}

.ac-side .ac-toc {
	display: none;
}

.ac-side__stick {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* Below 1100px the contents card is hidden, so a stick holding only it would leave an empty grid row. */
@media (max-width: 1099.98px) {
	.ac-side__stick:has(> .ac-toc:only-child) {
		display: none;
	}
}

@media (min-width: 1100px) {
	body.ac-has-side .ac-layout {
		display: grid;
		grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--80);
		align-items: stretch;
	}

	body.ac-has-side .ac-side {
		justify-self: end;
		width: 100%;
		max-width: 320px;
		margin-top: 0;
	}

	/* The contents never grow past the window: a long list scrolls inside its card (theme 1.13.1), and ui.js keeps
	   the section you are reading in the middle of it. */
	body.ac-has-side .ac-side .ac-toc {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	body.ac-has-side .ac-side .ac-toc__body {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	body.ac-has-side .ac-side .ac-toc__list {
		min-height: 0;
		margin: -3px;
		padding: 3px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--line) transparent;
	}

	body.ac-has-side .ac-side .ac-toc__list.is-more-above {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
		mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
	}

	body.ac-has-side .ac-side .ac-toc__list.is-more-below {
		-webkit-mask-image: linear-gradient(to top, transparent, #000 2.5rem);
		mask-image: linear-gradient(to top, transparent, #000 2.5rem);
	}

	body.ac-has-side .ac-side .ac-toc__list.is-more-above.is-more-below {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
	}

	body.ac-has-side .ac-side__stick {
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 88px;
		max-height: calc(100vh - 112px);
		max-height: calc(100dvh - 112px);
	}

	body.admin-bar.ac-has-side .ac-side__stick {
		top: calc(88px + var(--wp-admin--admin-bar--height, 32px));
		max-height: calc(100vh - 112px - var(--wp-admin--admin-bar--height, 32px));
		max-height: calc(100dvh - 112px - var(--wp-admin--admin-bar--height, 32px));
	}

	body.ac-has-side .ac-toc-m {
		display: none;
	}
}

.ac-side__card {
	box-sizing: border-box;
	margin: 0;
	padding: 1.1rem 1.15rem 1.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
}

.ac-side__card > * {
	margin: 0;
}

.ac-side .ac-side__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--ink-3);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ac-side .ac-side__label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 8px;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 50% / 100% 2px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / 2px 100% no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 100% 0 / 2px 100% no-repeat;
}

.ac-side ul,
.ac-side ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-side li {
	margin: 0;
}

/* Contents: a drafting rail beside the list fills as you read; the section you are in is marked. */
.ac-toc__body {
	position: relative;
	padding-left: 14px;
}

.ac-toc__rail {
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--surface-2);
	overflow: hidden;
}

.ac-toc__fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, #5a7bff, var(--wp--preset--color--accent));
	transform: scaleY(0);
	transform-origin: top center;
}

.ac-toc__list a {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 0.35rem 0.6rem;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, padding 260ms var(--ac-ease-out);
}

.ac-toc__list a:hover {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink);
}

.ac-toc__list a[aria-current] {
	padding-left: 0.85rem;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
	font-weight: 650;
}

/* Contents on phones and tablets: a folded box above the text. */
.ac-toc-m {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
}

.ac-toc-m > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 52px;
	padding: 0 1.1rem;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.ac-toc-m > summary::-webkit-details-marker {
	display: none;
}

.ac-toc-m > summary::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--accent);
	-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 260ms var(--ac-ease-out);
}

.ac-toc-m[open] > summary::after {
	transform: rotate(180deg);
}

.ac-toc-m__count {
	margin-left: auto;
	color: var(--wp--preset--color--ink-3);
	font-size: 0.875rem;
	font-weight: 600;
}

.ac-toc-m .ac-toc__list {
	margin: 0;
	padding: 0 0.6rem 0.75rem;
	list-style: none;
	counter-reset: ac-toc;
}

.ac-toc-m .ac-toc__list li {
	margin: 0;
	counter-increment: ac-toc;
}

.ac-toc-m .ac-toc__list a {
	min-height: 44px;
}

.ac-toc-m .ac-toc__list a::before {
	content: counter(ac-toc, decimal-leading-zero);
	min-width: 2rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Topics and "about the site" lists. */
.ac-topics__list > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.ac-topics__hub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.35rem 0.25rem;
	color: var(--wp--preset--color--ink);
	font-weight: 650;
	text-decoration: none;
	transition: color 200ms ease;
}

.ac-topics__hub::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--ink-3);
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	transition: transform 260ms var(--ac-ease-out), background-color 200ms ease;
}

.ac-topics__hub:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.ac-topics__hub:hover::after {
	background: var(--wp--preset--color--accent);
	transform: translateX(3px);
}

.ac-topics__hub[aria-current] {
	color: var(--wp--preset--color--accent);
}

.ac-topics__hub[aria-current]::after {
	background: var(--wp--preset--color--accent);
}

/* The open hub's pages hang off it on a drafting line with end ticks, as in the menu. */
.ac-topics__subs {
	position: relative;
	margin: 0 0 0.6rem 0.4rem !important;
	padding-left: 0.9rem !important;
}

.ac-topics__subs::before {
	content: "";
	position: absolute;
	left: -3px;
	top: 6px;
	bottom: 6px;
	width: 7px;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) top / 7px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) bottom / 7px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) center / 1px 100% no-repeat;
}

.ac-topics__subs a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 0.3rem 0.5rem;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.ac-topics__subs a:hover {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--accent);
}

.ac-topics__subs a[aria-current] {
	color: var(--wp--preset--color--accent);
	font-weight: 650;
}

/* Free tools: a small blueprint sheet. */
.ac-side .ac-side__tools {
	position: relative;
	overflow: hidden;
	border-color: transparent;
	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;
	color: #dce5ff;
	box-shadow: 0 22px 40px -26px rgba(20, 48, 127, 0.8);
}

.ac-side .ac-side__tools .ac-side__label {
	color: var(--ac-bp-accent);
}

.ac-side .ac-side__tools .ac-side__label::before {
	background:
		linear-gradient(var(--ac-bp-accent), var(--ac-bp-accent)) 0 50% / 100% 2px no-repeat,
		linear-gradient(var(--ac-bp-accent), var(--ac-bp-accent)) 0 0 / 2px 100% no-repeat,
		linear-gradient(var(--ac-bp-accent), var(--ac-bp-accent)) 100% 0 / 2px 100% no-repeat;
}

.ac-side__tools ul {
	margin-bottom: 0.9rem !important;
}

.ac-side__tools li + li {
	border-top: 1px solid rgba(186, 204, 255, 0.2);
}

.ac-side__tools li a {
	display: grid;
	gap: 0.1rem;
	padding: 0.55rem 0;
	color: #ffffff;
	text-decoration: none;
}

.ac-side__tool-name {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
}

.ac-side__tool-name::after {
	content: "";
	width: 15px;
	height: 15px;
	background: var(--ac-bp-accent);
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	transition: transform 260ms var(--ac-ease-out);
}

.ac-side__tools li a:hover .ac-side__tool-name::after {
	transform: translateX(4px);
}

.ac-side__tools li a:hover .ac-side__tool-name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ac-side__tool-note {
	color: #b8c6f0;
	font-size: 0.875rem;
	line-height: 1.4;
}

.ac-side__tools :focus-visible {
	outline-color: #ffffff;
}

.ac-side__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: var(--wp--custom--radius--control);
	font-weight: 650;
	font-size: 0.9375rem;
}

/* The author, in one line and a face. */
.ac-side__author {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.ac-side__author img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-tint);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-tint);
}

.ac-side__name {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.ac-side__name a {
	color: inherit;
	text-decoration: none;
}

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

.ac-side__bio {
	margin-top: 0.25rem !important;
	color: var(--wp--preset--color--ink-2);
	font-size: 0.875rem;
	line-height: 1.5;
}

.ac-side__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 32px;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
	font-weight: 650;
	text-decoration: none;
}

.ac-side__badge::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: var(--ac-check) center / contain no-repeat;
	mask: var(--ac-check) center / contain no-repeat;
}

.ac-side__badge:hover {
	text-decoration: underline;
}

/* ==================================================================== 5. content */

/* Section headings carry a short drafting tick, drawn as they arrive. */
.entry-content > h2.wp-block-heading {
	position: relative;
	padding-top: 0.85rem;
}

.entry-content > h2.wp-block-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 9px;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 50% / 100% 2px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / 2px 100% no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 100% 0 / 2px 100% no-repeat,
		repeating-linear-gradient(90deg, var(--wp--preset--color--accent) 0 1px, transparent 1px 11px) 0 0 / 100% 5px no-repeat;
	transform-origin: left center;
}

/* Bullets in the accent. */
.entry-content :where(ul.wp-block-list) > li::marker {
	color: var(--wp--preset--color--accent);
}

.entry-content :where(ol.wp-block-list) > li::marker {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* "Start with" boxes: a soft lift so the most useful numbers read as a card. */
.entry-content > .ac-start {
	box-shadow: var(--ac-card-shadow);
}

/* Evidence tables: the row you read is marked. */
.ac-facts tbody tr {
	transition: background-color 160ms ease;
}

.ac-facts tbody tr:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-tint) 55%, transparent);
}

/* Callouts: a meaning-colored edge. */
.ac-callout {
	border-left: 4px solid color-mix(in srgb, currentColor 45%, transparent);
}

/* ---- Guide blocks, from the design system components (08-site-design/design-system/components): the disclosure
   line, What you need, the Will it fit? card, the spec table and Keep going. Theme 1.11.0. */

.entry-content > .ac-disclosure {
	margin-block: var(--wp--preset--spacing--40);
	padding: 0.7rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.entry-content .ac-disclosure a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.entry-content .ac-needs {
	box-sizing: border-box;
	padding: 1rem 1.25rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
}

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

.entry-content .ac-needs > p:first-child strong {
	font-size: 1.1875rem;
}

.entry-content .ac-needs ul {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.5rem;
	padding-left: 1.2em;
}

.entry-content .ac-fit {
	position: relative;
	box-sizing: border-box;
	display: grid;
	gap: 1rem;
	padding: 1.35rem 1.35rem 1.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / 100% 4px no-repeat,
		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);
	box-shadow: var(--ac-card-shadow);
}

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

.entry-content .ac-fit h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0;
}

.entry-content .ac-fit dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 1.25rem;
	margin: 0;
	line-height: 1.45;
}

.entry-content .ac-fit dt {
	color: var(--wp--preset--color--ink-2);
}

.entry-content .ac-fit dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.entry-content .ac-fit-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.entry-content .ac-fit-foot .ac-byline {
	color: var(--wp--preset--color--ink-3);
	font-size: 0.875rem;
}

@media (max-width: 479.98px) {
	.entry-content .ac-fit dl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}

	.entry-content .ac-fit dd {
		margin-bottom: 0.5rem;
	}
}

/* Official product photo (theme 1.12.7): Apartment Cats Core adds it from Amazon's API at render time, beside the specs
   on wide screens and under the title on phones. A white tile, because Amazon's photos sit on white; fixed size, so
   nothing moves when the lazy photo arrives. Cards without a photo keep the layout above. */
.entry-content .ac-fit.has-img {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.5rem;
}

.entry-content .ac-fit.has-img > * {
	grid-column: 1 / -1;
}

.entry-content .ac-fit.has-img > dl {
	grid-column: 1;
	grid-row: 2;
}

.entry-content .ac-fit.has-img > .ac-fit-img {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	display: block;
	box-sizing: border-box;
	width: 8.5rem;
	height: 8.5rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
}

.entry-content .ac-fit-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 599.98px) {
	.entry-content .ac-fit.has-img > dl,
	.entry-content .ac-fit.has-img > .ac-fit-img {
		grid-column: 1 / -1;
		grid-row: auto;
	}

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

/* Amazon price with its time and Amazon's disclaimer (Core, only once the owner switches prices on). */
.entry-content .ac-fit .ac-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	line-height: 1.45;
}

.entry-content .ac-price strong {
	font-size: 1.1875rem;
	font-variant-numeric: tabular-nums;
}

.entry-content .ac-price-asof,
.entry-content .ac-price-details {
	color: var(--wp--preset--color--ink-3);
	font-size: 0.8125rem;
}

.entry-content .ac-price-details summary {
	cursor: pointer;
	text-decoration: underline;
}

.entry-content .ac-price-details[open] {
	flex-basis: 100%;
}

.entry-content .ac-spec {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
}

/* Tables fit the column (Bader, 17 Oct 2026: readers had to scroll to the table's bottom to reach the sideways
   scrollbar). No minimum width, tighter cells and wrapping text; under 700px every row turns into a card (below). */
.entry-content .ac-spec table {
	width: 100%;
	min-width: 0;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.entry-content .ac-spec th,
.entry-content .ac-spec td {
	padding: 0.65rem 0.7rem;
	border: 0;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
	hyphens: auto;
}

.entry-content .ac-spec thead th {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-2);
	font-size: 0.875rem;
	font-weight: 650;
}

.entry-content .ac-spec tbody tr + tr > * {
	border-top: 1px solid var(--wp--preset--color--line);
}

.entry-content .ac-spec :where(th, td):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--wp--preset--color--surface);
}

.entry-content .ac-spec thead th:first-child {
	background: var(--wp--preset--color--surface-2);
}

.entry-content .ac-spec tbody th {
	font-weight: 650;
}

.entry-content .ac-spec tbody tr:hover > * {
	background: color-mix(in srgb, var(--wp--preset--color--accent-tint) 60%, var(--wp--preset--color--surface));
}

.entry-content .ac-spec caption {
	caption-side: bottom;
	padding: 0.75rem 1rem;
	color: var(--wp--preset--color--ink-3);
	font-size: 0.9375rem;
	text-align: left;
}

/* Under 700px a table with a header row reads as a stack of cards: the first cell is the card's title and every other
   cell shows its column name (data-label, set by ui.js section 6). Nothing scrolls sideways. */
@media (max-width: 699.98px) {
	.entry-content table.ac-stack,
	.entry-content table.ac-stack tbody,
	.entry-content table.ac-stack tr,
	.entry-content table.ac-stack th,
	.entry-content table.ac-stack td {
		display: block;
		width: auto;
		min-width: 0;
	}

	.entry-content .ac-spec,
	.entry-content .ac-facts,
	.entry-content .wp-block-table {
		overflow-x: visible;
	}

	.entry-content table.ac-stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.entry-content table.ac-stack tbody tr {
		padding: 0.8rem 1rem;
	}

	.entry-content table.ac-stack tbody tr + tr {
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.entry-content table.ac-stack tbody tr > * {
		position: static;
		padding: 0.25rem 0;
		border: 0;
		background: none;
	}

	.entry-content table.ac-stack tbody tr > :first-child {
		padding: 0 0 0.35rem;
		font-size: 1rem;
		font-weight: 650;
	}

	.entry-content table.ac-stack tbody tr > [data-label]:not(:first-child) {
		display: grid;
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		gap: 0.75rem;
	}

	.entry-content table.ac-stack tbody tr > [data-label]:not(:first-child)::before {
		content: attr(data-label);
		color: var(--wp--preset--color--ink-3);
		font-size: 0.875rem;
		font-weight: 600;
	}

	.entry-content table.ac-stack caption {
		display: block;
		padding: 0.75rem 1rem;
	}
}

/* Fits your number (theme 1.12.0): a reader who came from the measuring tool sees which picks reach their number
   (ui.js section 5). Without ?min= none of this shows. */
.entry-content .ac-fit-note {
	margin-block: var(--wp--preset--spacing--40) 0.75rem;
	padding: 0.7rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.entry-content .ac-fit-note a {
	color: var(--wp--preset--color--accent);
	font-weight: 650;
}

.entry-content .ac-spec tr.is-fit > :first-child::after,
.entry-content .ac-fit.is-fit h3::after,
.entry-content .ac-fit.is-nofit h3::after {
	content: "Fits your number";
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	background: var(--wp--preset--color--tip-bg);
	color: var(--wp--preset--color--tip-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	vertical-align: 0.15em;
	white-space: nowrap;
}

.entry-content .ac-fit.is-nofit h3::after {
	content: "Shorter than your number";
	background: var(--wp--preset--color--warn-bg);
	color: var(--wp--preset--color--warn-ink);
}

.entry-content .ac-spec tr.is-nofit > td {
	color: var(--wp--preset--color--ink-3);
}

.entry-content .ac-fit.is-nofit {
	box-shadow: none;
}

.entry-content .ac-related {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

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

.entry-content .ac-related > h2 {
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--h-3);
}

.entry-content .ac-related ul {
	display: grid;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.entry-content .ac-related li {
	display: grid;
	gap: 2px;
}

.entry-content .ac-related .kind {
	color: var(--wp--preset--color--ink-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content .ac-related li a {
	font-weight: 650;
}

/* Author box at the end of a guide. */
.ac-authorbox {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 1rem 1.15rem;
	align-items: start;
	margin-top: var(--wp--preset--spacing--70) !important;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	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);
	box-shadow: var(--ac-card-shadow);
}

.ac-authorbox > div > * {
	margin: 0;
}

.ac-authorbox img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-tint);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-tint);
}

.ac-authorbox__eyebrow {
	color: var(--wp--preset--color--ink-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ac-authorbox .ac-authorbox__name {
	margin-top: 0.15rem;
	font-size: 1.3125rem;
}

.ac-authorbox__bio {
	margin-top: 0.4rem !important;
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
}

.ac-authorbox__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	margin-top: 0.4rem !important;
}

.ac-authorbox__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 650;
}

/* Related guides at the end of a guide. */
.ac-related-guides {
	margin-top: var(--wp--preset--spacing--70) !important;
}

.ac-related-guides > h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h-3);
}

.ac-related__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ac-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ac-related__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
}

.ac-related__thumb {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface-2);
}

.ac-related__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ac-related__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.9rem 1rem 1rem;
}

.ac-related__body > * {
	margin: 0;
}

.ac-related__item h3 {
	margin: 0.35rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.ac-related__item h3:first-child {
	margin-top: 0;
}

.ac-related__summary {
	display: -webkit-box;
	margin-top: 0.45rem !important;
	overflow: hidden;
	color: var(--wp--preset--color--ink-2);
	font-size: 0.875rem;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.ac-related__item h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ac-related__item h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ac-related__item:hover h3 a {
	color: var(--wp--preset--color--accent);
}

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

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

.ac-related-guides .ac-more {
	margin-top: var(--wp--preset--spacing--40);
}

/* Back to top, on every page once you have scrolled a screen: a round key with an arrow, and a ring around it that
   fills as you read. The one round control on the site, so it can carry the ring. */
.ac-totop {
	--b-depth: 3px;
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: calc(max(18px, calc(env(safe-area-inset-bottom) + 12px)) + var(--ac-lift, 0px));
	z-index: 55;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: linear-gradient(180deg, var(--wp--preset--color--surface), var(--wp--preset--color--surface-2));
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 var(--b-depth) 0 color-mix(in srgb, var(--wp--preset--color--accent) 28%, var(--wp--preset--color--line)),
		0 14px 26px -12px rgba(20, 48, 127, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.9);
	transition: opacity 260ms ease, transform 380ms var(--ac-ease-spring), visibility 0s linear 380ms, box-shadow 220ms ease, bottom 300ms var(--ac-ease-out);
	-webkit-tap-highlight-color: transparent;
}

.ac-totop.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 260ms ease, transform 420ms var(--ac-ease-spring), visibility 0s, box-shadow 220ms ease, bottom 300ms var(--ac-ease-out);
}

.ac-totop__ring {
	position: absolute;
	inset: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	rotate: -90deg;
	pointer-events: none;
}

.ac-totop__ring circle {
	fill: none;
	stroke-width: 2.5;
}

.ac-totop__track {
	stroke: var(--wp--preset--color--accent-tint);
}

.ac-totop__fill {
	stroke: var(--wp--preset--color--accent);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.ac-totop__icon {
	width: 22px;
	height: 22px;
	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='M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.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='M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 300ms var(--ac-ease-spring);
}

@media (hover: hover) {
	.ac-totop.is-shown:hover {
		--b-depth: 5px;
		transform: translateY(-2px);
	}

	.ac-totop:hover .ac-totop__icon {
		transform: translateY(-3px);
	}
}

.ac-totop.is-shown:active {
	--b-depth: 1px;
	transform: translateY(2px);
	transition-duration: 70ms;
}

:root[data-theme="dark"] .ac-totop {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 var(--b-depth) 0 #07090d,
		0 14px 26px -12px rgba(0, 0, 0, 0.8);
}

/* While the cookie banner is open at the bottom of the screen, ui.js lifts the button above it (--ac-lift, and the
   bottom transitions above). */

/* ---- Situation chooser and tick list (theme 1.15.0), first on Start here. ui.js (7, 8) builds the buttons, the
   count and the bar; without it every answer shows under its title and the boxes still tick. */

.ac-chooser {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.ac-chooser__opts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	grid-auto-flow: row dense;
	gap: 0.5rem;
}

/* The open answer takes a whole row under its button; dense packing lets the next button fill the gap beside it. */
.ac-chooser__opts > .ac-chooser__panel {
	grid-column: 1 / -1;
	margin: 0 0 0.35rem;
}

.ac-chooser__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 48px;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 48, 127, 0.06);
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 220ms var(--ac-ease-out);
}

.ac-chooser__opt::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform 220ms var(--ac-ease-out);
}

@media (hover: hover) {
	.ac-chooser__opt:hover {
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
		transform: translateY(-1px);
	}
}

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

.ac-chooser__opt[aria-expanded="true"] {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	transform: none;
}

.ac-chooser__opt[aria-expanded="true"]::after {
	transform: rotate(-90deg);
}

.ac-chooser__panel {
	margin: 0 0 0.75rem;
	padding: 1rem 1.15rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}

.ac-chooser__panel > * {
	margin: 0;
}

.ac-chooser__panel > * + * {
	margin-top: 0.6rem;
}

.ac-chooser__panel p,
.ac-chooser__panel li {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ac-chooser__panel ul {
	padding-left: 1.15rem;
}

.ac-chooser__panel li + li {
	margin-top: 0.3rem;
}

.ac-chooser__title {
	font-size: 1.0625rem;
	line-height: 1.3;
}

/* With the buttons in place the title would only repeat the pressed button; screen readers keep it. */
.ac-chooser.is-ready .ac-chooser__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ac-chooser.is-ready .ac-chooser__title + * {
	margin-top: 0;
}

.ac-chooser__go a {
	font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
	.ac-chooser.is-ready .ac-chooser__panel:not([hidden]) {
		animation: ac-chooser-in 280ms var(--ac-ease-out);
	}
}

@keyframes ac-chooser-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.ac-checklist {
	margin-block: var(--wp--preset--spacing--40);
	padding: 0.25rem 1.15rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
}

.ac-checklist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ac-checklist input[type="checkbox"] {
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--accent);
	cursor: pointer;
}

.ac-checklist label {
	cursor: pointer;
	line-height: 1.55;
}

.ac-checklist li.is-done label {
	color: var(--wp--preset--color--ink-2);
}

.ac-checklist li.is-done label strong {
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	text-decoration-thickness: 2px;
}

.ac-checklist__foot {
	display: grid;
	gap: 0.45rem;
	padding-top: 0.85rem;
}

.ac-checklist__count {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.9375rem;
	font-weight: 700;
}

.ac-checklist__bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / calc(var(--ac-done, 0) * 100%) 100% no-repeat,
		var(--wp--preset--color--accent-tint);
	transition: background-size 320ms var(--ac-ease-out);
}

@media print {
	.ac-chooser__opts,
	.ac-checklist__foot {
		display: none;
	}

	.ac-chooser .ac-chooser__panel[hidden] {
		display: block;
	}

	.ac-chooser.is-ready .ac-chooser__title {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
}

/* ==================================================================== 6. motion */

@media (prefers-reduced-motion: no-preference) {
	/* Page header: the grid drifts slowly, the tape edge draws, the copy rises in order, the photo swings into place.
	   The title and the photo never start transparent, so the page's main content paints at once. */
	.ac-phero::before {
		animation: ac-grid-pan 70s linear infinite;
		will-change: transform;
	}

	.ac-phero::after {
		animation: ac-tape-draw 1200ms var(--ac-ease-out) 200ms both;
	}

	.ac-phero__copy > * {
		animation: ac-rise 750ms var(--ac-ease-out) both;
	}

	.ac-phero__copy > :nth-child(2) { animation-delay: 70ms; }
	.ac-phero__copy > :nth-child(3) { animation-delay: 140ms; }
	.ac-phero__copy > :nth-child(4) { animation-delay: 210ms; }
	.ac-phero__copy > :nth-child(5) { animation-delay: 280ms; }

	.ac-phero__copy > .ac-phero__title {
		animation-name: ac-rise-solid;
	}

	.ac-phero .wp-block-post-featured-image {
		animation: ac-swing-in 1100ms var(--ac-ease-out) 120ms both;
	}

	.ac-phero__inner:not(:has(> .wp-block-post-featured-image))::after {
		animation: ac-float 9s ease-in-out infinite;
	}

	/* Content reveals. */
	.ac-rv {
		opacity: 0;
		translate: 0 22px;
	}

	.ac-rv.is-in {
		opacity: 1;
		translate: 0 0;
	}

	:where(.ac-rv.is-in) {
		transition: opacity 800ms var(--ac-ease-out) var(--ac-d, 0ms), translate 800ms var(--ac-ease-out) var(--ac-d, 0ms);
	}

	.entry-content > h2.wp-block-heading.ac-rv::before {
		transform: scaleX(0);
	}

	.entry-content > h2.wp-block-heading.ac-rv.is-in::before {
		transform: scaleX(1);
		transition: transform 900ms var(--ac-ease-out) calc(var(--ac-d, 0ms) + 150ms);
	}

	.entry-content > .ac-start.ac-rv::before,
	.entry-content > .ac-start.ac-rv::after {
		opacity: 0;
		scale: 0.4;
	}

	.entry-content > .ac-start.ac-rv.is-in::before,
	.entry-content > .ac-start.ac-rv.is-in::after {
		opacity: 1;
		scale: 1;
		transition: opacity 500ms ease 350ms, scale 700ms var(--ac-ease-spring) 350ms;
	}

	.entry-content > figure.wp-block-image.ac-rv img {
		scale: 1.04;
	}

	.entry-content > figure.wp-block-image.ac-rv.is-in img {
		scale: 1;
		transition: scale 1200ms var(--ac-ease-out) var(--ac-d, 0ms);
	}
}

@keyframes ac-grid-pan {
	to { transform: translate(120px, 120px); }
}

@keyframes ac-tape-draw {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes ac-rise {
	from { opacity: 0; translate: 0 14px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes ac-rise-solid {
	from { translate: 0 18px; }
	to { translate: 0 0; }
}

@keyframes ac-swing-in {
	from { transform: translateX(28px) rotateY(-16deg); }
	to { transform: none; }
}

@keyframes ac-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.ac-ft .ac-ft__btn,
	.ac-tp__btn.ac-tp__btn.ac-tp__btn,
	.ac-side__all,
	.ac-hub-tiles > .ac-hub-tile,
	.ac-guide-list .wp-block-post-template > li,
	.ac-link-card,
	.ac-related__item,
	.ac-more > a {
		transform: none !important;
		transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
	}

	.wp-element-button::after,
	.ac-ft .ac-ft__btn::after,
	.ac-tp__btn.ac-tp__btn.ac-tp__btn::after,
	.ac-side__all::after {
		display: none;
	}

	.ac-hub-tiles > .ac-hub-tile::before,
	.ac-guide-list .wp-block-post-template > li::before,
	.ac-link-card::before,
	.ac-related__item::before,
	.ac-more > a::before {
		animation: none !important;
	}

	.ac-guide-list .wp-block-post-template > li:hover .wp-block-post-featured-image img,
	.ac-related__item:hover .ac-related__thumb img,
	.ac-phero__inner:hover .wp-block-post-featured-image img {
		transform: none;
	}

	.ac-phero .wp-block-post-featured-image img {
		transform: none;
		transition: none;
	}

	.ac-hub-tiles > .ac-hub-tile:active,
	.ac-guide-list .wp-block-post-template > li:active,
	.ac-link-card:active,
	.ac-related__item:active,
	.ac-more > a:active {
		scale: none;
	}

	.ac-more:hover::after,
	.ac-link-card:hover h3::after,
	.ac-topics__hub:hover::after,
	.ac-side__tools li a:hover .ac-side__tool-name::after {
		transform: none;
	}

	.ac-more--back:hover::after {
		transform: scaleX(-1);
	}

	.ac-totop,
	.ac-totop__icon {
		transition: none !important;
	}

	.ac-totop,
	.ac-totop.is-shown:hover,
	.ac-totop.is-shown:active {
		transform: none;
	}
}

/* Printing: everything visible and still. */
/* In-body photos (theme 1.12.4): three per guide, each under the section it shows. Full column width, the hero
   photo's 10px corners, and overflow clipped so the reveal's slight zoom stays inside the frame. */
.entry-content > figure.wp-block-image.ac-photo {
	margin-block: 2rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
	box-shadow: 0 1px 2px rgba(3, 10, 40, 0.08), 0 14px 30px -20px rgba(3, 10, 40, 0.5);
}

.entry-content > figure.wp-block-image.ac-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media print {
	.ac-rv {
		opacity: 1 !important;
		translate: none !important;
	}

	.ac-totop,
	.ac-side,
	.ac-toc-m {
		display: none !important;
	}

	.ac-phero {
		background: none !important;
		color: #000 !important;
		padding: 0 0 1rem !important;
	}

	.ac-phero::before,
	.ac-phero::after {
		display: none !important;
	}

	.ac-phero .ac-phero__title,
	.ac-pmeta a {
		color: #000 !important;
	}
}

/* Search results (1.18.0): the count line in the header, and the help when nothing matches (templates/search.html,
   apartmentcats_block_search_help): the closest guides as cards, the topics, then the measuring tool. */
.ac-phero .ac-search-count {
	margin-top: var(--wp--preset--spacing--10);
	color: var(--ac-ph-ink-2);
}

.ac-search-empty {
	display: grid;
	gap: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.ac-search-empty > * {
	margin: 0;
}

.ac-search-empty h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.ac-search-empty__tip {
	color: var(--wp--preset--color--ink-2);
	font-size: 1.0625rem;
}

.ac-search-near ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-search-near a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-sizing: border-box;
	height: 100%;
	padding: 1rem 1.125rem 1.125rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.ac-search-near a:hover {
	border-color: var(--ac-card-edge);
	box-shadow: var(--ac-card-shadow-up);
	transform: translateY(-2px);
}

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

.ac-search-near__label {
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ac-search-near__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.ac-search-near a:hover .ac-search-near__title {
	color: var(--wp--preset--color--accent);
}

.ac-search-near__note {
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.ac-search-topics .ac-404-hubs ul {
	margin-top: 0;
}

.ac-search-tool {
	padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--accent-tint);
}

.ac-search-tool h2 {
	margin-top: 0;
}

.ac-search-tool p {
	max-width: 40em;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ac-search-tool p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ac-search-near a {
		transition: none;
	}

	.ac-search-near a:hover {
		transform: none;
	}
}

/* ==================================================================== 7. share buttons (theme 1.21.0)
 * Plain links and two buttons (functions.php apartmentcats_block_share, share.js): a row of keys like the tools'
 * (44px, the site's line and focus ring), icons from the same Phosphor set. In the blue page header the row uses the
 * header's own ink and line, like the Researched, not tested badge, and shows icons only; on phones it folds into one
 * Share button so the title area stays clear. */
.ac-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
}

.ac-share__label {
	margin: 0;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

.ac-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-share__list > li {
	margin: 0;
}

.ac-share__list > li[hidden] {
	display: none;
}

.ac-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 0 var(--wp--preset--color--line);
	transition: transform 180ms var(--ac-ease-out), box-shadow 180ms var(--ac-ease-out), border-color 160ms, color 160ms;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	.ac-share__btn:hover {
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
		transform: translateY(-1px);
	}
}

.ac-share__btn:active {
	box-shadow: none;
	transform: translateY(2px);
}

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

.ac-share__icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.ac-share__done {
	display: none;
}

.ac-share__btn.is-done {
	border-color: var(--wp--preset--color--tip-ink);
	color: var(--wp--preset--color--tip-ink);
}

.ac-share__btn.is-done .ac-share__icon:not(.ac-share__done) {
	display: none;
}

.ac-share__btn.is-done .ac-share__done {
	display: block;
}

.ac-share__status {
	flex-basis: 100%;
	color: var(--wp--preset--color--tip-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

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

.ac-share__toggle {
	display: none;
}

/* After a guide and under a tool: a quiet panel on the page. */
.ac-share--end,
.ac-share--tool {
	margin-block: var(--wp--preset--spacing--50);
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container, 10px);
	background: var(--wp--preset--color--surface);
}

.entry-content .ac-tool-wrap .ac-share--tool {
	/* the block gap on both sides (1.23.5): it was 1rem above and 0 below, so it sat on the What to buy block */
	margin-block: var(--ac-gap-block);
	box-shadow: var(--ac-tool-shadow);
}

/* Beside a printable's download buttons, centered with them. */
.ac-share--printable {
	justify-content: center;
}

/* In the blue page header: icons only, in the header's ink. */
.ac-share--top {
	margin-top: 0.85rem;
}

.ac-share--top .ac-share__label {
	display: none;
}

.ac-share--top .ac-share__btn,
.ac-share--top .ac-share__toggle {
	border-color: var(--ac-ph-line, rgba(255, 255, 255, 0.35));
	background: rgba(255, 255, 255, 0.06);
	color: var(--ac-ph-ink, #fff);
	box-shadow: none;
}

.ac-share--top .ac-share__btn {
	width: 44px;
	padding: 0;
}

.ac-share--top .ac-share__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (hover: hover) {
	.ac-share--top .ac-share__btn:hover,
	.ac-share--top .ac-share__toggle:hover {
		border-color: var(--ac-ph-ink, #fff);
		background: rgba(255, 255, 255, 0.16);
		color: var(--ac-ph-ink, #fff);
	}
}

.ac-share--top .ac-share__btn:focus-visible,
.ac-share--top .ac-share__toggle:focus-visible {
	outline-color: var(--ac-ph-ink, #fff);
}

.ac-share--top .ac-share__status {
	color: var(--ac-ph-ink, #fff);
}

/* Phones: one Share button in the header; it opens the device's share menu, or folds the row out. */
@media (max-width: 639.98px) {
	.ac-js .ac-share--top .ac-share__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-height: 44px;
		padding: 0 0.9rem;
		border: 1px solid;
		border-radius: 8px;
		font: inherit;
		font-size: 0.9375rem;
		font-weight: 600;
		cursor: pointer;
	}

	.ac-js .ac-share--top .ac-share__list {
		display: none;
		flex-basis: 100%;
	}

	.ac-js .ac-share--top.is-open .ac-share__list {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-share__btn,
	.ac-share__btn:hover,
	.ac-share__btn:active {
		transform: none;
		transition: none;
	}
}

/* ---- "What's the problem?" chooser (theme 1.22.0): parts/problem-chooser.html on the home page, the 404 page and
   a search with no results. The buttons and panels are the situation chooser above; this only spaces the block. */

.ac-problems {
	margin-block: var(--wp--preset--spacing--60);
}

.ac-problems > .ac-peyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
	/* the eyebrow's own color is made for the blue page header; on the 404 and search pages it sits on paper */
	color: var(--wp--preset--color--accent);
}

.ac-problems > h2 {
	margin-top: 0;
}

.ac-search-empty .ac-problems {
	margin-block: 0;
}

/* The home page band (1.23.2; Bader, 22 Oct: "a background distinguished from the previous section, like a light
   blue"): the floor-plan blue tint edge to edge, a faint blue hairline above and below, the chooser buttons and
   panels still on their own surface. accent-tint is #E8EEFF in light and #1C2747 in dark (tokens.css). The 404
   and empty-search copies keep the page color. */
.ac-home-problems {
	background-color: var(--wp--preset--color--accent-tint);
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent);
}

.ac-home-problems .ac-problems {
	margin-block: 0;
}

/* ---- Spacing scale (1.23.5; Bader, 22 Oct: "consistency in the space between every section"). The gaps come from
   tokens.css: --ac-gap-block between boxed blocks, --ac-gap-card between cards, --ac-gap-section for home bands.
   A boxed block keeps one block gap from whatever sits above and below it (a heading keeps its own, tighter
   spacing to the block it introduces), so a share row can no longer sit on the What to buy block (it touched on
   every tool page) and a disclosure or chooser no longer sits 16px under a paragraph. */

:is(.entry-content, .wp-block-post-content, .ac-tool-wrap) > :not(h1, h2, h3, h4) + :is(.ac-share, .ac-picks, .ac-takeaways, .ac-needs, .ac-callout, .ac-facts, .ac-chooser, .ac-start, .ac-disclosure, .ac-next, .wp-block-table, [data-ac-tool], .ac-printable-preview) {
	margin-block-start: var(--ac-gap-block);
}

:is(.entry-content, .wp-block-post-content, .ac-tool-wrap) > :is(.ac-share, .ac-picks, .ac-takeaways, .ac-needs, .ac-callout, .ac-facts, .ac-chooser, .ac-start, .ac-disclosure, .ac-next, .wp-block-table, [data-ac-tool], .ac-printable-preview) + :not(h2, h3) {
	margin-block-start: var(--ac-gap-block);
}

/* Cards listed outside a tool page (the new cat checklist, Our picks) stacked with no gap at all. */
.ac-picks--static {
	display: grid;
	gap: var(--ac-gap-card);
}

:is(.entry-content, .wp-block-post-content) .ac-picks--static > .ac-fit {
	margin-block: 0;
}

/* Every home band gets the same padding; the chooser band was 48px above and 32px below. */
.ac-home-problems {
	padding-block: var(--ac-gap-section) !important;
}

/* ==================================================================== Design audit (theme 1.24.0)
   Bader, 24 Oct 2026: "do a deep audit in every aspect of the design: layout, spacing, UX, visibility,
   responsiveness, aesthetics". Each rule names its finding; measurements and before and after screenshots are in
   08-site-design/audits/DESIGN-AUDIT-20261024.md. */

/* D1. One side gutter. The header, footer and the measuring band sat 16px from the screen edge, every other home
   band 24px, and the hub and guide pages used --ac-gutter (16 to 24px), so on a phone the logo, the band headings
   and the footer links did not line up. WordPress's root padding (defined on body) now is --ac-gutter too. */
html body {
	--wp--style--root--padding-left: var(--ac-gutter);
	--wp--style--root--padding-right: var(--ac-gutter);
}

.entry-content > .alignfull:is(.ac-hero, .ac-band, .ac-measure-band) {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* D2. Section rhythm. theme.json asks for 48px above an H2 and 32px above an H3, but WordPress's 24px block gap
   outranked it, so a new section started exactly as far below the text as the next paragraph does. */
:is(.entry-content, .wp-block-post-content, .ac-tool-wrap) > :not(.ac-peyebrow) + h2 {
	margin-block-start: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
}

:is(.entry-content, .wp-block-post-content, .ac-tool-wrap) > :not(h2, .ac-peyebrow) + h3 {
	margin-block-start: clamp(1.75rem, 1.6rem + 0.5vw, 2rem);
}

/* D3. Drawings and spec cards keep the block gap too: the floor-plan figures carry an inline margin of 0 and sat
   on the paragraph above them. */
:is(.entry-content, .wp-block-post-content) > :not(h1, h2, h3, h4) + :is(figure.ac-diagram, .ac-spec, .ac-fit) {
	margin-block-start: var(--ac-gap-block) !important;
}

:is(.entry-content, .wp-block-post-content) > :is(figure.ac-diagram, .ac-spec, .ac-fit) + :not(h2, h3) {
	margin-block-start: var(--ac-gap-block);
}

/* D4. WordPress's own skip link is still injected by script next to the theme's, so a keyboard user met "Skip to
   content" twice. The theme's link (functions.php) stays. */
a.skip-link.screen-reader-text {
	display: none !important;
}

/* D5. Byline facts carry their own icon instead of a dot in front, so a wrapped row no longer starts with a stray
   dot on a phone. Same clock and calendar as the guide cards (functions.php adds the modifiers). */
.ac-pmeta__item::before {
	display: none;
}

.ac-pmeta__item[class*="ac-pmeta__item--"] {
	gap: 0.4rem;
}

.ac-pmeta__item[class*="ac-pmeta__item--"]::before {
	display: block;
	flex: none;
	width: 1em;
	height: 1em;
	border-radius: 0;
	background: currentColor;
	opacity: 0.85;
	-webkit-mask: var(--ac-icon) center / contain no-repeat;
	mask: var(--ac-icon) center / contain no-repeat;
}

.ac-pmeta__item--date {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.2' y='3.2' width='11.6' height='10.6' rx='1.6'/%3E%3Cpath d='M2.2 6.6h11.6M5.4 1.8v2.6M10.6 1.8v2.6'/%3E%3C/svg%3E");
}

.ac-pmeta__item--time {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5'/%3E%3C/svg%3E");
}

.ac-pmeta__item--specs {
	--ac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1.6' y='5' width='12.8' height='6' rx='1'/%3E%3Cpath d='M4.4 5v2.4M7 5v1.6M9.6 5v2.4M12.2 5v1.6'/%3E%3C/svg%3E");
}

/* D6. Tap areas of 44px without changing how they look: the research badges, the price disclaimer toggle, the
   checklist rows on Start here and the measuring tool's "How to measure your cat" (21 to 32px tall before). */
.ac-pmeta .ac-pmeta__badge,
.ac-side__badge,
.ac-ft .ac-ft__badge,
.entry-content .ac-price-details summary {
	position: relative;
}

.ac-pmeta .ac-pmeta__badge::after,
.ac-side__badge::after,
.ac-ft .ac-ft__badge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	right: -2px;
	height: 44px;
	transform: translateY(-50%);
}

.entry-content .ac-price-details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -8px;
	right: -8px;
	height: 44px;
	transform: translateY(-50%);
}

.ac-mt__how summary {
	min-height: 44px;
}

.ac-checklist li {
	position: relative;
}

.ac-checklist label::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* A link inside a checklist line stays clickable above the row's click area. */
.ac-checklist label a {
	position: relative;
	z-index: 1;
}

/* D7. Card focus rings show for the keyboard only. A card lit its ring on :focus-within, so a mouse click on a
   guide or topic card drew a blue frame around it until the next click. */
.ac-guide-list .wp-block-post-template > li:focus-within:not(:has(:focus-visible)),
.ac-hub-tile:focus-within:not(:has(:focus-visible)) {
	outline: none;
}

/* D8. Meta text at the spec's 15px floor: the sidebar bio and the related guide summaries were 14px, the
   measuring tool's "where the start value comes from" line 13px. */
.ac-side__bio,
.ac-related__summary,
.ac-box-tool .ac-mt__typical {
	font-size: 0.9375rem;
}

/* D9. Line length: the chooser intro on the home page ran 142 characters across the wide band, the measuring tool
   notes up to 181. Prose keeps to about 70 characters wherever it sits: 32em, since an average Atkinson letter is
   0.455em wide (a "ch", the width of a zero, is about 0.65em, so 68ch let 97 characters through, 1.24.1). */
.ac-problems > p,
.ac-box-tool :is(.ac-mt__typical, .ac-mt__how p, .ac-box-tool__source, .ac-box-tool__verdict, .ac-box-tool__error, .ac-mt__extra) {
	max-width: 32em;
}

.ac-mt__how {
	font-size: 0.9375rem;
}

/* The author box at the foot of a guide and the notes under a tool's answer ran 103 to 129 characters (1.24.4). */
.ac-authorbox__bio,
.ac-tp .ac-tp__sub {
	max-width: 32em;
}

/* D21. A Core tool starts as one line ("This tool runs on JavaScript...") that its script replaces with the whole
   tool; on a slow load that grew the box by hundreds of pixels on screen and pushed the page down (layout shift up
   to 0.34 at 1024px). The box keeps a tool's height until the script has built it (1.24.4). */
.ac-js [data-ac-tool]:has(> p:only-child) {
	min-height: 40rem;
}

/* The home hero's lede ran the full width on a tablet (about 80 characters at 20px). */
.ac-hero__copy > p.has-large-font-size {
	max-width: 30em;
}

/* D10. The footer promise: the badge and its sentence wrapped as one line of mixed sizes, leaving "its source." on
   its own under the badge on a phone. */
.ac-ft__promise {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.ac-ft .ac-ft__promise .ac-ft__badge {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin-right: 0;
	font-size: 0.875rem;
}

/* D11. Form fields stand out from the page: the contact form's fields had the page color inside them. */
.entry-content form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	background-color: var(--wp--preset--color--surface);
}

/* D12. Stacked tables on phones: a long word (isodihydronepetalactone) ran out of its card, and short row labels
   kept 42% of the width while the values wrapped into five lines. */
@media (max-width: 781.98px) {
	.entry-content table.ac-stack td,
	.entry-content table.ac-stack th {
		overflow-wrap: anywhere;
	}

	.entry-content .ac-facts table.ac-stack tbody tr > [data-label]:not(:first-child) {
		grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	}
}

/* D13. Phones: the topic tiles and guide cards become rows, a square picture beside the title. Each card was a
   full-width photo plus text (the home page measured 11,100px and the litter hub 13,100px on a 390px phone), so a
   reader scrolled two screens to compare three guides. The first topic tile keeps a wide picture. */
@media (max-width: 599.98px) {
	.ac-hub-tiles > .ac-hub-tile:not(:first-child) {
		display: grid !important;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		align-items: start;
		gap: 0.3rem 1rem !important;
	}

	.ac-hub-tiles > .ac-hub-tile:not(:first-child) > * {
		margin: 0 !important;
	}

	.ac-hub-tiles > .ac-hub-tile:not(:first-child) > .wp-block-image {
		grid-row: span 2;
	}

	.ac-hub-tiles > .ac-hub-tile:not(:first-child) > .wp-block-image img {
		aspect-ratio: 1 !important;
	}

	.ac-hub-tiles > .ac-hub-tile:first-child > .wp-block-image img {
		aspect-ratio: 16 / 10 !important;
	}

	.ac-guide-list .wp-block-post-template > li {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		align-content: start;
		column-gap: 0.9rem;
		padding: 1rem;
	}

	.ac-guide-list .wp-block-post-template > li > * {
		grid-column: 2;
		padding-inline: 0;
	}

	.ac-guide-list .wp-block-post-template > li > .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: span 2;
		align-self: start;
		margin: 0;
		aspect-ratio: 1;
		border-radius: 6px;
	}

	.ac-guide-list .wp-block-post-template > li > .ac-card-topic,
	.ac-guide-list .wp-block-post-template > li > .wp-block-post-featured-image + .wp-block-post-title {
		margin-top: 0;
	}

	.ac-guide-list .wp-block-post-template > li > :is(.wp-block-post-excerpt, .ac-card-facts) {
		grid-column: 1 / -1;
	}

	.ac-guide-list .wp-block-post-template > li > .wp-block-post-excerpt {
		margin-top: 0.75rem;
	}
}

/* D14. Bar dropdowns and the keyboard (header.js). A hub's dropdown still shows while its link has focus, but Tab
   now goes from hub to hub (it walked through 44 dropdown links before reaching the page), Down opens the list,
   and Escape closes it, also while the pointer rests on it (WCAG 1.4.13). */
.ac-bar__item.is-shut > .ac-bar__drop {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(6px) !important;
	transition: none !important;
}

/* D15. Back to top steps aside while a field or a tool control is under it, or while a field has focus (ui.js):
   on a phone it covered the stepper arrows on the right edge of every tool field. */
.ac-totop.is-shown.is-tucked {
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.9);
	transition: opacity 200ms ease, transform 260ms var(--ac-ease-out), visibility 0s linear 260ms;
}

/* D17. The measuring tool's error line now sits right under its fields (measure-tool.html), not under the drawing
   500px further down a phone, and the drawing and answer fade while a field is wrong, since they still show the last
   good value. */
.ac-mt__panel:has(.ac-box-tool__input[aria-invalid="true"]) :is(.ac-box-tool__plan, .ac-box-tool__result, .ac-box-tool__verdict) {
	opacity: 0.35;
	transition: opacity 200ms ease;
}

.ac-box-tool__fields + .ac-box-tool__error {
	margin-top: 0.5rem !important;
}

/* D18. The search button in the 404 and search page headers kept Twenty Twenty-Five's 50px pill corners beside an
   8px field; the system's controls are 8px. The field also gets a visible hint (templates, "Search the guides"). */
.ac-phero .wp-block-search__button {
	border-radius: var(--wp--custom--radius--control);
}

.ac-phero .wp-block-search__input::placeholder {
	color: #5e6676;
	opacity: 1;
}

/* D19. Printing a page (1.24.2): the page header's blue was dropped for paper but its pale text stayed, so the
   breadcrumb and the dates printed at about 1.3:1; the header's buttons, the share rows and the cookie card printed
   too. */
@media print {
	.ac-phero {
		--ac-ph-ink: #15181e;
		--ac-ph-ink-2: #454c5a;
		--ac-ph-ink-3: #5e6676;
		--ac-ph-line: #d5dae3;
	}

	.ac-header__bar > :not(.ac-header__logo),
	.ac-share,
	#ac-cc-banner {
		display: none !important;
	}
}

/* D22. Width caps in em, not ch (1.24.5): the reading column (tokens.css), the footer statement (parts.css) and
   the two 62ch caps above (now 40em). A ch is the width of a zero in the font in use, so every ch cap changed width
   when Atkinson replaced its fallback, and text rewrapped on screen on a slow connection. */

/* D24. The 404 page (theme 1.25.0; Bader, 24 Oct: "upgrade this page, make it converting if someone doesn't find the
   page he searched for"). functions.php (apartmentcats/lost) fills it from the address that was not found: the
   closest live guides, the topic it was under, six tools, the guides readers start with, then every topic. The
   search box shows its label and starts from the same words. */
.ac-phero .wp-block-search__label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--ac-ph-ink);
	font-size: 0.9375rem;
	font-weight: 650;
}

.ac-lost {
	display: grid;
	gap: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
	margin-bottom: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
}

.ac-lost > *,
.ac-lost h2,
.ac-404-hubs h2 {
	margin: 0;
}

.ac-lost h2,
.ac-404-hubs h2 {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.ac-404-hubs h2 + ul {
	margin-top: 0;
}

.ac-lost__soon {
	max-width: 40em;
	padding: 0.9rem 1.1rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.ac-lost__hub a {
	position: relative;
	display: grid;
	gap: 0.2rem;
	padding: 1.1rem 3.25rem 1.15rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ac-lost__hub a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.25rem;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--ac-arrow) center / contain no-repeat;
	mask: var(--ac-arrow) center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform 200ms var(--ac-ease-out);
}

.ac-lost__hub a:hover::after {
	transform: translate(4px, -50%);
}

.ac-lost__hub-kicker {
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ac-lost__hub-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

.ac-lost__hub-note,
.ac-lost__intro {
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
}

.ac-lost__intro {
	max-width: 32em;
	margin: 0 0 1rem !important;
	font-size: 1.0625rem;
}

.ac-lost-tools {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-lost-tools a {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	box-sizing: border-box;
	height: 100%;
	min-height: 44px;
	padding: 0.9rem 1rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

@media (hover: hover) {
	.ac-lost-tools a:hover {
		border-color: var(--wp--preset--color--accent);
		box-shadow: var(--ac-card-shadow-up);
		transform: translateY(-2px);
	}
}

.ac-lost-tools__name {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.ac-lost-tools__note {
	color: var(--wp--preset--color--ink-2);
	font-size: 0.9375rem;
	line-height: 1.4;
}

@media (max-width: 599.98px) {
	.ac-lost-tools {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.ac-lost-tools a {
		padding: 0.8rem 0.85rem 0.9rem;
	}

	.ac-lost-tools__name {
		font-size: 1rem;
	}
}

/* D25. Box colors (theme 1.25.0; Bader, 24 Oct: "find better colors instead of white background for the boxes in Key
   takeaways, Will it fit, and the comparison tables. It needs to be attractive to readers' eyes instead of simple
   white"). Every box type gets its own ground from the blueprint palette, so it reads at a glance: Key takeaways the
   light blue of a summary, Will it fit a blue-gray drafting panel under a blueprint title bar with ruled rows and the
   product photo on white, spec tables a blueprint header and striped rows, and on phones each product card opens
   with a light blue name band, with a gray gap before the next product. Callout colors keep their meanings. Text on every
   tint stays at WCAG AA (ink-3, the lightest text, measures 5.0:1 on the panel). */
:root {
	--ac-panel: #edf1fa;
	--ac-panel-line: rgba(31, 69, 198, 0.14);
	--ac-stripe: #f4f6fb;
	--ac-fit-pad: 1.35rem;
}

:root[data-theme="dark"] {
	--ac-panel: #1d2433;
	--ac-panel-line: rgba(143, 168, 255, 0.16);
	--ac-stripe: #1c212a;
}

/* Key takeaways: the summary, in the light blue; What you need: the drafting panel. */
.entry-content .ac-needs.ac-takeaways {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent);
	border-left-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-tint);
	box-shadow: none;
}

.entry-content .ac-needs:not(.ac-takeaways) {
	border-color: var(--ac-panel-line);
	border-left-color: var(--wp--preset--color--accent);
	background: var(--ac-panel);
	box-shadow: none;
}

/* Will it fit: a drafting panel with a blueprint title bar. */
.entry-content .ac-fit {
	padding: 0 var(--ac-fit-pad) 1.15rem;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 20%, 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(--ac-panel);
}

.entry-content .ac-fit > h3:first-child {
	margin: 0 calc(-1 * var(--ac-fit-pad)) !important;
	padding: 0.8rem var(--ac-fit-pad) 0.85rem;
	border-radius: calc(var(--wp--custom--radius--container) - 1px) calc(var(--wp--custom--radius--container) - 1px) 0 0;
	background-color: var(--ac-bp-ground);
	background-image:
		linear-gradient(var(--ac-bp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ac-bp-line) 1px, transparent 1px);
	background-size: 24px 24px;
	color: #ffffff;
	line-height: 1.35;
}

.entry-content .ac-fit > h3:first-child a {
	color: #ffffff;
}

/* A card that does not open with its title keeps its top padding. */
.entry-content .ac-fit:not(:has(> h3:first-child)) {
	padding-top: 1.15rem;
}

.entry-content .ac-fit dl {
	gap: 0;
}

.entry-content .ac-fit dl > dt {
	padding-right: 1.25rem;
}

.entry-content .ac-fit dl > :is(dt, dd) {
	margin: 0;
	padding-block: 0.55rem;
	border-top: 1px solid var(--ac-panel-line);
}

.entry-content .ac-fit dl > :is(dt, dd):nth-child(-n + 2) {
	padding-top: 0.15rem;
	border-top: 0;
}

.entry-content .ac-fit-foot {
	border-top-color: var(--ac-panel-line);
}

.entry-content .ac-fit.has-img > .ac-fit-img {
	box-shadow: 0 1px 2px rgba(20, 48, 127, 0.1);
}

/* Phones under 480px show each label over its value: one rule above each label, none between them. */
@media (max-width: 479.98px) {
	:root {
		--ac-fit-pad: 1.1rem;
	}

	.entry-content .ac-fit dl > dd {
		margin-bottom: 0;
		padding-top: 0.1rem;
		border-top: 0;
	}

	.entry-content .ac-fit dl > dt:not(:first-child) {
		padding-top: 0.6rem;
	}

	.entry-content .ac-fit dl > dt {
		padding-bottom: 0;
	}
}

/* Spec tables: a blueprint header, striped rows, a rule beside the product column that stays put. */
@media (min-width: 700px) {
	.entry-content .ac-spec thead th,
	.entry-content .ac-spec thead th:first-child {
		background: var(--ac-bp-ground);
		color: #ffffff;
	}

	.entry-content .ac-spec tbody tr:nth-child(even) > * {
		background: var(--ac-stripe);
	}

	.entry-content .ac-spec tbody tr:hover > * {
		background: color-mix(in srgb, var(--wp--preset--color--accent-tint) 60%, var(--wp--preset--color--surface));
	}

	.entry-content .ac-spec tbody :is(th, td):first-child {
		box-shadow: inset -1px 0 0 var(--wp--preset--color--line);
	}

	/* Evidence tables: a lighter header than product specs, and the same stripes. */
	.ac-facts thead th {
		background: var(--wp--preset--color--accent-tint);
		color: var(--wp--preset--color--ink);
	}

	.ac-facts tbody tr:nth-child(even) {
		background: var(--ac-stripe);
	}
}

/* Phones: every table row is a card that opens with a light blue band holding its name (the product, linked to
   Amazon in spec tables), and a gray gap sits between one product and the next. */
@media (max-width: 699.98px) {
	.entry-content table.ac-stack tbody tr {
		padding: 0 1rem 0.8rem;
	}

	.entry-content table.ac-stack tbody tr + tr {
		border-top: 6px solid var(--ac-panel);
	}

	.entry-content table.ac-stack tbody tr > :first-child {
		margin: 0 -1rem 0.5rem;
		padding: 0.7rem 1rem;
		border-bottom: 1px solid var(--ac-panel-line);
		background: var(--wp--preset--color--accent-tint);
	}

	.entry-content .ac-facts table.ac-stack tbody tr + tr td {
		border-top: 0;
	}

	/* With no caption above it, the first band meets the box's rounded top corners. */
	.entry-content table.ac-stack:not(:has(caption)) tbody tr:first-child > :first-child {
		border-radius: calc(var(--wp--custom--radius--container) - 1px) calc(var(--wp--custom--radius--container) - 1px) 0 0;
	}
}

/* D16. Wide drawings and tables that scroll sideways take keyboard focus (ui.js); the ring shows where they are. */
[data-ac-scroll]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ==================================================================== Which-to-choose picks (theme 1.26.0)
   2 Nov 2026, brought over from urbanhydrospace's picks boxes. Apartment Cats Core 1.19.0 (inc/pick-photos.php) turns
   each line of the which-to-choose list under the top pick's Will it fit? card into its own card at render time:
   Amazon's photo on a white tile of fixed size (Amazon's photos are shot on white, so the tile stays white in dark
   mode too, and nothing moves when the lazy photo arrives), the situation as a pill in sentence case (an uppercase
   label once turned "pH" into "PH" on the other site), the product name in the heading font, and the live price and
   one button held at the foot. Phones: a small photo beside the pill, the line and a full-width button under them. */
.entry-content ul.ac-qpicks {
	display: grid;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.entry-content ul.ac-qpicks > li.ac-qpick {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "body" "foot";
	gap: 0.85rem 1.25rem;
	align-items: start;
	margin: 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
}

.entry-content ul.ac-qpicks > li.ac-qpick.is-plain {
	grid-template-areas: "body";
}

.entry-content ul.ac-qpicks > li.ac-qpick.has-img {
	grid-template-columns: 6.5rem minmax(0, 1fr);
	grid-template-areas: "img body" "img foot";
}

.entry-content .ac-qpick__img {
	grid-area: img;
	display: block;
	box-sizing: border-box;
	width: 6.5rem;
	height: 6.5rem;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 48, 127, 0.1);
}

.entry-content .ac-qpick__img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.entry-content .ac-qpick__body {
	grid-area: body;
	display: grid;
	gap: 0.45rem;
	justify-items: start;
	min-width: 0;
}

.entry-content .ac-qpick__label {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

.entry-content .ac-qpick__text {
	line-height: 1.5;
}

.entry-content .ac-qpick__text a[href*="amazon.com/dp/"] {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.entry-content .ac-qpick__foot {
	grid-area: foot;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.6rem 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* The price over its time and Details, so price and button share one line on wide screens. */
.entry-content .ac-qpick__foot .ac-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.75rem;
	line-height: 1.45;
}

.entry-content .ac-qpick__foot .ac-price strong {
	flex-basis: 100%;
}

/* A step smaller than the top pick's button, which stays the page's main one. */
.entry-content .ac-qpick__foot .ac-buy {
	grid-column: 2;
	padding: 0.65rem 1.1rem;
	font-size: 1rem;
}

/* Theme 1.27.1. No price to show (Amazon's API refuses some products, such as the Cat Mate C500 with
   "ItemNotAccessible", and then gives neither photo nor price): on wide screens the button sits right under the line,
   with no empty foot row beside it (Bader's screenshot, 2 Nov). */
@media (min-width: 600px) {
	.entry-content .ac-qpick__foot:not(:has(.ac-price)) {
		grid-template-columns: auto;
		justify-content: start;
		padding-top: 0;
		border-top: 0;
	}

	.entry-content .ac-qpick__foot:not(:has(.ac-price)) .ac-buy {
		grid-column: 1;
	}
}

@media (max-width: 599.98px) {
	.entry-content ul.ac-qpicks > li.ac-qpick {
		padding: 0.9rem;
	}

	.entry-content ul.ac-qpicks > li.ac-qpick.has-img {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		grid-template-areas: "img text" "foot foot";
		gap: 0.75rem 0.85rem;
	}

	.entry-content ul.ac-qpicks > li.ac-qpick.has-img.has-label {
		grid-template-areas: "img label" "text text" "foot foot";
	}

	.entry-content .ac-qpick.has-img > .ac-qpick__body {
		display: contents;
	}

	.entry-content .ac-qpick.has-img .ac-qpick__label {
		grid-area: label;
		align-self: center;
	}

	.entry-content .ac-qpick.has-img .ac-qpick__text {
		grid-area: text;
		align-self: center;
	}

	.entry-content .ac-qpick__img {
		width: 4.5rem;
		height: 4.5rem;
		padding: 0.3rem;
	}

	.entry-content .ac-qpick__foot {
		grid-template-columns: minmax(0, 1fr);
	}

	.entry-content .ac-qpick__foot .ac-buy {
		grid-column: 1;
	}

	/* Full-width buttons on phones, in the pick cards and the Will it fit? cards alike. */
	.entry-content .ac-qpick__foot .ac-buy,
	.entry-content .ac-fit-foot .ac-buy {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		text-align: center;
	}
}

/* ==================================================================== Phone buying help (theme 1.27.0)
   2 Nov 2026, brought over from urbanhydrospace (1 Nov). Script: ui.js section 9; box: scripts/glance_box.py with the
   price, its time and the photo added by Core 1.20.0. Buttons keep the site's one buy color, the blue element button.
   Labels stay in sentence case. */

/* Picks at a glance, under the first paragraph of a product guide that does not open with its picks. */
.entry-content .ac-glance {
	box-sizing: border-box;
	padding: 1rem 1.15rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--ac-card-shadow);
	scroll-margin-top: 96px;
}

:is(.entry-content, .wp-block-post-content) > :not(h1, h2, h3, h4) + .ac-glance,
:is(.entry-content, .wp-block-post-content) > .ac-glance + :not(h2, h3) {
	margin-block-start: var(--ac-gap-block);
}

.entry-content .ac-glance__title {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.entry-content .ac-glance__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-areas: "img role" "img name" "img price" "buy buy";
	gap: 0.1rem 0.85rem;
	align-items: center;
	margin: 0;
	padding: 0.8rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.entry-content .ac-glance__title + .ac-glance__row {
	border-top: 0;
	padding-top: 0.35rem;
}

.entry-content .ac-glance__row:not(:has(.ac-glance__img img)) {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "role role" "name name" "price buy";
}

.entry-content .ac-glance__img {
	grid-area: img;
	align-self: start;
	display: block;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	padding: 4px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.entry-content .ac-glance__img:empty {
	display: none;
}

.entry-content .ac-glance__img a,
.entry-content .ac-glance__img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.entry-content .ac-glance__role {
	grid-area: role;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
}

.entry-content .ac-glance__name {
	grid-area: name;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.entry-content .ac-glance__price {
	grid-area: price;
	margin-top: 0.3rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.entry-content .ac-glance__cta {
	grid-area: buy;
	margin-top: 0.55rem;
}

.entry-content .ac-glance .ac-glance__buy {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 1rem;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.entry-content .ac-glance__asof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (min-width: 700px) {
	.entry-content .ac-glance__row {
		grid-template-columns: 64px minmax(0, 1fr) auto auto;
		grid-template-areas: "img role price buy" "img name price buy";
		column-gap: 1rem;
	}

	.entry-content .ac-glance__row:not(:has(.ac-glance__img img)) {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "role price buy" "name price buy";
	}

	.entry-content .ac-glance__price,
	.entry-content .ac-glance__cta {
		margin-top: 0;
	}

	.entry-content .ac-glance .ac-glance__buy {
		width: auto;
	}
}

/* "Jump to the picks" in the guide's header line. */
.ac-pmeta .ac-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 36px;
	box-sizing: border-box;
	padding: 0.3rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ac-pmeta .ac-jump::after {
	content: "\2193";
}

.ac-pmeta .ac-jump:hover,
.ac-pmeta .ac-jump:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

/* Card buttons under phone table cards whose only Amazon link was the product name. */
.entry-content .ac-spec table td.ac-td-buy {
	display: none;
}

@media (max-width: 699.98px) {
	.entry-content table.ac-stack tbody tr > td.ac-td-buy {
		display: block;
		padding: 0.7rem 0 0.15rem;
		border-top: 0;
	}

	.entry-content table.ac-stack tbody tr > td.ac-td-buy::before {
		display: none;
	}

	.entry-content .ac-spec table td.ac-td-buy a.ac-card-buy {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		padding: 0.6rem 1rem;
		font-size: 0.9375rem;
	}
}

/* Buy bar (phones and tablets). */
.ac-buybar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 56;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	box-sizing: border-box;
	padding: 0.5rem max(12px, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 -10px 26px -14px rgba(20, 48, 127, 0.45);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.ac-buybar.is-on {
	transform: none;
	visibility: visible;
	transition: transform 0.28s ease, visibility 0s;
}

.ac-buybar__img {
	flex: none;
	display: block;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 3px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

.ac-buybar__text {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.ac-buybar__label,
.ac-buybar__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ac-buybar__label {
	color: var(--wp--preset--color--accent);
	font-size: 0.75rem;
	font-weight: 700;
}

/* The name may take two lines, so the price after it still shows. */
.ac-buybar__name {
	display: -webkit-box;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	white-space: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ac-buybar .ac-buybar__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.5rem 0.95rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

.ac-buybar__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 -0.35rem 0 -0.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--ink-3);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

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

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

/* Contents button on long guides (phones and tablets), and its lift while the bar shows. */
.ac-toc-fab {
	position: fixed;
	bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
	left: max(16px, env(safe-area-inset-left));
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 12px 24px -14px rgba(20, 48, 127, 0.5);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s, bottom 0.3s ease;
}

.ac-toc-fab svg {
	width: 18px;
	height: 18px;
}

.ac-toc-fab.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s, bottom 0.3s ease;
}

.ac-toc-fab.ac-lift {
	bottom: calc(max(18px, calc(env(safe-area-inset-bottom) + 12px)) + 64px);
}

details.ac-toc-m {
	scroll-margin-top: 96px;
}

@media (min-width: 1100px) {
	.ac-toc-fab {
		display: none;
	}
}

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

@media print {
	.ac-buybar,
	.ac-toc-fab,
	.ac-pmeta .ac-jump {
		display: none !important;
	}
}