/* Find Your Show. Loads after show.css, which supplies the tokens on .ppshow-show. */

.ppfind { max-width: none !important; padding: 0 !important; }
.ppfind > * { max-width: var(--content); margin-inline: auto; padding-inline: 24px; }

.ppfind__head { padding-block: 32px 0; }
.ppfind__headrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}
.ppfind__headrow h1 { font-size: 40px; line-height: 1.15; margin: 0; }
.ppfind__search input {
	width: 300px;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	font: 400 15px/1.4 var(--body);
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 999px;
}
.ppfind__search input:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 1px; }

.ppfind__scenarios { margin: 28px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--border-soft); }
.ppfind__scenarios p { margin: 0 0 12px; font-size: 14px; color: var(--ink-muted); }
.ppfind__scenarios ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
/* An <a>, not a <button>, since 9 Nov: the eight views ARE the scenarios, and
   each pill is the crawlable link to its own page. inline-flex and the link
   reset are what keep it looking exactly like the old button. */
.ppfind__scenario {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	min-height: 40px;
	padding: 9px 16px;
	font: 500 14px/1.2 var(--body);
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 999px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}
.ppfind__scenario:hover { border-color: var(--navy); text-decoration: none; }
.ppfind__scenario[aria-pressed="true"] {
	background: var(--sky);
	border-color: var(--navy);
	color: var(--navy);
	font-weight: 700;
}

/* body: sticky filter rail beside the grid */
.ppfind__body {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-block: 28px 56px;
}
.ppfind__filters { position: sticky; top: 96px; }

/* --- why the rail has to really stick (Alex, 7 Nov: "the page jumps") -------
 *
 * Two things were moving the filter you had just clicked out from under the
 * cursor, and they compounded:
 *
 * 1. `position: sticky` was inert. Blade sets `overflow: hidden auto` on
 *    <body>, which makes body a scroll container; a sticky element then sticks
 *    to THAT scrollport, which never scrolls, so the rail just scrolled away
 *    with the page. `clip` clips the same way without creating a scroll
 *    container. `overflow-y: visible` has to go with it: per CSS Overflow 3,
 *    `clip` next to a scrolling value computes back to `hidden`, which would
 *    put the scroll container straight back.
 *
 * 2. Hiding cards changes the page height ABOVE the viewport, and Chrome's
 *    scroll anchoring "corrects" for that by moving the scroll position. That
 *    correction IS the jump: measured at 3000px down, one checkbox moved the
 *    page by up to 2739px. The results are what changed; the scroll shouldn't.
 *
 * Measured after this fix: toggling any filter moves the page 0px, even when
 * the document shrinks by 29,806px.
 *
 * The rail is taller than most windows (about 1200px), so a pinned rail needs
 * to scroll on its own or its last groups become unreachable.
 * ------------------------------------------------------------------------- */
@media (min-width: 960px) {
	body:has(.ppfind) { overflow-x: clip; overflow-y: visible; }
	.ppfind__filters {
		/* 16px from the top, like the board, and the same line as the results
		   header beside it (which pins at 0 with 16px of padding). */
		top: 16px;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.ppfind__results, .ppfind__grid { overflow-anchor: none; }
}
.ppfind__filters-intro { margin: 0 0 16px; font-size: 14px; color: var(--ink-muted); }
.ppfind__group { border: 0; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--border-soft); }
.ppfind__group legend { padding: 0; margin: 0 0 10px; font: 700 14px/1.3 var(--display); color: var(--ink); }

.ppfind__opt {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
}
.ppfind__opt input {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}
.ppfind__opt input:checked {
	background: var(--navy);
	border-color: var(--navy);
	/* white tick */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}
.ppfind__opt input:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 2px; }
.ppfind__opt-count { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ppfind__opt.is-empty { color: var(--ink-faint); cursor: default; }
.ppfind__opt.is-empty .ppfind__opt-count { color: var(--ink-faint); }
.ppfind__opt.is-empty input { background: #F4F6F8; border-color: var(--border-soft); cursor: default; }
.ppfind__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }

/* results */
.ppfind__resulthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 20px; }
.ppfind__count { font-size: 20px; margin: 0; }
.ppfind__sort { font-size: 14px; color: var(--ink-muted); }
.ppfind__clear {
	margin-left: auto;
	padding-left: 16px;
	background: none;
	border: 0;
	padding: 0;
	font: 500 14px/1 var(--body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--periwinkle);
	cursor: pointer;
}
.ppfind__clear:hover { text-decoration: underline; }
.ppfind__empty {
	margin: 0 0 20px;
	padding: 16px 20px;
	background: var(--sky);
	border-radius: 10px;
	font-size: 15px;
	color: var(--navy);
}

.ppfind__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ppfind-card.is-hidden { display: none; }
.ppfind-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	overflow: hidden;
}
.ppfind-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 20px;
	background: #fff;
}
.ppfind-card__logo { border-bottom: 1px solid var(--border-soft); }
.ppfind-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ppfind-card__title { font-size: 16px; line-height: 1.3; margin: 16px 16px 0; }
.ppfind-card__title a { color: var(--ink); }
.ppfind-card__title a:hover { color: var(--navy); }
.ppfind-card__meta { margin: 6px 16px 0; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.ppfind-card__cta { margin: 16px; margin-top: auto; width: calc(100% - 32px); }


/* --- beating the theme's own button and link styling ------------------ */
/* Blade uppercases every <button>; the scenarios are sentence case. */
.ppfind a.ppfind__scenario,
.ppfind button.ppfind__clear {
	text-transform: none;
	letter-spacing: 0;
}
/* Card titles are ink, not link-blue, until hovered. */
.ppfind .ppfind-card__title a { color: var(--ink); }
.ppfind .ppfind-card__title a:hover { color: var(--navy); }
/* The H1 has to leave room for the search field beside it. */
.ppfind__headrow h1 { max-width: 620px; flex: 1 1 420px; }
.ppfind__search { flex: 0 0 auto; }

/* --- the eight scenario views ------------------------------------------- */
/* Their "Browse by what you need" block was removed on 9 Nov; the same eight
   links are the top row of pills now, so this repeated them. */
.ppfind__intro {
	max-width: 70ch;
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-muted);
}
/* Clear all sits at the right-hand end of the results header. */
.ppfind .ppfind__resulthead .ppfind__clear { margin-left: auto; padding: 0 0 0 16px; }

/* ===================================================================
 * TABLET AND PHONE FINDER (TABLET.md, HANDOFF 5.3)
 *
 * The sidebar layout now starts at 960px, not 720 - a 300px rail plus a
 * two-column grid needs about 880px before the cards get cramped.
 *
 * Below 960 the SAME form becomes the overlay: a left drawer and anchored
 * pill dropdowns on tablet, a full-screen panel and bottom sheets on the
 * phone. One set of checkboxes throughout, so there is no second copy of
 * the state to keep in step.
 * =================================================================== */

.ppfind__panelhead,
.ppfind__panelfoot,
.ppfind__sticky > .ppfind__bar,
.ppfind__backdrop,
.ppfind-card__chev,
.ppfind__morescenarios { display: none; }

@media (max-width: 959px) {
	.ppfind__body { display: block; padding-block: 20px 56px; }
	.ppfind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppfind__headrow h1 { font-size: 34px; max-width: none; flex: 1 1 100%; }
	.ppfind__search { flex: 1 1 100%; }
	.ppfind__search input { width: 100%; }

	/* --- the sticky row ------------------------------------------- */
	.ppfind__sticky {
		position: sticky;
		top: 0;
		z-index: 30;
		background: #fff;
		padding-block: 14px 10px;
		margin-bottom: 4px;
		box-shadow: 0 1px 0 var(--border-soft);
	}
	.ppfind__sticky > .ppfind__bar { display: block; }
	.ppfind__bar-intro { margin: 0 0 10px; font-size: 14px; color: var(--ink-muted); }
	.ppfind__bar-row { display: flex; flex-wrap: wrap; gap: 8px; }

	.ppfind__filtersbtn,
	.ppfind__pill {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 10px 16px;
		font: 500 14px/1 var(--body);
		text-transform: none;
		letter-spacing: 0;
		color: var(--ink);
		background: #fff;
		border: 1px solid var(--border);
		border-radius: 999px;
		cursor: pointer;
		white-space: nowrap;
	}
	.ppfind__filtersbtn[aria-expanded="true"],
	.ppfind__pill[aria-expanded="true"] {
		background: var(--navy);
		border-color: var(--navy);
		color: #fff;
	}
	.ppfind__pill[aria-expanded="true"]::after { content: " \25B4"; }
	.ppfind__badge {
		display: inline-block;
		min-width: 20px;
		padding: 2px 6px;
		border-radius: 999px;
		background: var(--sky);
		color: var(--navy);
		font-size: 12px;
		text-align: center;
	}
	.ppfind__filtersbtn[aria-expanded="true"] .ppfind__badge,
	.ppfind__pill[aria-expanded="true"] .ppfind__badge { background: rgba(255,255,255,.25); color: #fff; }
	.ppfind__filtersicon {
		width: 14px; height: 10px;
		border-top: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		position: relative;
	}
	.ppfind__filtersicon::after {
		content: ''; position: absolute; left: 0; right: 0; top: 3px;
		border-top: 2px solid currentColor;
	}

	/* --- the form as an overlay ----------------------------------- */
	.ppfind__filters {
		position: fixed;
		z-index: 60;
		background: #fff;
		display: none;
		overscroll-behavior: contain;
	}
	.ppfind__filters.is-open { display: block; }
	.ppfind__filters .ppfind__group:last-of-type { border-bottom: 0; }

	.ppfind__panelhead {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-bottom: 12px;
		margin-bottom: 8px;
		border-bottom: 1px solid var(--border-soft);
	}
	.ppfind__panelttl { font: 700 16px/1.2 var(--display); color: var(--ink); flex: 1 1 auto; }
	.ppfind__panelclear {
		background: none; border: 0; padding: 0;
		font: 500 14px/1 var(--body); text-transform: none; letter-spacing: 0;
		color: var(--periwinkle); cursor: pointer;
	}
	.ppfind__panelclose {
		width: 32px; height: 32px; flex: none;
		background: none; border: 0; padding: 0; cursor: pointer; position: relative;
	}
	.ppfind__panelclose::before,
	.ppfind__panelclose::after {
		content: ''; position: absolute; left: 7px; top: 15px; width: 18px; height: 2px;
		background: var(--ink);
	}
	.ppfind__panelclose::before { transform: rotate(45deg); }
	.ppfind__panelclose::after  { transform: rotate(-45deg); }

	.ppfind__panelfoot {
		position: sticky;
		bottom: 0;
		display: block;
		padding: 12px 0;
		margin-top: 8px;
		background: #fff;
		border-top: 1px solid var(--border-soft);
	}
	.ppfind__apply {
		width: 100%;
		min-height: 48px;
		background: #fff;
		color: var(--navy);
		border: 1px solid var(--border);
		border-radius: var(--radius-btn);
		font: 700 15px/1.2 var(--body);
		text-transform: none;
		letter-spacing: 0;
		cursor: pointer;
	}
	.ppfind__apply:hover { border-color: var(--navy); }

	.ppfind__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 50;
		background: rgba(26, 42, 58, .45);
	}
	body.ppfind-locked { overflow: hidden; }
}

/* --- tablet, 720-959: left drawer and anchored pill dropdowns ------- */
@media (min-width: 720px) and (max-width: 959px) {
	.ppfind__filters.is-drawer {
		left: 0; top: 0; bottom: 0;
		width: 400px; max-width: 90vw;
		overflow: auto;
		padding: 20px 24px;
		box-shadow: 0 0 48px rgba(26, 42, 58, .28);
	}
	/* A dropdown is the same form showing one group, anchored under its pill.
	   No backdrop and no "Show N" button: the results update live behind it. */
	.ppfind__filters.is-dropdown {
		width: 320px;
		max-height: 60vh;
		overflow: auto;
		padding: 12px 16px;
		border: 1px solid var(--border);
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(26, 42, 58, .18);
	}
	.ppfind__filters.is-dropdown .ppfind__group { display: none; border: 0; padding-bottom: 0; margin-bottom: 0; }
	.ppfind__filters.is-dropdown .ppfind__group.is-active { display: block; }
	.ppfind__filters.is-dropdown .ppfind__group legend { display: none; }
	.ppfind__filters.is-dropdown .ppfind__filters-intro,
	.ppfind__filters.is-dropdown .ppfind__note,
	.ppfind__filters.is-dropdown .ppfind__panelfoot,
	.ppfind__filters.is-dropdown .ppfind__panelclose { display: none; }
}

/* --- phone, below 720: full-screen panel and bottom sheets ---------- */
@media (max-width: 719px) {
	.ppfind > * { padding-inline: 16px; }
	.ppfind__head { padding-block: 20px 0; }
	.ppfind__headrow h1 { font-size: 28px; }

	/* Three pills, then the other five behind "5 more". */
	.ppfind__scenlist { display: block; }
	.ppfind__scenlist li { margin-bottom: 8px; }
	.ppfind__scenario { width: 100%; justify-content: space-between; text-align: left; }
	.ppfind__scenario::after { content: " \2192"; }
	.ppfind__scenlist li:nth-child(n+4) { display: none; }
	.ppfind__scenarios.is-expanded .ppfind__scenlist li:nth-child(n+4) { display: block; }
	.ppfind__morescenarios {
		display: inline-block;
		background: none; border: 0; padding: 4px 0;
		font: 500 14px/1 var(--body); text-transform: none; letter-spacing: 0;
		color: var(--periwinkle); cursor: pointer; min-height: 44px;
	}
	.ppfind__morescenarios::after { content: " \2193"; }
	.ppfind__scenarios.is-expanded .ppfind__morescenarios::after { content: " \2191"; }

	/* The pill row scrolls sideways, with a fade at the right edge. */
	.ppfind__sticky { position: sticky; top: 0; }
	.ppfind__bar-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
	.ppfind__bar-row::-webkit-scrollbar { display: none; }
	.ppfind__filtersbtn, .ppfind__pill { flex: 0 0 auto; }

	.ppfind__filters.is-panel {
		inset: 0;
		overflow: auto;
		padding: 16px 16px 0;
	}
	.ppfind__filters.is-sheet {
		left: 0; right: 0; bottom: 0; top: auto;
		max-height: 80vh;
		overflow: auto;
		padding: 16px 16px 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 32px rgba(26, 42, 58, .22);
	}
	.ppfind__filters.is-sheet .ppfind__group { display: none; border: 0; }
	.ppfind__filters.is-sheet .ppfind__group.is-active { display: block; }
	.ppfind__filters.is-sheet .ppfind__filters-intro,
	.ppfind__filters.is-sheet .ppfind__note,
	.ppfind__filters.is-sheet .ppfind__group legend { display: none; }

	/* Results become rows: the whole row is the link, with a navy chevron. */
	.ppfind__grid { grid-template-columns: 1fr; gap: 0; }
	.ppfind-card {
		position: relative;
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) 16px;
		align-items: center;
		gap: 0 14px;
		min-height: 64px;
		padding: 12px 0;
		border: 0;
		border-bottom: 1px solid var(--border-soft);
		border-radius: 0;
	}
	.ppfind-card__logo {
		grid-column: 1; grid-row: 1 / span 2;
		height: 48px; padding: 4px;
		background: #fff;
		border: 1px solid var(--border-soft);
		border-radius: 6px;
	}
	.ppfind-card__title { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; }
	/* one stretched link, so the row is a single target rather than two */
	.ppfind-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
	.ppfind-card__meta { grid-column: 2; grid-row: 2; margin: 2px 0 0; font-size: 12px; }
	.ppfind-card__cta { display: none; }
	.ppfind-card__chev {
		display: block;
		grid-column: 3; grid-row: 1 / span 2;
		justify-self: end;
		width: 9px; height: 9px;
		border-right: 2px solid var(--navy);
		border-top: 2px solid var(--navy);
		transform: rotate(45deg);
	}
}
/* These two are toggled with the [hidden] attribute, and a class rule that sets
 * `display` outranks the user-agent rule for the [hidden] attribute. Without
 * this the backdrop covered the page below 960px and ate every click, and the
 * pill badges showed a 0 when nothing was selected. */
.ppfind__backdrop[hidden],
.ppfind__badge[hidden] { display: none; }

.ppfind button.ppfind__filtersbtn,
.ppfind button.ppfind__pill,
.ppfind button.ppfind__morescenarios,
.ppfind button.ppfind__apply,
.ppfind button.ppfind__panelclear,
.ppfind button.ppfind__panelclose {
	text-transform: none;
	letter-spacing: 0;
}

/* ===================================================================
 * Flat cards (Alex, 7 Nov). The whole card is one real link, at every
 * width: no "See details", no shadow, a 16px radius, and a navy border
 * on hover. The stretched link lives on the title, so the card is a
 * single tab stop and a single tap target, and the focus ring is drawn
 * on the card rather than on the title text.
 * =================================================================== */
.ppfind-card {
	position: relative;
	border: 1px solid rgb(207, 223, 236);
	border-radius: 16px;
	box-shadow: none;
	transition: border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.ppfind-card:hover { border-color: #3B6080; }
.ppfind-card:hover .ppfind-card__title a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ppfind-card:focus-within { outline: 2px solid var(--periwinkle); outline-offset: 2px; }
.ppfind-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ppfind-card__title a:focus-visible { outline: none; }
.ppfind-card__title { margin: 16px 16px 0; }
.ppfind-card__meta { margin: 6px 16px 0; }
.ppfind-card__meta2 { margin-bottom: 16px; }
.ppfind-card__meta:last-child { margin-bottom: 16px; }

@media (max-width: 719px) {
	/* Rows: thumbnail, title, the facts lines, and a navy chevron. */
	.ppfind-card { border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; }
	.ppfind-card:hover { border-color: var(--border-soft); }
	.ppfind-card__logo { grid-row: 1 / span 3; }
	.ppfind-card__chev { grid-row: 1 / span 3; }
	.ppfind-card__title { grid-column: 2; grid-row: 1; margin: 0; }
	.ppfind-card__meta  { grid-column: 2; grid-row: 2; margin: 2px 0 0; }
	.ppfind-card__meta2 { grid-column: 2; grid-row: 3; margin: 1px 0 0; }
}
/* MISSING-DATA rule 9: the phone list drops the word "cast". */
@media (max-width: 719px) { .ppfind-card__castword { display: none; } }

/* G-07: every target at least 44px tall. The scenario chips were 40, the
 * filter rows 32 (the 18px box inside is not the target - the whole label
 * is), and the browse-by-need pills 42. */
.ppfind a.ppfind__scenario { min-height: 44px; }
.ppfind .ppfind__opt { min-height: 44px; align-content: center; }
.ppfind button.ppfind__clear,
.ppfind button.ppfind__morescenarios { min-height: 44px; }

/* ===================================================================
 * QA pass, 7 Nov ("Staging fixes", items A4, C1 and C4-C7).
 *
 * Appended last. The `!important`s answer Blade's own: it styles every
 * <button> and <input> with `!important`, which is why the scenario
 * chips and the search box came out in a fallback font with square
 * corners however they were written above.
 * =================================================================== */

/* C1 - `.ppshow-show h3 { margin: 0 }` (0,1,1) beat the card title's own
   margin (0,1,0), so the title sat 1px from the card's left edge while the
   two facts lines were indented 16px. One body block, one left edge. */
.ppfind .ppfind-card__title { margin: 16px 18px 0; font-size: 18px; }
.ppfind .ppfind-card__meta { margin: 6px 18px 0; }
.ppfind .ppfind-card__meta:last-child,
.ppfind .ppfind-card__meta2 { margin-bottom: 18px; }

/* A4 - the whole card is already the link (the title's stretched ::after
   covers it); this makes the cursor say so over the logo and the facts. */
.ppfind .ppfind-card { cursor: pointer; }

/* C4 - the search box is a pill with a 1.5px rule. */
.ppfind .ppfind__search input[type="search"] {
	border-radius: 999px !important;
	border: 1.5px solid var(--border) !important;
	min-height: 44px;
}

/* C5 - scenario chips: DM Sans 700 15px, 44px, 12px radius, soft shadow,
   and the board's orange-on-cream active state rather than sky/navy. */
.ppfind a.ppfind__scenario {
	font-family: var(--display) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	min-height: 44px;
	border-radius: 12px;
	border: 1.5px solid var(--border-soft);
	box-shadow: 0 5px 28px rgba(117, 136, 215, .10);
}
.ppfind a.ppfind__scenario:hover { border-color: var(--navy); }
.ppfind a.ppfind__scenario[aria-pressed="true"] {
	background: #FFFAF0;
	border-color: var(--orange);
	color: var(--ink);
}

@media (min-width: 720px) and (max-width: 959px) {
	/* C6 - 17px on tablet, with the tighter body block. */
	.ppfind .ppfind-card__title { margin: 14px 16px 0; font-size: 17px; }
	.ppfind .ppfind-card__meta { margin: 6px 16px 0; }
	.ppfind .ppfind-card__meta:last-child,
	.ppfind .ppfind-card__meta2 { margin-bottom: 16px; }
}

@media (max-width: 959px) {
	/* C7 - the count row sat straight under the quick pills. */
	.ppfind .ppfind__resulthead { margin-top: 10px; }
}

/* ===================================================================
 * Alex, 7 Nov: the results header sticks with the filter rail, and the
 * rail's scrollbar stops sitting on top of the counts.
 * =================================================================== */

@media (min-width: 960px) {
	/* The count, the sort line and Clear all pin at the same 96px as the
	   rail, so the two blocks hold their place together while the cards
	   scroll under them.
	   It has to be .ppfind__sticky that sticks, not the row inside it: a
	   sticky element only travels inside its containing block, and the
	   wrapper is exactly as tall as the row, so the row had nowhere to go.
	   The wrapper is a child of the results column, which is 38,000px tall. */
	.ppfind .ppfind__sticky {
		position: sticky;
		/* Flush to the top, with the offset as padding instead of a gap: the
		   site header is not sticky, so a 96px `top` left a band where cards
		   scrolled past above the pinned row. The 16px matches the board. */
		top: 0;
		z-index: 3;
		background: #fff;
		padding-block: 16px 12px;
		margin-bottom: 8px;
	}
	.ppfind .ppfind__sticky .ppfind__resulthead { margin-bottom: 0; }

	/* The rail's scrollbar was permanent (macOS "always show scroll bars")
	   and sat on top of the counts. Reserve a gutter for it, keep it out of
	   the text, and only paint the thumb while the rail is being used. */
	.ppfind .ppfind__filters {
		padding-right: 14px;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}
	.ppfind .ppfind__filters:hover,
	.ppfind .ppfind__filters:focus-within { scrollbar-color: rgb(207, 223, 236) transparent; }
	.ppfind .ppfind__filters::-webkit-scrollbar { width: 8px; }
	.ppfind .ppfind__filters::-webkit-scrollbar-track { background: transparent; }
	.ppfind .ppfind__filters::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
	.ppfind .ppfind__filters:hover::-webkit-scrollbar-thumb,
	.ppfind .ppfind__filters:focus-within::-webkit-scrollbar-thumb { background: rgb(207, 223, 236); }
}

/* ===================================================================
 * QA round 2, 7 Nov: finder items 1.11 and 2.4.
 * =================================================================== */

/* 1.11 - the whole card is already one real <a> (the title's stretched
   ::after), so cmd-click and middle-click work and there is no JS click
   handler to remove. This only rounds the hit area to the card. */
.ppfind .ppfind-card__title a::after { border-radius: 16px; }

@media (max-width: 719px) {
	/* 2.4 - the scenario buttons sized to their text because the list was
	   still the base `.ppfind__scenarios ul` flex row: that selector is
	   0,1,2 and `.ppfind__scenlist` only 0,1,0, so `display: block` never
	   won. Two classes beat one class and two elements. */
	.ppfind .ppfind__scenlist { display: block; }
	.ppfind .ppfind__scenlist li { margin-bottom: 8px; }
	.ppfind a.ppfind__scenario {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}

/* ===================================================================
 * Result card hover (HANDOFF §5, Alex 8 Nov; check F-CARD-HOVER).
 *
 * The border still turns navy, but the title keeps its own colour and
 * takes a 2px underline 4px below instead of going to the site's gold
 * link-hover. The site-wide `.ppfind a[href]:hover` rule reaches the
 * card title, so these have to outrank it rather than sit beside it.
 * Applies to the phone rows too - they use the same title element.
 * =================================================================== */
.ppfind .ppfind-card:hover .ppfind-card__title a[href],
.ppfind .ppfind-card:focus-within .ppfind-card__title a[href],
.ppfind .ppfind-card__title a[href]:hover {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ===================================================================
 * QA pack pass 1 → fixes (8 Nov): F-12 and G-08.
 * =================================================================== */

@media (min-width: 960px) {
	/* F-12 - the rail is 300px, matching the board's aside
	   (`flex: 0 1 300px; min-width: 260px`); it had been 220. The grid
	   takes what's left and drops to two columns rather than squeezing
	   three into the narrower space that leaves at 960. */
	.ppfind .ppfind__body { grid-template-columns: 300px minmax(0, 1fr); }
	.ppfind .ppfind__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* G-08 - the scenario arrow is the design-system span, not a typed
   character in CSS `content` (HANDOFF 6). It only shows on phones, where
   the buttons are full width. */
.ppfind .ppfind__scenario::after { content: none; }
.ppfind .ppfind__scenario .ppshow-arrow { display: none; }
@media (max-width: 719px) {
	.ppfind .ppfind__scenario .ppshow-arrow { display: inline-block; }
}

/* ===================================================================
 * Interaction states (HANDOFF §6, 8 Nov): no gold here either.
 * =================================================================== */

/* Text links keep their colour and take the underline. The card-title
   rule above is more specific, so cards keep their own ink colour. */
.ppfind a[href]:hover {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 1.4 - the search field had no visible focus at all (WCAG 2.4.7). The
   !important answers the one on its own border, which exists to beat
   Blade's input styling. */
.ppfind .ppfind__search input[type="search"]:hover {
	border-color: var(--navy) !important;
}
.ppfind .ppfind__search input[type="search"]:focus,
.ppfind .ppfind__search input[type="search"]:focus-visible {
	border-color: var(--navy) !important;
	outline: 3px solid rgb(116, 135, 215);
	outline-offset: 2px;
}

/* 1.5 - the tablet quick pills and the Filters button take the same navy
   border on hover as the scenario buttons. */
.ppfind .ppfind__pill:hover,
.ppfind .ppfind__filtersbtn:hover { border-color: var(--navy); }

@media (max-width: 719px) {
	/* 1.8 - the two phone targets round 2 missed. The close button grows to
	   44px while its cross stays 18px: the strokes are centred rather than
	   pinned to the old 32px box. */
	.ppfind .ppfind__panelclear {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 8px;
	}
	.ppfind .ppfind__panelclose { width: 44px; height: 44px; }
	.ppfind .ppfind__panelclose::before,
	.ppfind .ppfind__panelclose::after {
		left: 50%;
		top: 50%;
		margin-left: -9px;
		margin-top: -1px;
	}
}

/* ---------------------------------------------------------------------------
 * 8 Nov - opening a show card.
 * The card is a plain stretched <a href>; there is no JavaScript in the click
 * path. So between the click and the new page painting, the browser shows
 * nothing at all, and the click reads as if it missed. On live that gap is
 * ~115ms and barely noticeable; on staging, where the page cache is not
 * running, it is 1.3-1.6s. Either way the card should answer the press
 * straight away rather than waiting for the server.
 *
 * Two states, both reusing colours already in the design: :active tints the
 * card the instant the pointer goes down (--sky, the "At a glance" blue), and
 * .is-opening holds that tint from the click until the new page takes over,
 * so you can see which show you opened while it loads. No transition on
 * background-color on purpose - the point is that it is immediate.
 * ------------------------------------------------------------------------ */
.ppfind .ppfind-card:active,
.ppfind .ppfind-card.is-opening { background: var(--sky); }
.ppfind .ppfind-card.is-opening { border-color: #3B6080; cursor: progress; }
.ppfind .ppfind-card.is-opening .ppfind-card__title a[href] {
	cursor: progress;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * Search mode (HANDOFF 5.3, phones below 720px only).
 * The eyebrow, H1, scenarios and filter bar are removed from the DOM by
 * finder.js, so nothing here hides them - these rules only dress the field,
 * its two buttons and the two states that appear under it.
 * ------------------------------------------------------------------------ */
.ppfind .ppfind__search { display: flex; align-items: center; gap: 10px; }
.ppfind .ppfind__field { position: relative; display: block; }
/* The browser's own search-cancel icon would sit beside ours. */
.ppfind .ppfind__search input[type="search"]::-webkit-search-cancel-button,
.ppfind .ppfind__search input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.ppfind .ppfind__qclear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--sky);
	cursor: pointer;
}
/* A 36px circle with a 44px hit area, without changing what you can see. */
.ppfind .ppfind__qclear::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.ppfind .ppfind__qclear::after {
	content: '\00d7';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 20px/1 var(--body);
	color: var(--navy);
}
.ppfind .ppfind__cancel {
	flex: none;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	font: 400 15px/1.4 var(--body);
	color: var(--navy);
	cursor: pointer;
}
.ppfind .ppfind__alsofilters {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--ink-muted);
}
.ppfind .ppfind__alsoclear,
.ppfind .ppfind__clearsearch {
	min-height: 44px;
	padding: 0 2px;
	border: 0;
	background: none;
	font: 400 14px/1.4 var(--body);
	color: var(--navy);
	cursor: pointer;
}
.ppfind .ppfind__clearsearch { font-size: 15px; }
.ppfind .ppfind__alsoclear:hover,
.ppfind .ppfind__clearsearch:hover,
.ppfind .ppfind__cancel:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (max-width: 719px) {
	.ppfind .ppfind__field { flex: 1 1 auto; min-width: 0; }
	.ppfind .ppfind__search input[type="search"] { width: 100%; padding-right: 48px; }
	/* Search mode lifts the field to the top of the page: the board puts the
	   first result row about 170px down, so roughly three rows clear the
	   keyboard. */
	.ppfind.is-searchmode .ppfind__head { padding-block: 12px 0; }
	.ppfind.is-searchmode .ppfind__headrow { gap: 0; margin: 0; }
	.ppfind.is-searchmode .ppfind__sticky { padding-top: 8px; }
}

@media (max-width: 719px) {
	/* The first result row has to start within 200px of the top of the screen
	   (F-MSEARCH-01), so roughly three rows clear the keyboard. Measured: the
	   site header is a fixed 64px, the field ends at 120, and the rest was
	   padding stacked between the field and the grid - 20px above the body,
	   8+10 around the sticky row, 10+20 around the count. Trimming those in
	   search mode only brings the first row from 217px to about 170, which is
	   where the board puts it. */
	.ppfind.is-searchmode .ppfind__body { padding-top: 0; }
	.ppfind.is-searchmode .ppfind__sticky { padding: 0; margin-bottom: 0; }
	.ppfind.is-searchmode .ppfind__resulthead { margin: 6px 0 12px; }
}

/* Blade styles every <button> with `!important` - Arial 13px 700, uppercase,
   letterspaced - which is why "Cancel" first rendered as "C A N C E L" in the
   theme's font. Same answer as the scenarios and the search field above. */
.ppfind button.ppfind__cancel,
.ppfind button.ppfind__alsoclear,
.ppfind button.ppfind__clearsearch {
	font-family: var(--body) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--navy) !important;
	background: none !important;
	border: 0 !important;
}
.ppfind button.ppfind__cancel { font-size: 15px !important; }
.ppfind button.ppfind__alsoclear { font-size: 14px !important; }
.ppfind button.ppfind__clearsearch { font-size: 15px !important; }
.ppfind button.ppfind__qclear {
	background: var(--sky) !important;
	border: 0 !important;
	padding: 0 !important;
	letter-spacing: 0 !important;
}

@media (max-width: 719px) {
	/* With text in the field, "Clear all" appears and the result head wraps to
	   two lines, pushing the first row from 163px to 212 - back over the 200px
	   the check allows. "Most popular first" is a static label rather than a
	   control, and the board doesn't show it in search mode, so it goes and the
	   count sits on one line with Clear all. */
	.ppfind.is-searchmode .ppfind__sort { display: none; }
}

/* ---------------------------------------------------------------------------
 * STAGING-FIXES-8 7.2 - an enabled filter row answers the pointer.
 * The checkbox border turns navy; the label and count don't move. Disabled rows
 * (count 0) stay put, and `:has()` keeps that distinction in CSS rather than
 * needing a class from JS.
 * ------------------------------------------------------------------------ */
.ppfind .ppfind__opt:not(.is-empty):hover input[type="checkbox"] {
	border-color: var(--navy) !important;
}

/* ---------------------------------------------------------------------------
 * STAGING-FIXES-8 7.3 - "Back to top", 720px and up.
 * bottom: 96px clears the Intercom launcher, which sits at 24px and is about
 * 56px across. Phones get nothing: the sticky filter row already does this.
 * ------------------------------------------------------------------------ */
.ppfind .ppfind__totop {
	position: fixed;
	right: 24px;
	bottom: 96px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px !important;
	background: #fff !important;
	border: 1.5px solid var(--border) !important;
	font-family: var(--display) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--navy) !important;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(31, 58, 82, .08);
}
.ppfind .ppfind__totop:hover { border-color: var(--navy) !important; }
.ppfind .ppfind__totop[hidden] { display: none; }
@media (max-width: 719px) {
	.ppfind .ppfind__totop { display: none !important; }
}