/*!
 * PetMap Directory — the suggest-a-place form (`[petmap_suggest_form]`).
 *
 * Loaded only on a page that actually renders the shortcode (see
 * Assets::maybe_enqueue_front()). Every value here reads a --pmd-* token
 * emitted by Front\DesignSystem, the same discipline reviews.css and
 * account.css follow — including their color-mix() notice pattern (status
 * colours leaned toward the text colour, so every state reads at AA) and
 * their duplicated .pmd-visually-hidden rule (this page can render with
 * neither of those stylesheets loaded, so the rule is repeated rather than
 * shared).
 *
 * The look is the account panel's: one raised card holding the wizard, the
 * fields of each step grouped as soft cards (`.pmd-suggest-group`), 16px
 * form text so a phone never zooms into a field, every control at least 44px
 * tall, pill buttons, and the real file input restyled as the photo picker.
 *
 * The server renders every field, always — see templates/form/suggest-form.php
 * and Submission\Form's class docblock. assets/js/front/suggest-form.js folds
 * the four .pmd-suggest-step fieldsets into a wizard progressively for a
 * JS-capable visitor; with JS off every rule below still applies, just to a
 * form that shows all four steps top to bottom instead of one at a time.
 *
 * @package PetMapDirectory
 */

.pmd-suggest {
	--pmd-suggest-card: var(--pmd-color-surface-raised, var(--pmd-color-surface));
	--pmd-suggest-ink: color-mix(in srgb, var(--pmd-color-primary) 60%, var(--pmd-color-text));
	--pmd-suggest-danger-ink: color-mix(in srgb, var(--pmd-color-danger) 55%, var(--pmd-color-text));
	--pmd-suggest-ring: var(--pmd-color-primary);

	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	text-align: left;
}

/*
 * `.pmd-suggest` does not carry the `.pmd-reset` opt-in class every other
 * component gets (see Front\StyleLoader::emit_base()) — its inputs and
 * textareas combine `width: 100%` with their own padding and border further
 * down this file, which overflows their container under the browser's
 * default content-box sizing. Scoped here instead of adding `.pmd-reset`
 * (this component renders standalone, on its own dedicated page, and does
 * not need the rest of that opt-in).
 */
.pmd-suggest,
.pmd-suggest *,
.pmd-suggest *::before,
.pmd-suggest *::after {
	box-sizing: border-box;
}

/*
 * Screen-reader-only text (the exact rule reviews.css/account.css also
 * define).
 */
.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;
}

/* ── Outcome notice (mirrors .pmd-rev-notice*/.pmd-acc-notice*) ─────── */

.pmd-suggest-notice {
	padding: var(--pmd-space-3) var(--pmd-space-4);
	color: var(--pmd-color-text);
	background: var(--pmd-suggest-card);
	border: 1px solid var(--pmd-color-border);
	border-inline-start-width: 4px;
	border-radius: var(--pmd-radius-lg);
}

.pmd-suggest-notice p {
	margin: 0;
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-snug);
}

.pmd-suggest-notice a {
	color: inherit;
	font-weight: var(--pmd-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pmd-suggest-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-suggest-card));
	border-color: color-mix(in srgb, var(--pmd-color-success) 35%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-success);
}

.pmd-suggest-notice-error {
	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-suggest-card));
	border-color: color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-danger);
}

/* ── Card ─────────────────────────────────────────────────────── */

.pmd-suggest-card {
	padding: var(--pmd-space-5) var(--pmd-space-4);
	color: var(--pmd-color-text);
	background: var(--pmd-suggest-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-sm);
}

@media (min-width: 640px) {
	.pmd-suggest-card {
		padding: var(--pmd-space-6);
	}
}

/* ── Four-step progress indicator ────────────────────────────── */

.pmd-suggest-progress {
	display: flex;
	margin: 0 0 var(--pmd-space-6);
	padding: 0;
	list-style: none;
}

.pmd-suggest-progress-step {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: var(--pmd-space-2);
	text-align: center;
}

/* The rule joining each circle to the previous one. */
.pmd-suggest-progress-step:not(:first-child)::before {
	position: absolute;
	top: 15px;
	left: -50%;
	z-index: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: var(--pmd-color-border-strong);
}

.pmd-suggest-progress-step.is-current::before,
.pmd-suggest-progress-step.is-done::before {
	background: var(--pmd-color-primary);
}

.pmd-suggest-progress-circle {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	background: var(--pmd-suggest-card);
	border: 2px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-full);
}

.pmd-suggest-progress-check {
	display: none;
}

/* Pending (default): outlined, muted — nothing further to paint. */

.pmd-suggest-progress-step.is-current .pmd-suggest-progress-circle {
	color: var(--pmd-suggest-ink);
	border-color: var(--pmd-color-primary);
	box-shadow: 0 0 0 4px var(--pmd-color-primary-soft);
}

.pmd-suggest-progress-step.is-done .pmd-suggest-progress-circle {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary);
	border-color: var(--pmd-color-primary);
}

.pmd-suggest-progress-step.is-done .pmd-suggest-progress-number {
	display: none;
}

.pmd-suggest-progress-step.is-done .pmd-suggest-progress-check {
	display: block;
}

.pmd-suggest-progress-label {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

.pmd-suggest-progress-step.is-current .pmd-suggest-progress-label {
	color: var(--pmd-color-text);
	font-weight: var(--pmd-weight-semibold);
}

/* ── Steps and groups ─────────────────────────────────────────── */

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

/* The script hides the whole form once the suggestion is sent. */
.pmd-suggest-form[hidden] {
	display: none;
}

.pmd-suggest-required-note {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

.pmd-suggest-step {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pmd-suggest-step[hidden] {
	display: none;
}

/*
 * With JS off every step renders at once (see the class docblock); this
 * rule is what keeps four stacked fieldsets legible as a document rather
 * than one another's continuation.
 */
.pmd-suggest-step + .pmd-suggest-step {
	padding-top: var(--pmd-space-5);
	border-top: 1px solid var(--pmd-color-border);
}

.pmd-suggest .pmd-suggest-step-legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--pmd-space-1);
	padding: 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);
}

/* A floated legend leaves the fieldset's flow; the next box starts below it. */
.pmd-suggest-step-legend + * {
	clear: both;
}

/* The fields of one step, grouped: a soft card on the form's card. */
.pmd-suggest-group {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	min-width: 0;
	padding: var(--pmd-space-4);
	background: var(--pmd-color-surface);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-lg);
}

@media (min-width: 640px) {
	.pmd-suggest-group {
		padding: var(--pmd-space-5);
	}
}

.pmd-suggest .pmd-suggest-group-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);
}

/* ── Fields ───────────────────────────────────────────────────── */

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

.pmd-suggest .pmd-suggest-label {
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	line-height: var(--pmd-leading-snug);
}

.pmd-suggest-required {
	margin-inline-start: 2px;
	color: var(--pmd-suggest-danger-ink);
	font-weight: var(--pmd-weight-bold);
}

/*
 * Every text field: 16px text (no zoom on iOS), at least 44px tall, token
 * colours on the card surface, and a visible focus ring.
 */
.pmd-suggest .pmd-suggest-input,
.pmd-suggest .pmd-suggest-textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
	line-height: var(--pmd-leading-snug);
	background: var(--pmd-suggest-card);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
	box-shadow: none;
	transition-property: border-color, box-shadow;
	transition-duration: var(--pmd-duration-fast);
	transition-timing-function: var(--pmd-ease-out);
}

.pmd-suggest .pmd-suggest-textarea {
	min-height: 112px;
	resize: vertical;
}

.pmd-suggest .pmd-suggest-input:focus-visible,
.pmd-suggest .pmd-suggest-textarea:focus-visible {
	border-color: var(--pmd-color-primary);
	outline: 2px solid var(--pmd-suggest-ring);
	outline-offset: 1px;
}

.pmd-suggest-hint {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-normal);
}

/*
 * Error state: the field Form::QUERY_FIELD names after a no-JS round trip,
 * or one assets/js/front/suggest-form.js marked — a step that could not
 * advance, or a field-specific refusal from the server.
 */
.pmd-suggest .pmd-suggest-field.is-error .pmd-suggest-input,
.pmd-suggest .pmd-suggest-field.is-error .pmd-suggest-textarea {
	border-color: var(--pmd-color-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pmd-color-danger) 14%, transparent);
}

.pmd-suggest-field-error {
	display: flex;
	align-items: flex-start;
	gap: var(--pmd-space-2);
	margin: 0;
	color: var(--pmd-suggest-danger-ink);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-medium);
	line-height: var(--pmd-leading-snug);
}

.pmd-suggest-field-error::before {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	content: '';
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm.75 3v5h-1.5V4h1.5zM8 10.5a1 1 0 110 2 1 1 0 010-2z'/%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 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm.75 3v5h-1.5V4h1.5zM8 10.5a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Coordinates: derived/secondary, but always editable (no-JS location) ── */

.pmd-suggest-coords {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pmd-space-3);
	padding: var(--pmd-space-3);
	margin: 0 0 var(--pmd-space-3);
	background: var(--pmd-suggest-card);
	border: 1px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
}

/* ── Coordinates disclosure (collapsed by JS once the picker takes over) ── */

.pmd-suggest-coords-disclosure {
	margin: 0;
}

.pmd-suggest-coords-summary {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-2);
	min-height: 44px;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	cursor: pointer;
}

.pmd-suggest-coords-summary:focus-visible {
	outline: 2px solid var(--pmd-suggest-ring);
	outline-offset: 2px;
	border-radius: var(--pmd-radius-sm);
}

.pmd-suggest-coords-preview {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-regular);
	font-variant-numeric: tabular-nums;
}

/* ── Location picker (map, address search, "use my location") ───── */

.pmd-suggest-picker {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	margin: 0;
}

.pmd-suggest-picker-search-row {
	display: flex;
	gap: var(--pmd-space-2);
}

.pmd-suggest .pmd-suggest-picker-search-row .pmd-suggest-input {
	flex: 1 1 auto;
	min-width: 0;
}

.pmd-suggest-picker-results {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: var(--pmd-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.pmd-suggest-picker-results[hidden] {
	display: none;
}

.pmd-suggest .pmd-suggest-picker-result {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-snug);
	text-align: left;
	background: var(--pmd-suggest-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-md);
	cursor: pointer;
}

.pmd-suggest .pmd-suggest-picker-result:hover,
.pmd-suggest .pmd-suggest-picker-result:focus-visible {
	color: var(--pmd-suggest-ink);
	border-color: var(--pmd-color-primary);
}

.pmd-suggest .pmd-suggest-picker-result:focus-visible {
	outline: 2px solid var(--pmd-suggest-ring);
	outline-offset: 1px;
}

.pmd-suggest-picker-locate {
	align-self: flex-start;
}

.pmd-suggest-picker-map {
	width: 100%;
	height: 280px;
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-lg);
	/* Leaflet's own background while tiles load, before the JS default kicks in. */
	background: var(--pmd-color-surface-alt);
	overflow: hidden;
}

@media (min-width: 640px) {
	.pmd-suggest-picker-map {
		height: 320px;
	}
}

.pmd-suggest-picker-map:focus-visible {
	outline: 2px solid var(--pmd-suggest-ring);
	outline-offset: 2px;
}

/* ── Photo picker ─────────────────────────────────────────────── */

.pmd-suggest-dropzone {
	align-items: center;
	gap: var(--pmd-space-2);
	padding: var(--pmd-space-6) var(--pmd-space-4);
	text-align: center;
	background: var(--pmd-color-surface);
	border: 2px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-lg);
}

.pmd-suggest-dropzone-icon {
	box-sizing: content-box;
	padding: 14px;
	color: var(--pmd-suggest-ink);
	background: var(--pmd-color-primary-soft);
	border-radius: var(--pmd-radius-full);
}

.pmd-suggest .pmd-suggest-dropzone .pmd-suggest-label {
	font-size: var(--pmd-text-md);
}

.pmd-suggest-dropzone-text {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

/*
 * The real file input, its button restyled; the browser keeps showing what
 * was chosen beside it (the account panel's .pmd-acc-file-input).
 */
.pmd-suggest .pmd-suggest-file-input {
	width: 100%;
	max-width: 360px;
	min-height: 56px;
	margin-top: var(--pmd-space-2);
	padding: var(--pmd-space-2);
	color: var(--pmd-color-text-muted);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm);
	background: var(--pmd-suggest-card);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-pill);
	cursor: pointer;
}

.pmd-suggest-file-input::file-selector-button {
	min-height: 40px;
	margin-inline-end: var(--pmd-space-3);
	padding: var(--pmd-space-2) var(--pmd-space-4);
	color: var(--pmd-color-on-primary);
	font: inherit;
	font-weight: var(--pmd-weight-semibold);
	background: var(--pmd-color-primary);
	border: 0;
	border-radius: var(--pmd-radius-pill);
	cursor: pointer;
}

.pmd-suggest-file-input:hover::file-selector-button {
	background: var(--pmd-color-primary-hover);
}

.pmd-suggest .pmd-suggest-file-input:focus-visible {
	outline: 2px solid var(--pmd-suggest-ring);
	outline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────── */

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

.pmd-suggest .pmd-suggest-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pmd-space-2);
	width: auto;
	/*
	 * min-height, not height: a button inherits the theme's line-height
	 * (1.7 on this site), so a two-line label in a 390px column needs more
	 * than one line's height and must be free to grow.
	 */
	min-height: 44px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-5);
	color: var(--pmd-color-text);
	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;
	cursor: pointer;
	background: var(--pmd-suggest-card);
	border: 1px solid transparent;
	border-radius: var(--pmd-radius-pill);
	-webkit-tap-highlight-color: transparent;
	transition-property: background-color, border-color, color, scale;
	transition-duration: var(--pmd-duration-fast);
	transition-timing-function: var(--pmd-ease-out);
}

.pmd-suggest .pmd-suggest-btn:active {
	scale: 0.97;
}

.pmd-suggest-btn-icon {
	display: block;
	flex: none;
}

.pmd-suggest .pmd-suggest-btn-primary {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary);
}

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

.pmd-suggest .pmd-suggest-btn-secondary {
	color: var(--pmd-color-text);
	background: var(--pmd-suggest-card);
	border-color: var(--pmd-color-border-strong);
}

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

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

.pmd-suggest .pmd-suggest-btn:disabled,
.pmd-suggest .pmd-suggest-btn[aria-disabled='true'] {
	color: var(--pmd-color-text-muted);
	background: var(--pmd-color-surface-alt);
	border-color: transparent;
	cursor: not-allowed;
	scale: none;
}

/*
 * Phones: the step's buttons share the row, the forward one last and
 * widest; the lone "Next" of the first step fills it.
 */
@media (max-width: 599px) {
	.pmd-suggest-actions .pmd-suggest-btn {
		flex: 1 1 0;
	}

	.pmd-suggest-actions .pmd-suggest-btn-primary {
		flex-grow: 2;
	}

	.pmd-suggest-picker-locate {
		align-self: stretch;
	}
}

/* ── Result line: the status after the form, and the success card ── */

.pmd-suggest-message {
	margin: var(--pmd-space-4) 0 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

.pmd-suggest-message:empty {
	display: none;
}

.pmd-suggest-message a {
	color: inherit;
	font-weight: var(--pmd-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pmd-suggest-message.is-error {
	padding: var(--pmd-space-3) var(--pmd-space-4);
	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-suggest-card));
	border: 1px solid color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
	border-inline-start: 4px solid var(--pmd-color-danger);
	border-radius: var(--pmd-radius-lg);
}

/*
 * Sent: the form is gone and this line is all the card holds — a friendly
 * card of its own, a check in a soft circle above the server's thank-you.
 */
.pmd-suggest-message.is-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pmd-space-3);
	margin: 0;
	padding: var(--pmd-space-6) var(--pmd-space-4);
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-md);
	line-height: var(--pmd-leading-normal);
	text-align: center;
	text-wrap: pretty;
	background: color-mix(in srgb, var(--pmd-color-success) 8%, var(--pmd-suggest-card));
	border: 1px solid color-mix(in srgb, var(--pmd-color-success) 30%, var(--pmd-color-border));
	border-radius: var(--pmd-radius-lg);
}

.pmd-suggest-message.is-success::before {
	width: 56px;
	height: 56px;
	content: '';
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 28px no-repeat,
		var(--pmd-color-success);
	border-radius: var(--pmd-radius-full);
}

.pmd-suggest-message.is-success:focus {
	outline: none;
}

.pmd-suggest-message.is-success:focus-visible {
	outline: 2px solid var(--pmd-suggest-ring);
	outline-offset: 2px;
}

@media (max-width: 480px) {

	.pmd-suggest-coords {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmd-suggest .pmd-suggest-btn,
	.pmd-suggest .pmd-suggest-input,
	.pmd-suggest .pmd-suggest-textarea {
		transition: none;
	}

	.pmd-suggest .pmd-suggest-btn:active {
		scale: none;
	}
}