/*
 * Donation partner search.
 *
 * Self-contained on purpose. There is no DreamIT theme on cdsvic.org.au, so
 * nothing here may reference the --vr-* tokens the concept demo relies on.
 * Custom properties are scoped to the block root rather than :root, so this
 * cannot leak a value into TBWA's design, and every selector is prefixed so
 * nothing generic escapes into their namespace.
 *
 * ## Built to TBWA's Figma
 *
 * The page places one block below its own hero: a filter row (an outlined
 * search pill and a navy category split pill), a pale results card holding a
 * four-column table, and pagination under the card. Sizes, colours and type
 * follow the design file's desktop frame; phones have no frame, so rows stack
 * and the controls go full width. Nothing of TBWA's stylesheets, class names
 * or assets is used, and no font is loaded: type is inherited from the host.
 *
 * ## Holding the design inside somebody else's theme
 *
 * The host (Hello Elementor, an Elementor kit, and utility-framework
 * preflights from other plugins) styles bare elements: input[type="search"],
 * select, button, table td, a. Measured on UAT on 28 September 2026, those
 * selectors are (0,0,2) to (0,2,4) and beat a single class. So every
 * component rule is prefixed with the block root -- `.vr-partner-search
 * .vr-partner-search__x`, (0,2,0) -- and states the properties the host sets
 * rather than leaving them to the browser default. The submit button and the
 * header cells are chained one class higher, (0,3,0), and their :hover and
 * :focus rules higher again, to clear the kit's (0,2,1) button states and the
 * reset's (0,2,4) first-header-row rule. No !important is added for this;
 * the only two in the file are the reduced-motion override.
 *
 * Every asserted colour is a custom property on the block root, so TBWA can
 * retune the whole thing from their own stylesheet without touching this file.
 */

.vr-partner-search {
	/* Controls, pagination and outlines. */
	--vr-pts-primary: #004c97;
	/* Text on the navy controls. */
	--vr-pts-on-primary: #fdfbff;
	/* Every piece of text in the results table. */
	--vr-pts-ink: #245eaa;
	/* The rule under the header and between rows. */
	--vr-pts-rule: #7aacfd;
	/* Secondary sentences in messages. */
	--vr-pts-muted: #4b5563;

	--vr-pts-card-bg: #fdfbff;
	--vr-pts-card-radius: 24px;
	--vr-pts-logo-bg: #fff;
	--vr-pts-logo-glyph: #7aacfd;

	/* Dark blue ring: over 7:1 against the pale page and the card. */
	--vr-pts-focus: #004c97;
}

.vr-partner-search :focus-visible {
	outline: 3px solid var(--vr-pts-focus);
	outline-offset: 3px;
}

/* A visually hidden label, prefixed rather than borrowed. The host theme may
   not define screen-reader-text, and relying on it would silently expose the
   text if it does not. */
.vr-partner-search .vr-partner-search__sr {
	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;
}

/*
 * The filter row.
 *
 * No panel of its own: the page's hero sits above the block and owns that
 * design. The label and hint are visually hidden in the markup itself, so
 * the row is only the two pills, 12px apart.
 */
.vr-partner-search .vr-partner-search__toolbar {
	margin: 0 0 40px;
}

.vr-partner-search .vr-partner-search__form {
	margin: 0;
}

.vr-partner-search .vr-partner-search__heading {
	margin: 0 0 1rem;
	color: var(--vr-pts-primary);
}

.vr-partner-search .vr-partner-search__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/*
 * The search pill: 431 by 48, a 2px outline, transparent inside.
 *
 * The pill is the focus target a visitor sees. The input's own outline is
 * moved onto it rather than removed.
 */
.vr-partner-search .vr-partner-search__controls {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 431px;
	max-width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 0 0 20px;
	border: 2px solid var(--vr-pts-primary);
	border-radius: 28px;
	background: transparent;
	color: var(--vr-pts-primary);
}

.vr-partner-search .vr-partner-search__controls:focus-within {
	outline: 3px solid var(--vr-pts-focus);
	outline-offset: 2px;
}

.vr-partner-search .vr-partner-search__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--vr-pts-primary);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.48px;
	-webkit-appearance: none;
	appearance: none;
}

/* Restyled onto the pill above, which is what the visitor sees focused. */
.vr-partner-search .vr-partner-search__controls .vr-partner-search__input:focus-visible {
	outline: none;
}

.vr-partner-search .vr-partner-search__input::placeholder {
	color: var(--vr-pts-primary);
	opacity: 1;
}

/*
 * Chained through the pill for (0,3,0): the host's button rules include
 * attribute selectors such as [type="submit"] under a kit class, (0,2,0),
 * which would tie with a two-class selector and win on source order.
 */
.vr-partner-search .vr-partner-search__controls .vr-partner-search__submit {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--vr-pts-primary);
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* The loading ring is positioned against the button. */
	position: relative;
}

/* The kit fills and outlines every button on hover and focus at (0,2,1). */
.vr-partner-search .vr-partner-search__controls .vr-partner-search__submit:hover,
.vr-partner-search .vr-partner-search__controls .vr-partner-search__submit:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--vr-pts-primary);
}

.vr-partner-search .vr-partner-search__controls .vr-partner-search__submit:hover {
	background: rgba(0, 76, 151, 0.08);
}

.vr-partner-search .vr-partner-search__controls .vr-partner-search__submit:focus-visible {
	outline: 2px solid var(--vr-pts-primary);
	outline-offset: -4px;
}

.vr-partner-search .vr-partner-search__submit-icon {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}

/*
 * The category split pill: a navy label pill and a 48px navy chevron
 * circle, 2px apart.
 *
 * Drawn by default. The real <select> lies over the whole of it with no
 * opacity, so a click or tap anywhere opens the native list, the keyboard
 * operates it, assistive technology reads it through its own (visually
 * hidden) label, and the script keeps the drawn label in step with it. The
 * pill carries the focus ring for the select, so the select draws none.
 *
 * Only where scripting is off -- @media (scripting: none) below, and the
 * same rules in partner-search-noscript.css, which the block loads inside a
 * <noscript> for browsers without that media feature -- does the native
 * select itself become the pill, so the chosen category is always what it
 * shows. It is a media query rather than a class the script adds,
 * so the first paint is already the right pill: a class set by a footer
 * script arrives after the page has painted, and the picker visibly swapped
 * from one shape to the other. data-vr-enhanced, which the script sets,
 * forces the drawn pill as well.
 *
 * No transitions on the select: a host reset that animates form controls
 * would otherwise slide it between states.
 */
.vr-partner-search .vr-partner-search__filter {
	margin: 0;
}

.vr-partner-search .vr-partner-search__picker {
	position: relative;
	display: inline-flex;
	gap: 2px;
	height: 48px;
	border-radius: 100px;
}

.vr-partner-search .vr-partner-search__picker:focus-within {
	outline: 3px solid var(--vr-pts-focus);
	outline-offset: 2px;
}

.vr-partner-search .vr-partner-search__picker-label {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 22rem;
	height: 48px;
	padding: 0 24px;
	overflow: hidden;
	border-radius: 100px;
	background: var(--vr-pts-primary);
	color: var(--vr-pts-on-primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.48px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vr-partner-search .vr-partner-search__picker-chevron {
	flex: 0 0 48px;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 100px;
	background: var(--vr-pts-primary);
	color: var(--vr-pts-on-primary);
	pointer-events: none;
}

.vr-partner-search .vr-partner-search__picker:hover .vr-partner-search__picker-label,
.vr-partner-search .vr-partner-search__picker:hover .vr-partner-search__picker-chevron {
	background: var(--vr-pts-ink);
}

.vr-partner-search .vr-partner-search__picker-icon {
	display: block;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vr-partner-search .vr-partner-search__select {
	position: absolute;
	z-index: 1;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	box-shadow: none;
	color: var(--vr-pts-primary);
	/* 16px, so iOS does not zoom the page when the list opens. */
	font: inherit;
	font-size: 16px;
	opacity: 0;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

/* The pill's focus-within ring stands in for the select's own. */
.vr-partner-search .vr-partner-search__picker .vr-partner-search__select:focus-visible {
	outline: none;
}

/*
 * No scripting: the native select is the pill, showing its own value, with
 * the chevron drawn over its right end. (0,3,0), so a root the script has
 * marked keeps the drawn pill even here.
 */
@media (scripting: none) {
	.vr-partner-search:not([data-vr-enhanced]) .vr-partner-search__picker {
		gap: 0;
	}

	.vr-partner-search:not([data-vr-enhanced]) .vr-partner-search__picker-label {
		display: none;
	}

	.vr-partner-search:not([data-vr-enhanced]) .vr-partner-search__picker-chevron {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
	}

	.vr-partner-search:not([data-vr-enhanced]) .vr-partner-search__select {
		position: relative;
		inset: auto;
		width: auto;
		min-width: 12rem;
		max-width: 100%;
		height: 48px;
		padding: 0 64px 0 24px;
		background: var(--vr-pts-primary);
		color: var(--vr-pts-on-primary);
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.48px;
		opacity: 1;
	}

	.vr-partner-search:not([data-vr-enhanced]) .vr-partner-search__select:hover {
		background: var(--vr-pts-ink);
	}
}

.vr-partner-search .vr-partner-search__select option {
	background: #fff;
	color: #111827;
}

.vr-partner-search .vr-partner-search__filter-hint {
	margin: 0.5rem 0 0;
	color: var(--vr-pts-primary);
	font-size: 0.9375rem;
}

/*
 * The results card: the table's own box, pale and rounded, with the
 * pagination below it on the page. A table wider than the screen scrolls
 * inside the card; position:relative makes the card the containing block of
 * the visually hidden spans, which otherwise escape an overflow box and widen
 * the document.
 */
.vr-partner-search .vr-partner-search__card {
	position: relative;
	overflow-x: auto;
	border-radius: var(--vr-pts-card-radius);
	background: var(--vr-pts-card-bg);
}

.vr-partner-search .vr-partner-search__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: transparent;
	table-layout: fixed;
}

/* Column widths from the 1180px frame: logo 80, category 271, website 340. */
.vr-partner-search .vr-partner-search__col--logo {
	width: 80px;
}

.vr-partner-search .vr-partner-search__col--category {
	width: 23%;
}

.vr-partner-search .vr-partner-search__col--website {
	width: 29%;
}

/*
 * The header row: SemiBold 20, 62px tall, ruled beneath.
 *
 * Chained through the head for (0,3,0), the least that clears the theme
 * reset's rule over the first header row, `table thead:first-child
 * tr:first-child th`, which is (0,2,4). The theme also rules every cell on
 * all four sides and stripes odd rows; only the design's rule belongs here.
 */
.vr-partner-search .vr-partner-search__head .vr-partner-search__column {
	box-sizing: border-box;
	height: 62px;
	padding: 16px 24px;
	border: 0;
	border-bottom: 1px solid var(--vr-pts-rule);
	background: transparent;
	color: var(--vr-pts-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2px;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
}

/* Body rows: 86px, ruled between, no fills or stripes. */
.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell {
	padding: 28px 24px;
	border: 0;
	border-bottom: 1px solid var(--vr-pts-rule);
	background: transparent;
	color: var(--vr-pts-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.56;
	letter-spacing: 0.16px;
	text-align: left;
	vertical-align: middle;
}

.vr-partner-search .vr-partner-search__result:last-child > .vr-partner-search__cell {
	border-bottom: 0;
}

.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell--logo {
	padding: 15px 0 15px 24px;
}

/*
 * The 56px logo box: the partner's logo where the site has a copy of it, and
 * one placeholder glyph where it does not. Renderer::avatar() says which.
 */
.vr-partner-search .vr-partner-search__logo {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 9.2px;
	background: var(--vr-pts-logo-bg);
}

.vr-partner-search .vr-partner-search__logo-glyph {
	display: block;
	width: 60%;
	height: 60%;
	fill: var(--vr-pts-logo-glyph);
}

/*
 * A block, not the grid the glyph is centred in: a grid's auto row grows to
 * the image's own aspect ratio, so a tall logo came out 56 by 92 and was
 * cropped by the box. A block gives the percentage height below a definite
 * 56px to resolve against.
 */
.vr-partner-search .vr-partner-search__logo--image {
	display: block;
}

/*
 * A mirrored logo, drawn whole and letterboxed inside the box rather than
 * cropped, because a cropped logo is a different logo. Stored at 112px on its
 * longest side, twice the box, for high-density screens. The padding keeps a
 * mark that runs to the edge of its file off the rounded corners.
 *
 * Every property a theme's bare img rule commonly sets is set here, so the
 * host's max-width, height:auto, border, radius or shadow cannot resize or
 * decorate the logo. The class selector outranks an element selector without
 * needing !important.
 */
.vr-partner-search .vr-partner-search__logo-img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	object-fit: contain;
}

.vr-partner-search .vr-partner-search__name {
	color: var(--vr-pts-ink);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.2px;
	/* Trading names run to 105 characters and include unspaced codes. */
	overflow-wrap: anywhere;
}

.vr-partner-search .vr-partner-search__category {
	color: var(--vr-pts-ink);
}

/*
 * The website: the bare domain, in the table's blue.
 *
 * The kit sets its own family, weight 600, spacing and underline on every
 * link at (0,1,1) and recolours on hover at (0,2,1).
 */
.vr-partner-search .vr-partner-search__link {
	color: var(--vr-pts-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.56;
	letter-spacing: 0.16px;
	text-decoration: none;
	box-shadow: none;
	overflow-wrap: anywhere;
}

/* Underlined on hover and on focus, so the affordance is not colour alone. */
.vr-partner-search .vr-partner-search__link:hover,
.vr-partner-search .vr-partner-search__link:focus-visible {
	color: var(--vr-pts-ink);
	text-decoration: underline;
}

/* The absence of a website, said rather than left blank, and set in italic
   so it does not read as a link or a name. */
.vr-partner-search .vr-partner-search__no-website {
	color: var(--vr-pts-ink);
	font-style: italic;
}

/*
 * Every answer that is not a list of partners: nothing matched, a term too
 * short, no data yet. A card of its own, centred, with any follow-up
 * sentences as secondary text beneath the first.
 */
.vr-partner-search .vr-partner-search__message {
	margin: 0;
	padding: 32px;
	border-radius: var(--vr-pts-card-radius);
	background: var(--vr-pts-card-bg);
	color: var(--vr-pts-ink);
	font-size: 20px;
	line-height: 30px;
	text-align: center;
}

.vr-partner-search .vr-partner-search__message p {
	max-width: 40rem;
	margin: 0 auto 0.5rem;
	color: var(--vr-pts-muted);
	font-size: 16px;
	line-height: 24px;
}

.vr-partner-search .vr-partner-search__message p:last-child {
	margin-bottom: 0;
}

.vr-partner-search .vr-partner-search__message .vr-partner-search__empty-title,
.vr-partner-search .vr-partner-search__message--unavailable p {
	margin-bottom: 0.75rem;
	color: var(--vr-pts-ink);
	font-size: 20px;
	line-height: 30px;
}

.vr-partner-search .vr-partner-search__caveat {
	font-size: 0.9375rem;
}

/*
 * A notice above the answer: a dropped filter, a name set aside, or the
 * category narrowing a results-only block. Marked by its left border as well
 * as by colour.
 */
.vr-partner-search .vr-partner-search__message--ignored,
.vr-partner-search .vr-partner-search__message--filter {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--vr-pts-primary);
	border-radius: 12px;
	color: var(--vr-pts-ink);
	font-size: 16px;
	line-height: 24px;
	text-align: left;
}

/* The way out of a category notice. The kit's link rules are (0,1,1) and
   (0,2,1) on hover. */
.vr-partner-search .vr-partner-search__clear {
	color: var(--vr-pts-primary);
	font: inherit;
	font-weight: 600;
	letter-spacing: normal;
	text-decoration: underline;
	white-space: nowrap;
}

.vr-partner-search .vr-partner-search__clear:hover {
	color: var(--vr-pts-ink);
	text-decoration: underline;
}

/*
 * Previous at the left, the page numbers centred, Next at the right.
 *
 * A three-column grid, so the numbers stay centred on page 1 where there is
 * no Previous and on the last page where there is no Next.
 */
.vr-partner-search .vr-partner-search__pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin: 64px 0 0;
}

.vr-partner-search .vr-partner-search__page {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 48px;
	min-height: 0;
	border: 1px solid var(--vr-pts-primary);
	border-radius: 100px;
	background: transparent;
	box-shadow: none;
	color: var(--vr-pts-primary);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.48px;
	text-decoration: none;
	position: relative;
}

.vr-partner-search .vr-partner-search__page:hover {
	background: var(--vr-pts-primary);
	color: var(--vr-pts-on-primary);
	text-decoration: none;
}

.vr-partner-search .vr-partner-search__page--prev {
	grid-column: 1;
	justify-self: start;
	padding: 0 20px 0 12px;
}

.vr-partner-search .vr-partner-search__page--next {
	grid-column: 3;
	justify-self: end;
	padding: 0 12px 0 20px;
}

.vr-partner-search .vr-partner-search__page-icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vr-partner-search .vr-partner-search__pages {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vr-partner-search .vr-partner-search__page-item,
.vr-partner-search .vr-partner-search__page-gap {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Drawn only on a phone; see the media query. */
.vr-partner-search .vr-partner-search__pages .vr-partner-search__page-gap--phone {
	display: none;
}

.vr-partner-search .vr-partner-search__page-gap {
	display: grid;
	place-items: center;
	min-width: 49px;
	height: 48px;
	color: var(--vr-pts-primary);
	font-weight: 600;
}

.vr-partner-search .vr-partner-search__page-link {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	min-width: 49px;
	height: 48px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 100px;
	background: transparent;
	box-shadow: none;
	color: var(--vr-pts-primary);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.48px;
	text-decoration: none;
	position: relative;
}

/* The current page is outlined; the outline says it, not the colour. */
.vr-partner-search .vr-partner-search__page-link--current {
	border-color: var(--vr-pts-primary);
}

.vr-partner-search .vr-partner-search__pages .vr-partner-search__page-link:hover {
	border-color: var(--vr-pts-primary);
	color: var(--vr-pts-primary);
	text-decoration: none;
}

/* ------------------------------------------------------------------------
 * The loading indicator, as the product search draws it.
 *
 * One element with two kinds of home: over the magnifier while a search is
 * fetched in place, and inside the pagination link that was pressed while
 * its page is. Absolutely positioned in both, so an idle control and a
 * waiting one measure the same, and the glyph it covers is hidden rather
 * than removed so the control keeps its box.
 *
 * The border is only drawn while busy. At rest the ring is in the markup and
 * draws nothing at all, so nothing in the form outlines itself but the pill.
 *
 * A bordered ring rather than an animated glyph, because the reduced-motion
 * rule at the end of this file stops the animation and the ring still has to
 * be visible once it has.
 * --------------------------------------------------------------------- */

.vr-partner-search .vr-partner-search__spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	padding: 0;
}

/* Set by the script and never rendered from PHP, so with JavaScript absent
   the element is in the markup and never seen. */
.vr-partner-search [data-vr-busy] > .vr-partner-search__spinner {
	display: block;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.85;
	animation: vr-partner-search-spin 0.7s linear infinite;
}

.vr-partner-search .vr-partner-search__controls .vr-partner-search__submit[data-vr-busy] .vr-partner-search__submit-icon,
.vr-partner-search .vr-partner-search__page[data-vr-busy] .vr-partner-search__page-icon {
	visibility: hidden;
}

/* Previous and Next: over the arrow, whose centre is 24px in from the end of
   the pill it sits at (12px padding plus half its 24px box). The label stays
   readable and stays put. */
.vr-partner-search .vr-partner-search__page--prev > .vr-partner-search__spinner {
	left: 24px;
}

.vr-partner-search .vr-partner-search__page--next > .vr-partner-search__spinner {
	left: auto;
	right: 24px;
	margin: -7px -7px 0 0;
}

/* A page number has no glyph to stand in for, so the number gives way to
   the ring. It stays in the link's accessible name either way. */
.vr-partner-search .vr-partner-search__pages .vr-partner-search__page-link[data-vr-busy] {
	color: transparent;
}

.vr-partner-search .vr-partner-search__page-link[data-vr-busy] > .vr-partner-search__spinner {
	border-color: var(--vr-pts-primary);
	border-top-color: transparent;
}

@keyframes vr-partner-search-spin {
	to {
		transform: rotate(360deg);
	}
}

/* currentColor and transparent are both at the mercy of a forced palette, so
   the ring names its own system colours and keeps a visible edge. */
@media (forced-colors: active) {
	.vr-partner-search [data-vr-busy] > .vr-partner-search__spinner,
	.vr-partner-search .vr-partner-search__page-link[data-vr-busy] > .vr-partner-search__spinner {
		border-color: ButtonText;
		border-top-color: Highlight;
		opacity: 1;
	}

	/* A forced palette repaints the transparent number in the link colour,
	   where it would show through the ring. Opted out for the wait only; the
	   ring keeps the system colours above, which the opt-out leaves alone. */
	.vr-partner-search .vr-partner-search__pages .vr-partner-search__page-link[data-vr-busy] {
		forced-color-adjust: none;
	}
}

/*
 * Phones. There is no phone frame in the design, so: the two filter
 * controls go full width, one above the other; each result row stacks, logo
 * and name on top with the category and website beneath the name, divided
 * by the same rule; and the page numbers shrink to the current page plus or
 * minus one, with Previous and Next on a row of their own beneath.
 */
@media (max-width: 40em) {
	.vr-partner-search .vr-partner-search__toolbar {
		margin-bottom: 24px;
	}

	.vr-partner-search .vr-partner-search__fields {
		flex-direction: column;
		align-items: stretch;
	}

	.vr-partner-search .vr-partner-search__controls {
		width: 100%;
	}

	.vr-partner-search .vr-partner-search__picker {
		display: flex;
		width: 100%;
	}

	.vr-partner-search .vr-partner-search__picker-label,
	.vr-partner-search .vr-partner-search__select {
		flex: 1 1 auto;
		max-width: none;
	}

	.vr-partner-search .vr-partner-search__table,
	.vr-partner-search .vr-partner-search__body {
		display: block;
	}

	.vr-partner-search .vr-partner-search__table colgroup {
		display: none;
	}

	/* The column headings say nothing once the columns are gone, so they
	   are kept for assistive technology and not drawn. */
	.vr-partner-search .vr-partner-search__head {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.vr-partner-search .vr-partner-search__result {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		align-items: center;
		column-gap: 16px;
		row-gap: 4px;
		padding: 16px;
		border-bottom: 1px solid var(--vr-pts-rule);
	}

	.vr-partner-search .vr-partner-search__result:last-child {
		border-bottom: 0;
	}

	.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell,
	.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell--logo {
		display: block;
		padding: 0;
		border: 0;
	}

	.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell--logo {
		grid-column: 1;
		grid-row: 1;
	}

	.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell--name {
		grid-column: 2;
		grid-row: 1;
	}

	.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell--category,
	.vr-partner-search .vr-partner-search__result > .vr-partner-search__cell--website {
		grid-column: 2;
	}

	.vr-partner-search .vr-partner-search__pagination {
		grid-template-columns: 1fr 1fr;
		row-gap: 16px;
		margin-top: 32px;
	}

	.vr-partner-search .vr-partner-search__pages {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
	}

	.vr-partner-search .vr-partner-search__page--prev {
		grid-column: 1;
		grid-row: 2;
	}

	.vr-partner-search .vr-partner-search__page--next {
		grid-column: 2;
		grid-row: 2;
	}

	.vr-partner-search .vr-partner-search__page-item--far {
		display: none;
	}

	.vr-partner-search .vr-partner-search__pages .vr-partner-search__page-gap--phone {
		display: grid;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vr-partner-search * {
		animation: none !important;
		transition: none !important;
	}
}