/*
 * 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);

	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.
 */
/*
 * Two ranks, one bar. The bar holds three things a reader could take as equals — track chips, a
 * keyword box and a timezone picker — and read as three. The chips are the filter the programme is
 * actually built around, so they keep the full control height and take the first line on their own;
 * everything under them is a narrower, quieter row. Sizing and spacing only: nothing here changes
 * what a control does, and none of them has moved or gone.
 */
.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.85rem 1rem;
	background: var(--mep-skin-card);
	border: 0;
	border-radius: var(--mep-skin-radius);
	/* The row gap is the rank break; the column gap keeps the secondaries reading as one group. */
	gap: 0.8rem 0.55rem;
	align-items: center;
}

/* The chips are the primary filter and there are five of them, one long. They take the row rather
   than pushing the search box onto a second line behind them. */
.mep-agenda--skin-scs26 .mep-track-chips {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* Takes the slack on the row, but not so much that the timezone is pushed onto a line of its own:
   speaker, search and timezone belong together as "narrow what you are looking at". */
.mep-agenda--skin-scs26 .mep-agenda-search {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 12rem;
	min-width: 8rem;
}

.mep-agenda--skin-scs26 .mep-agenda-search input {
	flex: 1 1 auto;
	min-width: 0;
}

.mep-agenda--skin-scs26 .mep-agenda-search-label,
.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;
	height: var(--mep-control-height, 2.25rem);
	border-radius: 999px;
	padding: 0 0.9rem;
	/* 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);
}

/* 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-search input,
.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;
}

/* "Search the agenda" is said by the placeholder; the label stays for assistive tech only. */
.mep-agenda--skin-scs26 .mep-agenda-search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.mep-agenda--skin-scs26 .mep-agenda-search input::placeholder,
.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. */
.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;
}

.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;
}

.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;
	padding: 0.95rem 1.5rem 0.95rem 1.15rem;
	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;
}

/* Body column by default; the three below opt out. */
.mep-agenda--skin-scs26 .mep-session > * {
	grid-column: 2;
	margin: 0;
}

.mep-agenda--skin-scs26 .mep-session > * + * {
	margin-top: 0.4rem;
}

/* The abstract is the one part that wants air above it — it is prose, not a label. */
.mep-agenda--skin-scs26 .mep-session-abstract {
	margin-top: 0.6rem;
}

.mep-agenda--skin-scs26 .mep-session-detail {
	grid-column: 2;
}

/* 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;
}

.mep-agenda--skin-scs26 .mep-session-facts {
	margin-top: 0.15rem;
}

/* 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 / right: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-top: 0.5rem;
}

.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;
	}
	.mep-agenda--skin-scs26 .mep-star {
		grid-column: 2;
		grid-row: 1;
	}
	.mep-agenda--skin-scs26 .mep-session-more {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin: 0.5rem 0 0;
	}
}

.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-top: 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: 0.95rem;
	font-weight: 600;
	color: var(--mep-skin-text);
	line-height: 1.35;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* 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: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mep-skin-muted);
}

.mep-agenda--skin-scs26 .mep-session-title {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	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: 0.875rem;
	line-height: 1.55;
	/* 1400px of unbroken prose is unreadable; this is roughly the 75-character measure. */
	max-width: 72ch;
}

/*
 * 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-left-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.15rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	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;
}

.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 {
	color: var(--mep-skin-accent);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.8rem;
}

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

/* A folded row is a title and a time; the card should shrink to match rather than keep the
   padding it needed when it was full of prose. */
.mep-agenda--skin-scs26 .mep-session:has(.mep-session-detail--closed) {
	padding-block: 0.8rem;
}

.mep-agenda--skin-scs26 .mep-session-speakers {
	border-top: 1px solid var(--mep-skin-border);
	padding-top: 0.75rem;
	margin-top: 0.75rem;
}

.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;
	}
}