/**
 * [ao_edu_program_search] — Arts Ed program finder (theme 2.200.0).
 *
 * Desktop: keyword box and filter checklists in a 220px left column, the
 * grouped results on the right. At 782px and below the filters become a
 * bottom sheet opened by the Filters button, ticked filters show as chips,
 * and every group header and row becomes its own card — the layout of
 * Apollo's [apl_education_program_search] it replaces.
 *
 * Discipline colours arrive per element as --ao-eps-c (dot / avatar),
 * --ao-eps-bg and --ao-eps-fg (badge) from AO_Edu_Program_Search::color_style().
 */

.ao-eps {
	--ao-eps-border: var(--color-rule, #e2e2e2);
	--ao-eps-muted: var(--color-ink-muted, #666);
	--ao-eps-head-bg: var(--color-bg-warm, #f5f4ef);
	--ao-eps-c: #767676;
	--ao-eps-bg: #efefef;
	--ao-eps-fg: #4d4d4d;
	/* Block margins only (theme 2.236.0). A Full Width page caps each block
	   at the body width and centres it with margin-inline: auto
	   (.page-full__prose > *); a `margin: 0 0 …` here loads later, wins on
	   equal specificity, and pinned the finder to the left edge of the
	   window on staging.unitedartscfl.org/program-directory/. */
	margin-block: 0 var(--space-8, 2rem);
}

.ao-eps .ao-eps__heading {
	margin: 0 0 var(--space-4, 1rem);
}

.ao-eps .ao-eps__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: var(--space-4, 1rem) var(--space-6, 1.5rem);
	align-items: start;
}

.ao-eps .ao-eps__search {
	grid-area: 1 / 1;
	position: relative;
}

.ao-eps .ao-eps__results {
	grid-area: 1 / 2 / span 2;
	min-width: 0;
}

.ao-eps .ao-eps__sidebar {
	grid-area: 2 / 1;
	position: sticky;
	top: var(--space-5, 1.25rem);
	font-size: var(--text-sm, 0.875rem);
}

.ao-eps .ao-eps__mobile-bar,
.ao-eps .ao-eps__chips,
.ao-eps .ao-eps__backdrop,
.ao-eps .ao-eps__sidebar-header,
.ao-eps .ao-eps__sidebar-footer {
	display: none;
}

/* ── Keyword ─────────────────────────────────────────────────────────── */

.ao-eps .ao-eps__search-icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ao-eps-muted);
	pointer-events: none;
}

.ao-eps .ao-eps__keyword {
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 0 10px 0 32px;
	font-size: var(--text-sm, 0.875rem);
	border: 1px solid var(--color-field-border, #767676);
	border-radius: var(--radius-md, 10px);
	background: var(--color-paper, #fff);
	box-sizing: border-box;
}

.ao-eps .ao-eps__keyword:focus-visible {
	outline: 2px solid var(--color-focus, var(--color-primary));
	outline-offset: 1px;
}

/* ── Filters ─────────────────────────────────────────────────────────── */

.ao-eps .ao-eps__filter {
	margin: 0 0 var(--space-4, 1rem);
	padding: 0;
	border: 0;
	min-width: 0;
}

.ao-eps .ao-eps__filter-label {
	margin: 0 0 var(--space-1, 0.25rem);
	padding: 0;
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.3;
	cursor: pointer;
}

.ao-eps .ao-eps__option--child {
	padding-left: 1.5rem;
}

.ao-eps .ao-eps__option input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.ao-eps .ao-eps__dot {
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ao-eps-c);
}

.ao-eps .ao-eps__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

.ao-eps .ao-eps__submit {
	width: 100%;
}

.ao-eps.is-enhanced .ao-eps__submit {
	display: none;
}

.ao-eps .ao-eps__reset {
	display: block;
	width: 100%;
	padding: 8px;
	font-size: var(--text-sm, 0.875rem);
	text-align: center;
	text-decoration: none;
	color: var(--color-ink, #252525);
	background: var(--color-paper, #fff);
	border: 1px solid var(--ao-eps-border);
	border-radius: var(--radius-sm, 4px);
	box-sizing: border-box;
}

.ao-eps .ao-eps__reset:hover,
.ao-eps .ao-eps__reset:focus-visible {
	background: var(--ao-eps-head-bg);
	color: var(--color-ink, #252525);
}

/* ── Results ─────────────────────────────────────────────────────────── */

.ao-eps .ao-eps__results.is-loading .ao-eps__list {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}

.ao-eps .ao-eps__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	margin: 0 0 var(--space-3, 0.75rem);
}

.ao-eps .ao-eps__count {
	margin: 0;
	font-size: var(--text-sm, 0.875rem);
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__group-by {
	width: auto;
	height: 34px;
	margin: 0;
	padding: 0 28px 0 12px;
	font-size: var(--text-sm, 0.875rem);
	border: 1px solid var(--ao-eps-border);
	border-radius: var(--radius-md, 10px);
	background-color: var(--color-paper, #fff);
	cursor: pointer;
}

.ao-eps .ao-eps__list {
	border: 1px solid var(--ao-eps-border);
	border-radius: 8px;
	background: var(--color-paper, #fff);
	overflow: hidden;
}

.ao-eps .ao-eps__empty {
	margin: 0;
	padding: var(--space-5, 1.25rem);
	text-align: center;
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__group + .ao-eps__group .ao-eps__group-header {
	border-top: 1px solid var(--ao-eps-border);
}

.ao-eps .ao-eps__group-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 15px;
	background: var(--ao-eps-head-bg);
	border-bottom: 1px solid var(--ao-eps-border);
}

.ao-eps .ao-eps__avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	overflow: hidden;
}

.ao-eps .ao-eps__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ao-eps .ao-eps__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	/* The palette's dark ink on its light tint, over 7:1 (theme 2.242.0).
	   White on the mid colour measured 3.4–3.8:1 at this 10px size. */
	color: var(--ao-eps-fg);
	background: var(--ao-eps-bg);
	box-shadow: inset 0 0 0 1px var(--ao-eps-c);
}

.ao-eps .ao-eps__group-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ao-eps .ao-eps__group-title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.3;
}

.ao-eps .ao-eps__group-title a {
	color: inherit;
	text-decoration: none;
}

.ao-eps .ao-eps__group-title a:hover,
.ao-eps .ao-eps__group-title a:focus-visible {
	text-decoration: underline;
}

.ao-eps .ao-eps__group-meta {
	font-size: var(--text-xs, 0.75rem);
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__group-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-left: auto;
	padding: 0;
	color: var(--ao-eps-muted);
	background: none;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
}

.ao-eps .ao-eps__group-toggle:hover {
	color: var(--color-ink, #252525);
	background: rgba(0, 0, 0, 0.05);
}

.ao-eps .ao-eps__chevron {
	transition: transform 0.2s;
}

.ao-eps .ao-eps__group-toggle[aria-expanded="false"] .ao-eps__chevron {
	transform: rotate(180deg);
}

.ao-eps .ao-eps__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ao-eps .ao-eps__rows[hidden] {
	display: none;
}

.ao-eps .ao-eps__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 15px;
	border-bottom: 1px solid var(--ao-eps-border);
}

.ao-eps .ao-eps__group:last-child .ao-eps__row:last-child {
	border-bottom: 0;
}

.ao-eps .ao-eps__row-main {
	flex: 1 1 0;
	min-width: 0;
}

.ao-eps .ao-eps__row-title {
	display: inline-block;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	color: var(--color-ink, #252525);
	text-decoration: none;
}

.ao-eps .ao-eps__row-title:hover,
.ao-eps .ao-eps__row-title:focus-visible {
	color: var(--color-link, var(--color-primary));
	text-decoration: underline;
}

.ao-eps .ao-eps__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.ao-eps .ao-eps__badge {
	margin: 0;
	padding: 3px 10px;
	font-size: var(--text-xs, 0.75rem);
	line-height: 1.4;
	border-radius: var(--radius-pill, 999px);
	background: var(--ao-eps-bg);
	color: var(--ao-eps-fg);
}

.ao-eps .ao-eps__row-meta {
	display: flex;
	flex: 0 0 50%;
	max-width: 50%;
	margin: 0;
}

.ao-eps .ao-eps__meta {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	padding-right: 10px;
	box-sizing: border-box;
}

.ao-eps .ao-eps__meta dd {
	margin: 0;
	font-size: var(--text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__meta-icon {
	display: none;
}

/* ── Popup ───────────────────────────────────────────────────────────── */

.ao-eps .ao-eps__dialog {
	position: fixed;
	inset: 0;
	width: min(640px, calc(100vw - 32px));
	max-height: min(85vh, 760px);
	/* The theme's margin reset would pin the modal to the top-left corner. */
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
	color: var(--color-ink, #252525);
	background: var(--color-paper, #fff);
	overflow: hidden;
}

.ao-eps .ao-eps__dialog[open] {
	display: flex;
	flex-direction: column;
}

.ao-eps .ao-eps__dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.ao-eps .ao-eps__dialog-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
	background: var(--ao-eps-head-bg);
	border-bottom: 1px solid var(--ao-eps-border);
}

.ao-eps .ao-eps__dialog-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.ao-eps .ao-eps__dialog-close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	background: var(--color-ink, #333);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ao-eps .ao-eps__dialog-close:hover,
.ao-eps .ao-eps__dialog-close:focus-visible {
	background: #000;
}

.ao-eps .ao-eps__dialog-body {
	flex: 1 1 auto;
	padding: var(--space-5, 1.25rem);
	overflow: auto;
}

.ao-eps .ao-eps__popup-loading {
	margin: 0;
	padding: var(--space-8, 2rem) 0;
	text-align: center;
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__popup-facts {
	margin: 0 0 var(--space-3, 0.75rem);
	font-weight: 600;
}

.ao-eps .ao-eps__popup-description {
	margin: 0 0 var(--space-4, 1rem);
	line-height: 1.6;
}

.ao-eps .ao-eps__popup-terms {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 12px;
	margin: 0 0 var(--space-4, 1rem);
	font-size: var(--text-sm, 0.875rem);
}

.ao-eps .ao-eps__popup-terms > div {
	display: contents;
}

.ao-eps .ao-eps__popup-terms dt {
	font-weight: 600;
}

.ao-eps .ao-eps__popup-terms dd {
	margin: 0;
	color: var(--ao-eps-muted);
}

.ao-eps .ao-eps__popup-more {
	margin: 0 0 var(--space-5, 1.25rem);
}

/* A page's content links (.page-detail__content a) would otherwise recolour
   and underline the button text. */
.ao-eps .ao-eps__popup-more .btn--primary,
.ao-eps .ao-eps__popup-more .btn--primary:hover {
	color: #fff;
	text-decoration: none;
}

.ao-eps .ao-eps__popup-contact {
	border-radius: var(--radius-sm, 4px);
	background: var(--ao-eps-head-bg);
	overflow: hidden;
}

.ao-eps .ao-eps__popup-contact-title {
	margin: 0;
	padding: 10px 16px;
	font-family: var(--font-body);
	font-size: var(--text-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-secondary, #004876);
}

.ao-eps .ao-eps__contact-list {
	margin: 0;
	padding: 10px 16px 12px;
	list-style: none;
	font-size: var(--text-sm, 0.875rem);
}

.ao-eps .ao-eps__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 4px 0;
	overflow-wrap: anywhere;
}

.ao-eps .ao-eps__contact-name {
	font-weight: 600;
}

.ao-eps .ao-eps__contact-icon {
	flex: 0 0 16px;
	margin-top: 2px;
	color: var(--ao-eps-muted);
}

/* ── Phones and small tablets ────────────────────────────────────────── */

/* ── Horizontal layout (layout="horizontal", theme 2.236.0) ──────────────
   Each filter group is a <details> dropdown: its <summary> is the button,
   its fieldset the panel. The group's own <legend> is hidden visually (the
   summary already names it) but kept for screen readers. */

.ao-eps .ao-eps__dd {
	position: relative;
	margin: 0;
}

.ao-eps .ao-eps__dd-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.ao-eps .ao-eps__dd-toggle::-webkit-details-marker {
	display: none;
}

.ao-eps .ao-eps__dd-count {
	min-width: 20px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-pill, 999px);
}

.ao-eps .ao-eps__dd-count[hidden] {
	display: none;
}

.ao-eps .ao-eps__dd-chevron {
	flex: 0 0 auto;
	margin-left: auto;
	transition: transform 0.15s;
}

.ao-eps .ao-eps__dd[open] .ao-eps__dd-chevron {
	transform: rotate(180deg);
}

.ao-eps .ao-eps__dd .ao-eps__filter-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (min-width: 783px) {
	.ao-eps.ao-eps--horizontal .ao-eps__layout {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--space-3, 0.75rem);
	}

	.ao-eps.ao-eps--horizontal .ao-eps__search {
		flex: 0 1 280px;
		min-width: 200px;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__sidebar {
		flex: 1 1 0;
		min-width: 0;
		position: static;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__sidebar-body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2, 0.5rem);
	}

	.ao-eps.ao-eps--horizontal .ao-eps__dd-toggle {
		height: 38px;
		padding: 0 12px 0 14px;
		font-size: var(--text-sm, 0.875rem);
		font-weight: 500;
		white-space: nowrap;
		color: var(--color-ink, #252525);
		background: var(--color-paper, #fff);
		border: 1px solid var(--color-field-border, #767676);
		border-radius: var(--radius-md, 10px);
		box-sizing: border-box;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__dd-toggle:hover,
	.ao-eps.ao-eps--horizontal .ao-eps__dd[open] > .ao-eps__dd-toggle {
		background: var(--ao-eps-head-bg);
	}

	.ao-eps.ao-eps--horizontal .ao-eps__dd-toggle:focus-visible {
		outline: 2px solid var(--color-focus, var(--color-primary));
		outline-offset: 1px;
	}

	/* The panel drops under its button and floats over the results. */
	.ao-eps.ao-eps--horizontal .ao-eps__dd > .ao-eps__filter {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 50;
		width: max-content;
		min-width: 220px;
		max-width: min(340px, calc(100vw - 32px));
		max-height: 360px;
		margin: 0;
		padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
		overflow-y: auto;
		background: var(--color-paper, #fff);
		border: 1px solid var(--ao-eps-border);
		border-radius: var(--radius-md, 10px);
		box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
		box-sizing: border-box;
	}

	/* Set by the script when a panel would run past the right edge. */
	.ao-eps.ao-eps--horizontal .ao-eps__dd.is-flipped > .ao-eps__filter {
		left: auto;
		right: 0;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__actions {
		flex-direction: row;
		align-items: center;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__submit,
	.ao-eps.ao-eps--horizontal .ao-eps__reset {
		width: auto;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__reset {
		padding: 0 4px;
		color: var(--color-link, var(--color-primary));
		background: none;
		border: 0;
		text-decoration: underline;
		white-space: nowrap;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__reset:hover,
	.ao-eps.ao-eps--horizontal .ao-eps__reset:focus-visible {
		background: none;
		color: var(--color-link-hover, var(--color-ink, #252525));
	}

	/* The ticked filters as removable chips, since the panels are closed. */
	.ao-eps.ao-eps--horizontal.is-enhanced .ao-eps__chips {
		display: flex;
		flex: 0 0 100%;
		flex-wrap: wrap;
		gap: 8px;
		order: 3;
	}

	.ao-eps.ao-eps--horizontal.is-enhanced .ao-eps__chips:empty {
		display: none;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 4px 10px;
		font-size: 13px;
		color: var(--ao-eps-fg);
		background: var(--ao-eps-bg);
		border: 1px solid var(--ao-eps-border);
		border-radius: var(--radius-pill, 999px);
		cursor: pointer;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__chip--color {
		border-color: transparent;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__chip-x {
		font-size: 16px;
		line-height: 1;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__results {
		flex: 0 0 100%;
		order: 4;
		margin-top: var(--space-2, 0.5rem);
	}
}

@media (max-width: 782px) {
	.ao-eps .ao-eps__layout {
		display: block;
	}

	/* In the phone sheet, each group of the horizontal layout is a
	   collapsible section. */
	.ao-eps.ao-eps--horizontal .ao-eps__dd {
		border-bottom: 1px solid var(--ao-eps-border);
	}

	.ao-eps.ao-eps--horizontal .ao-eps__dd-toggle {
		padding: 12px 0;
		font-size: var(--text-sm, 0.875rem);
		font-weight: 600;
	}

	.ao-eps.ao-eps--horizontal .ao-eps__dd > .ao-eps__filter {
		margin: 0 0 var(--space-3, 0.75rem);
	}

	.ao-eps .ao-eps__search {
		margin: 0 0 var(--space-3, 0.75rem);
	}

	.ao-eps .ao-eps__keyword {
		height: 44px;
		font-size: 16px; /* 16px keeps iOS from zooming on focus. */
	}

	.ao-eps.is-enhanced .ao-eps__mobile-bar {
		display: flex;
		margin: 0 0 var(--space-3, 0.75rem);
	}

	.ao-eps .ao-eps__filters-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 44px;
		padding: 0 18px;
		font-size: var(--text-sm, 0.875rem);
		font-weight: 600;
		color: var(--color-ink, #252525);
		background: var(--color-paper, #fff);
		border: 1px solid var(--color-field-border, #767676);
		border-radius: var(--radius-md, 10px);
		cursor: pointer;
	}

	.ao-eps .ao-eps__filters-count {
		min-width: 20px;
		padding: 0 7px;
		font-size: 11px;
		line-height: 20px;
		text-align: center;
		color: #fff;
		background: var(--color-primary);
		border-radius: var(--radius-pill, 999px);
	}

	.ao-eps.is-enhanced .ao-eps__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 0 var(--space-3, 0.75rem);
	}

	.ao-eps.is-enhanced .ao-eps__chips:empty {
		display: none;
	}

	.ao-eps .ao-eps__chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		font-size: 13px;
		color: var(--ao-eps-fg);
		background: var(--ao-eps-bg);
		border: 1px solid var(--ao-eps-border);
		border-radius: var(--radius-pill, 999px);
		cursor: pointer;
	}

	.ao-eps .ao-eps__chip--color {
		border-color: transparent;
	}

	.ao-eps .ao-eps__chip-x {
		font-size: 18px;
		line-height: 1;
	}

	/* The bottom sheet — only once the script runs; without it the filters
	   stay in the page flow above the results. */
	.ao-eps.is-enhanced .ao-eps__sidebar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 100001;
		display: flex;
		flex-direction: column;
		max-height: 85vh;
		margin: 0;
		background: var(--color-paper, #fff);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
		transform: translateY(100%);
		visibility: hidden;
		/* Hidden only once the slide-out is over… */
		transition: transform 0.25s, visibility 0s linear 0.25s;
	}

	.ao-eps.is-enhanced .ao-eps__sidebar.is-open {
		transform: none;
		visibility: visible;
		/* …but visible at once on open, so a field in it can take focus. */
		transition: transform 0.25s, visibility 0s;
	}

	.ao-eps.is-enhanced .ao-eps__backdrop:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(0, 0, 0, 0.45);
	}

	.ao-eps.is-enhanced .ao-eps__sidebar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
	}

	.ao-eps .ao-eps__sidebar-title {
		font-size: 18px;
		font-weight: 600;
	}

	.ao-eps .ao-eps__sidebar-clear,
	.ao-eps .ao-eps__sidebar-close {
		padding: 4px;
		color: var(--color-link, var(--color-primary));
		background: none;
		border: 0;
		cursor: pointer;
	}

	.ao-eps .ao-eps__sidebar-close {
		font-size: 26px;
		line-height: 1;
		color: var(--color-ink, #252525);
	}

	.ao-eps.is-enhanced .ao-eps__sidebar-body {
		flex: 1 1 auto;
		padding: 0 16px 8px;
		overflow-y: auto;
	}

	.ao-eps.is-enhanced .ao-eps__option {
		display: inline-flex;
		gap: 6px;
		margin: 0 8px 8px 0;
		padding: 8px 14px;
		background: var(--color-paper, #fff);
		border: 1px solid var(--ao-eps-border);
		border-radius: var(--radius-pill, 999px);
	}

	.ao-eps.is-enhanced .ao-eps__option input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.ao-eps.is-enhanced .ao-eps__option:focus-within {
		outline: 2px solid var(--color-focus, var(--color-primary));
		outline-offset: 2px;
	}

	.ao-eps.is-enhanced .ao-eps__option.is-checked {
		color: var(--ao-eps-fg);
		background: var(--ao-eps-bg);
		border-color: var(--ao-eps-fg);
	}

	.ao-eps.is-enhanced .ao-eps__option.is-checked:not(.ao-eps__option--color) {
		color: #fff;
		background: var(--color-primary);
		border-color: var(--color-primary);
	}

	.ao-eps.is-enhanced .ao-eps__option.is-checked::before {
		content: "✓";
		font-size: 12px;
		font-weight: 700;
	}

	.ao-eps.is-enhanced .ao-eps__dot,
	.ao-eps.is-enhanced .ao-eps__reset {
		display: none;
	}

	.ao-eps.is-enhanced .ao-eps__sidebar-footer {
		display: block;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	}

	.ao-eps .ao-eps__apply {
		width: 100%;
		height: 48px;
		font-size: 15px;
		font-weight: 600;
		color: #fff;
		background: var(--color-ink, #1c1c1a);
		border: 0;
		border-radius: 12px;
		cursor: pointer;
	}

	.ao-eps .ao-eps__list {
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.ao-eps .ao-eps__group + .ao-eps__group {
		margin-top: var(--space-5, 1.25rem);
	}

	.ao-eps .ao-eps__group-header,
	.ao-eps .ao-eps__row,
	.ao-eps .ao-eps__group:last-child .ao-eps__row:last-child,
	.ao-eps .ao-eps__group + .ao-eps__group .ao-eps__group-header {
		margin: 0 0 10px;
		border: 1px solid var(--ao-eps-border);
		border-radius: 10px;
	}

	.ao-eps .ao-eps__row {
		flex-wrap: wrap;
		background: var(--color-paper, #fff);
	}

	.ao-eps .ao-eps__row-main,
	.ao-eps .ao-eps__row-meta {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.ao-eps .ao-eps__row-meta {
		flex-wrap: wrap;
		gap: 4px 14px;
		margin-top: 4px;
	}

	.ao-eps .ao-eps__meta {
		flex: 0 0 auto;
		max-width: 100%;
		padding: 0;
	}

	.ao-eps .ao-eps__meta dd {
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.ao-eps .ao-eps__meta--empty {
		display: none;
	}

	.ao-eps .ao-eps__meta-icon {
		display: inline-block;
		flex: 0 0 auto;
	}

	.ao-eps .ao-eps__dialog {
		width: calc(100vw - 24px);
		max-height: 90vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-eps .ao-eps__chevron,
	.ao-eps .ao-eps__dd-chevron,
	.ao-eps.is-enhanced .ao-eps__sidebar {
		transition: none;
	}
}