/*!
 * PetMap PETinder — the patita control (templates/patita.php).
 *
 * Reads Free's --pmd-* design tokens with literal fallbacks from its warm
 * preset; the font is inherited. Two sizes:
 * - full: the profile's "Patitas" card — a pill button with the paw and
 *   its label, the count beside it, a line under them;
 * - compact: a paw pill over a card's photo, top end corner. The card
 *   positions it (its own stylesheet makes the card a containing block).
 *
 * The paw is drawn as an outline and filled once the patita is given
 * (aria-pressed="true"). Every target is at least 44px: the compact button
 * draws 36px and reaches past its edge with an invisible ::before.
 * Motion only without prefers-reduced-motion: a press scales the button a
 * touch, giving makes the paw pop (.is-popping, set by patitas.js), and a
 * failure's toast (the script's live region, .is-visible) slides in.
 *
 * @package PetMapPetinder
 */

.pti-patita {
	--pti-pat-ink: var(--pmd-color-text, #2b1d14);
	--pti-pat-muted: var(--pmd-color-text-muted, #7a6252);
	--pti-pat-raised: var(--pmd-color-surface-raised, #fff);
	--pti-pat-border: var(--pmd-color-border, #f0dfcf);
	--pti-pat-primary: var(--pmd-color-primary, #c2410c);
	--pti-pat-primary-hover: var(--pmd-color-primary-hover, #9a3412);
	--pti-pat-on-primary: var(--pmd-color-on-primary, #fff);
	--pti-pat-soft: var(--pmd-color-primary-soft, rgba(238, 100, 3, 0.1));
	--pti-pat-accent: var(--pmd-color-accent, #ee6403);
	--pti-pat-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	color: var(--pti-pat-ink);
	font-family: var(--pmd-font-sans, inherit);
}

.pti-patita *,
.pti-patita *::before,
.pti-patita *::after {
	box-sizing: border-box;
}

.pti-patita-form {
	display: contents;
	margin: 0;
}

.pti-patita-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pti-patita-icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.pti-patita-btn[aria-pressed="true"] .pti-patita-icon {
	fill: currentColor;
}

.pti-patita .pti-patita-btn {
	position: relative;
	display: inline-flex;
	gap: var(--pmd-space-2, 8px);
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--pti-pat-primary);
	font: inherit;
	font-weight: var(--pmd-weight-semibold, 600);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	background: var(--pti-pat-raised);
	border: 1.5px solid var(--pti-pat-primary);
	border-radius: var(--pmd-radius-pill, 999px);
	-webkit-tap-highlight-color: transparent;
}

.pti-patita .pti-patita-btn:hover {
	color: var(--pti-pat-primary-hover);
	background: var(--pti-pat-soft);
}

.pti-patita .pti-patita-btn[aria-pressed="true"] {
	color: var(--pti-pat-on-primary);
	background: var(--pti-pat-primary);
	border-color: var(--pti-pat-primary);
}

.pti-patita .pti-patita-btn[aria-pressed="true"]:hover {
	color: var(--pti-pat-on-primary);
	background: var(--pti-pat-primary-hover);
	border-color: var(--pti-pat-primary-hover);
}

.pti-patita .pti-patita-btn:focus-visible {
	outline: 3px solid var(--pti-pat-accent);
	outline-offset: 2px;
}

.pti-patita-count {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-variant-numeric: tabular-nums;
}

.pti-patita-count[hidden] {
	display: none;
}

/* Full: the profile card ------------------------------------------------- */

.pti-patita--full {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-3, 12px) var(--pmd-space-4, 16px);
	align-items: center;
}

.pti-patita--full .pti-patita-btn {
	min-height: 44px;
	padding: 0 var(--pmd-space-5, 20px) 0 var(--pmd-space-4, 16px);
	font-size: var(--pmd-text-md, 1rem);
}

.pti-patita--full .pti-patita-count {
	color: var(--pti-pat-ink);
	font-size: var(--pmd-text-md, 1rem);
	font-weight: var(--pmd-weight-semibold, 600);
}

.pti-patita--full .pti-patita-count .pti-patita-icon {
	color: var(--pti-pat-primary);
	fill: currentColor;
	stroke: none;
}

.pti-patita--full .pti-patita-hint,
.pti-patita--full .pti-patita-note {
	flex-basis: 100%;
	margin: 0;
	color: var(--pti-pat-muted);
	font-size: var(--pmd-text-sm, 0.875rem);
	line-height: var(--pmd-leading-snug, 1.35);
}

.pti-patita-hint[hidden] {
	display: none;
}

/* Compact: a paw pill over a card's photo -------------------------------- */

.pti-patita--compact {
	position: absolute;
	inset-block-start: var(--pmd-space-2, 8px);
	inset-inline-end: var(--pmd-space-2, 8px);
	z-index: 3;
	display: flex;
	align-items: center;
	min-height: 36px;
	color: var(--pti-pat-ink);
	background: var(--pti-pat-raised);
	background: color-mix(in srgb, var(--pti-pat-raised) 92%, transparent);
	border-radius: var(--pmd-radius-pill, 999px);
	box-shadow: 0 1px 2px rgb(31 20 13 / 0.12), 0 4px 12px rgb(31 20 13 / 0.12);
	text-shadow: none;
}

.pti-patita--compact .pti-patita-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border-color: transparent;
	background: transparent;
}

/* The drawn button is 36px; the target reaches 44px. */
.pti-patita--compact .pti-patita-btn::before {
	position: absolute;
	inset: -4px;
	content: "";
	border-radius: inherit;
}

.pti-patita--compact .pti-patita-btn[aria-pressed="true"] {
	border-color: var(--pti-pat-primary);
}

.pti-patita--compact .pti-patita-count {
	padding-inline: 2px 12px;
	font-size: var(--pmd-text-sm, 0.875rem);
	font-weight: var(--pmd-weight-bold, 700);
	line-height: 1;
}

/* Only the count, for the owner: the paw sits inside it. */
.pti-patita--compact .pti-patita-count:first-child {
	padding-inline-start: 10px;
}

.pti-patita--compact .pti-patita-count .pti-patita-icon {
	width: 18px;
	height: 18px;
	color: var(--pti-pat-primary);
	fill: currentColor;
	stroke: none;
}

/* The note of a no-JS post hangs under the pill. */
.pti-patita--compact .pti-patita-note {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	width: max-content;
	max-width: 12rem;
	margin: 0;
	padding: 6px 10px;
	color: var(--pti-pat-ink);
	font-size: var(--pmd-text-xs, 0.75rem);
	line-height: var(--pmd-leading-snug, 1.35);
	background: var(--pti-pat-raised);
	border-radius: var(--pmd-radius-md, 10px);
	box-shadow: 0 4px 12px rgb(31 20 13 / 0.16);
}

.pti-patita .pti-patita-note--error {
	color: var(--pmd-color-danger, #b42318);
}

/* Announcements (patitas.js): screen readers only, failures as a toast ---- */

.pti-patita-live {
	position: fixed;
	inset-block-end: var(--pmd-space-5, 20px);
	inset-inline-start: 50%;
	z-index: 100000;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.pti-patita-live.is-visible {
	width: max-content;
	max-width: min(28rem, calc(100vw - 32px));
	height: auto;
	margin: 0;
	padding: 12px 18px;
	overflow: visible;
	clip: auto;
	color: var(--pmd-color-on-primary, #fff);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm, 0.875rem);
	line-height: var(--pmd-leading-snug, 1.35);
	white-space: normal;
	background: var(--pmd-color-text, #2b1d14);
	border-radius: var(--pmd-radius-lg, 16px);
	box-shadow: 0 10px 30px rgb(31 20 13 / 0.25);
	translate: -50% 0;
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.pti-patita .pti-patita-btn {
		transition-property: scale, color, background-color, border-color;
		transition-duration: 140ms;
		transition-timing-function: var(--pti-pat-ease-out);
	}

	.pti-patita .pti-patita-btn:active {
		scale: 0.96;
	}

	.pti-patita-live.is-visible {
		animation: pti-patita-toast 200ms var(--pti-pat-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
	}

	@keyframes pti-patita-toast {
		from {
			opacity: 0;
			translate: -50% 8px;
		}
	}

	.pti-patita.is-popping .pti-patita-btn .pti-patita-icon {
		animation: pti-patita-pop 320ms var(--pti-pat-ease-out);
	}

	@keyframes pti-patita-pop {
		0% {
			scale: 0.85;
		}

		45% {
			scale: 1.28;
		}

		100% {
			scale: 1;
		}
	}
}