/*!
 * PetMap Directory — the account page (`[petmap_account]`): the member's
 * header card, the grouped section navigation, and every section.
 *
 * Loaded only once the shortcode actually renders (see
 * Assets::enqueue_account_style(), called from Front\Shortcodes::render_account()).
 * Every colour reads a --pmd-* token emitted by Front\DesignSystem, the
 * same discipline reviews.css and directory.css follow. Tints and inks are
 * color-mix() blends of a status or brand token with a palette token (a
 * surface, or the text colour), so they follow the palette — dark mode
 * included — and keep WCAG AA contrast in both: an "ink" leans toward the
 * text colour, darker on a light palette and lighter on a dark one.
 *
 * Layout ("panel with a side menu"): `.pmd-acc` is a centred canvas that
 * paints --pmd-color-surface behind the --pmd-color-text it reads (see
 * PetMap\Tests\Unit\Front\DarkModeTokenPairingTest); inside it, a header
 * card, then the navigation and the active section. From 1024px the
 * navigation is a sticky sidebar beside the section; below that it is one
 * horizontally scrollable row of pills (account.js scrolls the current pill
 * into view). Sections are plain server-rendered links
 * (Account::nav_items()), not JavaScript tabs — each request renders
 * exactly one section's markup.
 *
 * Headings, labels, legends and form controls set their colour (and the
 * controls their background and font) from tokens explicitly rather than
 * inheriting `.pmd-acc`'s: themes paint those tags directly, which beats
 * inheritance — see PetMap\Tests\Unit\Front\InheritedColorGuardTest.
 * Heading sizes carry the component root, so a theme's `body.page h2`
 * cannot outrank them (ThemeSpecificityGuardTest).
 *
 * Site-level overrides, set on `.pmd-acc` or any ancestor:
 *   --pmd-acc-max-width   The canvas's widest size. Default: 1180px.
 *   --pmd-acc-sticky-top  How far below the viewport top the desktop
 *                         sidebar sticks (clear a fixed site header).
 *                         Default: the header clearance + 24px.
 *
 * @package PetMapDirectory
 */

.pmd-acc {
	--pmd-acc-gutter: var(--pmd-space-4);
	--pmd-acc-card: var(--pmd-color-surface-raised, var(--pmd-color-surface));
	--pmd-acc-ink: color-mix(in srgb, var(--pmd-color-primary) 60%, var(--pmd-color-text));
	--pmd-acc-muted-ink: color-mix(in srgb, var(--pmd-color-text-muted) 70%, var(--pmd-color-text));
	--pmd-acc-ring: var(--pmd-color-primary);

	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5);
	width: 100%;
	max-width: var(--pmd-acc-max-width, 1180px);
	margin-inline: auto;
	padding: var(--pmd-space-4) var(--pmd-acc-gutter) var(--pmd-space-7);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	line-height: var(--pmd-leading-normal);
	text-align: start;
	background: var(--pmd-color-surface);
}

@media (min-width: 768px) {
	.pmd-acc {
		--pmd-acc-gutter: var(--pmd-space-6);

		padding-block: var(--pmd-space-6) var(--pmd-space-8);
		border-radius: var(--pmd-radius-xl);
	}
}

/* ── Login prompt ─────────────────────────────────────────────── */

.pmd-acc-login {
	align-items: center;
	gap: var(--pmd-space-3);
	max-width: 560px;
	padding-block: var(--pmd-space-7);
	text-align: center;
}

.pmd-acc-login-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-block-end: var(--pmd-space-2);
	border-radius: var(--pmd-radius-full);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
}

.pmd-acc .pmd-acc-login-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-2xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
	text-wrap: balance;
}

.pmd-acc-login-text {
	margin: 0;
	color: var(--pmd-color-text-muted);
	text-wrap: pretty;
}

/* "Log in", and "Create an account" while registration is open. */
.pmd-acc-login-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pmd-space-3);
	margin-block-start: var(--pmd-space-3);
}

/* ── Buttons ──────────────────────────────────────────────────────
 * Three kinds: primary (the one action a block is for), secondary, and
 * danger. Every button is at least 44px tall; on a phone, form buttons
 * stretch to the row (see the forms block), elsewhere they hug their text.
 */

.pmd-acc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pmd-space-2);
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-5);
	border: 1px solid transparent;
	border-radius: var(--pmd-radius-pill);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	line-height: var(--pmd-leading-tight);
	text-align: center;
	text-decoration: none;
	text-wrap: balance;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition-property: background-color, border-color, color, transform;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc-btn:active {
	transform: scale(0.97);
}

.pmd-acc-btn:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 2px;
}

.pmd-acc-btn-icon {
	flex: none;
}

.pmd-acc-btn-primary,
a.pmd-acc-btn-primary:link,
a.pmd-acc-btn-primary:visited {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary);
}

.pmd-acc-btn-primary:hover,
.pmd-acc-btn-primary:focus-visible,
a.pmd-acc-btn-primary:hover,
a.pmd-acc-btn-primary:focus-visible {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary-hover);
}

.pmd-acc-btn-secondary,
a.pmd-acc-btn-secondary:link,
a.pmd-acc-btn-secondary:visited {
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	border-color: var(--pmd-color-border-strong);
}

.pmd-acc-btn-secondary:hover,
.pmd-acc-btn-secondary:focus-visible,
a.pmd-acc-btn-secondary:hover,
a.pmd-acc-btn-secondary:focus-visible {
	color: var(--pmd-acc-ink);
	background: var(--pmd-acc-card);
	border-color: var(--pmd-color-primary);
}

/*
 * The deep red: --pmd-color-danger itself carries white text at only
 * ~3.8:1, so the button darkens it (~5.7:1). --pmd-color-on-danger is not
 * a palette token; a site may define it, white otherwise.
 */
.pmd-acc-btn-danger {
	color: var(--pmd-color-on-danger, #fff);
	background: color-mix(in srgb, var(--pmd-color-danger) 78%, #000);
}

.pmd-acc-btn-danger:hover,
.pmd-acc-btn-danger:focus-visible {
	color: var(--pmd-color-on-danger, #fff);
	background: color-mix(in srgb, var(--pmd-color-danger) 64%, #000);
}

.pmd-acc-btn-danger:focus-visible {
	outline-color: var(--pmd-color-danger);
}

@media (prefers-reduced-motion: reduce) {
	.pmd-acc-btn {
		transition: none;
	}

	.pmd-acc-btn:active {
		transform: none;
	}
}

/* ── Header card ──────────────────────────────────────────────────
 * Phone: the identity, then the counts, then a full-width "Add a pet".
 * From 768px: identity, counts and the action on one row.
 */

.pmd-acc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-space-4);
	padding: var(--pmd-space-4);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-sm);
}

.pmd-acc-identity {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	gap: var(--pmd-space-3);
	min-width: 0;
}

.pmd-acc-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--pmd-radius-full);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pmd-color-primary) 18%, transparent);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-xl);
	font-weight: var(--pmd-weight-bold);
	line-height: 1;
}

.pmd-acc-identity-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pmd-acc .pmd-acc-greeting {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
	overflow-wrap: anywhere;
}

.pmd-acc .pmd-acc-header-since {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

/*
 * One row of equal tiles; it scrolls sideways only when add-ons add many.
 * The 3px padding, offset by the margin, leaves room for the focus ring
 * the scroll box would otherwise clip.
 */
.pmd-acc-stats {
	display: grid;
	flex: 1 1 100%;
	grid-auto-columns: minmax(56px, 1fr);
	grid-auto-flow: column;
	gap: var(--pmd-space-2);
	margin: -3px;
	padding: 3px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.pmd-acc-stats::-webkit-scrollbar {
	display: none;
}

.pmd-acc-stats li {
	margin: 0;
}

/* A tile: the value above its label. */
.pmd-acc-stat,
a.pmd-acc-stat:link,
a.pmd-acc-stat:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 52px;
	padding: var(--pmd-space-2) var(--pmd-space-1);
	border-radius: var(--pmd-radius-lg);
	color: var(--pmd-color-text);
	background: var(--pmd-color-surface-alt);
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

a.pmd-acc-stat:hover {
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
}

a.pmd-acc-stat:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 2px;
}

.pmd-acc-stat-value {
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.pmd-acc-stat-label {
	max-width: 100%;
	overflow: hidden;
	color: var(--pmd-acc-muted-ink);
	font-size: var(--pmd-text-xs);
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pmd-acc-header-cta {
	flex: 1 1 100%;
}

.pmd-acc-header-selector {
	flex: 1 1 100%;
	padding-block-start: var(--pmd-space-3);
	border-block-start: 1px solid var(--pmd-color-border);
}

@media (min-width: 768px) {
	.pmd-acc-header {
		flex-wrap: wrap;
		gap: var(--pmd-space-5);
		padding: var(--pmd-space-5) var(--pmd-space-6);
	}

	.pmd-acc-identity {
		flex: 1 1 auto;
		gap: var(--pmd-space-4);
	}

	.pmd-acc-avatar {
		width: 64px;
		height: 64px;
		font-size: var(--pmd-text-2xl);
	}

	.pmd-acc .pmd-acc-greeting {
		font-size: var(--pmd-text-2xl);
	}

	.pmd-acc-stats {
		flex: 0 1 auto;
		grid-auto-columns: minmax(84px, auto);
	}

	.pmd-acc-stat {
		min-height: 60px;
		padding: var(--pmd-space-2) var(--pmd-space-4);
	}

	.pmd-acc-stat-value {
		font-size: var(--pmd-text-xl);
	}

	.pmd-acc-header-cta {
		flex: 0 0 auto;
	}
}

/* ── Active-pet selector ("Browsing as: …") ─────────────────────
 * In the header card on every section once the visitor owns 2+ pets
 * (MULTI-MASCOTA.md Phase 3, T3).
 */

.pmd-acc-active-pet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--pmd-space-2);
	margin: 0;
}

.pmd-acc-active-pet .pmd-acc-active-pet-label {
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.pmd-acc-active-pet {
		display: flex;
		flex-wrap: wrap;
	}
}

.pmd-acc .pmd-acc-active-pet-label {
	width: auto;
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-acc .pmd-acc-active-pet-select {
	width: auto;
	max-width: 100%;
	min-height: 44px;
	padding: var(--pmd-space-2) var(--pmd-space-6) var(--pmd-space-2) var(--pmd-space-3);
	color: var(--pmd-color-text);
	background-color: var(--pmd-acc-card);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
}

/* ── Layout and section navigation ────────────────────────────────
 * Mobile-first: the nav is one scrolling row of pills bleeding to the
 * canvas edges (the half-visible last pill says there is more). From
 * 1024px: a sticky sidebar with group headings beside the section.
 */

.pmd-acc-layout {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5);
	min-width: 0;
}

.pmd-acc-nav {
	display: flex;
	gap: var(--pmd-space-2);
	margin-inline: calc(var(--pmd-acc-gutter) * -1);
	padding: var(--pmd-space-1) var(--pmd-acc-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--pmd-acc-gutter);
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.pmd-acc-nav::-webkit-scrollbar {
	display: none;
}

.pmd-acc-nav-group {
	display: flex;
	flex: none;
}

.pmd-acc-nav-heading {
	display: none;
}

.pmd-acc-nav ul {
	display: flex;
	gap: var(--pmd-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-acc-nav li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.pmd-acc-nav-link {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-2);
	min-height: 44px;
	padding: var(--pmd-space-2) var(--pmd-space-4);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-pill);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	line-height: var(--pmd-leading-tight);
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition-property: background-color, border-color, color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc-nav-icon {
	flex: none;
	color: var(--pmd-color-text-muted);
}

.pmd-acc-nav-link:hover {
	color: var(--pmd-color-text);
	border-color: var(--pmd-color-border-strong);
}

.pmd-acc-nav-link:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 2px;
}

.pmd-acc-nav-link.is-current {
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
	border-color: color-mix(in srgb, var(--pmd-color-primary) 35%, var(--pmd-color-border));
}

.pmd-acc-nav-link.is-current .pmd-acc-nav-icon {
	color: currentColor;
}

.pmd-acc-nav-count {
	min-width: 22px;
	padding: 2px var(--pmd-space-2);
	border-radius: var(--pmd-radius-pill);
	color: var(--pmd-color-text-muted);
	background: var(--pmd-color-surface);
	box-shadow: inset 0 0 0 1px var(--pmd-color-border);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-semibold);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	text-align: center;
}

.pmd-acc-nav-link.is-current .pmd-acc-nav-count {
	color: var(--pmd-acc-ink);
	background: var(--pmd-acc-card);
	box-shadow: none;
}

.pmd-acc-body {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5);
	min-width: 0;
}

@media (min-width: 1024px) {
	.pmd-acc-layout {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--pmd-space-7);
		align-items: start;
	}

	.pmd-acc-nav {
		position: sticky;
		top: var(--pmd-acc-sticky-top, calc(var(--pmd-header-clearance, 0px) + var(--pmd-space-5)));
		flex-direction: column;
		gap: var(--pmd-space-5);
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.pmd-acc-nav-group {
		flex-direction: column;
		gap: var(--pmd-space-1);
	}

	.pmd-acc-nav-heading {
		display: block;
		margin: 0;
		padding-inline: var(--pmd-space-3);
		color: var(--pmd-color-text-muted);
		font-size: var(--pmd-text-xs);
		font-weight: var(--pmd-weight-semibold);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.pmd-acc-nav ul {
		flex-direction: column;
		gap: 2px;
	}

	.pmd-acc-nav-link {
		gap: var(--pmd-space-3);
		padding: var(--pmd-space-2) var(--pmd-space-3);
		border-color: transparent;
		border-radius: var(--pmd-radius-md);
		background: transparent;
		white-space: normal;
	}

	.pmd-acc-nav-link:hover {
		border-color: transparent;
		background: color-mix(in srgb, var(--pmd-color-text) 5%, transparent);
	}

	.pmd-acc-nav-link.is-current {
		border-color: transparent;
		background: var(--pmd-color-primary-soft);
	}

	.pmd-acc-nav-count {
		margin-inline-start: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmd-acc-nav-link,
	.pmd-acc-stat {
		transition: none;
	}
}

/* ── Sections: headings, cards, pills ─────────────────────────────
 * One heading size per level everywhere: a section's <h2> (or its
 * `.pmd-acc-section-title`, as on the profile), then card titles. The heading rules carry the
 * component root, so a theme's `body.page h2` (0,1,2) cannot outrank
 * them (ThemeSpecificityGuardTest).
 */

.pmd-acc-pets,
.pmd-acc-reviews,
.pmd-acc-places,
.pmd-acc-claim,
.pmd-acc-privacy,
.pmd-acc-profile {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	min-width: 0;
}

.pmd-acc .pmd-acc-pets > h2,
.pmd-acc .pmd-acc-reviews > h2,
.pmd-acc .pmd-acc-places > h2,
.pmd-acc .pmd-acc-claim > h2,
.pmd-acc .pmd-acc-privacy > h2,
.pmd-acc .pmd-acc-section-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.pmd-acc .pmd-acc-pets > h2,
	.pmd-acc .pmd-acc-reviews > h2,
	.pmd-acc .pmd-acc-places > h2,
	.pmd-acc .pmd-acc-claim > h2,
	.pmd-acc .pmd-acc-privacy > h2,
	.pmd-acc .pmd-acc-section-title {
		font-size: var(--pmd-text-2xl);
	}
}

/* AccountOptions: a section's intro, under its heading. */
.pmd-acc .pmd-acc-section-intro {
	margin: calc(var(--pmd-space-2) * -1) 0 0;
	color: var(--pmd-color-text-muted);
	text-wrap: pretty;
}

.pmd-acc-card {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	min-width: 0;
	padding: var(--pmd-space-4);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-sm);
}

@media (min-width: 768px) {
	.pmd-acc-card {
		padding: var(--pmd-space-5);
	}
}

.pmd-acc .pmd-acc-card-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-acc .pmd-acc-card-desc,
.pmd-acc .pmd-acc-card-lead {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	text-wrap: pretty;
}

.pmd-acc .pmd-acc-card-lead {
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-md);
}

/* A card's icon tile, its title and description beside it. */
.pmd-acc-card-head {
	display: flex;
	align-items: flex-start;
	gap: var(--pmd-space-3);
}

.pmd-acc-card-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pmd-radius-lg);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
}

.pmd-acc-card-head-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pmd-acc-pill {
	display: inline-flex;
	flex: none;
	align-items: center;
	padding: 2px var(--pmd-space-3);
	border-radius: var(--pmd-radius-pill);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1.6;
	white-space: nowrap;
}

.pmd-acc-pill-success {
	color: color-mix(in srgb, var(--pmd-color-success) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-success) 14%, var(--pmd-acc-card));
}

.pmd-acc-pill-warning {
	color: color-mix(in srgb, var(--pmd-color-warning) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-warning) 16%, var(--pmd-acc-card));
}

.pmd-acc-pill-danger {
	color: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-danger) 12%, var(--pmd-acc-card));
}

/* ── Notices ──────────────────────────────────────────────────────
 * Success, warning, error (danger) and info. The text is the status
 * colour leaned toward the palette's text colour, over the same colour
 * faintly tinted into the raised surface: AA in light and dark palettes.
 */

.pmd-acc-notice {
	margin: 0;
	padding: var(--pmd-space-3) var(--pmd-space-4);
	border: 1px solid var(--pmd-color-border);
	border-inline-start-width: 4px;
	border-radius: var(--pmd-radius-lg);
	color: var(--pmd-color-text);
	background: var(--pmd-color-surface-raised, var(--pmd-color-surface));
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-snug);
}

.pmd-acc-notice p {
	margin: 0;
}

.pmd-acc-notice-success {
	color: color-mix(in srgb, var(--pmd-color-success) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-success) 12%, var(--pmd-color-surface-raised, var(--pmd-color-surface)));
	border-color: color-mix(in srgb, var(--pmd-color-success) 35%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-success);
}

.pmd-acc-notice-warning {
	color: color-mix(in srgb, var(--pmd-color-warning) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-warning) 12%, var(--pmd-color-surface-raised, var(--pmd-color-surface)));
	border-color: color-mix(in srgb, var(--pmd-color-warning) 40%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-warning);
}

.pmd-acc-notice-error,
.pmd-acc-notice-danger {
	color: color-mix(in srgb, var(--pmd-color-danger) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-danger) 12%, var(--pmd-color-surface-raised, var(--pmd-color-surface)));
	border-color: color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-danger);
}

.pmd-acc-notice-info {
	color: color-mix(in srgb, var(--pmd-color-primary) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-primary) 10%, var(--pmd-color-surface-raised, var(--pmd-color-surface)));
	border-color: color-mix(in srgb, var(--pmd-color-primary) 30%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-primary);
}

/* ── Profile ──────────────────────────────────────────────────────── */

.pmd-acc-roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-acc-role-badge {
	margin: 0;
	padding: 2px var(--pmd-space-3);
	border-radius: var(--pmd-radius-pill);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1.6;
}

.pmd-acc-capabilities {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-acc-capabilities li {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-3);
	margin: 0;
	color: var(--pmd-color-text);
}

.pmd-acc-capability-icon {
	flex: none;
	box-sizing: content-box;
	padding: var(--pmd-space-2);
	border-radius: var(--pmd-radius-md);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
}

/* The site's custom profile fields (the register form's, editable). */
.pmd-acc-custom-fields .pmd-auth-field {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-acc .pmd-acc-custom-fields .pmd-auth-label {
	width: auto;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-acc .pmd-acc-custom-fields .pmd-auth-help {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

.pmd-acc .pmd-acc-custom-fields .pmd-auth-required,
.pmd-acc .pmd-acc-custom-fields .pmd-auth-field-error {
	color: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
}

.pmd-acc .pmd-acc-custom-fields .pmd-auth-field-error {
	font-size: var(--pmd-text-sm);
}

/* ── My reviews ───────────────────────────────────────────────────── */

.pmd-acc-review-list,
.pmd-acc-place-list {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
}

.pmd-acc-review-row {
	gap: var(--pmd-space-3);
}

.pmd-acc-review-head,
.pmd-acc-place-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pmd-space-3);
}

.pmd-acc .pmd-acc-review-place,
.pmd-acc .pmd-acc-place-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
	line-height: var(--pmd-leading-snug);
	overflow-wrap: anywhere;
}

.pmd-acc .pmd-acc-review-place a,
.pmd-acc .pmd-acc-place-title a {
	color: inherit;
	text-decoration: none;
}

.pmd-acc .pmd-acc-review-place a:hover,
.pmd-acc .pmd-acc-place-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pmd-acc-review-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-space-3);
}

.pmd-acc-review-rating {
	color: color-mix(in srgb, var(--pmd-color-warning) 80%, var(--pmd-color-text));
	letter-spacing: 0.05em;
}

.pmd-acc-review-date {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

.pmd-acc .pmd-acc-review-draft-notice {
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	border-radius: var(--pmd-radius-md);
	color: color-mix(in srgb, var(--pmd-color-warning) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-warning) 12%, var(--pmd-acc-card));
	font-size: var(--pmd-text-sm);
}

.pmd-acc .pmd-acc-review-comment {
	margin: 0;
	color: var(--pmd-color-text);
	overflow-wrap: anywhere;
}

.pmd-acc-review-edit {
	padding-block-start: var(--pmd-space-2);
	border-block-start: 1px solid var(--pmd-color-border);
}

.pmd-acc-review-edit-toggle {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-2);
	min-height: 44px;
	color: var(--pmd-acc-ink);
	font-weight: var(--pmd-weight-semibold);
	list-style: none;
	cursor: pointer;
}

.pmd-acc-review-edit-toggle::-webkit-details-marker {
	display: none;
}

.pmd-acc-review-edit-toggle:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 2px;
	border-radius: var(--pmd-radius-sm);
}

.pmd-acc .pmd-acc-review-window {
	margin: 0 0 0 auto;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-regular);
	text-align: end;
}

.pmd-acc-review-edit[open] > .pmd-acc-edit-form {
	margin-block-start: var(--pmd-space-3);
}

.pmd-acc .pmd-acc-edit-blocked {
	display: flex;
	align-items: flex-start;
	gap: var(--pmd-space-2);
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	border-radius: var(--pmd-radius-md);
	color: var(--pmd-acc-muted-ink);
	background: var(--pmd-color-surface-alt);
	font-size: var(--pmd-text-sm);
}

.pmd-acc-edit-blocked-icon {
	flex: none;
	margin-block-start: 1px;
}

.pmd-acc-rating-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pmd-acc .pmd-acc-rating-field legend {
	padding: 0 0 var(--pmd-space-1);
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-acc-star-input {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/*
 * Clipped out of sight with the same declarations as .pmd-visually-hidden
 * below, never display:none: the radios stay in the tab order and are
 * announced, and the focused one's label carries the focus ring. Same
 * contract as .pmd-rev-star-input in reviews.css, enforced for both by
 * tests/unit/Front/StarInputVisuallyHiddenTest. The second selector
 * outranks the forms block's own radio sizing.
 */
.pmd-acc-star-input input,
.pmd-acc .pmd-acc-form .pmd-acc-star-input input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A 40×44 target per star; the width also beats a theme's `label { width: 100% }`. */
.pmd-acc .pmd-acc-star-input label {
	display: grid;
	place-items: center;
	width: 40px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--pmd-color-border-strong);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.pmd-acc .pmd-acc-star-input input:checked ~ label,
.pmd-acc .pmd-acc-star-input label:hover,
.pmd-acc .pmd-acc-star-input label:hover ~ label {
	color: color-mix(in srgb, var(--pmd-color-warning) 85%, var(--pmd-color-text));
}

.pmd-acc-star-input input:focus-visible + label {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: -2px;
	border-radius: var(--pmd-radius-sm);
}

.pmd-acc-comment-field {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-acc .pmd-acc-comment-field label {
	width: auto;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

/*
 * Screen-reader-only text (the exact rule reviews.css/directory.css also
 * define). Duplicated rather than shared: this page can render with neither
 * of those stylesheets loaded.
 */
.pmd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── My places ────────────────────────────────────────────────────── */

.pmd-acc-place-row {
	gap: var(--pmd-space-3);
}

.pmd-acc .pmd-acc-place-rejection-reason {
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	border-radius: var(--pmd-radius-md);
	color: color-mix(in srgb, var(--pmd-color-danger) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-danger) 8%, var(--pmd-acc-card));
	font-size: var(--pmd-text-sm);
}

/* "Suggest a place" above the list. */
.pmd-acc-section-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pmd-space-3);
	padding: var(--pmd-space-3) var(--pmd-space-4);
	border-radius: var(--pmd-radius-lg);
	background: var(--pmd-color-surface-alt);
}

.pmd-acc .pmd-acc-section-actions-text {
	margin: 0;
	color: var(--pmd-acc-muted-ink);
	font-size: var(--pmd-text-sm);
}

/* ── Forms ────────────────────────────────────────────────────────
 * Every `.pmd-acc-form` field: 16px text (no zoom on iOS), at least 44px
 * tall, token colours on the card surface, and a visible focus ring.
 * The colour/font rule names the tags so InheritedColorGuardTest sees
 * it; the box rule sits in :where() so a component's own override (the
 * likes chips' typing field, say) wins with a plain class.
 */

.pmd-acc .pmd-acc-form input,
.pmd-acc .pmd-acc-form select,
.pmd-acc .pmd-acc-form textarea {
	color: var(--pmd-color-text);
	background-color: var(--pmd-acc-card);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
}

.pmd-acc .pmd-acc-form :where(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
	line-height: var(--pmd-leading-snug);
	box-shadow: none;
	transition-property: border-color, box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc .pmd-acc-form :where(textarea) {
	min-height: 112px;
	resize: vertical;
}

.pmd-acc .pmd-acc-form :where(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea):focus-visible {
	border-color: var(--pmd-color-primary);
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 1px;
}

.pmd-acc .pmd-acc-form :where(input[type="checkbox"], input[type="radio"]) {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	accent-color: var(--pmd-color-primary);
}

/*
 * File pickers: the real input, its button restyled. The browser keeps
 * showing the chosen file's name beside it.
 */
.pmd-acc .pmd-acc-form .pmd-acc-file-input {
	min-height: 56px;
	padding: var(--pmd-space-2);
	color: var(--pmd-acc-muted-ink);
	background-color: var(--pmd-color-surface);
	border-style: dashed;
	border-radius: var(--pmd-radius-lg);
	font-size: var(--pmd-text-sm);
	cursor: pointer;
}

.pmd-acc-file-input::file-selector-button {
	min-height: 40px;
	margin-inline-end: var(--pmd-space-3);
	padding: var(--pmd-space-2) var(--pmd-space-4);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-pill);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	font: inherit;
	font-weight: var(--pmd-weight-semibold);
	cursor: pointer;
	transition-property: border-color, color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc-file-input:hover::file-selector-button {
	color: var(--pmd-acc-ink);
	border-color: var(--pmd-color-primary);
}

.pmd-acc-form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	margin: 0;
}

.pmd-acc-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-space-3);
}

@media (max-width: 599px) {
	.pmd-acc-form-actions .pmd-acc-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmd-acc .pmd-acc-form :where(input, select, textarea),
	.pmd-acc-file-input::file-selector-button {
		transition: none;
	}
}

/* ── Empty states ─────────────────────────────────────────────────
 * An icon, one line, and (when there is one) the action that fills it.
 */

.pmd-acc-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pmd-space-3);
	padding: var(--pmd-space-6) var(--pmd-space-5);
	text-align: center;
	background: var(--pmd-acc-card);
	border: 1px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-xl);
}

.pmd-acc-empty-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--pmd-radius-full);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
}

.pmd-acc .pmd-acc-empty {
	margin: 0;
	color: var(--pmd-color-text-muted);
	text-wrap: pretty;
}

/* ── My pets: cards ───────────────────────────────────────────────
 * The name's link stretches over the whole card (::after), so the photo
 * opens the profile too; the controls sit above it.
 */

.pmd-acc-pet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: var(--pmd-space-4);
}

.pmd-acc-pet-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-sm);
	transition-property: box-shadow, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc-pet-card:has(.pmd-acc-pet-link):hover {
	border-color: var(--pmd-color-border-strong);
	box-shadow: var(--pmd-shadow-md);
}

.pmd-acc-pet-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pmd-color-surface-alt);
}

.pmd-acc-pet-photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pmd-acc-pet-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--pmd-acc-ink);
	background:
		linear-gradient(var(--pmd-color-primary-soft), var(--pmd-color-primary-soft)),
		var(--pmd-color-surface-alt);
}

.pmd-acc-pet-placeholder-art {
	display: block;
	width: 38%;
	height: auto;
	opacity: 0.85;
}

.pmd-acc-pet-card.is-archived .pmd-acc-pet-photo-img,
.pmd-acc-pet-card.is-archived .pmd-acc-pet-placeholder {
	filter: grayscale(0.7);
	opacity: 0.8;
}

.pmd-acc-pet-status {
	position: absolute;
	inset-block-start: var(--pmd-space-3);
	inset-inline-start: var(--pmd-space-3);
	padding: var(--pmd-space-1) var(--pmd-space-3);
	border-radius: var(--pmd-radius-pill);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1.4;
	box-shadow: var(--pmd-shadow-sm);
}

.pmd-acc-pet-status-active {
	color: color-mix(in srgb, var(--pmd-color-success) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-success) 14%, var(--pmd-acc-card));
}

.pmd-acc-pet-status-archived {
	color: var(--pmd-acc-muted-ink);
	background: var(--pmd-acc-card);
}

.pmd-acc-pet-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--pmd-space-3) var(--pmd-space-4) 0;
	min-width: 0;
}

.pmd-acc .pmd-acc-pet-name {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
	overflow-wrap: anywhere;
}

.pmd-acc .pmd-acc-pet-link {
	color: inherit;
	text-decoration: none;
}

.pmd-acc-pet-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--pmd-radius-xl);
}

.pmd-acc .pmd-acc-pet-link:focus-visible {
	outline: none;
}

.pmd-acc-pet-link:focus-visible::after {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: -2px;
}

.pmd-acc .pmd-acc-pet-meta {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	overflow-wrap: anywhere;
}

.pmd-acc-pet-actions {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--pmd-space-2);
	margin-block-start: auto;
	padding: var(--pmd-space-3) var(--pmd-space-4) var(--pmd-space-4);
}

.pmd-acc-pet-actions form {
	display: contents;
}

.pmd-acc-pet-edit {
	flex: 1 1 auto;
	padding-inline: var(--pmd-space-4);
}

/* Icon-only buttons keep their name in a visually hidden span. */
.pmd-acc-btn-icon-only {
	flex: none;
	width: 44px;
	padding: 0;
}

.pmd-acc-btn-danger-quiet {
	color: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
	background: var(--pmd-acc-card);
	border-color: color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
}

.pmd-acc-btn-danger-quiet:hover,
.pmd-acc-btn-danger-quiet:focus-visible {
	color: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-danger) 10%, var(--pmd-acc-card));
	border-color: var(--pmd-color-danger);
}

.pmd-acc-btn-danger-quiet:focus-visible {
	outline-color: var(--pmd-color-danger);
}

/* "+ Add a pet": the last cell of the grid, a link to the form. */
.pmd-acc-pet-add,
a.pmd-acc-pet-add:link,
a.pmd-acc-pet-add:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pmd-space-3);
	min-height: 220px;
	padding: var(--pmd-space-5);
	border: 2px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-xl);
	color: var(--pmd-acc-ink);
	background: transparent;
	font-weight: var(--pmd-weight-semibold);
	text-align: center;
	text-decoration: none;
	transition-property: background-color, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc-pet-add:hover,
a.pmd-acc-pet-add:hover {
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
	border-color: var(--pmd-color-primary);
}

.pmd-acc-pet-add:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 2px;
}

.pmd-acc-pet-add-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--pmd-radius-full);
	background: var(--pmd-color-primary-soft);
}

@media (prefers-reduced-motion: reduce) {
	.pmd-acc-pet-card,
	.pmd-acc-pet-add {
		transition: none;
	}
}

/* ── My pets: the create/edit form ────────────────────────────────
 * Collapsed (`hidden`) once the member has pets; pets.js opens it in
 * place. Two columns for the short fields once the section is wide.
 */

.pmd-acc-pet-form-panel {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	scroll-margin-block-start: calc(var(--pmd-header-clearance, 0px) + var(--pmd-space-5));
}

.pmd-acc-pet-form-panel[hidden] {
	display: none;
}

.pmd-acc-pet-form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5);
	padding: var(--pmd-space-5) var(--pmd-space-4);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-sm);
	container-type: inline-size;
}

.pmd-acc .pmd-acc-pet-form-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-acc-pet-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pmd-space-4);
}

@container (min-width: 520px) {
	.pmd-acc-pet-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--pmd-space-5);
	}

	.pmd-acc-pet-field-wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.pmd-acc-pet-form {
		padding: var(--pmd-space-6);
	}
}

.pmd-acc-pet-field {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	min-width: 0;
	margin: 0;
}

.pmd-acc .pmd-acc-pet-field label {
	width: auto;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-acc .pmd-acc-pet-hint {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

.pmd-acc-pet-upload-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-space-3);
}

.pmd-acc-pet-upload-row .pmd-acc-file-input {
	flex: 1 1 220px;
	width: auto;
}

.pmd-acc-pet-current {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-acc-pet-current-photo,
.pmd-acc-pet-current-gallery-img {
	display: block;
	object-fit: cover;
	outline: 1px solid color-mix(in srgb, var(--pmd-color-text) 12%, transparent);
	outline-offset: -1px;
}

.pmd-acc-pet-current-photo {
	width: 72px;
	height: 72px;
	border-radius: var(--pmd-radius-lg);
}

.pmd-acc-pet-current-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-2);
	margin: 0 0 var(--pmd-space-1);
	padding: 0;
	list-style: none;
}

.pmd-acc-pet-current-gallery li {
	margin: 0;
}

.pmd-acc-pet-current-gallery-img {
	width: 56px;
	height: 56px;
	border-radius: var(--pmd-radius-md);
}

/* Likes chips (pets.js) — the no-JS text input stays visible until JS
 * replaces it with the chip list; both share this field's own styling. */
.pmd-acc-pet-likes-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-space-1);
	min-height: 44px;
	padding: var(--pmd-space-1) var(--pmd-space-2);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
	background: var(--pmd-acc-card);
}

.pmd-acc-pet-likes-chips:focus-within {
	border-color: var(--pmd-color-primary);
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 1px;
}

.pmd-acc-pet-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--pmd-space-1);
	padding: 2px var(--pmd-space-1) 2px var(--pmd-space-3);
	border-radius: var(--pmd-radius-pill);
	color: var(--pmd-acc-ink);
	background: var(--pmd-color-primary-soft);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-acc .pmd-acc-pet-chip-remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--pmd-radius-full);
	color: inherit;
	background: transparent;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.pmd-acc .pmd-acc-pet-chip-remove:hover {
	background: color-mix(in srgb, var(--pmd-color-primary) 14%, transparent);
}

.pmd-acc .pmd-acc-pet-chip-remove:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 1px;
}

.pmd-acc .pmd-acc-form .pmd-acc-pet-chip-input {
	flex: 1 1 120px;
	width: auto;
	min-width: 80px;
	min-height: 36px;
	padding: var(--pmd-space-1);
	border: 0;
	background-color: transparent;
}

.pmd-acc .pmd-acc-form .pmd-acc-pet-chip-input:focus-visible {
	outline: none;
}

/* Photo/gallery previews (pets.js). Square, object-fit: cover — the
 * crop stand-in MULTI-MASCOTA.md's Decisions documents (no crop library). */
.pmd-acc-pet-photo-preview:not([hidden]) {
	display: block;
	margin-block-start: var(--pmd-space-2);
}

.pmd-acc-pet-photo-preview-img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--pmd-radius-lg);
}

.pmd-acc-pet-photo-error,
.pmd-acc-pet-gallery-error {
	margin: 0;
	color: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
	font-size: var(--pmd-text-sm);
}

.pmd-acc-pet-gallery-preview:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-2);
	align-items: flex-start;
	margin-block-start: var(--pmd-space-2);
}

.pmd-acc-pet-gallery-item {
	position: relative;
	width: 72px;
	height: 72px;
}

.pmd-acc-pet-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--pmd-radius-md);
}

.pmd-acc .pmd-acc-pet-gallery-item-remove {
	position: absolute;
	inset-block-start: -8px;
	inset-inline-end: -8px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-full);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm);
	line-height: 1;
	cursor: pointer;
}

/* A 24px circle, with an invisible 44px hit area around it. */
.pmd-acc .pmd-acc-pet-gallery-item-remove::before {
	content: "";
	position: absolute;
	inset: -10px;
}

.pmd-acc-pet-gallery-input--full {
	opacity: 0.5;
	cursor: not-allowed;
}

.pmd-acc .pmd-acc-pet-gallery-counter {
	flex-basis: 100%;
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

/* ── Delete-confirmation modal (pets.js) ──────────────────────────
 * Appended to <body>, outside the panel; hidden by default, pets.js
 * toggles [hidden] and moves focus in.
 */
.pmd-acc-pet-delete-modal[hidden] {
	display: none;
}

.pmd-acc-pet-delete-modal {
	position: fixed;
	inset: 0;
	z-index: var(--pmd-z-modal, 1300);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pmd-space-4);
	background: var(--pmd-color-overlay, color-mix(in srgb, #000 55%, transparent));
}

.pmd-acc-pet-delete-modal-dialog {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	width: 100%;
	max-width: 420px;
	padding: var(--pmd-space-6);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	background: var(--pmd-color-surface-raised, var(--pmd-color-surface));
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-xl);
}

.pmd-acc-pet-delete-modal .pmd-acc-pet-delete-modal-dialog h2 {
	margin: 0;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-acc-pet-delete-modal .pmd-acc-pet-delete-modal-dialog p {
	margin: 0;
	color: var(--pmd-color-text-muted);
}

.pmd-acc-pet-delete-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--pmd-space-2);
	margin-block-start: var(--pmd-space-2);
}

/* ── Claim a place ────────────────────────────────────────────────── */

.pmd-acc-claim-field,
.pmd-acc-merge-field,
.pmd-acc-delete-type-prompt {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-acc .pmd-acc-claim-field label,
.pmd-acc .pmd-acc-merge-field label,
.pmd-acc .pmd-acc-delete-type-prompt label {
	width: auto;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-acc .pmd-acc-form #pmd-acc-claim-place-id {
	max-width: 220px;
}

.pmd-acc-claim-methods {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pmd-acc .pmd-acc-claim-methods legend {
	padding: 0 0 var(--pmd-space-1);
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

/* A choice: the radio or checkbox inside its label, the text beside it. */
.pmd-acc .pmd-acc-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--pmd-space-3);
	width: 100%;
	margin: 0;
	padding: var(--pmd-space-3) var(--pmd-space-4);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-lg);
	color: var(--pmd-color-text);
	background: var(--pmd-acc-card);
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-regular);
	line-height: var(--pmd-leading-snug);
	cursor: pointer;
	transition-property: background-color, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.pmd-acc .pmd-acc-choice:hover {
	border-color: var(--pmd-color-primary);
}

.pmd-acc .pmd-acc-choice:has(input:checked) {
	border-color: var(--pmd-color-primary);
	background: var(--pmd-color-primary-soft);
}

.pmd-acc .pmd-acc-choice:has(input:focus-visible) {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: 2px;
}

.pmd-acc .pmd-acc-choice input {
	margin-block-start: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.pmd-acc .pmd-acc-choice {
		transition: none;
	}
}

/* ── Privacy ──────────────────────────────────────────────────────────
 * Owner visibility and export are open cards; merging and deleting are
 * collapsed <details> (no JavaScript), the delete one the danger zone.
 */

.pmd-acc-owner-visibility-field {
	margin: 0;
}

.pmd-acc-collapsible {
	gap: 0;
	padding: 0;
}

.pmd-acc-collapsible-summary {
	display: flex;
	align-items: flex-start;
	gap: var(--pmd-space-3);
	min-height: 44px;
	padding: var(--pmd-space-4);
	border-radius: var(--pmd-radius-xl);
	list-style: none;
	cursor: pointer;
}

@media (min-width: 768px) {
	.pmd-acc-collapsible-summary {
		padding: var(--pmd-space-5);
	}
}

.pmd-acc-collapsible-summary::-webkit-details-marker {
	display: none;
}

.pmd-acc-collapsible-summary:focus-visible {
	outline: 2px solid var(--pmd-acc-ring);
	outline-offset: -2px;
}

.pmd-acc .pmd-acc-collapsible-title {
	display: block;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-acc-collapsible .pmd-acc-card-desc {
	display: block;
}

.pmd-acc-collapsible-chevron {
	flex: none;
	align-self: center;
	margin-inline-start: auto;
	color: var(--pmd-color-text-muted);
	transition: transform 200ms var(--pmd-ease-out);
}

.pmd-acc-collapsible[open] > .pmd-acc-collapsible-summary .pmd-acc-collapsible-chevron {
	transform: rotate(180deg);
}

.pmd-acc-collapsible-body {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	padding: 0 var(--pmd-space-4) var(--pmd-space-4);
}

@media (min-width: 768px) {
	.pmd-acc-collapsible-body {
		padding: 0 var(--pmd-space-5) var(--pmd-space-5) calc(var(--pmd-space-5) + 40px + var(--pmd-space-3));
	}
}

.pmd-acc .pmd-acc-collapsible-body > p {
	margin: 0;
	color: var(--pmd-color-text);
}

.pmd-acc-merge-pets,
.pmd-acc-delete-consequences {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
	padding-inline-start: var(--pmd-space-5);
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
}

.pmd-acc-merge-pets li,
.pmd-acc-delete-consequences li {
	margin: 0;
}

/* The danger zone: a red-leaning border and icon. */
.pmd-acc-danger-zone {
	border-color: color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
}

.pmd-acc-danger-zone .pmd-acc-card-icon {
	color: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-danger) 12%, var(--pmd-acc-card));
}

/* The confirm step: a warning block, never a success. */
.pmd-acc-delete-confirm-form {
	padding: var(--pmd-space-3);
	border: 1px solid color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
	border-radius: var(--pmd-radius-lg);
	background: color-mix(in srgb, var(--pmd-color-danger) 6%, var(--pmd-acc-card));
}

@media (min-width: 768px) {
	.pmd-acc-delete-confirm-form {
		padding: var(--pmd-space-4);
	}
}

.pmd-acc .pmd-acc-delete-confirm-form :where(input[type="text"]):focus-visible {
	border-color: var(--pmd-color-danger);
	outline-color: var(--pmd-color-danger);
}

@media (prefers-reduced-motion: reduce) {
	.pmd-acc-collapsible-chevron {
		transition: none;
	}
}