/*
 * Watch live skin: Space & Connectivity Summit 2026 (CST, Riyadh).
 *
 * The palette is scs26.css's (the agenda skin on the same site), copied rather than re-picked so
 * the two can be diffed. Loaded only for [mep_watch skin="scs26"], after mep-watch.css.
 *
 * Fonts are not declared: the host page already serves IBM Plex.
 */

.mep-watch--skin-scs26 {
	--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-live: #f87171;
	--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);

	font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--scs-text-1);
	color-scheme: dark;
}

.mep-watch--skin-scs26 .mep-watch-layout {
	padding: 20px;
	border-radius: 20px;
	background: var(--scs-bg-2);
	border: 1px solid var(--scs-border);
}

/* ---- screen -------------------------------------------------------------------------------- */

.mep-watch--skin-scs26 .mep-watch-screen {
	border-radius: 12px;
	border: 1px solid var(--scs-border);
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

.mep-watch--skin-scs26 .mep-watch-player {
	background: linear-gradient(160deg, #0d1a3a, #050914 70%);
}

.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder {
	color: var(--scs-text-2);
	background: transparent;
}

/* The consent placeholder's own stylesheet paints dark ink for a light card. Here it sits on the
   dark player, so its text and buttons take the skin's light-on-dark values instead. */
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder p {
	color: var(--scs-text-1); /* 16.6:1 on the player */
}

.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn,
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn:hover,
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn:focus,
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn:active {
	background: var(--scs-white);
	color: #060b1a; /* their --bg-1 */
	border-color: var(--scs-white);
	border-radius: 999px;
}

.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn-quiet,
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn-quiet:hover,
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn-quiet:focus,
.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn-quiet:active {
	background: transparent;
	color: var(--scs-text-1);
	border-color: var(--scs-border-strong);
}

.mep-watch--skin-scs26 .mep-watch-player .mep-embed-placeholder .mep-embed-btn:focus-visible {
	outline: 2px solid var(--scs-blue-400);
	outline-offset: 2px;
}

.mep-watch--skin-scs26 .mep-watch-live {
	padding: 5px 10px;
	border-radius: 999px;
	background: rgb(6 11 26 / 70%);
	border: 1px solid var(--scs-border-strong);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-live i {
	background: var(--scs-live);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--scs-live) 22%, transparent);
}

.mep-watch--skin-scs26 .mep-watch-caption {
	background: linear-gradient(180deg, #0e1a36, #0b1430);
	border-top: 1px solid var(--scs-border);
}

.mep-watch--skin-scs26 .mep-watch-caption-top {
	font-size: 0.8rem;
	color: var(--scs-text-2);
}

.mep-watch--skin-scs26 .mep-watch-chip {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--scs-border-strong);
	color: var(--scs-blue-300);
}

.mep-watch--skin-scs26 .mep-watch-date {
	font-size: 0.8rem;
}

.mep-watch--skin-scs26 .mep-watch-status {
	font-weight: 600;
	color: var(--scs-blue-300);
}

.mep-watch--skin-scs26 .mep-watch-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--scs-text-1);
}

/* ---- before the event ---------------------------------------------------------------------- */

.mep-watch--skin-scs26 .mep-watch-poster {
	background: radial-gradient(120% 90% at 50% 0%, #14306b 0%, #071026 60%, #050914 100%);
}

/* A few stars, as on the host page. */
.mep-watch--skin-scs26 .mep-watch-poster::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1.5px 1.5px at 12% 22%, rgb(255 255 255 / 60%), transparent),
		radial-gradient(1px 1px at 33% 70%, rgb(255 255 255 / 45%), transparent),
		radial-gradient(1.5px 1.5px at 58% 18%, rgb(255 255 255 / 55%), transparent),
		radial-gradient(1px 1px at 81% 46%, rgb(255 255 255 / 40%), transparent),
		radial-gradient(1px 1px at 66% 84%, rgb(255 255 255 / 45%), transparent),
		radial-gradient(1.5px 1.5px at 90% 12%, rgb(255 255 255 / 55%), transparent);
}

.mep-watch--skin-scs26 .mep-watch-kicker {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scs-blue-300);
}

.mep-watch--skin-scs26 .mep-watch-poster-big {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-poster-line {
	font-size: 1rem;
	color: var(--scs-text-2); /* 8.9:1 on the poster */
}

.mep-watch--skin-scs26 .mep-watch-count-unit {
	border-radius: 12px;
	background: var(--scs-surface-2);
	border: 1px solid var(--scs-border);
}

.mep-watch--skin-scs26 .mep-watch-count-unit b {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-count-unit span {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--scs-text-2);
}

/* ---- after the event ------------------------------------------------------------------------ */

.mep-watch--skin-scs26 .mep-watch-days {
	border: 1px solid var(--scs-border-strong);
}

.mep-watch--skin-scs26 .mep-watch-days-label,
.mep-watch--skin-scs26 .mep-watch-day-select span {
	font-size: 0.85rem;
	color: var(--scs-text-2);
}

.mep-watch--skin-scs26 .mep-watch-day-select select {
	border-radius: 10px;
	border: 1px solid var(--scs-border-strong);
	background: #0d1a3a;
	color: var(--scs-text-1);
	font-size: 1rem;
}

.mep-watch--skin-scs26 .mep-watch-day-select select:focus-visible {
	outline: 2px solid var(--scs-blue-400);
	outline-offset: 2px;
}

.mep-watch--skin-scs26 .mep-watch-day {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--scs-text-2);
}

.mep-watch--skin-scs26 .mep-watch-day:hover {
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-day[aria-pressed="true"] {
	background: var(--scs-blue-600);
	color: var(--scs-white);
}

.mep-watch--skin-scs26 .mep-watch-day:focus-visible {
	outline: 2px solid var(--scs-blue-400);
}

/* ---- editors: a day with no link ------------------------------------------------------------ */

.mep-watch--skin-scs26 .mep-watch-test {
	color: var(--scs-text-2);
	font-size: 0.85rem;
}

.mep-watch--skin-scs26 .mep-watch-test-tag {
	color: var(--scs-text-1);
	border-color: var(--scs-border-strong);
}

/* ---- questions ------------------------------------------------------------------------------ */

.mep-watch--skin-scs26 .mep-watch-q {
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--scs-surface-1);
	border: 1px solid var(--scs-border);
}

.mep-watch--skin-scs26 .mep-watch-q-qr {
	padding: 6px;
	border-radius: 8px;
	background: var(--scs-white);
}

.mep-watch--skin-scs26 .mep-watch-q-head {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-q-line {
	margin-top: 4px;
	font-size: 0.85rem;
	color: var(--scs-text-2);
}

/* Unmistakably a button: solid white pill, a shadow, and a lift on hover. */
.mep-watch--skin-scs26 .mep-watch-q-btn {
	padding: 13px 24px;
	border-radius: 999px;
	background: var(--scs-white);
	color: #0a1226;
	font-size: 0.95rem;
	font-weight: 600;
	box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

/* Host themes underline links; a button should not read as one. */
.mep-watch--skin-scs26 .mep-watch-q-btn:hover,
.mep-watch--skin-scs26 .mep-watch-q-btn:focus,
.mep-watch--skin-scs26 .mep-watch-q-btn:visited {
	color: #0a1226;
	text-decoration: none;
}

.mep-watch--skin-scs26 .mep-watch-q-btn:hover {
	background: #e6ecf7;
	transform: translateY(-1px);
}

.mep-watch--skin-scs26 .mep-watch-q-btn:focus-visible {
	outline: 2px solid var(--scs-blue-400);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mep-watch--skin-scs26 .mep-watch-q-btn {
		transition: none;
	}
	.mep-watch--skin-scs26 .mep-watch-q-btn:hover {
		transform: none;
	}
}

.mep-watch--skin-scs26 .mep-watch-rail-head {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scs-text-2);
}

.mep-watch--skin-scs26 .mep-watch-earlier:focus-visible,
.mep-watch--skin-scs26 .mep-watch-full:focus-visible {
	outline: 2px solid var(--scs-blue-400);
	outline-offset: 2px;
}

/* ---- rail ---------------------------------------------------------------------------------- */

.mep-watch--skin-scs26 .mep-watch-timeline {
	border-top: 1px solid var(--scs-border);
}

.mep-watch--skin-scs26 .mep-watch-earlier {
	font-size: 0.8rem;
	color: var(--scs-text-2);
	border-radius: 6px;
}

.mep-watch--skin-scs26 .mep-watch-earlier:hover {
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-row {
	font-size: 0.85rem;
	border-radius: 8px;
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-row::before {
	background: var(--scs-border-strong);
	opacity: 1;
}

.mep-watch--skin-scs26 .mep-watch-row::after {
	background: var(--scs-bg-2);
	border-color: var(--scs-slate);
}

.mep-watch--skin-scs26 .mep-watch-row.is-past {
	color: var(--scs-slate);
}

.mep-watch--skin-scs26 .mep-watch-row.is-past::after {
	background: var(--scs-slate);
}

.mep-watch--skin-scs26 .mep-watch-row--break {
	font-style: italic;
	color: var(--scs-text-2);
}

.mep-watch--skin-scs26 .mep-watch-row.is-now {
	background: color-mix(in srgb, var(--scs-blue-600) 14%, transparent);
}

.mep-watch--skin-scs26 .mep-watch-row.is-now::after {
	background: var(--scs-blue-400);
	border-color: var(--scs-blue-400);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--scs-blue-400) 25%, transparent);
}

.mep-watch--skin-scs26 .mep-watch-row.is-next::after {
	border-color: var(--scs-blue-400);
}

.mep-watch--skin-scs26 .mep-watch-full {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--scs-blue-300);
	text-decoration: none;
}

.mep-watch--skin-scs26 .mep-watch-row-time,
.mep-watch--skin-scs26 .mep-watch-zone {
	color: var(--scs-text-2); /* 8.9:1 on the rail */
	opacity: 1;
}

.mep-watch--skin-scs26 .mep-watch-full:hover {
	text-decoration: underline;
}

/* ---- Arabic: no capitals and no tracking ---------------------------------------------------- */

.mep-watch--skin-scs26[dir="rtl"] .mep-watch-live,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-chip,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-title,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-q-head,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-rail-head,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-kicker,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-poster-big,
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-count-unit span {
	letter-spacing: 0;
	text-transform: none;
}

/* Countdown digits read left to right, also in Arabic. A caption date can hold Arabic day and
   month names, so it is only isolated, not turned. */
.mep-watch--skin-scs26[dir="rtl"] .mep-watch-count-unit b {
	direction: ltr;
	unicode-bidi: isolate;
}

.mep-watch--skin-scs26[dir="rtl"] .mep-watch-date {
	unicode-bidi: isolate;
}

@container (max-width: 760px) {
	.mep-watch--skin-scs26 .mep-watch-layout {
		padding: 14px;
		border-radius: 18px;
	}
	.mep-watch--skin-scs26 .mep-watch-title {
		font-size: 1.05rem;
	}
	.mep-watch--skin-scs26 .mep-watch-poster-big {
		font-size: 1.15rem;
	}
	.mep-watch--skin-scs26 .mep-watch-count-unit b {
		font-size: 1.2rem;
	}
	.mep-watch--skin-scs26 .mep-watch-q {
		padding: 12px 14px;
	}
	.mep-watch--skin-scs26 .mep-watch-q-btn {
		padding: 11px 18px;
	}
}


/* ---- time-zone picker (Show times on): the agenda's own control, in this skin ------------- */
/* Same rules as skins/scs26.css's agenda picker. It sits at the rail's foot, so its list opens
   upwards, inside the column. */
.mep-watch--skin-scs26 .mep-watch-zone .mep-agenda-timezone-label {
	font-size: 0.75rem;
	color: var(--scs-text-2);
	white-space: nowrap;
}

.mep-watch--skin-scs26 .mep-watch-zone .mep-agenda-timezone select {
	background: color-mix(in srgb, #0f172a 75%, transparent);
	border: 1px solid color-mix(in srgb, var(--scs-slate) 62%, #060b1a);
	border-radius: 999px;
	color: var(--scs-text-1);
}

.mep-watch--skin-scs26 .mep-watch-zone .mep-tz {
	position: relative;
}

.mep-watch--skin-scs26 .mep-watch-zone .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-watch--skin-scs26 .mep-watch-zone .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-watch--skin-scs26 .mep-watch-zone .mep-tz-place {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mep-watch--skin-scs26 .mep-watch-zone .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-watch--skin-scs26 .mep-watch-zone .mep-tz-trigger[aria-expanded='true'] {
	border-color: var(--scs-blue-400);
}

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

.mep-watch--skin-scs26 .mep-watch-zone .mep-tz-panel {
	color: var(--scs-text-1); /* the base panel is dark text for a light page */
	position: absolute;
	top: calc(100% + 0.4rem);
	inset-inline-end: 0;
	z-index: 5;
	width: min(20rem, 85vw);
	padding: 0.5rem;
	background: var(--scs-bg-2);
	border: 1px solid var(--scs-border-strong);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

.mep-watch--skin-scs26 .mep-watch-zone .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%, #060b1a);
	background: color-mix(in srgb, #0f172a 75%, transparent);
	color: var(--scs-text-1);
	font: inherit;
	font-size: 0.875rem;
}

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

.mep-watch--skin-scs26 .mep-watch-zone .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: start;
	cursor: pointer;
}

.mep-watch--skin-scs26 .mep-watch-zone .mep-tz-option:hover {
	background: var(--scs-surface-2);
}

.mep-watch--skin-scs26 .mep-watch-zone .mep-tz-option--shortcut {
	font-weight: 500;
}

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

.mep-watch--skin-scs26 .mep-watch-zone .mep-tz-panel {
	top: auto;
	bottom: calc(100% + 0.4rem);
}