/* Conference schedule.
 *
 * The day tabs are the CWD theme's own "content-tabs" component, so the theme
 * owns all of their markup, behaviour and appearance. Nothing here restyles a
 * tab, a tablist or a panel: that is deliberate, and re-adding it would make
 * this schedule look unlike every other set of tabs on the site.
 *
 * What is left is the parts the theme has no opinion about: the time column,
 * the de-emphasised break rows, the talks nested in a session cell, and the
 * poster listings. Colour is decorative throughout and never the only cue; a
 * break row still says "Break" (WCAG 1.4.1). */

/* Line the time up with the top of its session.
 *
 * `vertical-align: middle` is the browser default for a table cell, which is
 * fine for short rows and badly wrong for long ones: a session with ten talks
 * nested under it is over 1200px tall on a phone, and a centred time label ends
 * up nearly 600px below the session it labels. */
.cwd-schedule table td,
.cwd-schedule table th {
	vertical-align: top;
}

/* Time reads as one phrase down the narrow first column: "2:45 PM / to 4:45 PM". */
.cwd-schedule-time {
	white-space: nowrap;
}

.cwd-schedule-time .time-start {
	display: block;
	font-weight: 700;
}

.cwd-schedule-time .time-end {
	display: block;
	font-size: 0.88em;
	color: #4a4a4a;
}

/* Breaks and lunch de-emphasised. The theme sets td backgrounds at one class of
 * specificity, so this is qualified enough to win regardless of load order
 * without resorting to !important. */
.cwd-schedule table tbody tr.is-interval td {
	background: #f2f2f2;
	font-style: italic;
	color: #4a4a4a;
}

/* Keep the session title readable as the widest column, but only once there is
 * room for it. On a phone, a 16em minimum plus the time column overflows the
 * viewport and forces the table to scroll sideways, which is exactly what the
 * per-day tabs exist to avoid. */
@media (min-width: 40em) {
	.cwd-schedule td:last-child {
		min-width: 16em;
	}
}

/* Talks nested inside their session's title cell. No bullets and no rule: the
 * indent alone separates them from the session title above. */
.cwd-schedule .cwd-schedule-items {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0 0 0 0.9em;
}

.cwd-schedule .cwd-schedule-items li + li {
	margin-top: 0.5em;
}

.cwd-schedule .cwd-schedule-items .item-title {
	display: block;
	font-size: 0.95em;
	line-height: 1.35;
}

.cwd-schedule .cwd-schedule-items .item-meta {
	display: block;
	font-size: 0.85em;
	line-height: 1.35;
	color: #4a4a4a;
}

/* Speaker and room, under the session title. A line each rather than extra
 * table columns, which would not fit a phone. */
.cwd-schedule .cwd-schedule-session-meta {
	display: block;
	margin-top: 0.2em;
	font-size: 0.9em;
	color: #4a4a4a;
}

/* Poster sessions hold too many items to list in a table cell, so the schedule
 * shows a count and the titles live on their own page. */
.cwd-schedule .cwd-schedule-poster-count {
	display: block;
	margin-top: 0.35em;
	font-size: 0.9em;
}

/* Poster page. Two columns once there is room, since the entries are short and
 * a single column of sixty titles is a long scroll. */
.cwd-posters-session {
	margin-bottom: 2.5em;
}

/* The reception's own name, under the day heading that labels the tab. */
.cwd-posters-session-name {
	margin: 0;
	font-weight: 700;
}

.cwd-posters-when {
	margin: 0.2em 0 1em;
	font-style: italic;
	color: #4a4a4a;
}

.cwd-posters-list {
	margin: 0;
	padding-left: 1.4em;
}

.cwd-posters-list li {
	margin-bottom: 0.9em;
	break-inside: avoid;
}

/* Non-numeric assigned poster numbers ("A12"). Numeric ones set the <li>
   value instead, so the list's own marker carries them. */
.cwd-posters-list .item-number {
	font-weight: 700;
	margin-right: 0.4em;
}

.cwd-posters-list .item-title {
	display: block;
	line-height: 1.35;
}

.cwd-posters-list .item-meta {
	display: block;
	font-size: 0.88em;
	line-height: 1.35;
	color: #4a4a4a;
}

@media (min-width: 48em) {
	.cwd-posters-list {
		column-count: 2;
		column-gap: 2.5em;
	}

	/* An expanded abstract is far taller than a title, which makes balanced
	 * columns jump around as entries open. One column when abstracts are on. */
	.cwd-posters-list.has-abstracts {
		column-count: 1;
	}
}

/* Collapsible abstracts. Written once for both places they appear: under a
 * poster on the poster page, and under a talk or a keynote in the schedule.
 * They looked like two different controls when the schedule ones were added,
 * because this block was scoped to the poster list alone. */
.cwd-schedule .item-abstract,
.cwd-posters-list .item-abstract {
	margin-top: 0.4em;
	font-size: 0.9em;
}

.cwd-schedule .item-abstract summary,
.cwd-posters-list .item-abstract summary {
	cursor: pointer;
	color: #00468b;
	width: max-content;
}

.cwd-schedule .item-abstract summary:hover,
.cwd-schedule .item-abstract summary:focus-visible,
.cwd-posters-list .item-abstract summary:hover,
.cwd-posters-list .item-abstract summary:focus-visible {
	text-decoration: underline;
}

.cwd-schedule .item-abstract p,
.cwd-posters-list .item-abstract p {
	margin: 0.5em 0 0;
	max-width: 44em;
	line-height: 1.5;
}

/* Abstracts are collapsed for screen reading, but a printed programme should
 * carry the text rather than a row of empty "Abstract" toggles. */
@media print {
	.cwd-schedule .item-abstract summary,
	.cwd-posters-list .item-abstract summary {
		display: none;
	}

	.cwd-schedule .item-abstract > *,
	.cwd-posters-list .item-abstract > * {
		display: block !important;
	}
}

/* Day tabs span the full width of the container, divided evenly.
 *
 * Layout only. The theme still supplies the buttons' colour, type, padding and
 * selected state; nothing here touches how a tab looks, only how wide it is.
 *
 * Done with flex rather than a percentage so the split follows the number of
 * days by itself: three tabs take a third each on the schedule, two take half
 * each on the poster page, and a fourth day would need no change here.
 *
 * Scoped to our own wrappers with the child combinator, so other sets of tabs
 * elsewhere on the site keep the theme's default inline-block behaviour. */
.cwd-schedule > .tabs-nav,
.cwd-posters > .tabs-nav {
	display: flex;

	/* The theme spaces buttons with a 5px right margin. That margin is zeroed
	 * below, since a trailing one on the last tab would stop the strip reaching
	 * the container edge, so the same 5px comes back as a gap instead. */
	gap: 5px;
}

.cwd-schedule > .tabs-nav > a,
.cwd-schedule > .tabs-nav > button,
.cwd-posters > .tabs-nav > a,
.cwd-posters > .tabs-nav > button {
	/* Equal shares of the row, from a zero basis, so a long label like
	 * "Saturday" cannot claim more width than a short one like "Friday". */
	flex: 1 1 0;
	margin-right: 0;
	margin-bottom: 0;
}

/* On a narrow phone three tabs plus the theme's 20px side padding leave too
 * little room for the longest day name. Trimming the padding keeps each label
 * on one line; the tabs stay full width either way. */
@media (max-width: 30em) {
	.cwd-schedule > .tabs-nav > a,
	.cwd-schedule > .tabs-nav > button,
	.cwd-posters > .tabs-nav > a,
	.cwd-posters > .tabs-nav > button {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* Print.
 *
 * Not styling so much as correctness: the theme hides unselected panels with an
 * inline style, so a printed programme would otherwise carry whichever single
 * day happened to be open. ISMP print a paper schedule, so all three days have
 * to be on the page. */
@media print {
	.tabs-nav {
		display: none;
	}

	.cwd-schedule .content-tabs > li,
	.cwd-posters .content-tabs > li {
		display: block !important;
		float: none;
		break-before: page;
	}

	.cwd-schedule .content-tabs > li:first-of-type,
	.cwd-posters .content-tabs > li:first-of-type {
		break-before: auto;
	}

	.cwd-schedule tr {
		break-inside: avoid;
	}
}