/* ==========================================================================
   Platform skin — makes this embed read like the agenda on the IACC
   participant platform (iacc.conference.tc). Values are taken from the
   platform's live stylesheet, not approximated.

   Loaded after style.css, together with js/platform-skin.js (which adds the
   day-heading rows and time-range lines at runtime). To revert, remove both
   tags from embed.html.
   ========================================================================== */

:root {
	--pf-primary: #006ea0;
	--pf-primary-tint: rgba(0, 110, 160, 0.05);
	--pf-body: #3c3c3c;
	--pf-body-light: #626262;  /* platform --body-color-light: body colour +15% lightness */
	--pf-gray-100: #f8f9fa;
	--pf-gray-200: #e9ecef;
	--pf-gray-400: #ced4da;
	--pf-font: 'Cal Sans', Helvetica, Arial, sans-serif;
}

/* ---- Type: Cal Sans throughout, like the platform ------------------------ */
body,
.chip,
.tag,
.filter-label,
.filter-clear,
.filter-search input,
.day-tab,
.desc-toggle {
	font-family: var(--pf-font);
}

body { color: var(--pf-body); }
h1, h2, h3 { color: var(--pf-body); }

/* ---- Day tabs → rounded pills with a tinted active state ----------------- */
.day-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--pf-gray-200);
	padding: 0 0 0.75rem;
	margin-bottom: 0;
}

.day-tab {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.3rem 0.9rem;
	border-radius: 18px;
	background: none;
}

.day-tab .day-num { display: none; }

.day-tab .day-date {
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--pf-body-light);
}

.day-tab:hover:not(.is-active) { background: #f3f5f6; }
.day-tab.is-active { background: var(--pf-primary-tint); }
.day-tab.is-active .day-date { color: var(--pf-primary); font-weight: 700; }
.day-tab .day-tab-count,
.day-tab.is-active .day-tab-count { color: var(--pf-body-light); font-size: 0.8rem; }
.day-tab .day-tab-count:empty { display: none; }  /* only shows "N matches" while filtering */

/* ---- Day heading row ("Tuesday, December 1") ------------------------------ */
.day-heading {
	display: flex;
	height: 50px;
	background: #fff;
}

.day-heading-gutter {
	flex: 0 0 12%;
	background: #f9f9f9;
}

.day-heading h2 {
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0;
	padding-left: 30px;
	border-bottom: 1px solid var(--pf-gray-200);
	font-size: 1rem;
	font-weight: 700;
}

/* ---- One column for the whole event (set by js/platform-skin.js) --------- */
.pf-one-column .day-tabs { display: none; }
.pf-one-column .day-panel { display: block; animation: none; }

/* Days the filters leave empty drop out; one message covers "nothing at all" */
.pf-one-column .day-panel.pf-empty,
.pf-one-column .day-empty { display: none; }

.pf-no-matches {
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
	color: var(--pf-body-light);
}

/* ---- Past | Live | Upcoming (set by js/platform-skin.js), as on the platform */
.pf-buckets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--pf-gray-200);
}

.pf-bucket {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0.3rem 0.5rem;
	border: 0;
	border-radius: 18px;
	background: none;
	color: var(--pf-body-light);
	font-family: var(--pf-font);
	font-size: 1.3rem;
	cursor: pointer;
}

.pf-bucket[hidden] { display: none; }
.pf-bucket:hover { background: #f3f5f6; }
.pf-bucket:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }
.pf-bucket.is-active { background: var(--pf-primary-tint); color: var(--pf-primary); font-weight: 700; }
.pf-bucket-count { font-size: 1rem; }

.pf-one-column .session[data-pf-out] { display: none; }

/* ---- Session rows → grey time gutter + white card ------------------------- */
.session-list { border-top: 0; }

.session {
	display: flex;
	gap: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: #fff;
}

.session-time {
	display: block;
	box-sizing: border-box;
	flex: 0 0 12%;
	max-width: 12%;
	padding: 1rem 0.75rem 0 1rem;
	background: var(--pf-gray-100);
	text-align: right;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--pf-body);
}

/* End time moves into the range line above the title */
.session-time span + span { display: none; }

/* Start time shows once per time slot (set by js/platform-skin.js) */
.session-time.is-repeat span { visibility: hidden; }

.session-body {
	flex: 1;
	min-width: 0;
	padding: 1rem 1rem 1.25rem 1.75rem;
	border-bottom: 1px solid var(--pf-gray-200);
}

.session-range {
	margin: 0 0 0.15rem;
	font-size: 0.95rem;
	color: var(--pf-body-light);
}

.session-body h3 {
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: normal;
	color: var(--pf-body);
}

.session-desc {
	max-width: 70ch;
	font-size: 0.95rem;
	color: var(--pf-body-light);
}

.desc-toggle { color: var(--pf-primary); }

/* Plenaries keep a quiet highlight, in the platform's own tint */
.session[data-type="plenary"] { background: #fff; border-left: 0; }
.session[data-type="plenary"] .session-body { background: var(--pf-primary-tint); }

/* ---- Tags → the platform's neutral topic pills ---------------------------- */
.session .session-tags {
	gap: 0.5rem;
	margin: 1rem 0 0;
}

.session .session-tags .tag {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--pf-gray-400);
	border-radius: 999px;
	background: #fff;
	color: var(--pf-body);
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
}

/* ---- Speaker chips (same shape, sizes and avatar palette as the platform) - */
.session-speakers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
}

/* Grows to fill the row (two-up in the embed's column, three-up when wider),
   which lands close to the platform's ~300px chip width. */
.speaker-chip {
	display: flex;
	align-items: center;
	flex: 1 1 calc(33.333% - 0.5rem);
	min-width: 250px;
	max-width: calc(50% - 0.375rem);
	border-radius: 36px;
	background: var(--pf-gray-100);
}

.speaker-avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	color: #fff;
	font-size: 16px;
}

.speaker-avatar.c-0 { background-color: #97c8e8; }
.speaker-avatar.c-1 { background-color: #ecb3ff; }
.speaker-avatar.c-2 { background-color: #adaccb; }
.speaker-avatar.c-3 { background-color: #80cc9c; }
.speaker-avatar.c-4 { background-color: #f5989f; }
.speaker-avatar.c-5 { background-color: #c6c6c6; }
.speaker-avatar.c-6 { background-color: #a2b0ba; }
.speaker-avatar.c-7 { background-color: #90abd3; }
.speaker-avatar.c-8 { background-color: #cab3e2; }
.speaker-avatar.c-9 { background-color: #a7d7f2; }

.speaker-avatar.has-photo { overflow: hidden; background: var(--pf-gray-200); }

.speaker-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.speaker-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	max-height: 70px;
	margin-left: 10px;
	padding-right: 1rem;
}

.speaker-name,
.speaker-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.speaker-name { -webkit-line-clamp: 1; font-weight: 700; color: var(--pf-body); }
.speaker-title { -webkit-line-clamp: 2; color: var(--pf-body-light); }

/* ---- Filter sidebar: checkbox lists, as on the platform -------------------- */
.agenda-filters {
	border: 1px solid var(--pf-gray-200);
	border-radius: 8px;
	background: #fff;
}

.filter-search input {
	border: 1px solid var(--pf-gray-400);
	border-radius: 999px;
	font-size: 0.9rem;
}

.filter-label {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pf-body);
}

.filter-clear { color: var(--pf-primary); }

/* Beside the agenda (wider than 640px) each filter is a checkbox row, so long
   track names wrap neatly instead of turning into tall pills. */
@media (min-width: 641px) {
	.agenda-sidebar .filter-chips { gap: 0.1rem; }

	.agenda-sidebar .chip {
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		width: 100%;
		padding: 0.35rem 0.4rem;
		border: 0;
		border-radius: 6px;
		background: none;
		color: var(--pf-body);
		font-size: 0.9rem;
		font-weight: 400;
		line-height: 1.3;
		text-align: left;
	}

	.agenda-sidebar .chip::before {
		content: "";
		flex: none;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		margin-top: 1px;
		border: 1.5px solid var(--pf-gray-400);
		border-radius: 4px;
		background: #fff center / 10px no-repeat;
	}

	.agenda-sidebar .chip:hover { background: #f3f5f6; }
	.agenda-sidebar .chip:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 1px; }

	.agenda-sidebar .chip.is-active {
		background: none;
		color: var(--pf-body);
		font-weight: 700;
	}

	.agenda-sidebar .chip.is-active::before {
		border-color: var(--pf-primary);
		background-color: var(--pf-primary);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

/* The narrow (180px) sidebar between 641px and 900px */
@media (min-width: 641px) and (max-width: 900px) {
	.filter-search input { font-size: 0.85rem; padding-left: 32px; padding-right: 10px; }
	.agenda-sidebar .chip { font-size: 0.82rem; }
}

/* On phones the filters sit above the agenda as compact pills */
@media (max-width: 640px) {
	.chip {
		border: 1px solid var(--pf-gray-400);
		background: #fff;
		color: var(--pf-body);
		font-weight: 400;
	}

	.chip:hover { border-color: var(--pf-gray-400); background: #f3f5f6; }

	.chip.is-active {
		border-color: var(--pf-primary);
		background: var(--pf-primary-tint);
		color: var(--pf-primary);
		font-weight: 700;
	}
}

/* ---- Mobile: the platform drops the time gutter below 768px -------------- */
@media (max-width: 768px) {
	.session-time,
	.day-heading-gutter { display: none; }

	.day-heading { height: 32px; background: var(--pf-gray-100); }
	.day-heading h2 { padding-left: 15px; font-size: 0.9rem; }

	.session-body { padding: 0.75rem; }
	.session-body h3 { font-size: 1.1rem; }
	.session-range { font-size: 0.8rem; }

	.day-tab .day-date { font-size: 1.1rem; }
	.speaker-chip { flex-basis: 100%; max-width: 100%; }
	.pf-bucket { font-size: 1.1rem; }
}

@media (max-width: 576px) {
	.day-tabs { gap: 0.25rem; }
	.day-tab { padding: 0.3rem 0.5rem; }
	.day-tab .day-date { font-size: 0.85rem; }
	.pf-bucket { font-size: 0.9rem; }
	.pf-bucket-count { font-size: 0.8rem; }
}