/* ttdl/events-listing — archive header, date/type/cost filter chips and
   the filtered-results list (Unit C), the curated featured-event band
   and the weekend hasGrid/isThin/isEmpty section (Unit B, shown only at
   the default filter state), the "Coming up" row list (Unit A, shared
   row markup also used by Unit C's filtered results), and the
   empty-catalog state (Unit A). Events are permanently image-free (see
   review-exports/events-visual-no-image-system-v1.md) -- every date
   tile/date-head here is a real, in-flow, block-level element and is
   the card's visual identity in place of a photograph. */

.ttdl-events-listing {
	margin-bottom: 64px;
}

.ttdl-events-listing__header {
	background: var(--wp--preset--color--cream-100);
	padding: 48px 40px;
	margin-bottom: 8px;
}

.ttdl-events-listing__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 16px;
}

.ttdl-events-listing__heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--hero-xl);
	line-height: 1.02;
	margin: 0 0 16px;
	max-width: 18ch;
	text-wrap: pretty;
}

.ttdl-events-listing__intro {
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	max-width: 62ch;
	margin: 0;
}

/* Filters (Unit C) */

.ttdl-events-listing__filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 26px;
}

.ttdl-events-listing__filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.ttdl-events-listing__filter-group-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-right: 6px;
}

.ttdl-events-listing__chip {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: var(--wp--preset--border-radius--s);
	background: transparent;
	color: var(--wp--preset--color--navy-800);
	border: 1px solid var(--wp--preset--color--border-strong);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.ttdl-events-listing__chip--selected {
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--ivory-050);
	border-color: var(--wp--preset--color--navy-800);
}

.ttdl-events-listing__chip:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

/* Featured event */

.ttdl-events-listing__featured {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 32px;
	align-items: center;
	padding-top: 56px;
}

.ttdl-events-listing__featured-datehead {
	background: var(--wp--preset--color--navy-900);
	color: var(--wp--preset--color--ivory-050);
	text-align: center;
	padding: 28px 0;
	line-height: 1;
	align-self: start;
}

.ttdl-events-listing__featured-day {
	display: block;
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 52px;
}

.ttdl-events-listing__featured-mon {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-500);
}

.ttdl-events-listing__featured-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 14px;
}

.ttdl-events-listing__featured-title {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 44px;
	line-height: 1.06;
	margin: 0 0 14px;
	text-wrap: pretty;
}

.ttdl-events-listing__featured-when {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--navy-800);
	margin: 0 0 14px;
}

.ttdl-events-listing__featured-blurb {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 22px;
	max-width: 52ch;
}

.ttdl-events-listing__featured-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.ttdl-events-listing__featured-chip {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--navy-800);
	background: var(--wp--preset--color--cream-100);
	padding: 7px 14px;
	border-radius: var(--wp--preset--border-radius--s);
}

.ttdl-events-listing__featured-chip--area {
	color: var(--wp--preset--color--mtn-blue-500);
	background: rgba(168, 184, 197, 0.22);
}

.ttdl-events-listing__featured-chip--cost {
	color: var(--wp--preset--color--text-secondary);
	background: rgba(201, 149, 50, 0.14);
}

.ttdl-events-listing__featured-links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.ttdl-events-listing__featured-details {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--ivory-050);
	padding: 14px 22px;
	border-radius: var(--wp--preset--border-radius--m);
	text-decoration: none;
}

.ttdl-events-listing__featured-official {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--border-strong);
	padding: 14px 22px;
	border-radius: var(--wp--preset--border-radius--m);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

/* Weekend section */

.ttdl-events-listing__weekend {
	padding-top: 64px;
}

.ttdl-events-listing__weekend-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	padding-bottom: 16px;
	margin-bottom: 32px;
}

.ttdl-events-listing__weekend-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 38px;
	margin: 0;
}

.ttdl-events-listing__weekend-count {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

.ttdl-events-listing__weekend-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.ttdl-events-listing__weekend-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
}

.ttdl-events-listing__weekend-pair--solo {
	grid-template-columns: 1fr;
}

.ttdl-events-listing__weekend-pair--solo .ttdl-events-listing__weekend-quiet {
	max-width: 640px;
}

.ttdl-events-listing__weekend-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

/* Date tile — a real, in-flow, block-level card element with its own
   reserved space (never absolutely positioned over a media/text area),
   so it can never overlap the title regardless of title length. Events
   are permanently image-free (see
   review-exports/events-visual-no-image-system-v1.md); this tile plus
   typography is the card's visual identity. */

.ttdl-events-listing__weekend-card-date {
	display: flex;
	align-items: baseline;
	gap: 10px;
	background: var(--wp--preset--color--navy-900);
	color: var(--wp--preset--color--ivory-050);
	padding: 14px 16px;
	margin-bottom: 16px;
	border-top: 3px solid var(--wp--preset--color--gold-500);
}

.ttdl-events-listing__weekend-card-day {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 30px;
	line-height: 1;
}

.ttdl-events-listing__weekend-card-mon {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-500);
}

.ttdl-events-listing__weekend-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ttdl-events-listing__weekend-card-type {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 8px;
}

.ttdl-events-listing__weekend-card-title {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 25px;
	line-height: 1.15;
	margin: 0 0 8px;
	text-wrap: pretty;
}

.ttdl-events-listing__weekend-card-meta {
	display: block;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 10px;
}

.ttdl-events-listing__weekend-card-footer {
	display: flex;
	gap: 14px;
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}

.ttdl-events-listing__weekend-quiet {
	background: var(--wp--preset--color--cream-100);
	padding: 30px 30px 26px;
}

.ttdl-events-listing__weekend-quiet-kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 10px;
}

.ttdl-events-listing__weekend-quiet-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 26px;
	line-height: 1.2;
	margin: 0 0 10px;
	text-wrap: pretty;
}

.ttdl-events-listing__weekend-quiet-copy {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 18px;
}

.ttdl-events-listing__weekend-quiet-ctas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ttdl-events-listing__weekend-quiet-cta {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--border-strong);
	padding: 13px 20px;
	border-radius: var(--wp--preset--border-radius--m);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
	white-space: nowrap;
}

.ttdl-events-listing__weekend-empty {
	background: var(--wp--preset--color--cream-100);
	border: 1px solid var(--wp--preset--color--border-subtle);
	padding: 34px 36px;
}

.ttdl-events-listing__weekend-empty-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 30px;
	margin: 0 0 10px;
	text-wrap: pretty;
}

.ttdl-events-listing__weekend-empty-copy {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 20px;
	max-width: 56ch;
}

.ttdl-events-listing__weekend-empty-ctas {
	margin-bottom: 24px;
}

.ttdl-events-listing__weekend-empty-cta {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--ivory-050);
	padding: 13px 20px;
	border-radius: var(--wp--preset--border-radius--m);
	text-decoration: none;
}

.ttdl-events-listing__weekend-empty-preview {
	border-top: 1px solid var(--wp--preset--color--border-subtle);
	padding-top: 18px;
}

.ttdl-events-listing__weekend-empty-preview-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 10px;
}

.ttdl-events-listing__weekend-empty-preview-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	font-size: 16px;
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

.ttdl-events-listing__weekend-empty-preview-title {
	font-weight: 600;
}

.ttdl-events-listing__weekend-empty-preview-date {
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

/* Filtered results (Unit C) */

.ttdl-events-listing__filtered {
	padding: 56px 40px 0;
}

.ttdl-events-listing__filtered-header {
	display: flex;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	padding-bottom: 16px;
	margin-bottom: 8px;
}

.ttdl-events-listing__filtered-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 38px;
	margin: 0;
}

.ttdl-events-listing__filtered-count {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

.ttdl-events-listing__filtered-clear {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.ttdl-events-listing__filtered-clear:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

.ttdl-events-listing__filtered-empty {
	padding: 44px 40px;
	text-align: center;
	background: var(--wp--preset--color--cream-100);
	border: 1px solid var(--wp--preset--color--border-subtle);
	margin-top: 20px;
}

.ttdl-events-listing__filtered-empty-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 28px;
	margin: 0 0 10px;
}

.ttdl-events-listing__filtered-empty-copy {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 20px;
}

.ttdl-events-listing__filtered-empty-clear {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--border-strong);
	padding: 13px 20px;
	border-radius: var(--wp--preset--border-radius--m);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

.ttdl-events-listing__filtered-empty-clear:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

/* Coming up (also the shared row markup used by Filtered results) */

.ttdl-events-listing__coming-up {
	padding-top: 64px;
}

.ttdl-events-listing__coming-up-header {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	padding-bottom: 16px;
	margin-bottom: 8px;
}

.ttdl-events-listing__coming-up-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 38px;
	margin: 0;
}

.ttdl-events-listing__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ttdl-events-listing__row {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 26px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

.ttdl-events-listing__row-date {
	line-height: 1;
}

.ttdl-events-listing__row-day {
	display: block;
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 30px;
}

.ttdl-events-listing__row-mon {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	color: var(--wp--preset--color--text-secondary);
	margin-top: 5px;
}

.ttdl-events-listing__row-title {
	display: block;
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 24px;
	line-height: 1.2;
	margin-bottom: 5px;
	text-wrap: pretty;
}

.ttdl-events-listing__row-meta {
	display: block;
	font-size: 14.5px;
	color: var(--wp--preset--color--text-secondary);
}

/* Time + short cost summary, folded into one line rather than a
   dedicated narrow cost column -- a long cost_text never has room to
   become a tall vertical stack here, because get_cost_summary() (not
   the full cost_text) is what render.php puts in this line. */
.ttdl-events-listing__row-when {
	display: block;
	font-size: 14.5px;
	color: var(--wp--preset--color--text-secondary);
	margin-top: 2px;
}

.ttdl-events-listing__row-arrow {
	color: var(--wp--preset--color--gold-600);
}

.ttdl-events-listing__row:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

.ttdl-events-listing__disclaimer {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin: 20px 0 0;
	max-width: 70ch;
}

/* Empty catalog */

.ttdl-events-listing__empty {
	padding: 64px 40px;
	text-align: center;
	background: var(--wp--preset--color--cream-100);
	border: 1px solid var(--wp--preset--color--border-subtle);
	margin-top: 44px;
}

.ttdl-events-listing__empty-heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 34px;
	margin: 0 0 10px;
}

.ttdl-events-listing__empty-copy {
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* Focus visibility */

.ttdl-events-listing__weekend-card:focus-visible,
.ttdl-events-listing__featured-details:focus-visible,
.ttdl-events-listing__featured-official:focus-visible,
.ttdl-events-listing__weekend-quiet-cta:focus-visible,
.ttdl-events-listing__weekend-empty-cta:focus-visible,
.ttdl-events-listing__weekend-empty-preview-row:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

/* Responsive */

@media (max-width: 900px) {
	.ttdl-events-listing__weekend-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ttdl-events-listing__weekend-pair {
		grid-template-columns: 1fr;
	}

	.ttdl-events-listing__filtered {
		padding: 44px 24px 0;
	}

	.ttdl-events-listing__row {
		position: relative;
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"date title"
			"date meta"
			"date when";
		row-gap: 4px;
		padding-right: 30px;
	}

	.ttdl-events-listing__row-date {
		grid-area: date;
	}

	/* .row-title, .row-meta and .row-when are nested inside .row-body, not
	   direct children of .row, so none could occupy a named area of
	   .row's grid on its own -- display:contents removes .row-body from
	   the box tree (while its children remain), letting them participate
	   directly in .row's grid instead, each in its own area. */
	.ttdl-events-listing__row-body {
		display: contents;
	}

	.ttdl-events-listing__row-title {
		grid-area: title;
	}

	.ttdl-events-listing__row-meta {
		grid-area: meta;
	}

	.ttdl-events-listing__row-when {
		grid-area: when;
		margin-top: 0;
	}

	/* The arrow is purely decorative (aria-hidden) -- pinned to the row's
	   own top-right corner rather than claiming a grid column, so it
	   never competes with the date column for width on narrow screens. */
	.ttdl-events-listing__row-arrow {
		position: absolute;
		top: 20px;
		right: 0;
	}
}

@media (max-width: 600px) {
	.ttdl-events-listing__header {
		padding: 40px 24px 28px;
	}

	.ttdl-events-listing__heading {
		font-size: var(--wp--preset--font-size--hero-l);
	}

	.ttdl-events-listing__featured {
		grid-template-columns: 1fr;
	}

	.ttdl-events-listing__featured-datehead {
		display: inline-flex;
		align-items: baseline;
		gap: 10px;
		padding: 14px 18px;
		text-align: left;
		align-self: start;
	}

	.ttdl-events-listing__featured-mon {
		margin-top: 0;
	}

	.ttdl-events-listing__featured-title {
		font-size: 32px;
	}

	.ttdl-events-listing__weekend {
		padding-top: 40px;
	}

	.ttdl-events-listing__weekend-grid {
		grid-template-columns: 1fr;
	}

	.ttdl-events-listing__filtered {
		padding: 32px 18px 0;
	}

	.ttdl-events-listing__coming-up {
		padding-top: 40px;
	}

	/* The When group stays visible and becomes a horizontally-scrolling
	   strip at mobile widths -- unconditionally, independent of whether
	   view.js has enhanced the page, matching the source's persistent
	   mobile date-chip strip. Type/Cost additionally collapse behind the
	   Filter trigger only once JS has fully enhanced (below). */
	.ttdl-events-listing__filter-group--when {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
}

/* ---------------------------------------------------------------
 * Mobile <dialog> progressive enhancement (view.js). The When strip
 * (above) stays visible at the mobile breakpoint regardless of JS.
 * Type and Cost move behind the Filter trigger only once the root
 * carries the --enhanced modifier (added only after view.js completes
 * every step of a successful enhancement) AND the viewport is at the
 * existing 600px breakpoint -- so a failed/partial enhancement never
 * hides a filter group behind a broken trigger, and desktop never sees
 * the trigger regardless of whether JavaScript ran.
 * ------------------------------------------------------------- */

.ttdl-events-listing__mobile-toolbar {
	display: none;
}

@media (max-width: 600px) {
	.ttdl-events-listing--enhanced .ttdl-events-listing__mobile-toolbar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0 0;
	}

	.ttdl-events-listing--enhanced .ttdl-events-listing__filter-group--type,
	.ttdl-events-listing--enhanced .ttdl-events-listing__filter-group--cost {
		display: none;
	}
}

.ttdl-events-listing__mobile-filters-button {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	padding: 12px 16px;
	min-height: 44px;
	border-radius: var(--wp--preset--border-radius--s);
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--ivory-050);
	border: none;
	white-space: nowrap;
	cursor: pointer;
}

.ttdl-events-listing__mobile-filters-button:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

/* Dialog */

.ttdl-el-dialog {
	border: none;
	padding: 0;
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	background: var(--wp--preset--color--ivory-050);
	border-radius: var(--wp--preset--border-radius--l);
	box-shadow: var(--wp--custom--shadow--popover);
}

.ttdl-el-dialog[open] {
	display: flex;
	flex-direction: column;
}

.ttdl-el-dialog::backdrop {
	background: rgba(6, 29, 53, 0.55);
}

.ttdl-el-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 12px 8px 20px;
	flex: none;
}

.ttdl-el-dialog__heading {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: 26px;
	line-height: 1.15;
	margin: 0;
}

.ttdl-el-dialog__heading:focus-visible {
	outline: none;
}

.ttdl-el-dialog__close {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--navy-800);
	cursor: pointer;
}

.ttdl-el-dialog__close:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

.ttdl-el-dialog__clear-all {
	display: inline-block;
	flex: none;
	margin: 0 20px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ttdl-el-dialog__clear-all:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

.ttdl-el-dialog__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 20px;
	-webkit-overflow-scrolling: touch;
}

.ttdl-el-dialog__group {
	border: none;
	padding: 0;
	margin: 0 0 20px;
}

.ttdl-el-dialog__group-legend {
	padding: 0;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.ttdl-el-dialog__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 12px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--s);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	color: var(--wp--preset--color--navy-800);
}

.ttdl-el-dialog__option input[type="checkbox"] {
	width: 18px;
	height: 18px;
}

/* Checked state -- mirrors the desktop chip's selected treatment. */

.ttdl-el-dialog__option:has(input:checked) {
	border-color: var(--wp--preset--color--navy-800);
	background: var(--wp--preset--color--cream-100);
}

.ttdl-el-dialog__footer {
	flex: none;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wp--preset--color--border-subtle);
}

.ttdl-el-dialog__submit {
	display: block;
	width: 100%;
	min-height: 50px;
	border: none;
	border-radius: var(--wp--preset--border-radius--m);
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--ivory-050);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	cursor: pointer;
}

.ttdl-el-dialog__submit:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

@media (max-width: 600px) {
	.ttdl-el-dialog {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		margin: 0;
		width: 100%;
		max-width: none;
		max-height: 85vh;
		border-radius: 14px 14px 0 0;
	}
}

@media (min-width: 601px) {
	.ttdl-el-dialog {
		position: fixed;
		inset: 0;
		margin: auto;
	}
}

.ttdl-el-dialog {
	animation: ttdl-el-dialog-in 220ms var(--wp--custom--ease--out);
}

@keyframes ttdl-el-dialog-in {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ttdl-el-dialog {
		animation: none;
	}
}