/* ============================================================
   Listing: "Choose your level" (template-parts/listing/levels.php)
   List v2 desktop y 484-645 (notes 3.5), mobile y 705-928 (4.4).

   Heading row: "CHOOSE YOUR LEVEL" Koulen (--fs-h3: 30 phones, 36
   desktop); below 1024px, with JS (not .is-static), the filter
   (sliders) and search buttons that open the filter panel sit on its
   right - icons only on phones, placed as drawn (sliders ink x
   305-335 and the magnifier 361-388 at 402, centred on the heading's
   capitals; Primary Navy, not the drawn black), icon + label on
   tablets, with a count of the active filters.

   Pills (the layout follows the selector's own width):
   - from 700px: one row, as drawn at 1440 - 253 x 55 pills, Light
     Orange double chevrons in the 53px gaps, Reset 18px after; content
     on a fixed left inset (45px at 948, closing in on narrower rows);
   - 330-699px: two per row (183 x 42 at 402, 10px apart, 17px between
     rows), Reset beside the third pill, no chevrons; the mobile file's
     roughly centred content is given the desktop rule (a fixed left
     inset); from 600px (tablets) the two columns fill the row, their
     content centred;
   - under 330px (narrow phones): one per row.
   A view of Leadership alone (.is-leadership-only, levels.php) hides
   the heading and the pills, keeping the panel buttons.
   A pill is a navy pill-shaped list item holding the toggle (its
   ::after covers the whole pill, so the pill is the click target and
   the focus ring) and the "?" button above it. Hover: an inner ring in
   the level colour. Pressed (not designed): filled with the level
   colour, navy text, a tick in place of the number.
   Tooltip (the "?"): Grey Light bubble, navy 12/18 text, 8px radius,
   soft shadow and a downward tail at the icon (desktop design), shown
   on hover, keyboard focus and tap; Esc, or a tap anywhere but its
   "?", closes it (listing.js). Wider than drawn (240 against 153px) so
   Doc 01's tooltips (65-89 characters, against the placeholder's 59)
   keep the drawn three lines. The bubble ends 30px past the "?" (its
   tail there, as drawn); in the left column of the narrow layouts it
   is centred on the "?" instead, so even without JS it fits a phone.
   listing.js nudges a bubble that would leave the results column or
   the window (--tip-shift) and keeps the tail on the icon.
   ============================================================ */

.listing-levels {
	--level-pill-h: 42px;
	--level-gap: 10px;
	--level-inset: 16px;
	--level-inner-gap: 10px;
	--level-help: 40px;        /* the "?" button around its 22px icon */
	--tip-w: 15rem;
	--tip-tail: 30px;          /* the tail's centre from the bubble's right edge (as drawn), px or % of the bubble */
	container: listing-levels / inline-size;
}

/* ---------- Heading row ---------- */

.listing-levels__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.listing-levels__title {
	color: var(--color-heading);
	font-size: var(--fs-h3);
	line-height: 1.25;
}

/* The 44px targets overlap the gutter by 8px so the magnifier ends on
   the content edge; lifted 2px, the icons centre on the heading's
   capitals (Koulen's sit high in their line). */
.listing-levels__tools {
	position: relative;
	top: -2px;
	display: none;
	flex: none;
	align-items: center;
	gap: 10px;
	margin-right: -8px;
}

html.has-js .listing:not(.is-static) .listing-levels__tools {
	display: flex;
}

.listing-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--tap-target);
	height: var(--tap-target);
	padding: 0 7px;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	color: var(--color-text);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
	transition: color var(--transition);
}

/* Hover: the icon takes the accent (a label in Dark Orange would be
   3.55:1, under AA for 16px text). */
.listing-tool__icon {
	transition: color var(--transition);
}

@media (hover: hover) {
	.listing-tool:hover .listing-tool__icon {
		color: var(--color-control-hover);
	}
}

.listing-tool:focus-visible {
	outline-color: var(--color-focus-light);
	outline-offset: 0;
}

.listing-tool__icon {
	width: 30px;
	height: 30px;
}

.icon--search.listing-tool__icon {
	width: 28px;
	height: 28px;
}

/* Icons only on phones (the label stays the button's name). */
.listing-tool__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* How many filters are on (pathways, levels, a price range). */
.listing-tool__count {
	position: absolute;
	top: 1px;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background-color: var(--color-control-checked);
	color: var(--color-control-mark);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.listing-tool__count[hidden] {
	display: none;
}

/* A view of Leadership alone: no heading or pills (each would find
   nothing), only the panel buttons, still on the right below 1024px.
   From 1024px the empty row keeps the count level with the sidebar's
   search field. */
.listing-levels.is-leadership-only .listing-levels__title,
.listing-levels.is-leadership-only .listing-levels__row {
	display: none;
}

.listing-levels.is-leadership-only .listing-levels__tools {
	margin-left: auto;
}

/* ---------- Pills ---------- */

.listing-levels__row {
	position: relative;
}

.listing-levels__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 253px));
	gap: 17px var(--level-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.level-pill {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	height: var(--level-pill-h);
	border-radius: var(--radius-pill);
	background-color: var(--color-level-pill);
	color: var(--level-colour);
	transition: background-color var(--transition-quick), color var(--transition-quick);
}

.level-pill--foundation {
	--level-colour: var(--color-level-foundation);
}

.level-pill--progression {
	--level-colour: var(--color-level-progression);
}

.level-pill--development {
	--level-colour: var(--color-level-development);
}

/* The toggle: a link without JS, a button with it (listing.js). */
.level-pill__toggle {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	align-self: stretch;
	gap: var(--level-inner-gap);
	min-width: 0;
	margin: 0;
	padding: 1px 0 0 var(--level-inset); /* Koulen's caps sit high in their line: 1px lands them on the pill's centre */
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--font-display);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* The whole pill is the toggle's target, focus ring and hover ring. */
.level-pill__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-pill);
	transition: box-shadow var(--transition-quick);
}

.level-pill__toggle:focus-visible {
	outline: none;
}

.level-pill__toggle:focus-visible::after {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

@media (hover: hover) {
	.level-pill__toggle:hover::after {
		box-shadow: inset 0 0 0 2px var(--level-colour);
	}

	.level-pill.is-pressed .level-pill__toggle:hover::after {
		box-shadow: inset 0 0 0 2px var(--color-level-pill);
	}
}

/* Number and tick share one cell: pressed, the tick takes the number's
   place (the number stays in the button's name). */
.level-pill__mark {
	display: grid;
	place-items: center;
}

.level-pill__number,
.level-pill__tick {
	grid-area: 1 / 1;
	transition: opacity var(--transition-quick);
}

.level-pill__tick {
	width: 16px;
	height: 16px;
	margin-top: -1px;
	opacity: 0;
}

.level-pill.is-pressed {
	background-color: var(--level-colour);
	color: var(--color-level-pill-pressed-text);
}

.level-pill.is-pressed .level-pill__number {
	opacity: 0;
}

.level-pill.is-pressed .level-pill__tick {
	opacity: 1;
}

/* ---------- The "?" and its tooltip ---------- */

/* Painted after the toggle, so it sits above the toggle's ::after. */
.level-pill__aside {
	position: relative;
	display: flex;
	flex: none;
	margin-left: calc(var(--level-inner-gap) - (var(--level-help) - 22px) / 2);
}

.level-pill__help {
	display: grid;
	place-items: center;
	width: var(--level-help);
	height: var(--level-help);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: help;
}

.level-pill__help .icon {
	width: 22px;
	height: 22px;
}

.level-pill__help:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -5px;
}

.level-pill.is-pressed .level-pill__help:focus-visible {
	outline-color: var(--color-level-pill);
}

/* The bubble sits above the pill, its tail 3px over the pill's top edge
   at the icon. The element reaches down to the button (padding), so a
   pointer moving up from the "?" stays on it. */
.level-pill__tip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 5;
	width: min(var(--tip-w), calc(100vw - 2 * var(--gutter)));
	padding-bottom: calc(17px + (var(--level-pill-h) - var(--level-help)) / 2);
	transform: translateX(calc(-100% + var(--tip-tail) + var(--tip-shift, 0px)));
	filter: var(--filter-tooltip-shadow);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	cursor: default;
}

.level-pill__tip-text {
	display: block;
	padding: 16px 14px;
	border-radius: var(--radius-xs);
	background-color: var(--color-tooltip-bg);
	color: var(--color-tooltip-text);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	text-align: center;
	text-transform: none;
	white-space: normal;
}

.level-pill__tip::after {
	content: "";
	position: absolute;
	right: calc(var(--tip-tail) + var(--tip-shift, 0px) - 8px);
	bottom: calc(3px + (var(--level-pill-h) - var(--level-help)) / 2);
	width: 16px;
	height: 14px;
	background-color: var(--color-tooltip-bg);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (hover: hover) {
	.level-pill__help:hover + .level-pill__tip,
	.level-pill__tip:hover {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}
}

.level-pill__help:focus-visible + .level-pill__tip,
.level-pill.is-tip-open .level-pill__tip {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* Esc (listing.js): gone until the pointer or focus leaves the "?". */
.level-pill.is-tip-dismissed .level-pill__tip {
	visibility: hidden;
	opacity: 0;
	transition: none;
}

/* ---------- Chevrons between the pills (one-row layout only) ---------- */

.level-pill__chevron {
	position: absolute;
	top: 50%;
	right: 100%;
	display: none;
	justify-content: center;
	width: var(--level-gap);
	color: var(--color-accent);
	transform: translateY(-50%);
	pointer-events: none;
}

.level-pill__chevron .icon {
	width: 28px;
	height: 28px;
}

/* ---------- Reset: beside the third pill (two per row) ---------- */

.listing-levels__reset {
	position: absolute;
	bottom: 0;
	left: calc(min(50% + var(--level-gap) / 2, 253px + var(--level-gap)) + 12px);
	display: flex;
	align-items: center;
	height: var(--level-pill-h);
}

/* ---------- Narrow phones: one pill per row ---------- */

@container listing-levels (max-width: 329px) {
	.listing-levels__list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}

	.listing-levels__reset {
		position: static;
		display: inline-flex;
		height: auto;
		margin-top: 12px;
	}
}

/* Two per row on small phones (pills under about 175px): a little
   tighter, so "02 PROGRESSION ?" keeps one line. */
@container listing-levels (min-width: 330px) and (max-width: 359px) {
	.level-pill {
		--level-inset: 12px;
		--level-inner-gap: 7px;
	}

	.level-pill__toggle {
		font-size: 18px;
	}
}

/* Two per row with room to spare (tablets, 600-699px): the two columns
   fill the row, each pill's content centred in it as the mobile file
   draws it (a fixed left inset would leave half of a 340px pill empty);
   Reset stays beside the third pill. */
@container listing-levels (min-width: 600px) and (max-width: 699px) {
	.listing-levels__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.level-pill {
		--level-inset: 0px;
		justify-content: center;
	}

	.listing-levels__reset {
		left: calc(50% + var(--level-gap) / 2 + 12px);
	}
}

/* The narrow layouts: a bubble in the left column (every bubble when
   there is one column) is centred on its "?" - ending 30px past it, as
   drawn, it would leave a phone's window on the left when there is no
   script to nudge it. */
@container listing-levels (max-width: 699px) {
	.level-pill:nth-child(odd) {
		--tip-tail: 50%;
	}
}

@container listing-levels (max-width: 329px) {
	.level-pill {
		--tip-tail: 50%;
	}
}

/* ---------- One row with chevrons, as drawn at 1440 ---------- */

@container listing-levels (min-width: 700px) {
	.listing-levels__row {
		--level-pill-h: 55px;
		--level-gap: clamp(36px, 9cqi - 32px, 53px);
		display: flex;
		align-items: center;
		gap: 18px;
	}

	/* Three equal pills of at most 253px (an explicit basis: a flex row
	   sized by its content would shrink them to their labels). */
	.listing-levels__list {
		display: flex;
		flex: 0 1 calc(3 * 253px + 2 * var(--level-gap));
		gap: var(--level-gap);
		min-width: 0;
	}

	.level-pill {
		--level-inset: clamp(18px, 9.8cqi - 48px, 45px);
		--level-inner-gap: clamp(10px, 4.7cqi - 22.6px, 22px);
		flex: 1 1 0;
	}

	.level-pill__chevron {
		display: flex;
	}

	.listing-levels__reset {
		position: static;
		flex: none;
		height: auto;
	}
}

/* ---------- Tablet: icon + label on the panel buttons ---------- */

@media (min-width: 768px) {
	.listing-levels__tools {
		gap: 8px;
	}

	.listing-tool {
		padding: 0 12px;
	}

	.listing-tool__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.listing-tool__icon,
	.icon--search.listing-tool__icon {
		width: 24px;
		height: 24px;
	}

	.listing-tool__count {
		position: static;
	}
}

@media (min-width: 1024px) {
	html.has-js .listing:not(.is-static) .listing-levels__tools {
		display: none;
	}

	.listing-levels__head {
		min-height: 45px;
		margin-bottom: 19px;
	}
}

/* Windows High Contrast: the pills keep a visible edge, and the pressed
   one shows as selected (the tick carries the state). */
@media (forced-colors: active) {
	.level-pill {
		border: 1px solid currentColor;
	}

	.level-pill.is-pressed {
		border-width: 3px;
	}

	.level-pill__tip-text {
		border: 1px solid currentColor;
	}
}