/*
 * Agenda skin: SCS26 Masterclass (xidea.co/scs26/masterclass.html).
 *
 * The same site as `scs26` and a DIFFERENT component. Their main event's agenda is a stack of cards
 * with a search box and a timezone control above it; their masterclass programme is a plain
 * timetable — a rail of times down the left, hairlines between rows, no cards, no controls, one
 * day. So this is its own stylesheet rather than an override of the other: the two share a palette
 * and nothing else, and a rule that tried to turn one into the other would fight every line of it.
 *
 * Every value below is `.mc-agenda` from their css/style.css, mapped onto our class names. Their
 * markup is a <li> of two cells; ours is the same shape, so almost all of this is a straight copy.
 *
 * The registration side of the same page is registration/static/inline/skins/scs26-masterclass.css.
 */

.mep-agenda--skin-scs26-masterclass {
	width: 100%;
	box-sizing: border-box;

	/* ---- their palette, mirrored (same block as the scs26 agenda skin) ----- */
	--scs-text-1: #eef2fa;
	--scs-text-2: #a8b3c7;
	--scs-text-3: #7c879c;
	--scs-slate: #94a3b8;

	--scs-blue-300: #93c5fd;
	--scs-blue-400: #60a5fa;
	--scs-cyan-400: #22d3ee;

	--scs-border: color-mix(in srgb, var(--scs-slate) 16%, transparent);

	font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
	/* A base size of its own — otherwise anything unsized inherits the host theme's body text. */
	font-size: 1rem;
	line-height: 1.65;
	color: var(--scs-text-1);
	color-scheme: dark;

	/* Their .mc-agenda: a plain list at their width, not the theme's. */
	max-width: 900px;
	margin: 0;
	padding: 0;
}

/* ---- what their programme does not have ----------------------------------
   A one-day programme of twelve rows is read, not searched, and their page offers neither a search
   box nor a timezone picker. Hidden rather than not rendered: the renderer emits one control block
   for every agenda, and this skin is the only place that knows this page doesn't want it.
   The day tabs and the result count go the same way — one day, twelve rows, nothing to page or
   count. */
.mep-agenda--skin-scs26-masterclass .mep-agenda-controls,
.mep-agenda--skin-scs26-masterclass .mep-agenda-days,
.mep-agenda--skin-scs26-masterclass .mep-agenda-count,
.mep-agenda--skin-scs26-masterclass .mep-agenda-day-title {
	display: none;
}

/* The event name and its place/timezone line. Their programme carries neither — the page's own
   heading says what this is and when, and repeating it above the first row reads as a stray line. */
.mep-agenda--skin-scs26-masterclass .mep-agenda-title,
.mep-agenda--skin-scs26-masterclass .mep-agenda-meta {
	display: none;
}

.mep-agenda--skin-scs26-masterclass .mep-sessions {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- a row (.mc-agenda__row) ---------------------------------------------
   132px of time rail, 24px of gap, 20px of air above and below, and a hairline between. No card,
   no radius, no fill — the rule IS the separation. */
.mep-agenda--skin-scs26-masterclass .mep-session {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	/* COLUMN gap only. Their row is a two-column grid whose body is a single cell, so a row gap never
	   applies to it; ours puts every body element in its own implicit row, and a shorthand `gap`
	   therefore opened 24px between the title and the description that theirs does not have. */
	column-gap: 24px;
	row-gap: 0;
	align-items: start;
	padding: 20px 0;
	margin: 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--scs-border);
	border-radius: 0;
}
.mep-agenda--skin-scs26-masterclass .mep-session:last-child {
	border-bottom: 1px solid var(--scs-border);
}
/* Everything that isn't the time sits in the body column, in source order. */
.mep-agenda--skin-scs26-masterclass .mep-session > * {
	grid-column: 2;
	margin: 0;
}
/* The rail spans the WHOLE row, it does not sit in the first implicit one.
 *
 * Every body element is its own grid row, so with the rail pinned to row 1 that row became as tall
 * as the time plus the "SESSION" label under it — and the title, which shares the row, was left
 * sitting at the top of a 40px box with the abstract starting below it. Their programme has the
 * description directly under the title; this is what puts it there. */
.mep-agenda--skin-scs26-masterclass .mep-session-when {
	grid-column: 1;
	/* Spanning every body row, not sitting in the first one. The rail is the time plus its label —
	   taller than a one-line title — so pinned to row 1 it stretched that row and left the title
	   floating at the top of it with the description below. `1 / -1` does not do this: with no
	   EXPLICIT rows there is no last line to count back from, and it collapses to row 1. */
	grid-row: 1 / span 99;
}

/* ---- the time, and the dot that marks it (.mc-agenda__time) --------------- */
.mep-agenda--skin-scs26-masterclass .mep-session-time {
	position: relative;
	padding-inline-start: 20px;
	font-size: 0.92rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--scs-blue-300);
	white-space: nowrap;
	/* A time range reads left-to-right whatever the page direction — theirs says so too. */
	direction: ltr;
}
.mep-agenda--skin-scs26-masterclass .mep-session-time::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--scs-blue-400), var(--scs-cyan-400));
}
/* The session type ("SESSION", "COFFEE BREAK") is ours; their programme has no such label.
   Removed outright rather than hidden from sight only, because nothing is lost with it: a break
   says so in its own title ("Coffee break", "Lunch break"), so the distinction a screen reader
   needs is in the text either way. */
.mep-agenda--skin-scs26-masterclass .mep-session-facts {
	display: none;
}

/* ---- the body ------------------------------------------------------------ */
.mep-agenda--skin-scs26-masterclass .mep-session-title {
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--scs-text-1);
}
.mep-agenda--skin-scs26-masterclass .mep-session-abstract {
	margin-top: 5px;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--scs-text-2);
}

/* ---- a break row (.mc-agenda__row--break) --------------------------------- */
.mep-agenda--skin-scs26-masterclass .mep-session--break .mep-session-time {
	color: var(--scs-text-3);
}
.mep-agenda--skin-scs26-masterclass .mep-session--break .mep-session-time::before {
	background: var(--scs-text-3);
	opacity: 0.6;
}
.mep-agenda--skin-scs26-masterclass .mep-session--break .mep-session-title {
	color: var(--scs-text-3);
	font-weight: 500;
	font-size: 0.95rem;
}

/* Keyboard focus. The base sheet draws none, and this skin paints no card to carry one. */
.mep-agenda--skin-scs26-masterclass :focus-visible {
	outline: 2px solid var(--scs-blue-400);
	outline-offset: 2px;
}

/* ---- narrow (their 640px breakpoint) -------------------------------------- */
@media (max-width: 640px) {
	.mep-agenda--skin-scs26-masterclass .mep-session {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 6px;
		padding: 16px 0;
	}
	.mep-agenda--skin-scs26-masterclass .mep-session > *,
	.mep-agenda--skin-scs26-masterclass .mep-session-when {
		grid-column: 1;
		grid-row: auto;
	}
}