/*
 * Agenda skin: Space & Connectivity Summit 2026 (CST, Riyadh).
 *
 * The sibling of registration/static/inline/skins/scs26.css — same event, same host site, so the
 * palette block below is copied from there deliberately rather than re-picked, and the two can be
 * diffed against each other. Names match the host site's own vocabulary (--scs-blue-600 is their
 * --blue-600), so a designer reading either file sees one set of colours.
 *
 * Loaded only for [mep_event_agenda skin="scs26"], after mep-agenda.css so these rules win. The
 * base stylesheet stays theme-neutral and asserts layout only; everything opinionated lives here.
 *
 * Contrast is fixed here, not inherited: the host page is a dark starfield and a light theme's
 * defaults would be unreadable on it. Ratios in comments are computed against the surfaces this
 * skin actually paints.
 *
 * Fonts are NOT declared here. The host page already serves IBM Plex, and a second @font-face
 * pointing at the registration app's origin would be a cross-origin fetch on every agenda page for
 * a family the page has loaded already. The stack falls back to the theme's own if it isn't there.
 */

.mep-agenda--skin-scs26 {
	/* Takes the width the theme's container gives it. It used to cap itself at 60% for a full-bleed
	   section, but the block sits inside the theme's own container, so that read as a second set of
	   gutters inside the first. */
	width: 100%;
	box-sizing: border-box;

	/* ---- their palette, mirrored ------------------------------------------ */
	--scs-bg-1: #060b1a;
	--scs-bg-2: #0a1226;

	--scs-text-1: #eef2fa;
	--scs-text-2: #a8b3c7;

	--scs-slate: #94a3b8;
	--scs-white: #fff;

	--scs-blue-300: #93c5fd;
	--scs-blue-400: #60a5fa;
	--scs-blue-600: #2563eb;

	--scs-surface-1: color-mix(in srgb, var(--scs-white) 4%, transparent);
	--scs-surface-2: color-mix(in srgb, var(--scs-white) 7%, transparent);
	--scs-border: color-mix(in srgb, var(--scs-slate) 16%, transparent);
	--scs-border-strong: color-mix(in srgb, var(--scs-slate) 30%, transparent);

	/* ---- what this stylesheet paints with --------------------------------- */
	--mep-skin-text: var(--scs-text-1); /* 16.6:1 on a card */
	--mep-skin-muted: var(--scs-text-2); /* 8.81:1 on a card */
	--mep-skin-card: var(--scs-surface-1);
	--mep-skin-card-hover: var(--scs-surface-2);
	--mep-skin-border: var(--scs-border);
	--mep-skin-accent: var(--scs-blue-400);
	--mep-skin-radius: 16px;
	/* Solid, not their translucent blue: a 4px 0.2-alpha ring is ~1.2:1 here and effectively
	   invisible to a keyboard user. Same decision, and the same reasoning, as the registration
	   skin. */
	--mep-skin-ring: var(--scs-blue-400);
	/* The registration skin's easing, so an agenda and a booking flow on the same site move alike. */
	--scs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	/* ---- the session card's type scale and rhythm ------------------------- */
	/* Three sizes: the time and the title lead, the abstract and the controls are body, and every
	   label (format, track badge) is one small size. One gap between the parts of a card, and a
	   tighter one for the pair that reads as a unit (time, then its format). */
	--scs-type-lead: 1.05rem;
	--scs-type-body: 0.875rem;
	--scs-type-label: 0.75rem;
	--scs-card-gap: 0.5rem;
	--scs-card-gap-tight: 0.25rem;

	font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
	/* A base size of its own. Without this everything with no explicit size inherits the host
	   theme's body text — 22px here — which is why a button read as "stupidly big" while the
	   fields beside it were 14px. */
	font-size: 1rem;
	line-height: 1.5;
	color: var(--mep-skin-text);

	/* Tells the browser to draw its OWN controls dark — the checkboxes in the speaker panel and the
	   timezone select's menu are painted by the platform, not by CSS, so without this they stay
	   white boxes on a near-black card whatever we style around them. */
	color-scheme: dark;
}

/* The embed paints no page background of its own — the host section's starfield shows through, so
   every surface below is translucent rather than a dark rectangle punched through it. */

.mep-agenda--skin-scs26 :focus-visible {
	outline: 2px solid var(--mep-skin-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

.mep-agenda--skin-scs26 .mep-agenda-title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/*
 * Hidden here, not removed: with the event title and the timezone line both off, the venue was a
 * single orphaned line above the controls with nothing to sit against. The host page already names
 * the venue in its own header. Still in the HTML for a crawler, and any other skin still shows it.
 */
.mep-agenda--skin-scs26 .mep-agenda-meta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The track credits are the one place this skin shows a presenter, so unlike the venue line above
 * them they stay visible — centred over the controls card, muted, and no larger than a caption.
 * Attribution, not a sponsor banner.
 */
.mep-agenda--skin-scs26 .mep-agenda-credits {
	margin: 0 0 1rem;
	text-align: center;
	color: var(--mep-skin-muted);
	font-size: 0.8rem;
	opacity: 1;
}

/*
 * Selecting text. The browser's own highlight is picked for a light page and lands as a pale box on
 * these cards — which is what a click that catches a word looks like. The accent at low alpha keeps
 * the text readable instead of inverting it.
 */
.mep-agenda--skin-scs26 ::selection {
	background: color-mix(in srgb, var(--scs-blue-600) 45%, transparent);
	color: var(--mep-skin-text);
}

/* ── controls ─────────────────────────────────────────────────────────────── */

/*
 * One surface, not a frame around a row of frames. The bar had a border, and every control inside
 * it had a border too, so the eye read four nested boxes before reaching a filter. The bar keeps a
 * faint surface to group the controls and drops its outline; the controls share one height so the
 * row has a rhythm.
 */
/*
 * One row, one bar. The renderer gives this skin the chips (with "All" in front) and one group
 * holding the timezone and the speaker filter — no keyword box, no caption. The chips are the
 * filter the programme is built around, so they keep the full 36px height and take the room; the
 * secondaries are a rank down at 32px and end the same row. When the row cannot fit both, the
 * secondaries drop under the chips, still at the end, and the only space between the two is the
 * bar's own gap — nothing else, so there is no band of nothing under the chips.
 */
.mep-agenda--skin-scs26 .mep-agenda-controls {
	--mep-control-height: 2.25rem;
	/* The secondaries. Small enough to rank below the chips, still a 32px target. */
	--mep-control-height-sm: 2rem;
	padding: 0.75rem 1rem;
	background: var(--mep-skin-card);
	border: 0;
	border-radius: var(--mep-skin-radius);
	gap: 0.5rem 0.75rem;
	align-items: center;
}

.mep-agenda--skin-scs26 .mep-track-chips {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* Timezone and speaker, at the end of the row. Logical, so an Arabic page ends on the left. */
.mep-agenda--skin-scs26 .mep-agenda-secondary {
	flex: 0 0 auto;
	margin-inline-start: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	max-width: 100%;
}

/*
 * "12 of 12 sessions" is a live region for a screen reader; on this bar it was also a third row of
 * text, and a host theme's paragraph margin under it was a band of nothing below the controls.
 * Kept in the DOM and announced, taken out of the layout.
 */
.mep-agenda--skin-scs26 .mep-agenda-controls .mep-agenda-count {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* "My schedule" is a tab in the day strip on this skin, so the chip that says the same thing is
   one control too many. The strip is only rendered for two or more days; a one-day agenda has no
   strip, so it keeps the chip. */
.mep-agenda--skin-scs26 .mep-agenda-days ~ .mep-agenda-controls .mep-schedule-chip {
	display: none;
}

/* Not a track, so not a track's colour: the accent, pressed while no track is. */
.mep-agenda--skin-scs26 .mep-track-chip--all {
	--mep-track-colour: var(--mep-skin-accent);
}

.mep-agenda--skin-scs26 .mep-agenda-timezone-label {
	font-size: 0.75rem;
	color: var(--mep-skin-muted);
	white-space: nowrap;
}

/*
 * Quiet until chosen. A bright outline per chip made five unselected filters look like five
 * different states; a low tint reads as "available", and the colour arrives when it is picked.
 */
.mep-agenda--skin-scs26 .mep-track-chip {
	display: inline-flex;
	align-items: center;
	/* A minimum, not a height: the longest track name wraps to two lines on a phone, and a fixed
	   height would have kept it on one and pushed it off the side. */
	min-height: var(--mep-control-height, 2.25rem);
	border-radius: 999px;
	padding: 0.2rem 0.9rem;
	line-height: 1.35;
	/* The primary rank in the bar: a notch larger than the row of secondaries beneath it. */
	font-size: 0.875rem;
	background: color-mix(in srgb, var(--mep-track-colour) 10%, transparent);
	border-color: transparent;
	color: var(--mep-skin-text);
	/* Belt and braces against a host rule forcing nowrap: a long Arabic track name wraps inside the
	   chip rather than pushing the row off the side of a phone. */
	white-space: normal;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.mep-agenda--skin-scs26 .mep-track-chip-name {
	min-width: 0;
	white-space: normal;
}

/* The chips are taller here than in the base sheet, so the mark can be a touch larger with it. */
.mep-agenda--skin-scs26 .mep-track-chip-logo {
	max-height: 1.4em;
}

.mep-agenda--skin-scs26 .mep-track-chip:hover {
	background: color-mix(in srgb, var(--mep-track-colour) 12%, transparent);
}

.mep-agenda--skin-scs26 .mep-track-chip[aria-pressed='true'] {
	/* The base sheet's inset trick assumes a light surface; on this one it washes the label out. */
	box-shadow: none;
	background: color-mix(in srgb, var(--mep-track-colour) 22%, transparent);
	border-color: var(--mep-track-colour);
	font-weight: 500;
}

.mep-agenda--skin-scs26 .mep-agenda-timezone select,
.mep-agenda--skin-scs26 .mep-speaker-filter-search input,
.mep-agenda--skin-scs26 [data-mep-schedule-email] {
	background: color-mix(in srgb, #0f172a 75%, transparent);
	/* 3.5:1 against the field fill — a control boundary has to hold 1.4.11 on its own. */
	border: 1px solid color-mix(in srgb, var(--scs-slate) 62%, var(--scs-bg-1));
	border-radius: 10px;
	color: var(--mep-skin-text);
	padding: 0 0.7rem;
	height: var(--mep-control-height-sm, 2rem);
	font-size: 0.8125rem;
}

/* The email field is on its own further down the page, not in the bar, so it keeps the full size. */
.mep-agenda--skin-scs26 [data-mep-schedule-email] {
	height: var(--mep-control-height, 2.25rem);
	font-size: 0.875rem;
}

.mep-agenda--skin-scs26 .mep-speaker-filter-summary {
	height: var(--mep-control-height-sm, 2rem);
	padding: 0 0.8rem;
	background: color-mix(in srgb, var(--scs-white) 6%, transparent);
	border-color: transparent;
}

.mep-agenda--skin-scs26 .mep-speaker-filter-search input::placeholder,
.mep-agenda--skin-scs26 [data-mep-schedule-email]::placeholder {
	color: var(--mep-skin-muted);
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin-top: 0;
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-intro {
	color: var(--mep-skin-muted);
	font-size: 0.9rem;
	max-width: 60ch;
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-email span {
	display: block;
	font-size: 0.8rem;
	color: var(--mep-skin-muted);
	margin-bottom: 0.3rem;
}

/* ── filter by speaker ────────────────────────────────────────────────────── */
/*
 * A <details> styled as a dropdown: the summary is a pill matching the track chips, the panel is a
 * floating card. Still a real disclosure, so it opens without JS and closes on Escape for free.
 */
.mep-agenda--skin-scs26 .mep-speaker-filter {
	position: relative;
}

.mep-agenda--skin-scs26 .mep-speaker-filter-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--mep-skin-border-strong, var(--scs-border-strong));
	border-radius: 999px;
	font-size: 0.85rem;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

/* The default triangle, replaced with a chevron that matches the Details toggle. */
.mep-agenda--skin-scs26 .mep-speaker-filter-summary::-webkit-details-marker {
	display: none;
}

.mep-agenda--skin-scs26 .mep-speaker-filter-summary::after {
	content: '';
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 120ms ease;
}

.mep-agenda--skin-scs26 .mep-speaker-filter[open] .mep-speaker-filter-summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.mep-agenda--skin-scs26 .mep-speaker-filter[open] .mep-speaker-filter-summary {
	background: var(--mep-skin-card-hover);
	border-color: var(--mep-skin-accent);
}

/* Count of ticked speakers, as a pill on the trigger. */
.mep-agenda--skin-scs26 .mep-speaker-filter-selected:not(:empty) {
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--scs-white);
	background: var(--scs-blue-600);
}

/* The panel. Opaque, unlike the translucent cards: it covers session rows, and a list read through
   a title underneath is not readable. Both parts are absolutely positioned, so the <details> stays
   the height of its trigger and the controls row does not grow when it opens. */
.mep-agenda--skin-scs26 .mep-speaker-options {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	z-index: 3;
	width: min(24rem, 85vw);
	max-height: 20rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--scs-bg-2);
	border: 1px solid var(--mep-skin-border-strong, var(--scs-border-strong));
	border-radius: 12px;
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

.mep-agenda--skin-scs26 .mep-speaker-filter-search {
	position: absolute;
	top: calc(100% + 0.9rem);
	left: 0.5rem;
	z-index: 4;
	width: calc(min(24rem, 85vw) - 1rem);
	box-sizing: border-box;
}

/* Room at the top of the card for the search box that sits over it. */
.mep-agenda--skin-scs26 .mep-speaker-options {
	padding-top: 3.1rem;
}

.mep-agenda--skin-scs26 .mep-speaker-filter-search input {
	width: 100%;
	box-sizing: border-box;
}

.mep-agenda--skin-scs26 .mep-speaker-filter-search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.mep-agenda--skin-scs26 .mep-speaker-option-label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.15rem 0.6rem;
	padding: 0.4rem 0.5rem;
	border-radius: 8px;
	cursor: pointer;
}

.mep-agenda--skin-scs26 .mep-speaker-option-label:hover {
	background: var(--mep-skin-card-hover);
}

.mep-agenda--skin-scs26 .mep-speaker-option-check {
	accent-color: var(--scs-blue-600);
	width: 1rem;
	height: 1rem;
}

.mep-agenda--skin-scs26 .mep-speaker-option-name {
	font-size: 0.875rem;
	font-weight: 500;
}

.mep-agenda--skin-scs26 .mep-speaker-option-org {
	grid-column: 2;
	font-size: 0.75rem;
	color: var(--mep-skin-muted);
}

.mep-agenda--skin-scs26 .mep-speaker-option-count {
	grid-row: 1 / 3;
	grid-column: 3;
	font-size: 0.7rem;
	color: var(--mep-skin-muted);
	white-space: nowrap;
}

/* ── my schedule ──────────────────────────────────────────────────────────── */
/* Not a track, so it does not look like one: a star, and the accent rather than a track colour.
   It shares the secondary row with the search and the timezone, so it takes their height too —
   a chip a quarter-rem taller than its neighbours is what made that row read as a jumble. */
.mep-agenda--skin-scs26 .mep-schedule-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: var(--mep-control-height-sm, 2rem);
	padding: 0 0.8rem;
	font-size: 0.8125rem;
	border-color: var(--mep-skin-border-strong, var(--scs-border-strong));
}

.mep-agenda--skin-scs26 .mep-schedule-chip::before {
	content: '★';
	font-size: 0.9em;
	line-height: 1;
	opacity: 0.7;
}

.mep-agenda--skin-scs26 .mep-schedule-chip[aria-pressed='true'] {
	background: color-mix(in srgb, var(--scs-blue-600) 22%, transparent);
	border-color: var(--mep-skin-accent);
	color: var(--mep-skin-text);
}

.mep-agenda--skin-scs26 .mep-schedule-chip[aria-pressed='true']::before {
	opacity: 1;
	color: var(--mep-skin-accent);
}

/* ── timezone picker ──────────────────────────────────────────────────────── */
/*
 * Same shape as the speaker dropdown, because it does the same job: a trigger, a search, a list.
 * The pill reads as a clock, the place, a chevron — "Riyadh", not "Times shown in Event time
 * (Riyadh)". agenda.js keeps the full wording as the pill's name for a screen reader.
 */
.mep-agenda--skin-scs26 .mep-tz {
	position: relative;
}

.mep-agenda--skin-scs26 .mep-tz-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: var(--mep-control-height-sm, 2rem);
	max-width: 15rem;
	padding: 0 0.8rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: color-mix(in srgb, var(--scs-white) 6%, transparent);
	color: inherit;
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The clock, in the text colour: an SVG mask, so it takes currentColor like the chevron. */
.mep-agenda--skin-scs26 .mep-tz-trigger::before {
	content: '';
	flex: 0 0 auto;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	opacity: 0.8;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mep-agenda--skin-scs26 .mep-tz-place {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mep-agenda--skin-scs26 .mep-tz-trigger::after {
	content: '';
	flex: 0 0 auto;
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 120ms ease;
}

.mep-agenda--skin-scs26 .mep-tz-trigger[aria-expanded='true'] {
	border-color: var(--mep-skin-accent);
}

.mep-agenda--skin-scs26 .mep-tz-trigger[aria-expanded='true']::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.mep-agenda--skin-scs26 .mep-tz-panel {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 5;
	width: min(20rem, 85vw);
	padding: 0.5rem;
	background: var(--scs-bg-2);
	border: 1px solid var(--mep-skin-border-strong, var(--scs-border-strong));
	border-radius: 12px;
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
	animation: mep-drop-in 0.18s var(--scs-ease-out);
}

.mep-agenda--skin-scs26 .mep-tz-search {
	width: 100%;
	box-sizing: border-box;
	height: var(--mep-control-height, 2.25rem);
	padding: 0 0.7rem;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--scs-slate) 62%, var(--scs-bg-1));
	background: color-mix(in srgb, #0f172a 75%, transparent);
	color: var(--mep-skin-text);
	font: inherit;
	font-size: 0.875rem;
}

.mep-agenda--skin-scs26 .mep-tz-list {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
	max-height: 16rem;
	overflow-y: auto;
}

.mep-agenda--skin-scs26 .mep-tz-option {
	display: block;
	width: 100%;
	padding: 0.35rem 0.5rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.mep-agenda--skin-scs26 .mep-tz-option:hover {
	background: var(--mep-skin-card-hover);
}

/* The three shortcuts, marked off from the 400 that follow. */
.mep-agenda--skin-scs26 .mep-tz-option--shortcut {
	font-weight: 500;
}

.mep-agenda--skin-scs26 .mep-tz-list li:last-of-type .mep-tz-option--shortcut {
	border-bottom: 1px solid var(--mep-skin-border);
	border-radius: 8px 8px 0 0;
}

/* ── day tabs ─────────────────────────────────────────────────────────────── */

.mep-agenda--skin-scs26 .mep-agenda-days {
	border-bottom-color: var(--mep-skin-border);
	margin-top: 1.25rem;
}

/* The fourth tab: the reader's own schedule, starred across every day. A star and the accent mark
   it out from the days it sits beside. */
.mep-agenda--skin-scs26 .mep-agenda-day-tab--mine .mep-agenda-day-tab-title {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab-star {
	width: 0.9em;
	height: 0.9em;
	fill: currentColor;
	opacity: 0.7;
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab--mine[aria-selected='true'] .mep-agenda-day-tab-star {
	opacity: 1;
	color: var(--mep-skin-accent);
}

/* Under "My schedule" every day is on screen at once, so the day headings the tabs replaced are
   needed again to say which day a row is on. */
.mep-agenda--skin-scs26[data-mep-mine='true'] .mep-agenda-day-title {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab {
	padding: 0.7rem 1.1rem;
	/* Centred, because an equal-width tab with a left-aligned label looks accidental. */
	align-items: center;
	text-align: center;
	border-radius: 12px 12px 0 0;
	color: var(--mep-skin-muted);
	opacity: 1;
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab:hover {
	background: var(--mep-skin-card);
	color: var(--mep-skin-text);
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab[aria-selected='true'] {
	color: var(--mep-skin-text);
	background: var(--mep-skin-card);
	border-bottom-color: var(--mep-skin-accent);
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab[data-mep-day-empty='true'] {
	opacity: 0.4;
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab-count:not(:empty) {
	color: var(--mep-skin-muted);
}

/* ── sessions ─────────────────────────────────────────────────────────────── */

/*
 * Once the tabs are live the selected tab already says "Mon 12 Oct", so the panel heading beneath
 * it is the same fact twice. Hidden visually only: it is what the panel is aria-labelledby, and a
 * no-JS reader has no tabs and needs it.
 *
 * Keyed off `scripting`, not off .mep-agenda--enhanced. Both say the same thing, but the class
 * arrives after the first paint, so hiding the heading on it pulled every session up the page the
 * moment agenda.js ran — the last real layout shift left on this agenda once the controls stopped
 * moving. The media query is settled before anything paints.
 */
.mep-agenda--skin-scs26 .mep-agenda-day-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (scripting: none) {
	.mep-agenda--skin-scs26 .mep-agenda-day-title {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

.mep-agenda--skin-scs26 .mep-agenda-day-title {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--mep-skin-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mep-agenda--skin-scs26 .mep-agenda-day-description {
	color: var(--mep-skin-muted);
	opacity: 1;
	font-size: 0.95rem;
}

/*
 * A session is a time rail and a body, not a stack of flush-left paragraphs. The rail is what a
 * reader scans down; everything else hangs off it. Explicit placement rather than a flat stack,
 * because the markup order (star, time, title, format, tracks, abstract, speakers) is fixed by the
 * renderer and shared with every other skin.
 */
.mep-agenda--skin-scs26 .mep-session {
	display: grid;
	/* Wide enough for "11:00 – 12:20" on one line — a wrapped time range reads as two times. The
	   third column is the controls: the star, and the Details toggle under it. Both live top-right
	   rather than in the flow, so the reader's eye lands on time -> title -> track uninterrupted. */
	grid-template-columns: 8.5rem minmax(0, 1fr) auto auto;
	column-gap: 1.25rem;
	align-items: start;
	/* The same on all four sides: the rail and the body share the top edge, the last part sits on
	   the bottom edge, and nothing inside carries a trailing margin to make one side deeper. */
	padding: 1.25rem;
	margin-bottom: 0.5rem;
	background: var(--mep-skin-card);
	border: 1px solid var(--mep-skin-border);
	border-radius: var(--mep-skin-radius);
	transition: background-color 120ms ease, border-color 120ms ease;
}

/*
 * The rhythm. One gap (--scs-card-gap) between every stacked part of the body — title, badges,
 * abstract, speakers — and a tighter one between the time and its type label. The first row
 * (time, title, the controls) carries no stacking margin at all, so the rail and the body share
 * the card's top edge instead of the title sitting a margin lower than the star.
 */
.mep-agenda--skin-scs26 .mep-session > * {
	grid-column: 2;
	margin: 0;
}

.mep-agenda--skin-scs26 .mep-session > * + * {
	margin-block-start: var(--scs-card-gap);
}

.mep-agenda--skin-scs26 .mep-session > .mep-session-when,
.mep-agenda--skin-scs26 .mep-session > .mep-session-title,
.mep-agenda--skin-scs26 .mep-session > .mep-star,
.mep-agenda--skin-scs26 .mep-session > .mep-session-more {
	margin-block-start: 0;
}

.mep-agenda--skin-scs26 .mep-session-detail {
	grid-column: 2;
	/* Folded, the wrapper is 0px tall; its margin must go with it or the card keeps a band of
	   nothing under the badges. Animated with the fold so the card's height slides, not snaps. */
	transition: grid-template-rows 240ms var(--scs-ease-out, ease), margin-block-start 240ms var(--scs-ease-out, ease);
}

.mep-agenda--skin-scs26 .mep-session-detail--closed {
	margin-block-start: 0;
}

/* The time column: one cell holding the time with the session type directly under it. It was two
   grid rows, which put the type level with the track badges — row 1 is as tall as the title, and a
   title routinely wraps to two lines. */
.mep-agenda--skin-scs26 .mep-session-when {
	grid-column: 1;
	grid-row: 1;
}

/* The title takes row 1 by name, so it is level with the time whatever precedes it in the markup. */
.mep-agenda--skin-scs26 .mep-session-title {
	grid-row: 1;
}

.mep-agenda--skin-scs26 .mep-session-facts {
	margin: var(--scs-card-gap-tight) 0 0;
}

/* Both on the first line, Details then the star, so the top-right of the card is one control
   cluster rather than a stack. Placed by column/row rather than source order — the star is the
   first child in the markup and the toggle is injected in the middle of it. */
.mep-agenda--skin-scs26 .mep-session-more {
	grid-column: 3;
	/* Span every row so they centre against the CARD, not the title line. `1 / -1` looks right and
	   is not: -1 is the last line of the EXPLICIT grid, and every row here is implicit, so it
	   resolved to row 1 alone and left them 16px high. */
	grid-row: 1 / span 20;
	justify-self: end;
	align-self: center;
	white-space: nowrap;
	/* No margin: the grid's column-gap is the spacing between the two controls. */
	margin: 0;
}

/*
 * The base sheet pins the star with position:absolute / inset-inline-end:0, which puts it on the padding-box
 * edge — the card's own padding cannot reach it, so it sat 1px off the border however much padding
 * the card had. Back into the grid, where the layout and the padding both apply.
 */
.mep-agenda--skin-scs26 .mep-star {
	position: static;
	grid-column: 4;
	grid-row: 1 / span 20;
	justify-self: end;
	align-self: center;
	margin: 0;
	/* A 32px target, which is the smallest thing a finger should be asked to hit. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0;
}

/*
 * Track badges in the time column (Settings -> EMS Speakers -> Track badges). The rail roughly
 * doubles to hold a track name, which buys the body column a clean run of title then prose. Worth
 * it when names are short; the default keeps the badge under the title, where a long name has the
 * width to wrap.
 */
.mep-agenda--tracks-rail.mep-agenda--skin-scs26 .mep-session {
	grid-template-columns: 13rem minmax(0, 1fr) auto auto;
}

.mep-agenda--tracks-rail.mep-agenda--skin-scs26 .mep-session-tracks {
	grid-column: 1;
	grid-row: 3;
	margin-block-start: var(--scs-card-gap);
}

.mep-agenda--tracks-rail.mep-agenda--skin-scs26 .mep-track-name {
	white-space: normal;
}

@media (max-width: 40rem) {
	/* One column on a phone: a 6.5rem rail leaves nothing for the title. */
	.mep-agenda--skin-scs26 .mep-session {
		grid-template-columns: minmax(0, 1fr) 1.75rem;
	}
	.mep-agenda--skin-scs26 .mep-star {
		grid-column: 2;
	}
	.mep-agenda--skin-scs26 .mep-session > * {
		grid-column: 1;
	}
	.mep-agenda--skin-scs26 .mep-session-when,
	.mep-agenda--skin-scs26 .mep-session-time,
	.mep-agenda--skin-scs26 .mep-session-facts {
		grid-column: 1;
		grid-row: auto;
	}
	.mep-agenda--skin-scs26 .mep-session-facts {
		display: inline;
	}
	/* Stacked under the time now, so the title takes the one gap like every other part. */
	.mep-agenda--skin-scs26 .mep-session-title,
	.mep-agenda--skin-scs26 .mep-session > .mep-session-title {
		grid-row: auto;
		margin-block-start: var(--scs-card-gap);
	}
	.mep-agenda--skin-scs26 .mep-star {
		grid-column: 2;
		grid-row: 1;
	}
	.mep-agenda--skin-scs26 .mep-session-more,
	.mep-agenda--skin-scs26 .mep-session > .mep-session-more {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin: 0;
		margin-block-start: var(--scs-card-gap);
	}
}

.mep-agenda--skin-scs26 .mep-session:hover {
	background: var(--mep-skin-card-hover);
	border-color: var(--mep-skin-border-strong, var(--scs-border-strong));
}

/*
 * A break is punctuation between sessions, not one of them: no card, no border, just the time and
 * the label on a rule. It should read as a gap in the day.
 */
.mep-agenda--skin-scs26 .mep-session--break {
	background: none;
	border: 0;
	border-radius: 0;
	padding-block: 0.35rem;
	margin-block: 0.35rem;
	align-items: center;
}

/* The generic `> * + *` spacing pushed the label down half a line against the time. A break is one
   line, so nothing in it stacks. */
.mep-agenda--skin-scs26 .mep-session--break > * + * {
	margin-block-start: 0;
}

/* One line-height across both, so the time and the label share a centre line rather than each
   sitting in the middle of its own differently-sized line box. */
.mep-agenda--skin-scs26 .mep-session--break .mep-session-time,
.mep-agenda--skin-scs26 .mep-session--break .mep-session-title {
	line-height: 1.6;
	align-self: center;
}

.mep-agenda--skin-scs26 .mep-session--break .mep-session-time {
	font-weight: 500;
	color: var(--mep-skin-muted);
}

.mep-agenda--skin-scs26 .mep-session--break .mep-session-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mep-skin-muted);
}

/* The rule runs from the label to the edge of the row, so the break reads as a divider. */
.mep-agenda--skin-scs26 .mep-session--break .mep-session-title::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--mep-skin-border);
}

/* The time is the thing a reader scans down the page, so it leads. */
.mep-agenda--skin-scs26 .mep-session-time {
	font-variant-numeric: tabular-nums;
	font-size: var(--scs-type-lead);
	font-weight: 600;
	color: var(--mep-skin-text);
	/* The same line-height as the title, so the two share a top edge AND a baseline in row 1. */
	line-height: 1.3;
	letter-spacing: 0.01em;
	white-space: nowrap;
	/* The base sheet reserves 2rem here for an absolutely-positioned star. This skin puts the star
	   in its own grid column, so the reservation only ate into the rail. */
	padding-inline-end: 0;
}

/* The format ("Panel", "Keynote") is a label under the time, not a sentence of its own. */
.mep-agenda--skin-scs26 .mep-session-facts {
	font-size: var(--scs-type-label);
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mep-skin-muted);
}

.mep-agenda--skin-scs26 .mep-session-title {
	font-size: var(--scs-type-lead);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	/* Ragged right at a readable measure beats a title running the full width of a desktop. */
	max-width: 60ch;
}

.mep-agenda--skin-scs26 .mep-session-abstract {
	color: var(--mep-skin-muted);
	font-size: var(--scs-type-body);
	line-height: 1.55;
	/* 1400px of unbroken prose is unreadable; this is roughly the 75-character measure. */
	max-width: 72ch;
}

/* The prose inside keeps the card's gap between paragraphs and none at either end, whatever the
   host theme gives a <p>: the theme's margin was the trailing space under an abstract. */
.mep-agenda--skin-scs26 .mep-session-abstract > * {
	margin: 0;
}

.mep-agenda--skin-scs26 .mep-session-abstract > * + * {
	margin-block-start: var(--scs-card-gap);
}

/*
 * The badge is the track NAME. The base sheet makes the whole <li> the pill, which swallowed the
 * "Presented by …" line too — on a combined session that is a 90-character sentence inside a
 * rounded rectangle, and it set the width of the entire row.
 */
.mep-agenda--skin-scs26 .mep-track {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
}

/*
 * A combined session is ONE badge naming both strands. It carries a gradient of the two track
 * colours rather than a third colour of its own, so the strands it spans are still readable at a
 * glance without inventing a palette entry nobody chose.
 */
.mep-agenda--skin-scs26 .mep-track--merged .mep-track-name {
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--mep-track-colour) 24%, transparent) 0%,
		color-mix(in srgb, var(--mep-track-colour-2, var(--mep-track-colour)) 24%, transparent) 100%
	);
	border-color: color-mix(in srgb, var(--mep-track-colour-2, var(--mep-track-colour)) 45%, transparent);
	border-inline-start-color: color-mix(in srgb, var(--mep-track-colour) 45%, transparent);
}

.mep-agenda--skin-scs26 .mep-track-name {
	display: inline-block;
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	font-size: var(--scs-type-label);
	font-weight: 500;
	line-height: 1.3;
	background: color-mix(in srgb, var(--mep-track-colour) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--mep-track-colour) 45%, transparent);
}

/*
 * Hidden on a session row, kept in the DOM. The presenter is a fact about the TRACK, so on a
 * three-day agenda it repeats under every session carrying that track — six identical copies of
 * "Presented by Connecting the World from the Skies and the Space Sustainability Forum" on day one
 * alone. It still renders on the unskinned agenda, and a crawler still reads it here. The credit
 * itself is not lost: .mep-agenda-credits states it once above the controls.
 */
.mep-agenda--skin-scs26 .mep-session-tracks .mep-track-presented-by {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mep-agenda--skin-scs26 .mep-star {
	color: var(--mep-skin-muted);
	border-radius: 999px;
	line-height: 1;
	padding: 0.2rem;
	transition: color 120ms ease, background-color 120ms ease;
}

/* The host theme paints a filled pill on button:hover/:focus (hello-elementor reset.css); own
   every property it sets, on every state. */
.mep-agenda--skin-scs26 .mep-star,
.mep-agenda--skin-scs26 .mep-star:hover,
.mep-agenda--skin-scs26 .mep-star:focus,
.mep-agenda--skin-scs26 .mep-star:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0.2rem;
	border-radius: 999px;
}

.mep-agenda--skin-scs26 .mep-star:hover {
	color: var(--mep-skin-accent);
	background: color-mix(in srgb, var(--mep-skin-accent) 15%, transparent);
}

.mep-agenda--skin-scs26 .mep-star[aria-pressed='true'] {
	color: var(--mep-skin-accent);
}

.mep-agenda--skin-scs26 .mep-session-more,
.mep-agenda--skin-scs26 .mep-session-more:hover,
.mep-agenda--skin-scs26 .mep-session-more:focus,
.mep-agenda--skin-scs26 .mep-session-more:active {
	/* Every property a theme's global button style sets, pinned: the host paints a filled pill
	   on <button> otherwise. */
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	color: var(--mep-skin-accent);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--scs-type-body);
}

.mep-agenda--skin-scs26 .mep-session-more:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Under the abstract on a rule; the gap above the rule and the gap below it are the card's one gap. */
.mep-agenda--skin-scs26 .mep-session-speakers {
	border-top: 1px solid var(--mep-skin-border);
	padding-block-start: var(--scs-card-gap);
	margin: var(--scs-card-gap) 0 0;
	font-size: var(--scs-type-body);
}

.mep-agenda--skin-scs26 .mep-speaker-role,
.mep-agenda--skin-scs26 .mep-speaker-org {
	color: var(--mep-skin-muted);
}

/* ── schedule block ───────────────────────────────────────────────────────── */

.mep-agenda--skin-scs26 .mep-agenda-schedule {
	--mep-control-height: 2.25rem;
	/* A grid so the field and the button sit on one row and wrap together on a phone, rather than
	   the label/input/button stack the browser gives by default. */
	display: grid;
	grid-template-columns: minmax(0, 22rem) auto;
	justify-content: start;
	align-items: end;
	gap: 0.3rem 0.6rem;
	background: var(--mep-skin-card);
	border: 1px solid var(--mep-skin-border);
	border-radius: var(--mep-skin-radius);
	padding: 1.15rem 1.25rem;
	margin-top: 1.5rem;
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-title,
.mep-agenda--skin-scs26 .mep-agenda-schedule-intro,
.mep-agenda--skin-scs26 .mep-agenda-schedule-status {
	grid-column: 1 / -1;
	margin: 0;
}

/* .mep-agenda-schedule-email is the LABEL; the field is [data-mep-schedule-email]. Gridding the
   label alone stranded it in one column while the field and button stacked in the other. */
.mep-agenda--skin-scs26 .mep-agenda-schedule-email {
	grid-column: 1;
	grid-row: 3;
	margin: 0.35rem 0 0;
	align-self: end;
}

.mep-agenda--skin-scs26 [data-mep-schedule-email] {
	grid-column: 1;
	grid-row: 4;
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-send {
	grid-column: 2;
	grid-row: 4;
}

.mep-agenda--skin-scs26 [data-mep-schedule-email] {
	width: 100%;
	box-sizing: border-box;
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-send {
	grid-column: 2;
}

/* Says whether the send worked; it is the only feedback, so it is not a whisper. */
.mep-agenda--skin-scs26 .mep-agenda-schedule-status:not(:empty) {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--mep-skin-text);
}

@media (max-width: 34rem) {
	.mep-agenda--skin-scs26 .mep-agenda-schedule {
		grid-template-columns: minmax(0, 1fr);
	}
	.mep-agenda--skin-scs26 .mep-agenda-schedule-send {
		grid-column: 1;
		grid-row: 5;
		margin-top: 0.35rem;
	}
}

/* Their primary: pill, gradient, glow — at the same height as the field it sits beside. */
.mep-agenda--skin-scs26 .mep-agenda-schedule-send {
	border-radius: 999px;
	height: var(--mep-control-height, 2.25rem);
	padding: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--scs-white); /* 5.17:1 on the gradient */
	background: linear-gradient(180deg, var(--scs-blue-500, #3b82f6), var(--scs-blue-600));
	border: 1px solid color-mix(in srgb, var(--scs-blue-300) 35%, transparent);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--scs-blue-600) 35%, transparent);
	cursor: pointer;
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-send:hover {
	box-shadow: 0 8px 22px color-mix(in srgb, var(--scs-blue-600) 55%, transparent);
}

/* ── motion ───────────────────────────────────────────────────────────────── */
/*
 * The registration skin's vocabulary, so an agenda and a booking flow on the same site move alike:
 * 0.2s on transform, 0.25s on colour, scale(0.97) on press, a 2px lift and a sheen sweep on the
 * primary button. Nothing here animates layout — only transform and opacity, which the compositor
 * can do without reflowing a 35-row page.
 */
.mep-agenda--skin-scs26 .mep-session {
	transition:
		transform 0.2s var(--scs-ease-out),
		background-color 0.25s var(--scs-ease-out),
		border-color 0.25s var(--scs-ease-out);
}

.mep-agenda--skin-scs26 .mep-session:not(.mep-session--break):hover {
	transform: translateY(-1px);
}

/* Press states, matching their buttons. */
.mep-agenda--skin-scs26 .mep-track-chip:active,
.mep-agenda--skin-scs26 .mep-agenda-day-tab:active,
.mep-agenda--skin-scs26 .mep-speaker-filter-summary:active,
.mep-agenda--skin-scs26 .mep-agenda-schedule-send:active {
	transform: scale(0.97);
}

.mep-agenda--skin-scs26 .mep-agenda-day-tab,
.mep-agenda--skin-scs26 .mep-speaker-filter-summary,
.mep-agenda--skin-scs26 .mep-session-more,
.mep-agenda--skin-scs26 .mep-star {
	transition:
		transform 0.2s var(--scs-ease-out),
		color 0.25s var(--scs-ease-out),
		background-color 0.25s var(--scs-ease-out),
		border-color 0.25s var(--scs-ease-out);
}

/* The star pops when it takes. Feedback for an action with no other visible result. */
.mep-agenda--skin-scs26 .mep-star:active {
	transform: scale(0.85);
}

.mep-agenda--skin-scs26 .mep-star[aria-pressed='true'] {
	animation: mep-star-pop 0.28s var(--scs-ease-out);
}

@keyframes mep-star-pop {
	0% { transform: scale(0.8); }
	60% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* The wrapper animates its height (see the base sheet); this fades the contents with it, so the
   text does not appear at full strength against a box that is still opening. */
.mep-agenda--skin-scs26 .mep-session-detail > * {
	opacity: 1;
	transition: opacity 0.22s var(--scs-ease-out);
}

.mep-agenda--skin-scs26 .mep-session-detail--closed > * {
	opacity: 0;
}

/* The speaker panel drops in from under its trigger. */
.mep-agenda--skin-scs26 .mep-speaker-filter[open] .mep-speaker-options,
.mep-agenda--skin-scs26 .mep-speaker-filter[open] .mep-speaker-filter-search {
	animation: mep-drop-in 0.18s var(--scs-ease-out);
}

@keyframes mep-drop-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Their primary: a 2px lift, a bigger glow, and a sheen that sweeps across on hover. */
.mep-agenda--skin-scs26 .mep-agenda-schedule-send {
	position: relative;
	overflow: hidden;
	transition:
		transform 0.2s var(--scs-ease-out),
		box-shadow 0.25s var(--scs-ease-out);
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-send::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 40%,
		color-mix(in srgb, var(--scs-white) 35%, transparent) 50%,
		transparent 60%
	);
	transform: translateX(-120%);
	transition: transform 0.6s var(--scs-ease-out);
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-send:hover {
	transform: translateY(-2px);
}

.mep-agenda--skin-scs26 .mep-agenda-schedule-send:hover::before {
	transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
	.mep-agenda--skin-scs26 *,
	.mep-agenda--skin-scs26 *::before,
	.mep-agenda--skin-scs26 *::after {
		transition: none !important;
		animation: none !important;
	}
	.mep-agenda--skin-scs26 .mep-session:hover,
	.mep-agenda--skin-scs26 .mep-agenda-schedule-send:hover,
	.mep-agenda--skin-scs26 .mep-star:active,
	.mep-agenda--skin-scs26 .mep-track-chip:active {
		transform: none;
	}
}