/*
 * assets/css/listing.css · Out & Down theme · listing stack (blueprint 5.1, Section 37)
 *
 * Loaded wherever events are listed: the front page and every page for which
 * outanddown_is_event_listing() is true. Holds the section band (Section 20)
 * and the schedule row (Section 06), which lived in home.css until 0.50.0,
 * and the parts the stack adds: schedule group heads, the carousel, entity
 * cards, category cards and the alert cell.
 */

/* ------------------------------------------------------------------ */
/* 2 · section band — Section 20                                       */
/* Title left in Shout, "See all" right in Meter. Bands are separated   */
/* by the section gap and the Section-tier title, never by a rule.      */
/* Every band on this page uses this same head/body shape.              */
/* ------------------------------------------------------------------ */

.oad-band {
	padding-top: var(--oad-section-gap);
}

.oad-band:not(:has(~ .oad-band)) {
	padding-bottom: var(--oad-section-gap);
}

/* flex-end, not baseline -- same fix as event.css's .oad-related-band__head
   (the same component under a different name): baseline alignment against
   the shorter "See all" link left invisible space under the title before
   the padding-bottom gap even started. */
.oad-band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding: 0 var(--wp--preset--spacing--24) var(--oad-head-gap);
	background: var(--wp--preset--color--ground);
	margin: 0;
}

@media (min-width: 1024px) {
	.oad-band__head {
		padding: 0 var(--wp--preset--spacing--40) var(--oad-head-gap);
	}
}

.oad-band__title {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--section);
	line-height: 1;
	letter-spacing: -0.015em;
	margin: 0;
}

.oad-band__see {
	margin: 0;
	white-space: nowrap;
}

.oad-band__see a {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--8);
	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- blueprint 2px underline */
	border-bottom: 2px solid var(--wp--preset--color--ink);
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}


.oad-band__body {
	/* Vertical space comes from the head gap above and the next band's
	   section gap below, so the body adds none of its own. */
	padding: 0 var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ground);
}

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

/* Schedule rows (This week) sit flush against the band's own hairlines,
   the same way single-gd_event.html's field rows do — no body padding
   to double up on the row's own border. */
.oad-band__body--flush {
	padding: 0;
}


/* ------------------------------------------------------------------ */
/* 5 · schedule rows — "This week." band, blueprint Section 06/08       */
/* Shared-hairline programme surface (base.css's .oad-grid pattern),    */
/* butted rows on the 6-col tram.                                       */
/* ------------------------------------------------------------------ */

.oad-row-list {
	display: grid;
	background: var(--wp--preset--color--ink);
	gap: 2px;
	/* The list frames itself now that the band draws no rules. */
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.oad-row__time {
	grid-column: span 1;
	border-right: 2px solid var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

/* Date first and prominent, time under it and quieter (blueprint 5.3). Day
   and day-number are separate spans so mobile can stack them (Bug 2) without
   the browser wrapping the string on its own at an ugly point. */
.oad-row__date {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--8);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.oad-row__num::before {
	content: '\00b7';
	margin-right: var(--wp--preset--spacing--8);
}

.oad-row__clock {
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

.oad-row__mid {
	grid-column: span 5;
	min-width: 0;
	padding: 16px var(--wp--preset--spacing--16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
}

.oad-row__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.oad-row__venue {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-row__title {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: -0.008em;
}

.oad-row__price {
	flex: none;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* The price is a small Ink pill at the right of the title cell, never a
   full-height Ink cell: stacked rows would join into one black slab
   (Section 35, No Ink slabs). */
.oad-row__price .oad-price-pill--compact,
.oad-row__price .oad-chip--compact {
	min-width: 72px;
	justify-content: center;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Hover: the row goes Ink + White and the pill inverts. */
.oad-row:hover,
.oad-row:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-row:hover .oad-row__venue,
.oad-row:hover .oad-row__clock,
.oad-row:focus-visible .oad-row__venue,
.oad-row:focus-visible .oad-row__clock {
	color: var(--wp--preset--color--white);
}

.oad-row:hover .oad-row__price .oad-price-pill--compact,
.oad-row:hover .oad-row__price .oad-chip--compact,
.oad-row:focus-visible .oad-row__price .oad-price-pill--compact,
.oad-row:focus-visible .oad-row__price .oad-chip--compact {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1023px) {
	.oad-row__time {
		grid-column: span 1;
	}

	.oad-row__mid {
		grid-column: span 5;
	}

	.oad-row__date {
		flex-direction: column;
		align-items: center;
		gap: 0;
		font-size: 11px;
	}

	.oad-row__num::before {
		content: none;
	}
}


/* ------------------------------------------------------------------ */
/* Listing stack · Section 37                                          */
/* One column of bands under the poster wall. is-filtered (set by       */
/* oad-archive-filters' script) hides every band but Alert me while a   */
/* filter is applied or the wall is past its first page.                */
/* ------------------------------------------------------------------ */

.oad-stack {
	display: flex;
	flex-direction: column;
}

.oad-stack.is-filtered > .oad-band:not(.oad-band--alert) {
	display: none;
}

/* A thin page (under three events) puts Alert me first, straight under the
   wall, instead of last. */
.oad-band--alert.is-thin {
	order: -1;
}

/* Schedule group head: Meter 13, 2px line under it (Section 37). */
.oad-sgroup {
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	margin: 0;
}

.oad-sgroup-list {
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-sgroup-list .oad-sgroup:not(:first-child) {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-sgroup-list .oad-row-list {
	border: 0;
}

.oad-sgroup-list .oad-row-list:last-child .oad-row:last-child {
	border-bottom: 0;
}

.oad-sgroup__more {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-top: 2px solid var(--wp--preset--color--ink);
}

/* Carousel: posters are as large as they can be while the next one still
   shows 40px of itself at the right screen edge (about 150px on desktop), so it reads
   as scrolling. Two per view from 1024px, one below. The width is also capped
   by the screen height (--oad-carousel-chrome is the sticky header plus a
   little air), so a poster always fits the screen it is on. Moved by swipe,
   trackpad or arrow keys; no buttons, no autoplay. */
.oad-carousel {
	--oad-carousel-chrome: calc(var(--wp--preset--spacing--64) + var(--wp--preset--spacing--8));
}

.oad-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(calc(100% - var(--wp--preset--spacing--32)), calc((100svh - var(--oad-carousel-chrome)) * 0.8));
	gap: var(--wp--preset--spacing--16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Runs out to both screen edges, so posters scroll over the side margins
	   and the next one is not cut off; snapping still stops at the margin. */
	/* stylelint-disable-next-line oad/spacing-ladder -- the negative of a ladder step, to bleed to the edge */
	margin-inline: calc(var(--wp--preset--spacing--24) * -1);
	padding-inline: var(--wp--preset--spacing--24);
	scroll-padding-inline: var(--wp--preset--spacing--24);
}

.oad-carousel__track::-webkit-scrollbar {
	display: none;
}

.oad-carousel__slide {
	scroll-snap-align: start;
	min-width: 0;
}

@media (min-width: 1024px) {
	.oad-carousel__track {
		grid-auto-columns: min(calc((100% - var(--wp--preset--spacing--64) - var(--wp--preset--spacing--64) - var(--wp--preset--spacing--32)) / 2), calc((100svh - var(--oad-carousel-chrome)) * 0.8));
		gap: var(--wp--preset--spacing--24);
		/* stylelint-disable-next-line oad/spacing-ladder -- the negative of a ladder step, to bleed to the edge */
		margin-inline: calc(var(--wp--preset--spacing--40) * -1);
		padding-inline: var(--wp--preset--spacing--40);
		scroll-padding-inline: var(--wp--preset--spacing--40);
	}
}

/* Entity card (venue, organiser): 6 across desktop, 2 mobile, apart. */
.oad-ecards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	.oad-ecards {
		grid-template-columns: repeat(6, 1fr);
		gap: var(--wp--preset--spacing--24);
	}
}

.oad-ecard {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	min-width: 0;
}

.oad-ecard__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	background: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.20) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 32px;
	letter-spacing: 0.02em;
}

.oad-ecard__logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oad-ecard__txt {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--16);
}

.oad-ecard__name {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 1;
	overflow-wrap: anywhere;
}

.oad-ecard__meta {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Category card: Ground, hairline, no colour fill (Rule 04). */
.oad-ccards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	.oad-ccards {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--24);
	}
}

.oad-ccard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
	min-height: 96px;
	padding: var(--wp--preset--spacing--24);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

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

.oad-ccard__name {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1;
}

.oad-ccard__meta {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-ccard:hover .oad-ccard__meta {
	color: inherit;
}

/* Alert cell: Ground, one hairline. Text span 4, button span 2. */
.oad-alert {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-alert__txt {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--24);
}

.oad-alert__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 32px;
	line-height: 1;
}

.oad-alert__line {
	margin: 0;
}

.oad-alert__act {
	grid-column: span 6;
	display: flex;
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-alert__act .oad-btn {
	flex: 1;
	justify-content: center;
	height: auto;
	min-height: 56px;
	border: 0;
}

@media (min-width: 1024px) {
	.oad-alert__txt {
		grid-column: span 4;
		padding: var(--wp--preset--spacing--40);
	}

	.oad-alert__act {
		grid-column: span 2;
		border-top: 0;
		border-left: 2px solid var(--wp--preset--color--ink);
	}
}


/* ------------------------------------------------------------------ */
/* Schedule tabs · Section 37                                          */
/* One framed list. The bar is the Section 13 tab bar on the six        */
/* columns: four cells, a blank cell, then "+N more". The selected cell */
/* is Ink with White text (user ruling 2026-09-25, over Section 13).    */
/* ------------------------------------------------------------------ */

.oad-tabs__frame {
	position: relative;
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-tabs__bar {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	height: 44px;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-tab {
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-width: 0;
	border-right: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-tab:hover,
.oad-tab.is-selected {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-tab__btn,
.oad-tab__caret,
.oad-tabs__menu button {
	appearance: none;
	border: 0;
	margin: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
}

.oad-tab__btn {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 var(--wp--preset--spacing--8);
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-align: center;
}

.oad-tab--slot .oad-tab__btn {
	padding-right: 0;
}

.oad-tab__caret {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	padding: 0;
}

.oad-tab__caret[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.oad-tabs__fill {
	background: var(--wp--preset--color--ground);
}

.oad-tabs__more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-tabs__more:hover,
.oad-tabs__more:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-tabs__more.is-none {
	visibility: hidden;
}

.oad-tab:last-child,
.oad-tabs__bar > :last-child {
	border-right: 0;
}

.oad-tabs__fill {
	border-right: 0;
}

/* The drop-down is the header menu's panel (Section 30): Ground cells,
   2px Ink lines, 44 tall, Shout 13. */
.oad-tabs__menu {
	display: grid;
	gap: 2px;
	position: absolute;
	/* stylelint-disable-next-line oad/spacing-ladder -- directly under the 44px bar */
	top: 44px;
	left: 0;
	z-index: 4;
	width: 264px;
	max-width: 100%;
	background: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	border-top: 0;
	opacity: 0;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: 120ms;
	transition-timing-function: ease-out;
}

.oad-tabs__menu.is-open {
	opacity: 1;
	pointer-events: auto;
}

.oad-tabs__menu button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	letter-spacing: 0.04em;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-tabs__menu button[hidden] {
	display: none;
}

.oad-tabs__menu button:hover,
.oad-tabs__menu button:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

.oad-tabs__panel {
	border: 0;
}

.oad-tabs__panel[hidden] {
	display: none;
}

.oad-tabs__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oad-tabs__select,
.oad-tabs__pick {
	display: none;
}

@media (max-width: 1023px) {
	.oad-tabs__bar {
		display: flex;
	}

	.oad-tab,
	.oad-tabs__fill {
		display: none;
	}

	.oad-tabs__select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--8);
		min-width: 0;
		padding: 0 var(--wp--preset--spacing--16);
		border: 0;
		border-right: 2px solid var(--wp--preset--color--ink);
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		font-size: 12px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-align: left;
		transition-property: background-color, color;
		transition-duration: 100ms;
		transition-timing-function: ease-out;
	}

	.oad-tabs__select:hover,
	.oad-tabs__select:focus-visible,
	.oad-tabs__select[aria-expanded="true"] {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	.oad-tabs__select {
		flex: 1 1 auto;
	}

	.oad-tabs__select svg {
		flex: none;
	}

	.oad-tabs__select[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.oad-tabs__more {
		min-width: 96px;
	}

	.oad-tabs__pick {
		display: grid;
		gap: 2px;
		position: absolute;
		/* stylelint-disable-next-line oad/spacing-ladder -- directly under the 44px bar */
		top: 44px;
		/* -2px, not 0: absolute children sit inside .oad-tabs__frame's border
		   (the padding edge), so left: 0 alone puts our own border-left 2px to
		   the *right* of the frame's border, not on top of it — a 4px line
		   wherever the two overlapped. Pulling left by the frame's own border
		   width lines them up as one 2px line instead. Width is widened to
		   match in JS (tabs.js) so the right edge still meets .oad-tabs__select. */
		left: -2px;
		/* Width is set in JS to match .oad-tabs__select (tabs.js) — not right: 0,
		   which stretched this under the "+N more" cell too and doubled up the
		   vertical lines. */
		z-index: 4;
		max-height: 60vh;
		overflow-y: auto;
		background: var(--wp--preset--color--ink);
		border: 2px solid var(--wp--preset--color--ink);
		border-top: 0;
		/* Left border is its own line (not borrowed from .oad-tabs__frame): the
		   panel can render taller than the frame, past which there'd be no
		   frame border left to sit on — this keeps the line unbroken for the
		   panel's full height. */
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition-property: opacity;
		transition-duration: 120ms;
		transition-timing-function: ease-out;
	}

	.oad-tabs__pick.is-open {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	.oad-tabs__pick button {
		appearance: none;
		border: 0;
		margin: 0;
		display: flex;
		align-items: center;
		padding: 0 var(--wp--preset--spacing--16);
		width: 100%;
		height: 44px;
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		font-family: var(--wp--preset--font-family--shout);
		font-weight: 800;
		font-size: 13px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		transition-property: background-color, color;
		transition-duration: 100ms;
		transition-timing-function: ease-out;
	}

	.oad-tabs__pick button.is-current,
	.oad-tabs__pick button:hover,
	.oad-tabs__pick button:focus-visible {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--white);
	}

	/* The desktop slot menu never opens on a phone. */
	.oad-tabs__menu {
		display: none;
	}
}