/* Brella Agenda for Bricks
   X axis: tracks. Y axis: start time. Every value below is a custom property,
   so Bricks style controls (or your own CSS / ACSS variables) can override it. */

.brella-agenda {
	/* Layout */
	--ba-time-w: 5.5rem;
	--ba-track-min: 14rem;
	--ba-slot-h: 1.25rem;     /* height of one "step" (default 5 minutes) */
	--ba-gap: 0px;
	--ba-card-inset: 3px;
	--ba-radius: 10px;
	--ba-avatar-size: 1.35rem;
	--ba-sponsor-h: 1.75rem;      /* height of sponsor logos in track headers */

	/* Session cards */
	--ba-card-pad-y: 0.45rem;
	--ba-card-pad-x: 0.6rem;
	--ba-card-border: 3px;
	--ba-avatar-size-compact: 1.2rem;
	--ba-avatar-size-short: 1.1rem;
	--ba-card-hover-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.35);
	--ba-live-label: "Live";
	--ba-live-fg: var(--ba-bg);
	--ba-live-ring: 2px;

	/* Grid */
	--ba-head-pad-top: 0.9rem;
	--ba-head-pad-x: 0.75rem;
	--ba-head-pad-bottom: 0.7rem;
	--ba-head-line: 3px;
	--ba-time-pad-top: 0.2rem;
	--ba-time-pad-x: 0.75rem;
	--ba-line-style: dashed;
	--ba-hour-line-style: solid;
	--ba-line-width: 1px;

	/* Top bar */
	--ba-pill-radius: 999px;
	--ba-pill-pad-y: 0.5em;
	--ba-pill-pad-x: 1.1em;
	--ba-bar-gap: 1rem;
	--ba-bar-item-gap: 0.5rem;

	/* List view */
	--ba-list-time-w: 9.5rem;
	--ba-list-pad-y: 0.8rem;
	--ba-list-pad-x: 1rem;
	--ba-list-title-size: 1.05rem;

	/* Details popup */
	--ba-dialog-radius: calc(var(--ba-radius) + 4px);
	--ba-backdrop: rgb(5 6 10 / 0.6);
	--ba-backdrop-blur: 3px;
	--ba-close-size: 2.25rem;
	--ba-cover-h: auto;
	--ba-cover-max-h: none;
	--ba-cover-fit: cover;
	--ba-dialog-w: 40rem;
	--ba-dialog-pad: 1.75rem;
	--ba-dialog-bg: var(--ba-surface);
	--ba-dialog-title-size: 1.5rem;
	--ba-speaker-photo: 48px;
	--ba-speaker-radius: 50%;
	--ba-speaker-gap: 0.75rem;
	--ba-max-h: none;         /* set e.g. 80vh to make track headers stick while scrolling */
	--ba-h: auto;             /* fixed agenda height; the grid scrolls inside it */
	--ba-breakout: 0px;       /* set by JS: distance from the container's right edge to the viewport */

	/* Colour (light) */
	--ba-bg: #ffffff;
	--ba-surface: #ffffff;
	--ba-head-bg: #f5f6f8;
	--ba-text: #14161a;
	--ba-muted: #5d6470;
	--ba-line: #e7e9ee;
	--ba-line-strong: #cfd3db;
	--ba-card-mix: 12%;
	--ba-accent-default: #6b5cff;

	/* Brella track colour names */
	--ba-c-magenta: #d63384;
	--ba-c-pink: #e85d9a;
	--ba-c-red: #e5484d;
	--ba-c-orange: #f76b15;
	--ba-c-yellow: #d4a106;
	--ba-c-green: #2f9e5b;
	--ba-c-teal: #12a594;
	--ba-c-cyan: #0894b3;
	--ba-c-blue: #3e63dd;
	--ba-c-purple: #8e4ec6;
	--ba-c-violet: #6e56cf;
	--ba-c-grey: #8b8d98;
	--ba-c-gray: #8b8d98;

	/* Type */
	--ba-font-size: 0.875rem;
	--ba-title-size: 0.95rem;
	--ba-meta-size: 0.75rem;

	color: var(--ba-text);
	background: var(--ba-bg);
	font-size: var(--ba-font-size);
	line-height: 1.35;
	position: relative;

	/* Always fill the parent. Bricks containers and blocks are flex boxes, and
	   without this the agenda sizes to its content, so it changed width
	   between days with different numbers of theatres. */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	align-self: stretch;
	flex-shrink: 1;
}

.brella-agenda .ba-bar,
.brella-agenda .ba-day,
.brella-agenda .ba-scroll {
	width: 100%;
	min-width: 0;
}

.brella-agenda.ba-theme-dark {
	color-scheme: dark;
	--ba-bg: #0d0f14;
	--ba-surface: #151821;
	--ba-head-bg: #151821;
	--ba-text: #eef0f5;
	--ba-muted: #9aa1b0;
	--ba-line: #1f2330;
	--ba-line-strong: #2d3344;
	--ba-card-mix: 22%;
	--ba-accent-default: #8b7dff;

	--ba-c-magenta: #f06bb0;
	--ba-c-pink: #f38bbb;
	--ba-c-red: #ff6b70;
	--ba-c-orange: #ff9447;
	--ba-c-yellow: #f5c542;
	--ba-c-green: #3fcf7f;
	--ba-c-teal: #2ed3bd;
	--ba-c-cyan: #38c6e6;
	--ba-c-blue: #6f8fff;
	--ba-c-purple: #b07ff0;
	--ba-c-violet: #9d8bff;
}

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

.brella-agenda p,
.brella-agenda h2,
.brella-agenda h3,
.brella-agenda h4 {
	margin: 0;
}

/* ---------- Day tabs ---------- */

/* ---------- Top bar: day tabs left, filters right ---------- */

.ba-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-bottom: var(--ba-bar-gap);
}

.ba-tabs {
	display: flex;
	gap: var(--ba-bar-item-gap);
	overflow-x: auto;
	min-width: 0;
	flex: 0 0 auto;
	max-width: 50%;
	padding: 2px;
	scrollbar-width: thin;
}

.ba-tab.is-empty {
	opacity: 0.45;
}

.brella-agenda .ba-none {
	margin: 0;
}

.ba-tab.is-no-sessions:not([aria-selected="true"]) {
	opacity: 0.7;
}

.ba-filters {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ba-bar-item-gap);
	margin-left: auto;
	min-width: 0;
	flex: 1 1 auto;
}

/* Each dropdown shrinks before the row ever wraps */
.ba-filter {
	position: relative;
	min-width: 6.5rem;
	flex: 0 1 11rem;
}

.ba-filter::after {
	content: "";
	position: absolute;
	right: 1em;
	top: 50%;
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	color: var(--ba-muted);
	pointer-events: none;
}

.ba-filter.is-set::after {
	color: var(--ba-bg);
}

.ba-filter__select {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-weight: 600;
	color: var(--ba-muted);
	background: transparent;
	border: 1px solid var(--ba-line-strong);
	border-radius: var(--ba-pill-radius);
	padding: var(--ba-pill-pad-y) calc(var(--ba-pill-pad-x) + 1.2em) var(--ba-pill-pad-y) var(--ba-pill-pad-x);
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.ba-filter__select:hover {
	color: var(--ba-text);
	border-color: var(--ba-muted);
}

.ba-filter.is-set .ba-filter__select {
	color: var(--ba-bg);
	background: var(--ba-text);
	border-color: var(--ba-text);
}

.ba-filter__select:focus-visible,
.ba-filters__clear:focus-visible {
	outline: 2px solid var(--ba-accent-default);
	outline-offset: 2px;
}

.ba-filter__select option {
	color: var(--ba-text);
	background: var(--ba-surface);
}

.ba-filters__clear {
	appearance: none;
	font: inherit;
	font-weight: 600;
	color: var(--ba-muted);
	background: none;
	border: 0;
	padding: 0.5em 0.4em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ba-filters__clear:hover {
	color: var(--ba-text);
}

.ba-filter-status {
	margin: -0.25rem 0 0.75rem;
	font-size: var(--ba-meta-size);
	color: var(--ba-muted);
}

.ba-filter-status:empty {
	display: none;
}

.brella-agenda .ba-empty,
.brella-agenda .ba-none {
	padding: 2rem 1rem;
	text-align: center;
	border: 1px dashed var(--ba-line-strong);
	border-radius: var(--ba-radius);
	color: var(--ba-muted);
}

.brella-agenda .is-filtered-out {
	display: none !important;
}

.ba-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Narrow (auto list on small screens): tabs on one row, filters share the full width beneath */
.brella-agenda.is-narrow .ba-bar {
	flex-wrap: wrap;
}

.brella-agenda.is-narrow .ba-tabs {
	max-width: 100%;
}

.brella-agenda.is-narrow .ba-filters {
	width: 100%;
	margin-left: 0;
	flex-wrap: wrap;
	justify-content: stretch;
}

.brella-agenda.is-narrow .ba-filter {
	flex: 1 1 10rem;
}

/* Calendar / List switch. Hidden on small screens, where the list is automatic. */
.ba-view {
	display: inline-flex;
	flex: 0 0 auto;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--ba-line-strong);
	border-radius: var(--ba-pill-radius);
}

.ba-filters + .ba-view {
	margin-left: 0;
}

.ba-tabs + .ba-view {
	margin-left: auto;
}

.ba-view__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font: inherit;
	font-weight: 600;
	color: var(--ba-muted);
	background: transparent;
	border: 0;
	border-radius: var(--ba-pill-radius);
	padding: calc(var(--ba-pill-pad-y) * 0.8) calc(var(--ba-pill-pad-x) - 0.2em);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.ba-view__btn:hover {
	color: var(--ba-text);
}

.ba-view__btn[aria-pressed="true"] {
	color: var(--ba-bg);
	background: var(--ba-text);
}

.ba-view__btn:focus-visible {
	outline: 2px solid var(--ba-accent-default);
	outline-offset: 2px;
}

.brella-agenda.is-narrow .ba-view {
	display: none;
}

.brella-agenda.is-compact-bar .ba-view__btn span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.ba-tab {
	appearance: none;
	flex: 0 0 auto;
	font: inherit;
	font-weight: 600;
	color: var(--ba-muted);
	background: transparent;
	border: 1px solid var(--ba-line-strong);
	border-radius: var(--ba-pill-radius);
	padding: var(--ba-pill-pad-y) var(--ba-pill-pad-x);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.ba-tab:hover {
	color: var(--ba-text);
	border-color: var(--ba-muted);
}

.ba-tab[aria-selected="true"] {
	color: var(--ba-bg);
	background: var(--ba-text);
	border-color: var(--ba-text);
}

.ba-tab:focus-visible {
	outline: 2px solid var(--ba-accent-default);
	outline-offset: 2px;
}

/* ---------- Day panels ----------
   Only the active day shows. !important so theme or framework rules that set
   display on the panel (ACSS, Bricks, resets) cannot reveal hidden days. */

.brella-agenda .ba-day:not(.is-active),
.brella-agenda .ba-day[hidden] {
	display: none !important;
}

.brella-agenda .ba-day.is-active {
	display: block;
}

/* ---------- Grid ---------- */

.ba-scroll {
	overflow: auto;
	height: var(--ba-h);
	max-height: var(--ba-max-h);
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: var(--ba-bg);
}

.ba-grid {
	display: grid;
	column-gap: var(--ba-gap);
	position: relative;
	min-width: min-content;
}

.ba-corner,
.ba-track-head {
	grid-row: 1;
	position: sticky;
	top: 0;
	background: var(--ba-head-bg);
	border-bottom: 1px solid var(--ba-line-strong);
}

.ba-corner {
	grid-column: 1;
	left: 0;
	z-index: 4;
	display: flex;
	align-items: flex-end;
	padding: 0.75rem 0.75rem 0.6rem;
	font-size: var(--ba-meta-size);
	font-weight: 600;
	color: var(--ba-muted);
	letter-spacing: 0.04em;
}

.ba-track-head {
	z-index: 3;
	display: flex;
	align-items: flex-end;
	padding: var(--ba-head-pad-top) var(--ba-head-pad-x) var(--ba-head-pad-bottom);
	font-weight: 700;
	font-size: var(--ba-title-size);
	border-left: 1px solid var(--ba-line);
	box-shadow: inset 0 calc(-1 * var(--ba-head-line)) 0 var(--ba-accent, var(--ba-accent-default));
}

/* Sponsor logo in a track header */
.ba-track-head.has-sponsor {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.45rem;
}

.ba-track-head.has-sponsor .ba-track-sponsor {
	order: -1;
	align-self: flex-start;
}

/* "Beside the name" option */
.brella-agenda.ba-sponsor-beside .ba-track-head.has-sponsor {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
}

.brella-agenda.ba-sponsor-beside .ba-track-head.has-sponsor .ba-track-sponsor {
	order: 0;
	align-self: center;
	flex: 0 1 auto;
	max-width: 45%;
}

.ba-track-head__name {
	min-width: 0;
}

.ba-track-sponsor {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	max-width: 100%;
	align-self: center;
}

.ba-track-sponsor__logo {
	display: inline-flex;
	min-width: 0;
}

.ba-track-sponsor img {
	display: block;
	height: var(--ba-sponsor-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

a.ba-track-sponsor__logo:focus-visible {
	outline: 2px solid var(--ba-accent, var(--ba-accent-default));
	outline-offset: 2px;
}

.ba-line {
	grid-column: 1 / -1;
	border-top: var(--ba-line-width) var(--ba-line-style) var(--ba-line);
	pointer-events: none;
	z-index: 0;
}

.ba-line.is-hour {
	border-top-style: var(--ba-hour-line-style);
	border-top-color: var(--ba-line-strong);
}

.ba-time {
	grid-column: 1;
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--ba-bg);
	border-right: 1px solid var(--ba-line);
	padding: var(--ba-time-pad-top) var(--ba-time-pad-x) 0;
	font-size: var(--ba-meta-size);
	font-variant-numeric: tabular-nums;
	color: var(--ba-muted);
	white-space: nowrap;
}

.ba-time.is-hour {
	color: var(--ba-text);
	font-weight: 600;
}

/* ---------- Frozen time column and theatre headers ----------
   Time column: sticky to the left edge of the scroll box (default).
   Headers: sticky to the top of the scroll box when the agenda has its own
   height; otherwise the script keeps them pinned while the page scrolls. */

.brella-agenda.ba-freeze-head .ba-track-head {
	z-index: 7;
}

.brella-agenda.ba-freeze-head .ba-corner {
	z-index: 8;
}

.brella-agenda.ba-freeze-head .ba-grid.is-head-stuck :is(.ba-track-head, .ba-corner) {
	box-shadow: inset 0 calc(-1 * var(--ba-head-line)) 0 var(--ba-accent, var(--ba-accent-default)), 0 8px 16px -10px rgb(0 0 0 / 0.45);
}

.brella-agenda.ba-freeze-head .ba-grid.is-head-stuck .ba-corner {
	box-shadow: 0 8px 16px -10px rgb(0 0 0 / 0.45);
}

.brella-agenda.ba-unfreeze-head .ba-track-head {
	position: relative;
	top: auto;
}

.brella-agenda.ba-unfreeze-head .ba-corner {
	top: auto;
}

.brella-agenda.ba-unfreeze-time .ba-time {
	position: relative;
	left: auto;
}

.brella-agenda.ba-unfreeze-time .ba-corner {
	left: auto;
}

.brella-agenda.ba-unfreeze-time.ba-unfreeze-head .ba-corner {
	position: relative;
}

/* No horizontal scroll: columns shrink to fit the container instead */
.brella-agenda.ba-no-hscroll {
	--ba-track-min: 0px;
}

.brella-agenda.ba-no-hscroll .ba-scroll {
	overflow-x: hidden;
}

.brella-agenda.ba-no-hscroll .ba-grid {
	min-width: 0;
}

/* Break out: the grid runs past the container to the right edge of the
   window (above the tablet breakpoint only). The bar stays in the container. */
.brella-agenda.is-breakout .ba-scroll {
	margin-right: calc(-1 * var(--ba-breakout));
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* ---------- Session card ---------- */

.ba-session {
	--ba-accent: var(--ba-accent-default);
	position: relative;
	z-index: 1;
	min-width: 0;
	margin: var(--ba-card-inset);
	overflow: hidden;
	border-radius: calc(var(--ba-radius) - 2px);
	border-left: var(--ba-card-border) solid var(--ba-accent);
	--ba-card-bg: color-mix(in srgb, var(--ba-accent) var(--ba-card-mix), var(--ba-surface));
	background: var(--ba-card-bg);
	color: var(--ba-text);
	transition: box-shadow 0.15s, transform 0.15s;
}

.ba-session__inner {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--ba-card-pad-y) var(--ba-card-pad-x);
}

.ba-session__time {
	min-width: 0;
	font-size: var(--ba-meta-size);
	font-variant-numeric: tabular-nums;
	color: var(--ba-muted);
	display: flex;
	align-items: center;
	gap: 0.25em;
	flex-wrap: wrap;
}

.ba-session__track {
	display: none;
	font-size: var(--ba-meta-size);
	font-weight: 700;
	color: var(--ba-accent);
}

.ba-session__subtitle {
	font-size: var(--ba-meta-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ba-accent);
}

.ba-session__title {
	font-size: var(--ba-title-size);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.ba-session__open {
	all: unset;
	cursor: pointer;
	text-align: left;
	overflow-wrap: anywhere;
}

.ba-session__open::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ba-session:has(.ba-session__open:focus-visible) {
	outline: 2px solid var(--ba-accent);
	outline-offset: 2px;
}

.ba-session__location,
.ba-session__speakers,
.ba-session__excerpt {
	font-size: var(--ba-meta-size);
	color: var(--ba-muted);
}

.ba-session__location::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: var(--ba-accent);
	vertical-align: 0.1em;
}

.ba-session__excerpt p + p {
	margin-top: 0.3em;
}

/* Speaker avatars (photo from Brella, initials when none) */
.ba-session__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
}

.ba-avatars {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin-left: auto;
	/* Overhang the time line slightly so avatars never push the title down */
	margin-block: -0.3rem;
}

.ba-avatar {
	width: var(--ba-avatar-size);
	height: var(--ba-avatar-size);
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ba-card-bg, var(--ba-surface));
	background: color-mix(in srgb, var(--ba-accent) 45%, var(--ba-surface));
	box-sizing: content-box;
}

.ba-avatar + .ba-avatar {
	margin-left: calc(var(--ba-avatar-size) * -0.35);
}

.ba-avatar--initials,
.ba-avatar--more,
.ba-speaker__photo--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ba-text);
	user-select: none;
}

.ba-avatar--initials,
.ba-avatar--more {
	font-size: calc(var(--ba-avatar-size) * 0.38);
}

.ba-avatar--more {
	background: var(--ba-head-bg);
	color: var(--ba-muted);
}

.ba-session__speaker-names {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Short sessions keep small avatars at the end of their single line */
.ba-grid .ba-session.is-short .ba-session__top {
	display: contents;
}

.ba-grid .ba-session.is-short .ba-avatars {
	order: 3;
	align-self: center;
	--ba-avatar-size: var(--ba-avatar-size-short);
}

.ba-grid .ba-session.is-short .ba-avatar {
	border-width: 1px;
}

.ba-grid .ba-session.is-compact .ba-avatars {
	--ba-avatar-size: var(--ba-avatar-size-compact);
}

/* Short sessions: one line until hovered or focused, then expand to fit. */
.ba-session.is-short .ba-session__inner {
	flex-direction: row;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.15rem;
}

.ba-session.is-short .ba-session__time time:last-child,
.ba-session.is-short .ba-session__subtitle,
.ba-session.is-short .ba-session__location,
.ba-session.is-short .ba-session__speakers,
.ba-session.is-short .ba-session__excerpt {
	display: none;
}

.ba-session.is-short .ba-session__time {
	flex: 0 0 auto;
}

.ba-session.is-short .ba-session__time {
	font-size: 0;
}

.ba-session.is-short .ba-session__time time:first-child {
	font-size: var(--ba-meta-size);
}

.ba-session.is-short .ba-session__title,
.ba-session.is-short .ba-session__open {
	display: block;
	min-width: 0;
	width: 100%;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--ba-meta-size);
}

@media (hover: hover) {
	.ba-grid .ba-session:hover,
	.ba-grid .ba-session:focus-within {
		align-self: start;
		min-height: calc(100% - 2 * var(--ba-card-inset));
		overflow: visible;
		z-index: 6;
		box-shadow: var(--ba-card-hover-shadow);
		background: color-mix(in srgb, var(--ba-accent) var(--ba-card-mix), var(--ba-surface));
	}

	.ba-grid .ba-session.is-short:hover .ba-session__inner,
	.ba-grid .ba-session.is-short:focus-within .ba-session__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.2rem;
		padding-block: 0.45rem;
	}

	.ba-grid .ba-session.is-short:hover .ba-session__time,
	.ba-grid .ba-session.is-short:focus-within .ba-session__time {
		font-size: var(--ba-meta-size);
	}

	.ba-grid .ba-session.is-short:is(:hover, :focus-within) .ba-session__top {
		display: flex;
	}

	.ba-grid .ba-session.is-short:is(:hover, :focus-within) .ba-avatars {
		--ba-avatar-size: 1.35rem;
	}

	.ba-grid .ba-session.is-short:hover :is(.ba-session__time time:last-child, .ba-session__subtitle, .ba-session__location, .ba-session__speakers, .ba-session__speaker-names, .ba-session__excerpt),
	.ba-grid .ba-session.is-short:focus-within :is(.ba-session__time time:last-child, .ba-session__subtitle, .ba-session__location, .ba-session__speakers, .ba-session__speaker-names, .ba-session__excerpt) {
		display: revert;
	}

	.ba-grid .ba-session.is-short:hover .ba-session__time,
	.ba-grid .ba-session.is-short:focus-within .ba-session__time {
		display: flex;
	}

	.ba-grid .ba-session.is-short:is(:hover, :focus-within) :is(.ba-session__title, .ba-session__open) {
		white-space: normal;
		font-size: var(--ba-title-size);
	}
}

/* Compact (about 15 to 20 min) and medium (about 25 to 30 min) cards */
.ba-grid .ba-session.is-compact :is(.ba-session__subtitle, .ba-session__location, .ba-session__speakers, .ba-session__speaker-names, .ba-session__excerpt),
.ba-grid .ba-session.is-medium :is(.ba-session__location, .ba-session__speaker-names, .ba-session__excerpt) {
	display: none;
}

.ba-grid .ba-session:is(.is-compact, .is-medium) :is(.ba-session__title, .ba-session__open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.ba-grid .ba-session.is-compact .ba-session__inner {
	gap: 0.1rem;
	padding-block: 0.3rem;
}

@media (hover: hover) {
	.ba-grid .ba-session:is(.is-compact, .is-medium):is(:hover, :focus-within) :is(.ba-session__subtitle, .ba-session__location, .ba-session__speakers, .ba-session__speaker-names, .ba-session__excerpt) {
		display: revert;
	}

	.ba-grid .ba-session:is(.is-compact, .is-medium):is(:hover, :focus-within) :is(.ba-session__title, .ba-session__open) {
		display: block;
		-webkit-line-clamp: unset;
	}
}

/* Networking (1:1 meeting) slots, when included */
.ba-session.is-networking {
	background: transparent;
	border: 1px dashed var(--ba-line-strong);
	border-left: var(--ba-card-border) solid var(--ba-accent);
}

/* Live now */
.brella-agenda.ba-hide-live .ba-session.is-live .ba-session__time::after {
	display: none;
}

.brella-agenda.ba-hide-live-ring .ba-session.is-live {
	box-shadow: none;
}

.ba-session.is-live {
	box-shadow: 0 0 0 var(--ba-live-ring) var(--ba-accent);
}

.ba-session.is-live .ba-session__time::after {
	content: var(--ba-live-label);
	margin-left: 0.35em;
	padding: 0.05em 0.5em;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ba-live-fg);
	background: var(--ba-live-bg, var(--ba-accent));
}

/* ---------- Mobile list mode (toggled by JS below the breakpoint) ---------- */

.brella-agenda.is-list .ba-scroll {
	overflow: visible;
	height: auto;
	max-height: none;
	margin-right: 0;
	border: 0;
	background: transparent;
}

.brella-agenda.is-list .ba-grid {
	display: flex;
	flex-direction: column;
	gap: var(--ba-list-gap, 0.6rem);
	min-width: 0;
}

.brella-agenda.is-list :is(.ba-corner, .ba-track-head, .ba-line, .ba-time) {
	display: none;
}

.brella-agenda.is-list .ba-session {
	margin: 0;
	overflow: visible;
}

.brella-agenda.is-list .ba-session__track {
	display: block;
}

.brella-agenda.is-list .ba-session.is-short .ba-session__inner {
	flex-direction: column;
	align-items: stretch;
	gap: 0.2rem;
	padding-block: 0.45rem;
}

.brella-agenda.is-list .ba-session.is-short :is(.ba-session__time time:last-child, .ba-session__subtitle, .ba-session__location, .ba-session__speakers, .ba-session__speaker-names, .ba-session__excerpt) {
	display: revert;
}

.brella-agenda.is-list .ba-session.is-short .ba-session__time {
	display: flex;
	font-size: var(--ba-meta-size);
}

.brella-agenda.is-list .ba-session.is-short :is(.ba-session__title, .ba-session__open) {
	white-space: normal;
	font-size: var(--ba-title-size);
}

/* List view on wider screens: time on the left, details in the middle, avatars on the right */
.brella-agenda.is-list:not(.is-narrow) .ba-grid {
	gap: var(--ba-list-gap, 0.5rem);
}

.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-session__inner {
	display: grid;
	grid-template-columns: var(--ba-list-time-w) minmax(0, 1fr) auto;
	column-gap: 1.25rem;
	row-gap: 0.2rem;
	align-items: start;
	padding: var(--ba-list-pad-y) var(--ba-list-pad-x);
}

.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-session__top {
	display: contents;
}

.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-session__inner > * {
	grid-column: 2;
}

.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-session__time {
	grid-column: 1;
	grid-row: 1 / span 8;
	display: flex;
	font-size: var(--ba-font-size);
	font-weight: 600;
	color: var(--ba-text);
}

.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-avatars {
	grid-column: 3;
	grid-row: 1 / span 8;
	margin: 0;
	--ba-avatar-size: var(--ba-list-avatar, 2rem);
}

.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-session__title,
.brella-agenda.is-list:not(.is-narrow) .ba-session .ba-session__open {
	font-size: var(--ba-list-title-size);
}

/* List mode shows every card in full */
.brella-agenda.is-list .ba-session.is-short .ba-session__top {
	display: flex;
}

.brella-agenda.is-list .ba-session .ba-avatars {
	--ba-avatar-size: var(--ba-list-avatar, 1.6rem);
}

.brella-agenda.is-list .ba-session:is(.is-compact, .is-medium) :is(.ba-session__subtitle, .ba-session__location, .ba-session__speakers, .ba-session__speaker-names, .ba-session__excerpt) {
	display: revert;
}

.brella-agenda.is-list .ba-session:is(.is-compact, .is-medium) :is(.ba-session__title, .ba-session__open) {
	display: block;
	-webkit-line-clamp: unset;
}

/* ---------- Detail dialog ---------- */

.ba-dialog {
	width: min(var(--ba-dialog-w), calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 1px solid var(--ba-line-strong);
	border-radius: var(--ba-dialog-radius);
	background: var(--ba-dialog-bg);
	color: var(--ba-text);
	box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5);
}

.ba-dialog::backdrop {
	background: var(--ba-backdrop, rgb(5 6 10 / 0.6));
	backdrop-filter: blur(var(--ba-backdrop-blur, 3px));
}

.ba-dialog__close {
	position: sticky;
	top: 0;
	float: right;
	margin: 0.75rem 0.75rem 0 0;
	width: var(--ba-close-size);
	height: var(--ba-close-size);
	border: 0;
	border-radius: 50%;
	font: inherit;
	font-size: calc(var(--ba-close-size) * 1.4 / 2.25);
	line-height: 1;
	color: var(--ba-text);
	background: var(--ba-head-bg);
	cursor: pointer;
	z-index: 1;
}

.ba-dialog__body {
	padding: var(--ba-dialog-pad);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ba-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--ba-meta-size);
	color: var(--ba-muted);
	padding-right: 2.5rem;
}

.ba-detail__track {
	font-weight: 700;
	color: var(--ba-accent, var(--ba-accent-default));
}

.ba-detail__subtitle {
	font-size: var(--ba-meta-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ba-accent, var(--ba-accent-default));
}

.brella-agenda .ba-detail__title,
.ba-dialog .ba-detail__title {
	font-size: var(--ba-dialog-title-size);
	line-height: 1.2;
	margin: 0;
}

.ba-detail__cover {
	width: 100%;
	height: var(--ba-cover-h);
	max-height: var(--ba-cover-max-h);
	object-fit: var(--ba-cover-fit);
	border-radius: var(--ba-radius);
}

.brella-agenda.ba-hide-cover .ba-detail__cover {
	display: none;
}

.ba-detail__content {
	color: var(--ba-text);
}

.ba-detail__content > * + * {
	margin-top: 0.75em;
}

.ba-detail__speakers {
	list-style: none;
	margin: 0;
	padding: 0.85rem 0 0;
	border-top: 1px solid var(--ba-line);
	display: grid;
	gap: 0.75rem;
}

.ba-speaker {
	display: flex;
	align-items: center;
	gap: var(--ba-speaker-gap);
}

.ba-speaker__photo {
	width: var(--ba-speaker-photo);
	height: var(--ba-speaker-photo);
	border-radius: var(--ba-speaker-radius);
	object-fit: cover;
	flex: 0 0 auto;
}

.ba-speaker__photo--initials {
	font-size: calc(var(--ba-speaker-photo) * 0.33);
	background: color-mix(in srgb, var(--ba-accent, var(--ba-accent-default)) 40%, var(--ba-surface));
}

.ba-speaker__text {
	display: flex;
	flex-direction: column;
	font-size: var(--ba-font-size);
}

.ba-speaker__text span {
	color: var(--ba-muted);
	font-size: var(--ba-meta-size);
}

.ba-speaker__text em {
	font-style: normal;
	font-size: var(--ba-meta-size);
	color: var(--ba-accent, var(--ba-accent-default));
}

.ba-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ba-tag {
	font-size: var(--ba-meta-size);
	padding: 0.2em 0.7em;
	border-radius: var(--ba-pill-radius);
	border: 1px solid var(--ba-line-strong);
	color: var(--ba-muted);
}

.ba-notice {
	padding: 1rem;
	border: 1px dashed var(--ba-line-strong);
	border-radius: var(--ba-radius);
	color: var(--ba-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ba-session,
	.ba-tab {
		transition: none;
	}
}