/*
 * assets/css/archive.css · Out & Down theme · Phase 12.2
 *
 * Loaded on is_post_type_archive('gd_event') only — /events/, its
 * location variants, and every category/theme archive (all of them
 * resolve through this one CPT-archive template; see functions.php's
 * note on Session 1's is_post_type_archive() preflight finding).
 *
 * oad-archive-filters' own assets/filters.css (handle "oad-af") still
 * renders the bar, dropdowns, calendar and map — none of that is
 * rebuilt here. This file does two things: (1) maps the plugin's
 * --oad-af-* custom properties onto this theme's tokens, the same
 * pattern chrome.css and event.css already use for their own third-party
 * surfaces; (2) restates the blueprint's structural spec (Section
 * 14–17) for the v2 markup oad-af-archive-v2 turns on — chip row, sort
 * bar, pagination and empty state — onto the plugin's actual class
 * names, since that markup ships from the plugin with only a bare
 * flexbox layout of its own.
 *
 * The poster wall no longer rebuilds GeoDirectory's grid (Phase 13.5): GD
 * renders each card from parts/oad-card-poster.html and this file only sets
 * the plugin's --oad-af-cols / --oad-af-gap tokens (section 7) on the
 * blueprint's "apart" gutter (Section 03 / outanddown-blueprint-poster-gutter)
 * instead of the plugin's shared-hairline one.
 */

/* ------------------------------------------------------------------ */
/* 1 · token mapping                                                   */
/* Every colour, font and size the bar/chips/sortbar/pagination/empty  */
/* state read comes from one pair of custom properties plus named      */
/* greys (see outanddown-archive-filters memory, v0.21/v0.29 notes).   */
/* Setting the *-set variables is how a theme feeds them without       */
/* touching the plugin's own stylesheet.                               */
/* ------------------------------------------------------------------ */

.oad-af {
	--oad-af-ink-set: var(--wp--preset--color--ink);
	--oad-af-paper-set: var(--wp--preset--color--ground);
	--oad-af-text-set: var(--wp--preset--color--ink);
	--oad-af-border-set: var(--wp--preset--color--ink);
	--oad-af-field-set: var(--wp--preset--color--ground);
	--oad-af-font-set: var(--wp--preset--font-family--speak);
	--oad-af-size-set: 1rem;

	--oad-af-muted: var(--wp--preset--color--muted);
	--oad-af-faint: var(--wp--preset--color--muted);
	--oad-af-fainter: var(--wp--preset--color--muted);
	--oad-af-wash: var(--wp--preset--color--ground);
	--oad-af-hairline: var(--wp--preset--color--ink);
	--oad-af-white: var(--wp--preset--color--white);

	/* Rule 07: every plugin surface that drew a shadow for depth (the
	   sort/type dropdown panels, the calendar) now has none — base.css
	   strips it globally. A 2px ink border is what already reads as the
	   edge, so nothing further is needed here. */
}

/* Phase 2: the plugin defaults are 2px #262626 borders and a White
   surface. Restate them on the blueprint (2px Ink, Ground) at (0,1,1) so
   they beat the plugin's own (0,1,0) declarations. */
body .oad-af {
	--oad-af-line: 2px solid var(--wp--preset--color--ink);
	--oad-af-surface: var(--wp--preset--color--ground);
	--oad-af-surface-wall: var(--wp--preset--color--ground);
}

/* Dark variant (unused on this theme's archive template today, kept so
   the mapping holds if a future template places the bar on Ink). */
.oad-af.oad-af--dark {
	--oad-af-ink-set: var(--wp--preset--color--ground);
	--oad-af-paper-set: var(--wp--preset--color--ink);
	--oad-af-wash: var(--wp--preset--color--ink);
	--oad-af-hairline: var(--wp--preset--color--ground);
}

/* ------------------------------------------------------------------ */
/* 2 · archive heading                                                 */
/* [oad_heading] emits bare text; the theme supplies the Section-02    */
/* display treatment used by every other page title. */
/* ------------------------------------------------------------------ */

.oad-archive-heading {
	padding: var(--wp--preset--spacing--24);
}

@media (min-width: 1024px) {
	.oad-archive-heading {
		padding: var(--wp--preset--spacing--40);
	}
}

.oad-archive-heading h1 {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 0.95;
	font-size: var(--wp--preset--font-size--display-l);
}

.oad-archive-heading .oad-archive-intro {
	margin: var(--wp--preset--spacing--16) 0 0;
}

/* ------------------------------------------------------------------ */
/* 3 · meta line under the bar. The bar is ONE row: sort and the view  */
/* switcher are cells of it (section 9), and applied filters show in   */
/* their own cells, so there is no chip row and no sort bar. What is   */
/* left is one small Meter line: the count (home: the radius text),    */
/* and Clear filters when any are on. On the search page it carries    */
/* Section 25's echo instead.                                          */
/* ------------------------------------------------------------------ */

.oad-af-count {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
	min-height: 44px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 1024px) {
	.oad-af-count {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

.oad-af-count__n {
	color: var(--wp--preset--color--ink);
}

.oad-af-count__clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.oad-af-count__clear:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* The echo brings its own cells and lines. */
.oad-af-count:has(.oad-af-echo) {
	display: block;
	padding: 0;
}

/* Query echo bar — Section 25. Fills the meta line on the search
   page: Searched "x" · N results (5 cells), Clear search (1). Zero results
   add one Did-you-mean line under it. Meter, the radius bar's grammar. */

.oad-af-echo {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(6, 1fr);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-af-echo__txt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-column: span 5;
	min-width: 0;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	min-height: 44px;
}

.oad-af-echo__k {
	color: var(--wp--preset--color--ink);
}

.oad-af-echo__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 1;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	border-left: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.oad-af-echo__clear:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-af-echo__mean {
	grid-column: 1 / -1;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border-top: 2px solid var(--wp--preset--color--ink);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.oad-af-echo__mean a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}


@media (max-width: 1023px) {
	.oad-af-echo__txt {
		grid-column: span 4;
	}

	.oad-af-echo__clear {
		grid-column: span 2;
	}
}

/* ------------------------------------------------------------------ */
/* 6 · empty state — Section 16.                                       */
/* ------------------------------------------------------------------ */

.oad-af-empty {
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24);
	width: 100%;
	border: 2px solid var(--wp--preset--color--ink);
	border-top: none;
	/* The footer's own top line closes the cell; a second one would double. */
	border-bottom: none;
	background: var(--wp--preset--color--ground);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--16);
	margin: 0;
}

@media (min-width: 1024px) {
	.oad-af-empty {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
	}
}

.oad-af-empty h3 {
	font-size: var(--wp--preset--font-size--display-m);
	margin: 0;
}

@media (min-width: 1024px) {
	.oad-af-empty h3 {
		font-size: var(--wp--preset--font-size--display-m);
	}
}

.oad-af-empty__why {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

.oad-af-empty__k {
	color: var(--wp--preset--color--ink);
}

.oad-af-empty__btn {
	display: inline-block;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
}

.oad-af-empty__btn:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* 7 · results: GeoDirectory's loop, the theme's cards (Phase 13.5).   */
/*                                                                    */
/* GD still draws the loop wrapper (.geodir-widget-posts, one          */
/* .geodir-post per card) and renders each card from                   */
/* parts/oad-card-poster.html / oad-card-row.html, so nothing here     */
/* rebuilds a grid. The wall's columns and gap are poster.css's        */
/* --oad-af-cols / --oad-af-gap tokens (shared with the home band);    */
/* this section only pads the archive's results and spaces the list.   */
/* ------------------------------------------------------------------ */

.oad-af-section--wall .oad-af-results {
	padding: var(--wp--preset--spacing--24);
}

@media (min-width: 1024px) {
	.oad-af-section--wall .oad-af-results {
		padding: var(--wp--preset--spacing--40);
	}
}

/* List and map: the plugin puts the chip row, sort bar, results and
   pagination in .oad-af-body next to the map, and its 1fr / 2fr grid
   auto-places them one per cell -- so the sort bar took the wide column
   and the whole list dropped into the narrow map column underneath the
   map. From 1024px the map is pinned to column 1 for the full height and
   everything else stacks in column 2. Below it the map sits above the
   list at half a screen: the plugin's own stacking rules, moved from its
   780px break to this theme's single 1024px one (same selectors, later
   in the cascade, so these win). */
@media (max-width: 1023px) {
	.oad-af-section--list .oad-af-body:has(.oad-af-map) {
		grid-template-columns: 1fr;
	}

	.oad-af-section--list .oad-af-map {
		position: static;
		height: 50svh;
		border-right: 0;
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}
}

/* Desktop: the map and the list share the bar's 40px page margin, so the
   bar, map and list have the same left and right edges. Six columns, map 2
   and list 4 (the 1 : 2 the plugin always drew), a 40px gutter: the event
   card's category tab hangs 34px off its left edge and lives in it. 24 under
   the bar, 40 under the last row. The map is a framed box that floats: it
   sticks 24 below the bar and ends 24 above the foot of the screen, so the
   plugin's right and bottom rules (which only closed off a full-bleed map)
   go. Row gap stays 0 because the map spans 20 implicit rows; the list's 24s
   are margins. */

@media (min-width: 1024px) {
	.oad-af-section--list .oad-af-body:has(.oad-af-map) {
		grid-template-columns: repeat(6, 1fr);
		column-gap: var(--wp--preset--spacing--40);
		margin: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40) 0;
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.oad-af-section--list .oad-af-body:has(.oad-af-map) > .oad-af-map {
		grid-column: 1 / span 2;
		grid-row: 1 / span 20;
		top: calc(var(--oad-af-sticky-top, 0px) + var(--wp--preset--spacing--24));
		/* The plugin measures where the map is and sets --oad-af-map-h, so the
		   foot cell is on screen before any scrolling. */
		height: var(--oad-af-map-h, calc(100svh - var(--oad-af-sticky-top, 0px) - 48px));
		border: 2px solid var(--wp--preset--color--ink);
		/* Room for the foot cell; the canvas fills what is left. */
		padding-bottom: 48px;
	}

	/* "In this view · 12 events". The plugin carries the count as data-count
	   (it is drawn here because the map's berth must stay childless). */
	.oad-af-section--list .oad-af-map[data-count]::after {
		content: "In this view \00b7  " attr(data-count);
		position: absolute;
		inset: auto 0 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 var(--wp--preset--spacing--16);
		border-top: 2px solid var(--wp--preset--color--ink);
		background: var(--wp--preset--color--ground);
		font-family: var(--wp--preset--font-family--meter);
		font-weight: 500;
		font-size: 11px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink);
	}

	/* The list column has its own 40px inset on the left, as the guide
	   page's list does: the event card's category tab hangs 34px off the
	   card, and it has to sit inside the column rather than in the gutter
	   against the map's frame. */
	.oad-af-section--list .oad-af-body:has(.oad-af-map) > :not(.oad-af-map) {
		grid-column: 3 / span 4;
		margin-left: var(--wp--preset--spacing--40);
	}

	/* The count line is the list's head cell: framed, 44 tall, level with
	   the top of the map. The echo and the home radius line bring their own
	   lines and stay as they were. */
	.oad-af-section--list .oad-af-body:has(.oad-af-map) > .oad-af-count:not(:has(.oad-af-echo, .oad-af-radius)) {
		box-sizing: border-box;
		min-height: 44px;
		margin-bottom: var(--wp--preset--spacing--24);
		padding-inline: var(--wp--preset--spacing--16);
		border: 2px solid var(--wp--preset--color--ink);
		justify-content: space-between;
	}

	.oad-af-section--list .oad-af-body:has(.oad-af-map) > .oad-af-pagination {
		padding: var(--wp--preset--spacing--24) 0 0;
	}
}

/* List and map: one event card per line. The plugin already forces one
   column at any width (the 500px row-cols-sm-2 trap); this only spaces
   the rows, clears GD's own mb-4, and drops the plugin's rule under the
   last row -- .oad-gcard draws its own border. */

.oad-af-section--list .oad-af-results .geodir-widget-posts {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	/* 40 on the left: the card's category tab hangs off its left edge. */
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.oad-archive .oad-af-section--list .oad-af-results .geodir-widget-posts > .geodir-post {
	margin: 0 !important;
	padding: 0 !important;
	border-width: 0 !important;
}

@media (min-width: 1024px) {
	.oad-af-section--list .oad-af-results .geodir-widget-posts {
		padding: var(--wp--preset--spacing--40);
	}

	/* Beside the map the body's own margins and gutter do the insetting. */
	.oad-af-section--list .oad-af-body:has(.oad-af-map) .oad-af-results .geodir-widget-posts {
		padding: 0;
	}
}

/* With nothing to list the plugin draws its own empty state (Section 16),
   and GeoDirectory's "No listings were found ... add a listing?" alert would
   sit under it saying the same thing in another voice. The empty state wins. */
.oad-af-body:has(> .oad-af-empty) > .oad-af-results {
	display: none;
}

/* ------------------------------------------------------------------ */
/* 8 · skeleton loader (Section 17) while an AJAX request is in flight. */
/*                                                                    */
/* The grid keeps its final shape: every card already on the page      */
/* becomes a placeholder in its own frame -- same 4:5 box, same border, */
/* same grid position -- so nothing moves when the real cards arrive.   */
/* The plugin's full-bleed stripe overlay is switched off here in favour */
/* of these. Poster wall: 4:5 cells. List view: the 1 / 4 / 1 strip      */
/* (2 / 3 / 1 below 1024) as two hairlines over the same pattern.        */
/* ------------------------------------------------------------------ */

#oad-af-results[aria-busy="true"]::after {
	content: none;
}

#oad-af-results[aria-busy="true"] :is(.oad-poster-card__frame, .oad-gcard) > *,
#oad-af-results[aria-busy="true"] .oad-poster-card__strip {
	visibility: hidden;
}

#oad-af-results[aria-busy="true"] .oad-poster-card__frame {
	background: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.2) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
}

#oad-af-results[aria-busy="true"] .oad-gcard {
	min-height: var(--wp--preset--spacing--80);
	background:
		linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) 33.3333% 0 / 2px 100% no-repeat,
		linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) 83.3333% 0 / 2px 100% no-repeat,
		repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.2) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
}

@media (min-width: 1024px) {
	#oad-af-results[aria-busy="true"] .oad-gcard {
		background-position: 16.6667% 0, 83.3333% 0, 0 0;
	}
}

/* The one word. Section 09: Loading, and nothing else. */
#oad-af-results[aria-busy="true"] :is(.oad-poster-card__frame, .oad-gcard)::after {
	content: "Loading";
	position: absolute;
	left: var(--wp--preset--spacing--16);
	bottom: var(--wp--preset--spacing--16);
	padding: 0 var(--wp--preset--spacing--8);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
	#oad-af-results[aria-busy="true"] :is(.oad-poster-card__frame, .oad-gcard) {
		animation: oad-skeleton-pulse 1600ms ease-in-out infinite;
	}

	@keyframes oad-skeleton-pulse {
		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.55;
		}
	}

	/* Arrival: the new cards fade in inside their frames (100 ms). The
	   plugin adds .is-arriving for one frame after the swap. */
	#oad-af-results > * {
		transition-property: opacity;
		transition-duration: 100ms;
		transition-timing-function: ease-out;
	}

	#oad-af-results.is-arriving > * {
		opacity: 0;
	}
}

@media (min-width: 1024px) {
	.oad-af-section--list .oad-af-body:has(.oad-af-map) > :not(.oad-af-map) {
		border-left: 0;
	}
}

/* ------------------------------------------------------------------ */
/* 9 · filter bar — Section 14 (Phase 3).                              */
/* Desktop: one 48px row, search 2 · Date 1 · Type 1 · Location 1 ·    */
/* Free 1, shared hairlines, no floating inputs. ≤1023: search row     */
/* (56), then Filters 3 · Sort 2 · Free 1; the date/type/place         */
/* controls move into a full-height sheet (Ink head, 56px foot).       */
/* Scoped to .oad-af--v2 so events-directory pages keep the plugin's   */
/* own bar. Flex, not grid: Type, Location and Free are each           */
/* conditional, and a flex row with weights 2·1·1·1·1 still fills the  */
/* tram whichever of them are present.                                 */
/* ------------------------------------------------------------------ */

body .oad-af.oad-af--v2 {
	padding: 0;
	margin-inline: var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
}

@media (min-width: 1024px) {
	body .oad-af.oad-af--v2 {
		margin-inline: var(--wp--preset--spacing--40);
	}
}

.oad-af--v2 .oad-af__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	align-items: stretch;
	min-height: 48px;
}

.oad-af--v2 .oad-af__sheet,
.oad-af--v2 .oad-af__sheet-body {
	display: contents;
}

.oad-af--v2 .oad-af__sheet-head,
.oad-af--v2 .oad-af__sheet-foot,
.oad-af--v2 .oad-af__mfilters,
.oad-af--v2 .oad-af__msort,
.oad-af--v2 .oad-af__go,
.oad-af--v2 .oad-af__clear {
	display: none;
}

.oad-af--v2 .oad-af__field,
.oad-af--v2 .oad-af__row:has(.oad-af__field--place) .oad-af__field--dates,
.oad-af--v2 .oad-af__row:has(.oad-af__field--place) .oad-af__field--types,
.oad-af--v2 .oad-af__field--place {
	flex: 1 1 0;
	min-width: 0;
	gap: 0;
	box-sizing: border-box;
	border-left: 2px solid var(--wp--preset--color--ink);
}

.oad-af--v2 .oad-af__row .oad-af__field--grow,
.oad-af--v2 .oad-af__row:has(.oad-af__field--place) .oad-af__field--grow {
	flex: 2 1 0;
	border-left: 0;
}

/* Every control is a borderless 48px cell; the cell borders above are the
   only lines. Inputs are 16px (audit decision 1: iOS zooms on less). */
.oad-af--v2 input[type="search"],
.oad-af--v2 .oad-af__dd-summary {
	border: 0;
	min-height: 48px;
	height: 100%;
	padding: 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	background: var(--wp--preset--color--ground);
}

.oad-af--v2 .oad-af__dd-summary:hover,
.oad-af--v2 .oad-af__dd[open] > .oad-af__dd-summary {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-af__dd-summary:hover::after,
.oad-af--v2 .oad-af__dd[open] > .oad-af__dd-summary::after {
	border-top-color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-af__field--check {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 48px;
	padding: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
}

.oad-af--v2 .oad-af__field--check:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Checkboxes: a 16px square, 2px Ink edge, no rounding. The whole label */
/* cell is the tap target, so the box itself can be small. Drawn here    */
/* because the native box is rounded and takes the OS accent.            */
.oad-af--v2 input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	flex: none;
	margin: 0;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-af--v2 input[type="checkbox"]:checked {
	background: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) center / 8px 8px no-repeat, var(--wp--preset--color--ground);
}

.oad-af--v2 .oad-af__field--check:hover input[type="checkbox"] {
	border-color: var(--wp--preset--color--white);
}

/* One row. Weights are the six tram columns halved (12): search 3 ·   */
/* date 2 · type 2 · place 2 · sort 2 · Free 1, then the 48px view     */
/* switcher. Flex, so a missing Type or Place lets the rest fill it.   */
body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--dates,
body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--types,
body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--place,
body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--sort {
	flex: 2 1 0;
}

body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--grow {
	flex: 3 1 0;
}

/* Last in the row whatever the markup order. */
body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--view {
	flex: 0 0 48px;
	order: 9;
}

.oad-af--v2 .oad-af-sortbar {
	display: contents;
}

.oad-af--v2 .oad-af-sortbar__dd {
	position: relative;
	width: 100%;
	height: 100%;
}

.oad-af--v2 .oad-af-sortbar__trigger {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
	min-height: 48px;
	height: 100%;
	padding: 0 var(--wp--preset--spacing--16);
	border: 0;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
}

.oad-af--v2 .oad-af-sortbar__trigger::-webkit-details-marker {
	display: none;
}

.oad-af--v2 .oad-af-sortbar__mlbl {
	display: none;
}

.oad-af--v2 .oad-af-sortbar__caret {
	flex: none;
	font-family: var(--wp--preset--font-family--meter);
	color: var(--wp--preset--color--muted);
}

.oad-af--v2 .oad-af-sortbar__dd[open] > .oad-af-sortbar__trigger,
.oad-af--v2 .oad-af-sortbar__trigger:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-af-sortbar__dd[open] .oad-af-sortbar__caret,
.oad-af--v2 .oad-af-sortbar__trigger:hover .oad-af-sortbar__caret {
	color: inherit;
}

.oad-af--v2 .oad-af-sortbar__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 100%;
	width: max-content;
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
	border-top: 0;
}

.oad-af--v2 .oad-af__field--view .oad-af__toggle {
	width: 100%;
	height: 100%;
	min-height: 48px;
	border: 0;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-af--v2 .oad-af__field--view .oad-af__toggle:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Dropdown panels: hairline rows, 44px, Ink on hover, no shadow. */
.oad-af--v2 .oad-af__dd-panel {
	top: 100%;
	left: -2px;
	padding: 0;
	gap: 0;
	max-width: none;
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
	border-top: 0;
}

.oad-af--v2 .oad-af__dd-option,
.oad-af--v2 .oad-af__place-option {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	gap: var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	display: flex;
	align-items: center;
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-af--v2 .oad-af__dd-panel > :first-child {
	border-top: 0;
}

.oad-af--v2 .oad-af__dd-option:hover,
.oad-af--v2 .oad-af__dd-option:focus-within,
.oad-af--v2 .oad-af__place-option:hover,
.oad-af--v2 .oad-af__place-option:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-af__dd-sub {
	border-left: 0;
	padding-left: 0;
}

.oad-af--v2 .oad-af__dd-option--sub {
	min-height: 44px;
	padding-left: var(--wp--preset--spacing--40);
}

.oad-af--v2 .oad-af__place-find {
	min-height: 44px;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: 16px;
	padding: 0 var(--wp--preset--spacing--16);
}

/* Calendar: 44px days and arrows, 2px buttons, Action never at rest. */
.oad-af--v2 .oad-af__dd-panel--dates {
	padding: 0;
}

.oad-af--v2 .oad-af__cal {
	width: 344px;
	max-width: 100%;
	padding: var(--wp--preset--spacing--16);
	gap: var(--wp--preset--spacing--16);
}

.oad-af--v2 .oad-cal__title {
	font-size: 13px;
}

.oad-af--v2 .oad-cal__nav {
	font-size: 16px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.oad-af--v2 .oad-cal__nav:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Day-of-week initials: 11px is the floor for text on this site. */
.oad-af--v2 .oad-cal__dow {
	font-size: 11px;
}

.oad-af--v2 .oad-cal__grid {
	gap: 0;
}

.oad-af--v2 .oad-cal__day {
	aspect-ratio: auto;
	min-height: 44px;
	font-size: 13px;
}

.oad-af--v2 .oad-cal__day:hover:not(:disabled):not(.is-start):not(.is-end) {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Ink is the selected fill; the range band between the ends is White on the
   Ground panel. No lines: a border on every banded day stacked to 4px between
   rows. */
.oad-af--v2 .oad-cal__day.is-between {
	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- the user asked for a White range band on the Ground panel */
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.oad-af--v2 .oad-cal__day.is-start,
.oad-af--v2 .oad-cal__day.is-end {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-cal__reset,
.oad-af--v2 .oad-cal__done {
	min-height: 44px;
	border: 2px solid var(--wp--preset--color--ink);
	padding: 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
	opacity: 1;
}

.oad-af--v2 .oad-cal__reset:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-cal__done:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	opacity: 1;
}

/* Sort options: 44px rows. */
.oad-af-sortbar__opt {
	display: flex;
	align-items: center;
	min-height: 44px;
	border-top: 2px solid var(--wp--preset--color--ink);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.oad-af-sortbar__opt:first-child {
	border-top: 0;
}

.oad-af-sortbar__opt:hover {
	color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-af__clear {
	border: 0;
}

/* Desktop: the bar sticks under the header. Mobile: it does not. */

/* ---- ≤1023: search row · Filters 3 · Sort 2 · Free 1 · sheet ------- */
@media (max-width: 1023px) {
	body .oad-af.oad-af--v2,
	body .oad-af.oad-af--v2.oad-af--unpinned {
		position: static;
	}

	.oad-af--v2 .oad-af__row {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		min-height: 0;
	}

	.oad-af--v2 .oad-af__field--grow,
	.oad-af--v2 .oad-af__row:has(.oad-af__field--place) .oad-af__field--grow {
		grid-column: 1 / -1;
		order: 1;
		height: 48px;
	}

	/* The view switcher shares the search row. */
	.oad-af--v2 .oad-af__row:has(.oad-af__field--view) .oad-af__field--grow,
	.oad-af--v2 .oad-af__row:has(.oad-af__field--place):has(.oad-af__field--view) .oad-af__field--grow {
		grid-column: 1 / span 5;
	}

	body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--view {
		grid-column: span 1;
		order: 1;
		height: 48px;
	}

	.oad-af--v2 .oad-af__field--view .oad-af__toggle {
		min-height: 48px;
	}

	.oad-af--v2 .oad-af__field--grow input[type="search"] {
		min-height: 48px;
	}

	/* The line under the search row is drawn on the cells below it. The
	   search input is 56px inside a 56px cell and painted over a border
	   of the cell's own, which is why the line went missing. */
	body .oad-af.oad-af--v2 .oad-af__mfilters,
	body .oad-af.oad-af--v2 .oad-af__field--sort {
		border-top: 2px solid var(--wp--preset--color--ink);
	}

	/* Sort is a cell of the row, in the Filters button's grammar. */
	body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--sort {
		grid-column: span 3;
		order: 3;
		min-height: 48px;
	}

	body .oad-af.oad-af--v2 .oad-af__row .oad-af__field--check {
		order: 4;
	}

	/* Two columns are too narrow for the value: the cell says Sort, and the
	   choice is read in the list that opens. */
	.oad-af--v2 .oad-af-sortbar__val {
		display: none;
	}

	.oad-af--v2 .oad-af-sortbar__mlbl {
		display: inline;
	}

	/* Free is not a phone control: the cell is gone, and the sheet has no
	   Price section either. The desktop tram still has it. */
	.oad-af--v2 .oad-af__field--check {
		display: none;
	}

	.oad-af--v2 .oad-af-sortbar__trigger {
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 13px;
	}

	.oad-af--v2 .oad-af-sortbar__panel {
		left: auto;
		right: 0;
	}

	/* Home has no sort or view: Filters takes the cells they would. */
	.oad-af--v2 .oad-af__row:not(:has(.oad-af-sortbar)) .oad-af__mfilters {
		grid-column: 1 / -1;
	}

	.oad-af--v2 .oad-af__mfilters {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--8);
		min-width: 0;
		min-height: 48px;
		padding: 0 var(--wp--preset--spacing--16);
		border: 0;
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 13px;
		cursor: pointer;
		white-space: nowrap;
		order: 2;
	}

	.oad-af--v2 .oad-af__mfilters {
		grid-column: span 3;
	}

	.oad-af--v2 .oad-af__msort {
		grid-column: span 2;
		border-left: 2px solid var(--wp--preset--color--ink);
	}

	/* An Ink control inverts on hover: Ground fill, Ink text. The bar's own
	   lines are its frame, so no outline is added on top of them. */
	.oad-af--v2 .oad-af__mfilters:hover,
	.oad-af--v2 .oad-af__msort:hover {
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
	}

	.oad-af--v2 .oad-af__mcaret {
		font-family: var(--wp--preset--font-family--meter);
		font-weight: 500;
		color: inherit;
	}

	.oad-af--v2 .oad-af__mfilters:hover .oad-af__mcaret,
	.oad-af--v2 .oad-af__msort:hover .oad-af__mcaret {
		color: inherit;
	}

	/* The sheet is a popup: a framed Ground box floating over a dimmed
	   page, 16px in from the sides and bottom and 64px down from the top.
	   All four edges are pinned, so its size follows the visible screen and
	   a phone browser's toolbar cannot push the footer off it. */
	.oad-af--v2 .oad-af__sheet {
		display: none;
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px);
		left: var(--wp--preset--spacing--16);
		right: var(--wp--preset--spacing--16);
		bottom: var(--wp--preset--spacing--16);
		z-index: 1000;
		flex-direction: column;
		box-sizing: border-box;
		border: 2px solid var(--wp--preset--color--ink);
		background: var(--wp--preset--color--ground);
	}

	.oad-af--v2 .oad-af__sheet.is-open {
		display: flex;
	}

	.oad-af--v2 .oad-af__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		min-height: 56px;
		padding: 0 0 0 var(--wp--preset--spacing--16);
		border-bottom: 2px solid var(--wp--preset--color--ink);
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 16px;
		flex: none;
	}

	.oad-af--v2 .oad-af__sheet-close {
		width: 56px;
		height: 100%;
		border: 0;
		border-left: 2px solid var(--wp--preset--color--ink);
		background: transparent;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--meter);
		font-size: 20px;
		cursor: pointer;
	}

	/* The left line is Ink at rest too, invisible against the black bar, so on
	   hover it is the only edge that has to appear. */
	.oad-af--v2 .oad-af__sheet-close:hover {
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
	}

	.oad-af--v2 .oad-af__sheet-body {
		display: block;
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* `body .oad-af` outranks the tram rule that draws a left line on the date
	   and type cells once a place field is present; without it that line
	   sits beside the popup's own frame and doubles it. */
	body .oad-af.oad-af--v2 .oad-af__sheet-body > .oad-af__field {
		display: block;
		border-left: 0;
		border-bottom: 0;
	}

	/* Price is one row on a phone: Free only. No section head, no Paid. */
	body .oad-af.oad-af--v2 .oad-af__sheet-body > .oad-af__field--price {
		display: block;
	}

	.oad-af--v2 .oad-af__field--price .oad-af__sheet-section,
	.oad-af--v2 .oad-af__field--price .oad-af__dd-option:last-child {
		display: none;
	}

	.oad-af--v2 .oad-af__field--price .oad-af__dd-option {
		box-sizing: border-box;
		min-height: 56px;
		padding: 0 var(--wp--preset--spacing--16);
		border-top: 0;
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	/* Section heads are Ground rows, open or not, never the Ink open-trigger
	   the tram's dropdowns use. */
	.oad-af--v2 .oad-af__sheet .oad-af__dd[open] > .oad-af__dd-summary {
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
	}

	/* Hover inverts, as every other cell does; the value on the right and the
	   arrow follow, since both carry their own colour. */
	.oad-af--v2 .oad-af__sheet .oad-af__dd-summary:hover,
	.oad-af--v2 .oad-af__sheet .oad-af__dd[open] > .oad-af__dd-summary:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd-summary:hover > span:not(.oad-af__k),
	.oad-af--v2 .oad-af__sheet .oad-af__setloc:hover > span:not(.oad-af__k) {
		color: var(--wp--preset--color--white);
	}

	/* No lines between the options; the open list closes with one line so it
	   does not run into the next row. */
	body .oad-af.oad-af--v2 .oad-af__sheet .oad-af__dd-option,
	body .oad-af.oad-af--v2 .oad-af__sheet .oad-af__place-option {
		border-top: 0;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd[open] > .oad-af__dd-panel {
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	/* Each section is a closed row: what it is on the left, what is chosen
	   on the right. One opens at a time. */
	.oad-af--v2 .oad-af__sheet .oad-af__dd-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--16);
		box-sizing: border-box;
		min-height: 56px;
		padding: 0 var(--wp--preset--spacing--16);
		border: 0;
		border-bottom: 2px solid var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 13px;
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
		cursor: pointer;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__k {
		display: inline;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd-summary > span:not(.oad-af__k) {
		flex: 1 1 0;
		text-align: right;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: var(--wp--preset--font-family--meter);
		font-weight: 400;
		letter-spacing: 0;
		color: var(--wp--preset--color--muted);
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd-summary::after {
		display: inline;
		flex: none;
		width: auto;
		height: auto;
		border: 0;
		transform: none;
		content: "▾";
		font-family: var(--wp--preset--font-family--meter);
		font-weight: 500;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd[open] > .oad-af__dd-summary {
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd[open] > .oad-af__dd-summary::after {
		content: "▴";
	}

	.oad-af--v2 .oad-af__sheet .oad-af__setloc > span:not(.oad-af__k) {
		flex: none;
		text-align: left;
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		letter-spacing: 0.05em;
		color: var(--wp--preset--color--ink);
	}

	.oad-af--v2 .oad-af__sheet .oad-af__setloc::after {
		content: "→";
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd-panel {
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		border: 0;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__dd-option,
	.oad-af--v2 .oad-af__sheet .oad-af__place-option {
		padding: 0 var(--wp--preset--spacing--16);
	}

	/* The popup's own footer says Show N events; the calendar's Reset and
	   Done row would repeat it. */
	.oad-af--v2 .oad-af__sheet .oad-cal__foot {
		display: none;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__cal {
		width: 100%;
		max-width: none;
		padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
	}

	.oad-af--v2 .oad-af__sheet-foot {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		flex: none;
	}

	.oad-af--v2 .oad-af__sheet-foot > button {
		box-sizing: border-box;
		min-height: 56px;
		border: 0;
		border-top: 2px solid var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 13px;
		cursor: pointer;
	}

	.oad-af--v2 .oad-af__sheet-clear {
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
	}

	.oad-af--v2 .oad-af__sheet-clear:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	/* The line between the two buttons belongs to this one: the foot rule above
	   zeroes every button's border, so Clear all's could never show. Ink at rest
	   is invisible against the Ink fill; on hover it is the button's left edge. */
	.oad-af--v2 .oad-af__sheet-foot > .oad-af__sheet-show {
		border-left: 2px solid var(--wp--preset--color--ink);
	}

	.oad-af--v2 .oad-af__sheet-show {
		grid-column: span 2;
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	/* No outline on hover: the popup's frame and the Clear all cell already
	   draw every edge of this button, and an outline doubles them. */
	.oad-af--v2 .oad-af__sheet-show:hover {
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
	}

	/* The page behind the popup, dimmed. Painted by the root element so it
	   needs no markup, and clicked to close (see the sheet script). */
	html.oad-af-sheet-lock::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
	}
}

html.oad-af-sheet-lock {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Phase 3 follow-up · the results section sits outside the form, so the
   tokens set on `body .oad-af` never reached it and the wall stayed White. */
body .oad-af-section {
	--oad-af-surface-wall: var(--wp--preset--color--ground);
	--oad-af-surface: var(--wp--preset--color--ground);
	--oad-af-line: 2px solid var(--wp--preset--color--ink);
}

.oad-af-section,
.oad-af-section .oad-af-body,
.oad-af-section .oad-af-results {
	background: var(--wp--preset--color--ground);
}

/* Price (Free only / Paid only) exists in the phone sheet only; on the tram
   the Free cell is the control. */
.oad-af--v2 .oad-af__field--price {
	display: none;
}

/* The section name in a sheet row; the tram's dropdowns say only the value. */
.oad-af--v2 .oad-af__k {
	display: none;
}

/* Bit Assist floats over the sheet foot; hidden while the sheet is open. */
html.oad-af-sheet-lock #bit-assist-widget-container {
	display: none;
}

/* "Set location" is a link to GeoDirectory's switcher, not a section head. */
@media (max-width: 1023px) {
	.oad-af--v2 .oad-af__sheet .oad-af__setloc {
		pointer-events: auto;
		cursor: pointer;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__setloc:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}
}

/* Calendar days: a day you can pick is bold Ink; a day that has gone, or
   belongs to the next month, is light and regular weight, so the two read as
   different at a glance and not only by a shade of grey. */
.oad-af--v2 .oad-cal__day {
	font-weight: 800;
}

.oad-af--v2 .oad-cal__day.is-outside {
	font-weight: 400;
	color: var(--oad-af-faint);
}

.oad-af--v2 .oad-cal__day.is-past {
	font-weight: 400;
	color: var(--oad-af-fainter);
}

/* Quick date buttons above the calendar: Today, This weekend, Next 7 days.
   Outline at rest, Ink on hover and when they match the chosen dates. */
.oad-af--v2 .oad-af__quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) 0;
}

.oad-af--v2 .oad-af__quick[hidden] {
	display: none;
}

.oad-af--v2 .oad-af__quick button {
	box-sizing: border-box;
	height: 24px;
	padding: 0 var(--wp--preset--spacing--8);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.oad-af--v2 .oad-af__quick button:hover,
.oad-af--v2 .oad-af__quick button.is-on {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Set location: the search field from GeoDirectory's switcher, in the panel.
   Its script fills .gdlm-location-suggestions (Near me, recent places,
   nearest cities, matches); Bootstrap would hide and float that list, so it
   is laid out here as plain 44px rows (56px in the phone popup). */
body .oad-af.oad-af--v2 .oad-af__field--place .oad-af__dd-panel--loc {
	left: auto;
	right: -2px;
	width: 320px;
	max-width: none;
}

.oad-af--v2 .oad-af__loc {
	display: flex;
	flex-direction: column;
}

.oad-af--v2 .oad-af__loc .oad-af__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.oad-af--v2 .oad-af__loc-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--16);
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px;
}

.oad-af--v2 .oad-af__loc-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

body .oad-af.oad-af--v2 .oad-af__loc .gdlm-location-suggestions {
	display: block;
	position: static;
	inset: auto;
	transform: none;
	float: none;
	width: auto;
	max-height: none;
	background: transparent;
	overflow: visible;
}

/* modals.css frames GeoDirectory's suggestion list for the modal, with
   !important; inside the filter panel it is plain rows. */
body .oad-af.oad-af--v2 .oad-af__loc .gdlm-location-suggestions.dropdown-menu {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.oad-af--v2 .oad-af__loc .gdlm-location-suggestions ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oad-af--v2 .oad-af__loc .gdlm-location-suggestions li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--16);
	min-height: 44px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--16);
	border: 0;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

/* The square box every option row has in the Type list. */
.oad-af--v2 .oad-af__loc .gdlm-location-suggestions li::before {
	content: "";
	box-sizing: border-box;
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-af--v2 .oad-af__loc .gdlm-location-suggestions li:hover::before {
	border-color: var(--wp--preset--color--white);
}

.oad-af--v2 .oad-af__loc .gdlm-location-suggestions li * {
	font-weight: 500;
}

.oad-af--v2 .oad-af__loc .gdlm-location-suggestions li:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

@media (max-width: 1023px) {
	body .oad-af.oad-af--v2 .oad-af__sheet .oad-af__field--place .oad-af__dd-panel--loc {
		right: auto;
		width: auto;
	}

	/* The row is labelled by the popup's own key text on the left. */
	.oad-af--v2 .oad-af__sheet .oad-af__setloc-val {
		display: none;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__loc-input,
	.oad-af--v2 .oad-af__sheet .oad-af__loc .gdlm-location-suggestions li {
		min-height: 56px;
	}

	.oad-af--v2 .oad-af__sheet .oad-af__quick {
		padding-bottom: var(--wp--preset--spacing--8);
	}
}

/* An end date can fall in the next month (or be a past-styled day); the
   light "outside" colour must not sit on the Ink fill. */
.oad-af--v2 .oad-cal__day.is-start,
.oad-af--v2 .oad-cal__day.is-end {
	color: var(--wp--preset--color--white);
	font-weight: 800;
}

/* ------------------------------------------------------------------ */
/* Phone map view.                                                     */
/* Below 1024 the list view is the map alone: it fills the screen, with */
/* no title and no bar. Two square buttons float on it, exit (back to  */
/* the poster wall) top-left and Filters top-right, which opens the    */
/* same popup the wall's bar opens. The buttons are built by the       */
/* plugin (.oad-af-mapbar) and hidden by it everywhere else. Sits      */
/* above the header (500) and below the popup and its scrim (999).     */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	html:has(.oad-af-section--list .oad-af-map) {
		overflow: hidden;
		overscroll-behavior: none;
		background: var(--wp--preset--color--ground);
	}

	/* Nothing to show through. On an iPhone a fast pan can outrun the map's
	   drawing and drop its layer for a frame, and the page under it (the
	   posters) flashed through. The page is hidden, which also leaves the
	   phone less to draw; the map, its buttons and the Filters popup stay.
	   The popup's scrim is html::before, so it is unaffected. */
	html:has(.oad-af-section--list .oad-af-map) body {
		visibility: hidden;
	}

	html:has(.oad-af-section--list .oad-af-map) .oad-af-map,
	html:has(.oad-af-section--list .oad-af-map) .oad-af-mapbar,
	html:has(.oad-af-section--list .oad-af-map) #oad-af-sheet,
	html:has(.oad-af-section--list .oad-af-map) #wpadminbar {
		visibility: visible;
	}

	html body .oad-af-section--list .oad-af-body:has(.oad-af-map) > .oad-af-map {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
		z-index: 900;
		width: 100%;
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		margin: 0;
		border: 0;
	}

	/* Pinch zooms on a phone; the map's own corner controls would sit under
	   the two buttons. */
	.oad-af-section--list .oad-af-map .leaflet-top {
		display: none;
	}

	/* Logged in, the admin bar is absolute inside the positioned body and
	   lands under the html margin; pin it to the top so the map and the two
	   buttons can sit below it. */
	body:has(.oad-af-section--list .oad-af-map) #wpadminbar {
		position: fixed;
		top: 0;
	}

	body:has(.oad-af-section--list .oad-af-map) #bit-assist-widget-container {
		display: none;
	}

	body:has(.oad-af-section--list .oad-af-map) .oad-af-mapbar {
		display: block;
	}

	.oad-af-mapbar__btn {
		position: fixed;
		top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--16));
		z-index: 901;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 2px solid var(--wp--preset--color--ink);
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
		cursor: pointer;
	}

	.oad-af-mapbar__exit {
		left: var(--wp--preset--spacing--16);
	}

	.oad-af-mapbar__filters {
		right: var(--wp--preset--spacing--16);
	}

	.oad-af-mapbar__btn:hover {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	.oad-af-mapbar__btn svg {
		width: 24px;
		height: 24px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.2;
	}

	.oad-af-mapbar__n:not(:empty) {
		position: absolute;
		top: -8px;
		right: -8px;
		box-sizing: border-box;
		min-width: 16px;
		height: 16px;
		padding: 0 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--meter);
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
	}
}