/* =========================================================================
   Opportunity discovery.

   SCOPE
   Every selector begins with .bfd, .bfd-* or html.bfd-sheet-open. Nothing
   can reach the header, the navigation, the footer, a single Opportunity, an
   Essay, the homepage or another plugin. The one deliberate exception is
   .befello-disco__grid, which SETS a column count on the theme's own grid
   rather than restyling it.

   The card is not styled here at all. Not one selector touches
   .befello-opportunity-card.

   ONE SCROLLING SURFACE
   The filter column has no height and no overflow. It is an ordinary block
   in the document, and the page is the only thing that scrolls. Height is
   controlled by the architecture instead: sections start closed, long term
   lists sit behind a search box or "View all", and nothing is a fixed-height
   pane. Sticky is applied to the column, not to a scroller inside it, so it
   simply stops being sticky when it is taller than the viewport -- which is
   the behaviour that never traps a wheel.
   ========================================================================= */

.bfd {
	--bfd-side: clamp(14rem, 21vw, 17.5rem);
	--bfd-gap: clamp(1.5rem, 3vw, 3rem);
	--bfd-radius: var(--bf-radius-card, 8px);
	--bfd-border: var(--bf-border, #e0e1ea);
	--bfd-ink: var(--bf-ink, #0e1014);
	--bfd-muted: var(--bf-ink-muted, #5f636b);
	--bfd-surface: var(--bf-surface, #fff);
	--bfd-blue: var(--bf-cta, #3139fb);
	--bfd-blue-ink: var(--bf-cta-ink, #fff);

	/* ---------------------------------------------------------------------
	   THE CONTROL SYSTEM.

	   Every control in the panel is built from these five values, so a
	   search field, a select and a selectable box cannot end up with
	   different heights, corners or borders by being written on different
	   days. Two type sizes, and the rule is what they are FOR: text a
	   reader types or a value they picked sits at --bfd-ctl-text; a label
	   on an option sits one step down at --bfd-ctl-label.
	   --------------------------------------------------------------------- */
	--bfd-ctl-h: 2.75rem;                      /* 44px, the touch floor */
	/* Boxes and tags are chosen from a wrapped row rather than typed into,
	   so they sit one step down. The sheet raises them back to --bfd-ctl-h
	   for thumbs; nothing else in the panel is shorter than this. */
	--bfd-ctl-h-compact: 2.5rem;               /* 40px */
	/* A list row is the smallest control in the system. It is scanned in a
	   column of twenty rather than tapped once, so it is tighter than a box
	   -- but the sheet raises it back to --bfd-ctl-h for thumbs. */
	--bfd-ctl-h-row: 2.125rem;                 /* 34px */
	/* What every control grows to inside the mobile sheet, where the input
	   device is a thumb rather than a pointer. */
	--bfd-ctl-h-touch: 3rem;                   /* 48px */
	--bfd-ctl-pad: var(--bf-space-4, 1rem);
	--bfd-ctl-gap: var(--bf-space-3, 0.75rem);
	--bfd-ctl-radius: var(--bf-radius-btn, 8px);
	--bfd-ctl-border: 1px;
	--bfd-ctl-text: var(--bf-text-base, 1rem);
	--bfd-ctl-label: var(--bf-text-sm, 0.875rem);
	--bfd-ctl-ring: 2px;

	color: var(--bfd-ink);
}

/* -------------------------------------------------------------------------
   NATIVE CONTROL RESET — and it has to be this specific.

   GeneratePress styles form controls with selectors like
   input[type="search"], which is (0,1,1) and therefore outranks a single
   class whatever the load order. It also prints its customiser colours
   INLINE in wp_head, after every enqueued stylesheet, so a tie in
   specificity loses on source order too.

   The visible symptom was a grey #fafafa box with its own 1px #ccc border,
   square corners, 10px/15px padding and #666 text sitting INSIDE the
   panel's own outlined field -- a box within a box, on every text input in
   the plugin. Raising these to (0,2,0) is what actually settles it; the
   properties are then restated rather than assumed, because a reset that
   only fixes the background leaves the padding and the corner behind.

   Scoped to .bfd, so nothing outside the discovery UI is touched.
   ------------------------------------------------------------------------- */

.bfd input[type="text"],
.bfd input[type="search"],
.bfd input[type="number"],
.bfd select,
.bfd textarea {
	max-width: none;
	box-shadow: none;
	font-family: inherit;
	line-height: 1.4;
}

.bfd .bfd-field__input {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--bfd-ink);
	font-size: var(--bfd-ctl-text);
	height: auto;
}

.bfd .bfd-field__input:focus {
	background-color: transparent;
	color: var(--bfd-ink);
	border: 0;
	box-shadow: none;
}

.bfd *,
.bfd *::before,
.bfd *::after {
	box-sizing: border-box;
}

/* .bfd__heading is gone with the <h1> it styled. The plugin no longer
   prints a heading of its own -- the WordPress page title is the page's
   title, and a second <h1> below it was a duplicate both on screen and in
   the heading outline. See templates/discovery.php. */

/* --- The two-area layout ------------------------------------------------- */

.bfd__layout {
	display: grid;
	grid-template-columns: var(--bfd-side) minmax(0, 1fr);
	gap: var(--bfd-gap);
	align-items: start;
}

/*
 * Sticky on the column itself, with NO height and NO overflow.
 *
 * position:sticky on a grid item whose content is taller than the viewport
 * simply scrolls with the page and never sticks, which is the correct
 * degradation: it cannot trap the wheel, cannot grow a second scrollbar and
 * cannot fight an expanding accordion. When the panel is short -- which is
 * the normal state, because sections start closed -- it holds while the
 * results scroll past. `top` is a variable so a theme with a fixed header
 * can push it clear without touching this file.
 */
.bfd__side {
	position: sticky;
	top: var(--bfd-sticky-top, 1.5rem);
	min-width: 0;
	align-self: start;
}

.bfd__side-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bf-space-3, 0.75rem);
	margin-bottom: var(--bf-space-2, 0.5rem);
}

/* (0,2,0): the theme's .entry-content h2 is (0,1,1) and would set it at
   the size of a page section heading. */
.bfd .bfd__side-title {
	margin: 0;
	font-size: var(--bf-text-lg, 1.125rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Present in the markup always and hidden until something is active, so the
   script can show it after an in-place update. It used to be printed only
   when the PAGE LOADED with filters, so a reader who filtered in place never
   saw it. */
.bfd__side-clear,
.bfd__side-clear:link,
.bfd__side-clear:visited {
	color: var(--bfd-blue);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfd__side-clear[hidden] {
	display: none;
}

.bfd__side-clear:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd__main {
	min-width: 0;
}

/* --- The search row: Search + Your nationality -----------------------------
   The nationality field itself is styled by nationality-picker.css, which
   this sheet depends on; only the search box and the row are here.
   The two questions a reader arrives with, side by side above everything
   else on a wide screen and stacked on a phone. Both are the same height,
   the same border and the same corner, so they read as one row of input
   rather than two unrelated widgets. Blue is the mark of a field you type
   into, as everywhere else in this panel.
   ------------------------------------------------------------------------- */

.bfd-find {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 1fr);
	align-items: start;
	gap: var(--bf-space-4, 1rem) var(--bf-space-5, 1.25rem);
	margin-bottom: var(--bf-space-8, 2rem);
}

.bfd-find__label {
	display: block;
	margin-bottom: var(--bf-space-2, 0.5rem);
	color: var(--bfd-ink);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
}

.bfd-find__box {
	--bfd-find-h: 3.25rem;   /* 52px: the page's primary control clears the floor */

	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--bfd-find-h);
	background: var(--bfd-surface);
	border: var(--bfd-ctl-border) solid var(--bfd-blue);
	border-radius: var(--bfd-ctl-radius);
	transition: background-color 0.12s ease;
}

.bfd-find__box:focus-within {
	outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #0069c7);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bfd-find__box {
		transition: none;
	}
}

.bfd-find__icon {
	display: inline-flex;
	flex: none;
	padding-left: var(--bfd-ctl-pad);
	color: var(--bfd-blue);
}

/* (0,2,0) to settle GeneratePress's input[type] rules; see the reset above.
   16px text, never less: iOS zooms the page on focus below that. */
.bfd .bfd-find__input {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	height: auto;
	margin: 0;
	padding: 0 var(--bf-space-3, 0.75rem);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--bfd-ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	-webkit-appearance: none;
	appearance: none;
}

.bfd .bfd-find__input:focus {
	background: transparent;
	color: var(--bfd-ink);
	border: 0;
	outline: none;   /* the box carries the ring */
}

.bfd .bfd-find__input::placeholder {
	color: var(--bfd-muted);
	opacity: 1;
}

.bfd .bfd-find__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* One clear control, ours, labelled -- not the browser's unlabelled one. */
.bfd-find__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--bfd-ctl-radius);
	background: none;
	color: var(--bfd-muted);
	cursor: pointer;
}

.bfd-find__clear:hover,
.bfd-find__clear:focus {
	background: none;
	color: var(--bfd-ink);
}

.bfd-find__clear:focus-visible {
	outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #0069c7);
	outline-offset: -2px;
}

.bfd-find__clear[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* Every pixel above the first card is a pixel of scrolling before an
	   opportunity is seen, so the phone spacing is the tight end of the
	   scale: labels stay (they are what makes the fields unambiguous), the
	   air between them goes. */
	.bfd-find {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bf-space-3, 0.75rem);
		margin-bottom: var(--bf-space-4, 1rem);
	}

	.bfd-find__label {
		margin-bottom: var(--bf-space-1, 0.25rem);
	}

	.bfd-find__box {
		--bfd-find-h: 3rem;
	}

	/* Brought to the top of the screen when focused, so the suggestions
	   open above the keyboard; this keeps the label in view too. */
	.bfd-find__q {
		scroll-margin-top: 2.5rem;
	}
}

/* --- Nationality field: safety net ------------------------------------------
   The field is styled by nationality-picker.css. If that file is missing or
   blocked (a partial upload, a minifier that dropped it), the field must not
   vanish: these are the bare minimum to keep it visible, usable and the same
   height as the search box. Single-class selectors, so the real stylesheet
   always overrides them. */
.bfd-nat__box {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	border: 1px solid var(--bf-cta, #0069c7);
	border-radius: var(--bf-radius-btn, 8px);
	background: #fff;
}

.bfd-nat__input {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1rem;
}

.bfd-nat__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfd-nat__list[hidden],
.bfd-nat__slot[hidden],
.bfd-nat__clear[hidden] {
	display: none;
}

/* --- Sections -------------------------------------------------------------
   Type, funding and field are open: a heading and the choices under it, no
   disclosure to open first. The column used to be eight closed accordions,
   so it read as a list of questions with no answers until clicked. */

.bfd-sec {
	padding: var(--bf-space-4, 1rem) 0 var(--bf-space-5, 1.25rem);
	border-top: 1px solid var(--bfd-border);
}

/* The sheet's header already draws a rule; a second one under it read as a
   doubled line. */
.bfd-sheet__body > .bfd-sec:first-child {
	border-top: 0;
}

.bfd .bfd-sec__title {
	margin: 0 0 var(--bf-space-3, 0.75rem);
	color: var(--bfd-ink);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

/* --- More filters ----------------------------------------------------------
   ONE native <details> for the three filters fewer readers reach for. Its
   summary names what is inside, so a reader can tell whether it holds the
   thing they want without opening it. */

.bfd-more-filters {
	border-top: 1px solid var(--bfd-border);
	border-bottom: 1px solid var(--bfd-border);
}

.bfd-more-filters__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--bf-space-3, 0.75rem);
	min-height: var(--bfd-ctl-h);
	padding: var(--bf-space-3, 0.75rem) 0;
	cursor: pointer;
	list-style: none;
}

.bfd-more-filters__head::-webkit-details-marker {
	display: none;
}

.bfd-more-filters__head:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-more-filters__title {
	color: var(--bfd-ink);
	font-size: var(--bf-text-base, 1rem);
	font-weight: 600;
	line-height: 1.4;
}

.bfd-more-filters__hint {
	grid-column: 1;
	color: var(--bfd-muted);
	font-size: var(--bf-text-xs, 0.75rem);
	line-height: 1.4;
}

.bfd-more-filters__mark {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.25rem;
	border: solid var(--bfd-ink);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}

.bfd-more-filters[open] .bfd-more-filters__mark {
	transform: rotate(-135deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.bfd-more-filters__mark {
		transition: none;
	}
}

/* Inside the disclosure the sections keep their headings and lose the
   outer rule, which the disclosure already draws. */
.bfd-more-filters__body .bfd-sec:first-child {
	border-top: 0;
	padding-top: var(--bf-space-1, 0.25rem);
}

.bfd-set {
	margin: 0;
	padding: 0;
	border: 0;
}

/* --- Text fields ---------------------------------------------------------
   The input IS the component: one surface, one blue hairline, one blue
   mark. No wrapper border around a filled inner box, and no hover state at
   all -- the border does not change, the background does not change,
   nothing moves. Focus is the only state, and it is required.

   Keyword, nationality and host country all use this same field at the same
   size. They are the same kind of control -- something a reader types into
   to narrow a list -- and giving one of them a different height, border and
   icon colour was the inconsistency, not a distinction worth keeping. Blue
   is the mark of a text-entry field; the select and the boxes below carry
   the neutral border because they are chosen from, not typed into.
   ------------------------------------------------------------------------- */

.bfd-field {
	display: flex;
	align-items: center;
	gap: var(--bfd-ctl-gap);
	min-height: var(--bfd-ctl-h);
	padding: 0 var(--bfd-ctl-pad);
	background: transparent;
	/*
	 * 1px, not 1.5. Chrome floors a fractional border-width to whole device
	 * pixels, so 1.5px computed to 1px anyway at DPR 1 -- declaring 1.5 only
	 * made the stylesheet disagree with what shipped.
	 */
	border: var(--bfd-ctl-border) solid var(--bfd-blue);
	border-radius: var(--bfd-ctl-radius);
}

.bfd-field:focus-within {
	outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-field__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* A fixed box, so the text starts at the same x in every field whatever
	   the glyph inside happens to measure. */
	width: 18px;
	height: 18px;
	color: var(--bfd-blue);
}

.bfd-field__input {
	flex: 1 1 auto;
	min-width: 0;
	/* The wrapper owns the height; the input fills it. Giving both a height
	   is how a one-pixel disagreement becomes a visible seam. */
	align-self: stretch;
	margin: 0;
	background: none;
	font-size: var(--bfd-ctl-text);
	-webkit-appearance: none;
	appearance: none;
}

.bfd-field__input:focus,
.bfd-field__input:focus-visible {
	outline: none;   /* the field carries it, above */
}

.bfd-field__input::placeholder {
	color: var(--bfd-muted);
	opacity: 1;
}

/* The clear "x" a search input draws itself is a second, unlabelled
   control beside our own. */
.bfd-field__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* --- Selectable boxes and tags -------------------------------------------
   A real checkbox or radio, moved under its own label rather than hidden:
   display:none and visibility:hidden both remove it from the keyboard
   order. The label paints the control, so the whole box is the target. */

.bfd-opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bf-space-2, 0.5rem);
}

.bfd-opt {
	position: relative;
}

.bfd-opt[hidden] {
	display: none;   /* author rule: the UA sheet loses to display:flex above */
}

.bfd-opt__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.bfd-opt__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Compact is the point of a box; the tap area is the whole box, not an
	   icon inside it. */
	min-height: var(--bfd-ctl-h-compact);
	padding: 0 var(--bfd-ctl-pad);
	background: var(--bfd-surface);
	color: var(--bfd-ink);
	border: var(--bfd-ctl-border) solid var(--bfd-border);
	border-radius: var(--bfd-ctl-radius);
	font-size: var(--bfd-ctl-label);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	/* Colour only, and only between rest and selected. No transform, no
	   shadow, and nothing bound to hover. */
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
	.bfd-opt__label {
		transition: none;
	}
}

.bfd-opt__input:checked + .bfd-opt__label {
	background: var(--bfd-blue);
	border-color: var(--bfd-blue);
	color: var(--bfd-blue-ink);
}

.bfd-opt__input:focus-visible + .bfd-opt__label {
	outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

/*
 * Field tags borrow the single Opportunity's own Field treatment
 * (.befello-hero__field): the same 4px/10px, the same 8px corner, the same
 * small medium-weight type. One difference, and it is deliberate: the rest
 * state is white here rather than the tinted fill used on the single page,
 * because a filter that is not chosen should not look chosen.
 */
.bfd-opts--tag .bfd-opt__label {
	/* One step below compact: this is the single Opportunity page's own tag
	   proportion, reused deliberately. */
	min-height: 2rem;
	padding: 4px 10px;
	border-radius: var(--bfd-ctl-radius);
	font-size: var(--bfd-ctl-label);
	font-weight: 500;
	line-height: 1.5;
}

/*
 * "View all" is a secondary button, built from the same tokens as the
 * selectable boxes above it: same corner, same border weight, same label
 * size. It was an underlined link, which read as prose in a column that is
 * otherwise made of controls -- and an underline is the one treatment in
 * this panel that means "navigates away", which this does not.
 *
 * Its label is written by the script from the term count, so a taxonomy
 * that grows keeps a truthful number without anything here changing.
 */
.bfd-more-opts {
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem);
	min-height: var(--bfd-ctl-h-compact);
	margin-top: var(--bf-space-3, 0.75rem);
	padding: 0 var(--bfd-ctl-pad);
	background: var(--bfd-surface);
	border: var(--bfd-ctl-border) solid var(--bfd-border);
	border-radius: var(--bfd-ctl-radius);
	color: var(--bfd-ink);
	font: inherit;
	font-size: var(--bfd-ctl-label);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.12s ease;
}

/*
 * Restrained, and nothing depends on it: the border firms up, and that is
 * all. No fill change, no lift, no movement, and every word stays readable
 * without a pointer -- which is what keeps this compatible with the
 * panel's no-hover rule.
 */
.bfd-more-opts:hover {
	/* --bf-border-strong aliases the same value as --bf-border in this
	   theme, so pointing at it changed nothing. The muted ink is the next
	   step up the neutral ramp and is visibly firmer without becoming a
	   second emphasis in the column. */
	border-color: var(--bfd-muted);
}

@media (prefers-reduced-motion: reduce) {
	.bfd-more-opts {
		transition: none;
	}
}

.bfd-more-opts:focus-visible {
	outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

/* The chevron turns when the list is open, so the control says which way
   it goes without relying on the label alone. */
.bfd-more-opts::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.15s ease;
}

.bfd-more-opts[aria-expanded="true"]::after {
	transform: rotate(-135deg) translate(-1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
	.bfd-more-opts::after {
		transition: none;
	}
}

/* --- Searchable rows -----------------------------------------------------
   No max-height and no overflow: the search box is what keeps this short,
   which is the architecture doing the job a scrollbar was doing before. */

.bfd-rows {
	display: flex;
	flex-direction: column;
	/* 1px, not a space token. The rows are a single list, and a gap wide
	   enough to notice turns it into a stack of separate things. */
	gap: 1px;
	margin-top: var(--bf-space-2, 0.5rem);
}

.bfd-row {
	position: relative;
}

.bfd-row[hidden] {
	display: none;
}

.bfd-row__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/*
 * A row reads as a choice, not a paragraph. Three things do that, and none
 * of them adds weight: it is short, it is inset from the panel edge so it
 * occupies a defined lane rather than running to the margin, and it carries
 * a transparent border that the selected state fills in -- the same
 * border-plus-fill language as the boxes and tags above, so a selected
 * country and a selected type look like the same kind of decision.
 *
 * No dividers between rows. The search hides non-matching rows, and a rule
 * drawn between siblings leaves stray lines above and below whatever
 * survives a filter.
 */
.bfd-row__label {
	display: flex;
	align-items: center;
	gap: var(--bf-space-3, 0.75rem);
	min-height: var(--bfd-ctl-h-row);
	padding: 0 var(--bf-space-3, 0.75rem);
	border: var(--bfd-ctl-border) solid transparent;
	border-radius: var(--bfd-ctl-radius);
	color: var(--bfd-ink);
	font-size: var(--bfd-ctl-label);
	font-weight: 500;
	/* Tight, because a column of country names is scanned rather than read.
	   1.4 gave each row the leading of a sentence. */
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
	.bfd-row__label {
		transition: none;
	}
}

.bfd-row__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

/* The tick appears only when chosen. An empty box on every row would make
   this a checkbox list again, which is what the redesign removes. */
.bfd-row__tick {
	position: relative;
	flex: none;
	width: 1rem;
	height: 1rem;
}

.bfd-row__input:checked + .bfd-row__label {
	background: var(--bf-accent-soft, #f5f5ff);
	border-color: var(--bf-accent-soft-border, #d7d9ff);
	color: var(--bf-accent-on-tint, #3139fb);
	font-weight: 600;
}

.bfd-row__input:checked + .bfd-row__label .bfd-row__tick::after {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.05rem;
	width: 0.3rem;
	height: 0.55rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bfd-row__input:focus-visible + .bfd-row__label {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: -2px;
}

.bfd-none {
	margin: var(--bf-space-3, 0.75rem) 0 0;
	color: var(--bfd-muted);
	font-size: var(--bf-text-sm, 0.875rem);
}

.bfd-none[hidden] {
	display: none;
}

/* --- The age range -------------------------------------------------------
   Two native range inputs on one track. Each is transparent except for its
   thumb, so both thumbs are draggable and both are keyboard operable, while
   the rail and the fill are painted by the elements beneath them. */

.bfd-range__read {
	margin: 0 0 var(--bf-space-3, 0.75rem);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bfd-range__track {
	position: relative;
	height: 2.5rem;
}

.bfd-range__rail,
.bfd-range__fill {
	position: absolute;
	top: 50%;
	height: 3px;
	border-radius: 999px;
	transform: translateY(-50%);
	pointer-events: none;
}

.bfd-range__rail {
	left: 0;
	right: 0;
	background: var(--bfd-border);
}

.bfd-range__fill {
	background: var(--bfd-blue);
}

.bfd-range__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2.5rem;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	/*
	 * The track must not take the pointer or the upper input would swallow
	 * every drag aimed at the lower thumb; the thumbs take it back below.
	 */
	pointer-events: none;
}

.bfd-range__input::-webkit-slider-runnable-track {
	height: 2.5rem;
	background: none;
	border: 0;
}

.bfd-range__input::-moz-range-track {
	height: 2.5rem;
	background: none;
	border: 0;
}

.bfd-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.625rem;
	border: 2px solid var(--bfd-blue);
	border-radius: 50%;
	background: var(--bfd-surface);
	cursor: grab;
	pointer-events: auto;
}

.bfd-range__input::-moz-range-thumb {
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--bfd-blue);
	border-radius: 50%;
	background: var(--bfd-surface);
	cursor: grab;
	pointer-events: auto;
}

.bfd-range__input:focus {
	outline: none;
}

.bfd-range__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-range__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-range__ends {
	display: flex;
	justify-content: space-between;
	margin: 0;
	color: var(--bfd-muted);
	font-size: var(--bf-text-xs, 0.75rem);
	font-variant-numeric: tabular-nums;
}

/* --- Toolbar -------------------------------------------------------------
   Count, sort, and on a phone the Filters button. One sort control: it used
   to exist twice (phone bar, desktop toolbar) under one name, and the copy
   a request read was not always the one the reader had changed. */

.bfd-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bf-space-3, 0.75rem);
	margin-bottom: var(--bf-space-4, 1rem);
}

.bfd-count {
	margin: 0;
	font-size: var(--bf-text-base, 1rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bfd-count:focus {
	outline: none;
}

.bfd-sort {
	display: flex;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem);
}

.bfd-sort__label {
	color: var(--bfd-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	white-space: nowrap;
}

.bfd-sort__control {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* appearance:none so it stops reading as browser chrome; still a native
   <select>, so a phone opens its own picker. */
.bfd .bfd-sort__select {
	-webkit-appearance: none;
	appearance: none;
	min-height: var(--bfd-ctl-h);
	height: auto;
	margin: 0;
	padding: 0 2.25rem 0 var(--bfd-ctl-pad);
	border: var(--bfd-ctl-border) solid var(--bfd-border);
	border-radius: var(--bfd-ctl-radius);
	background: var(--bfd-surface);
	color: var(--bfd-ink);
	font-family: inherit;
	font-size: var(--bfd-ctl-label);
	font-weight: 600;
	line-height: 1.3;
	box-shadow: none;
	cursor: pointer;
}

.bfd .bfd-sort__select:hover {
	border-color: var(--bfd-muted);
}

.bfd .bfd-sort__select:focus,
.bfd .bfd-sort__select:focus-visible {
	background: var(--bfd-surface);
	color: var(--bfd-ink);
	border-color: var(--bfd-border);
	outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-sort__chevron {
	position: absolute;
	right: 0.75rem;
	color: var(--bfd-muted);
	pointer-events: none;
}

/* The Filters button exists for the phone only; the column is the panel
   everywhere else. */
.bfd-toolbar__filters {
	display: none;
}

.bfd-correction {
	margin: 0 0 var(--bf-space-3, 0.75rem);
	color: var(--bfd-muted);
	font-size: var(--bf-text-sm, 0.875rem);
}

.bfd-correction__undo {
	margin-left: var(--bf-space-2, 0.5rem);
	padding: 0;
	border: 0;
	background: none;
	color: var(--bfd-blue);
	font: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bfd-correction__undo:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem);
	margin-bottom: var(--bf-space-5, 1.25rem);
}

.bfd-chip,
.bfd-chip:link,
.bfd-chip:visited {
	/*
	 * position:relative is load-bearing: each chip carries a
	 * .screen-reader-text (position:absolute) that otherwise escapes the
	 * phone's horizontal chip scroller and widens the page.
	 */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem);
	min-height: 2.25rem;
	padding: 0 var(--bf-space-2, 0.5rem) 0 var(--bf-space-3, 0.75rem);
	/*
	 * BEFELLO YELLOW, used for one job: "this is applied". A chip is the
	 * reader's own choice reflected back, so it takes the warm brand tint
	 * with ink on it (15:1). It used to read --bf-accent-soft expecting a
	 * lavender and get the yellow after the token migration -- with BLUE
	 * text on it, which was an accident rather than a decision.
	 */
	border: 1px solid var(--bf-accent, #ffda55);
	border-radius: var(--bf-radius-pill, 999px);
	background: var(--bf-surface-yellow, #fff8d8);
	color: var(--bfd-ink);
	font-size: var(--bf-text-xs, 0.75rem);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.bfd-chip:hover {
	background: var(--bf-accent-soft, #ffeb99);
	color: var(--bfd-ink);
}

@media (prefers-reduced-motion: reduce) {
	.bfd-chip {
		transition: none;
	}
}

.bfd-chip:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

/* The × in a circle of its own, so it reads as the thing that removes. */
.bfd-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	font-size: 0.95rem;
	line-height: 1;
}

.bfd-chip:hover .bfd-chip__x {
	background: rgba(14, 16, 20, 0.08);
}

.bfd-chips__clear,
.bfd-chips__clear:link,
.bfd-chips__clear:visited {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 var(--bf-space-1, 0.25rem);
	color: var(--bfd-blue);
	font-size: var(--bf-text-xs, 0.75rem);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfd-chips__clear:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

/* Beside the column, the column's own Clear all (which stays in view while
   the results scroll) is the one; two identical links a few pixels apart
   was one too many. On a phone the column is gone and this is the one. */
@media (min-width: 641px) {
	.bfd-chips__clear,
	.bfd-chips__clear:link,
	.bfd-chips__clear:visited {
		display: none;
	}
}

/* The theme's grid, told to aim for three. Nothing else about the grid or
   the card is touched: the column formula, the gutter, the mobile
   single-column rule and every card style stay in the theme. */
.befello-disco__grid {
	--befello-grid-columns: 3;
}

.bfd__results {
	position: relative;
	min-height: 12rem;
}

/* Dimming rather than replacing: the grid stays exactly where it was, so a
   result list does not jump under the cursor between keystrokes. */
.bfd.is-loading .bfd__results {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
	.bfd.is-loading .bfd__results {
		transition: none;
	}
}

.bfd__results::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: var(--bfd-blue);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
}

.bfd.is-loading .bfd__results::after {
	opacity: 1;
	animation: bfd-progress 1.1s ease-in-out infinite;
}

@keyframes bfd-progress {
	0%   { transform: scaleX(0); }
	50%  { transform: scaleX(0.7); }
	100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bfd.is-loading .bfd__results::after {
		animation: none;
		transform: scaleX(1);
	}
}

/* The keyword snippet. Outside the card, never inside it, and only while a
   keyword is active -- so the card's own height and design are untouched
   when there is no search. */
.befello-disco__result {
	display: flex;
	flex-direction: column;
	gap: var(--bf-space-2, 0.5rem);
	min-width: 0;
}

.befello-disco__snippet {
	margin: 0;
	color: var(--bfd-muted);
	font-size: var(--bf-text-xs, 0.75rem);
	line-height: 1.5;
}

.befello-disco__snippet mark {
	padding: 0 0.1em;
	border-radius: 2px;
	background: var(--bf-accent-soft, #f5f5ff);
	color: var(--bf-accent-on-tint, #3139fb);
	font-weight: 600;
}

.bfd-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem);
	margin-top: var(--bf-space-8, 2rem);
}

.bfd-more__status {
	margin: 0;
	color: var(--bfd-muted);
	font-size: var(--bf-text-xs, 0.75rem);
}

.bfd-empty,
.bfd-error {
	padding: var(--bf-space-10, 2.5rem) var(--bf-space-5, 1.25rem);
	border: 1px solid var(--bfd-border);
	border-radius: var(--bfd-radius);
	text-align: center;
}

.bfd-empty__title {
	margin: 0 0 var(--bf-space-2, 0.5rem);
	font-size: var(--bf-text-lg, 1.125rem);
	font-weight: 600;
}

.bfd-empty__hint {
	margin: 0 0 var(--bf-space-5, 1.25rem);
	color: var(--bfd-muted);
	font-size: var(--bf-text-sm, 0.875rem);
}

/* --- Buttons the theme paints only for anchors ---------------------------
   The theme applies .befello-btn--primary through :link and :visited, which
   only match anchors. Two controls here are genuinely buttons -- the sheet's
   Show action updates this page, the error retry re-runs a request -- so the
   fill is spelled out with the theme's own tokens. */

.bfd button.befello-btn--primary {
	background-color: var(--bf-cta, #3139fb);
	color: var(--bf-cta-ink, #fff);
	border-color: var(--bf-cta, #3139fb);
}

.bfd button.befello-btn--primary:active {
	background-color: var(--bf-cta-hover, #2a31d8);
	border-color: var(--bf-cta-hover, #2a31d8);
}

.bfd button.befello-btn--primary:focus-visible {
	outline: 2px solid var(--befello-focus-ring-on-brand, #000);
	outline-offset: 2px;
}

.bfd button.befello-btn--secondary {
	background-color: var(--bfd-surface);
	color: var(--bfd-ink);
	border-color: var(--bfd-ink);
}

.bfd button.befello-btn--secondary:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

/* --- The mobile sheet ---------------------------------------------------- */

.bfd-sheet {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bfd-surface);
	color: var(--bfd-ink);
}

.bfd-sheet::backdrop {
	background: rgba(14, 16, 20, 0.45);
}

.bfd-sheet__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
}

.bfd-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bf-space-3, 0.75rem);
	flex: none;
	padding: var(--bf-space-4, 1rem);
	border-bottom: 1px solid var(--bfd-border);
}

.bfd .bfd-sheet__title {
	margin: 0;
	font-size: var(--bf-text-lg, 1.125rem);
	font-weight: 700;
}

.bfd-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--bf-radius-btn, 8px);
	background: none;
	color: var(--bfd-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.bfd-sheet__close:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: -2px;
}

/*
 * The sheet's body is the ONE scroller in the design, and it is correct
 * here: a modal panel is a viewport of its own, not a region inside the
 * page, so scrolling it is not a second scrollbar competing with the
 * document. tabindex="0" in the markup makes it reachable by keyboard,
 * which is why it needs a ring.
 */
.bfd-sheet__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--bf-space-4, 1rem);
	-webkit-overflow-scrolling: touch;
}

.bfd-sheet__body:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: -2px;
}

.bfd-sheet__foot {
	display: flex;
	align-items: center;
	gap: var(--bf-space-3, 0.75rem);
	flex: none;
	padding: var(--bf-space-4, 1rem);
	/* Clear of the home indicator on a modern phone; zero elsewhere. */
	padding-bottom: calc(var(--bf-space-4, 1rem) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--bfd-border);
	background: var(--bfd-surface);
}

.bfd-sheet__clear {
	flex: none;
	min-height: var(--bfd-ctl-h);
	padding: 0 var(--bfd-ctl-pad);
	border: var(--bfd-ctl-border) solid var(--bfd-border);
	border-radius: var(--bfd-ctl-radius);
	background: none;
	color: var(--bfd-ink);
	font: inherit;
	font-size: var(--bfd-ctl-label);
	font-weight: 600;
	cursor: pointer;
}

.bfd-sheet__clear:focus-visible {
	outline: 2px solid var(--befello-focus-ring, #3139fb);
	outline-offset: 2px;
}

.bfd-sheet__apply {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
}

html.bfd-sheet-open,
html.bfd-sheet-open body {
	overflow: hidden;
}

/* --- Phone ---------------------------------------------------------------
   640px matches the theme card grid's own phone breakpoint, so the column
   disappears at exactly the width where the grid becomes one card. */

@media (max-width: 640px) {
	.bfd__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.bfd__side {
		display: none;
	}

	/*
	 * NO FIXED BAR. The phone used to pin Filters and Sort to the bottom of
	 * the screen, with 72px of padding reserved under the last card. It is
	 * in the document now, directly above the results: the search and the
	 * nationality field are already the first things on the page, so the
	 * filters are one short scroll up from anywhere, and nothing permanently
	 * covers the cards.
	 *
	 * Row one: Filters and Sort, side by side. Row two: the count.
	 */
	.bfd-toolbar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--bf-space-2, 0.5rem) var(--bf-space-3, 0.75rem);
		margin-bottom: var(--bf-space-3, 0.75rem);
	}

	.bfd-toolbar__filters {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--bf-space-2, 0.5rem);
		min-height: var(--bfd-ctl-h-touch);
		padding: 0 var(--bf-space-4, 1rem);
		border: var(--bfd-ctl-border) solid var(--bfd-border);
		border-radius: var(--bfd-ctl-radius);
		background: var(--bfd-surface);
		color: var(--bfd-ink);
		font: inherit;
		font-size: var(--bfd-ctl-text);
		font-weight: 600;
		line-height: 1.2;
		cursor: pointer;
	}

	.bfd-toolbar__filters:hover,
	.bfd-toolbar__filters:focus {
		background: var(--bfd-surface);
		color: var(--bfd-ink);
		border-color: var(--bfd-muted);
	}

	.bfd-toolbar__filters:focus-visible {
		outline: var(--bfd-ctl-ring) solid var(--befello-focus-ring, #0069c7);
		outline-offset: 2px;
	}

	.bfd-toolbar__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.375rem;
		height: 1.375rem;
		padding: 0 0.4rem;
		border-radius: var(--bf-radius-pill, 999px);
		background: var(--bfd-blue);
		color: var(--bfd-blue-ink);
		font-size: var(--bf-text-xs, 0.75rem);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.bfd-toolbar__badge.is-empty {
		display: none;
	}

	/* The caption goes: on a phone the select's own value ("Newest") sits
	   beside "Filters" and the pair reads as filters + sort. The select is
	   still labelled for assistive technology through its <label>. */
	.bfd-sort__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bfd .bfd-sort__select {
		min-height: var(--bfd-ctl-h-touch);
		font-size: var(--bfd-ctl-text);
	}

	.bfd-count {
		grid-column: 1 / -1;
		order: 3;
		color: var(--bfd-muted);
		font-size: var(--bf-text-sm, 0.875rem);
		font-weight: 500;
	}

	/*
	 * Chips scroll sideways rather than stacking, so eight active filters do
	 * not push the first card down a screen. The scroll is inside the row,
	 * never the page.
	 */
	.bfd-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
		padding-bottom: var(--bf-space-1, 0.25rem);
	}

	.bfd-chips::-webkit-scrollbar {
		display: none;
	}

	.bfd-chip,
	.bfd-chips__clear {
		flex: none;
	}

	/* Bigger targets in the sheet: these are thumbs, not a mouse. */
	.bfd-sheet .bfd-opt__label {
		min-height: var(--bfd-ctl-h);
		padding: 0 var(--bf-space-5, 1.25rem);
		font-size: var(--bfd-ctl-text);
	}

	.bfd-sheet .bfd-opts--tag .bfd-opt__label {
		min-height: var(--bfd-ctl-h);
		padding: 8px 14px;
	}

	.bfd-sheet .bfd-row__label {
		min-height: var(--bfd-ctl-h-touch);
		font-size: var(--bfd-ctl-text);
	}

	.bfd-sheet .bfd-more-opts {
		min-height: var(--bfd-ctl-h);
		font-size: var(--bfd-ctl-text);
	}

	.bfd-sheet .bfd-field {
		--bfd-ctl-h: var(--bfd-ctl-h-touch);
	}

	.bfd-sheet .bfd-sec__title {
		font-size: var(--bf-text-base, 1rem);
	}

	.bfd-sheet .bfd-more-filters__head {
		min-height: var(--bfd-ctl-h-touch);
	}

	.bfd-sheet__foot .bfd-sheet__clear,
	.bfd-sheet__foot .bfd-sheet__apply {
		min-height: var(--bfd-ctl-h-touch);
	}
}

/* Above the phone breakpoint the sheet's trigger is hidden. It is still
   given a sane desktop shape rather than display:none: a modal <dialog>
   that is display:none still makes the page inert when opened, so hiding it
   would turn a stray open into a locked page with nothing visible. */
@media (min-width: 641px) {
	.bfd-sheet {
		width: min(30rem, calc(100vw - 3rem));
		height: auto;
		max-height: min(40rem, calc(100vh - 4rem));
		margin: auto;
		border-radius: var(--bfd-radius);
	}
}