/* 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;
	/* Contains the floated floor plan, so it cannot spill past its own session
	   and land beside the next day's listings. */
	display: flow-root;
}

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

/* Where the session is held. The schedule's room line is scoped to
   .cwd-schedule and does not reach this page, so it gets its own rule rather
   than borrowing that class. Upright rather than italic: the time above it is
   context, but this is the line a presenter is scanning for. */
.cwd-posters-where {
	margin: 0 0 1em;
	color: #4a4a4a;
}

/* The time line carries the gap down to the poster list. When a room follows
   it, the room carries that gap instead, so the two sit together as one block.
   Where :has() is unsupported the pair is merely a little further apart. */
.cwd-posters-when:has(+ .cwd-posters-where) {
	margin-bottom: 0.2em;
}

/* The poster session floor plan, deliberately small.
 *
 * A plan dense enough to find your own board by is unreadable at any size that
 * fits comfortably on a page, so this does not try: it is a thumbnail that
 * shows which room the plan is of and invites the reader to open it. Everyone
 * opens the full size version, on a phone and on a desktop alike, so the
 * preview is an affordance rather than a copy of the information.
 *
 * The source is still the 768-wide image, so the thumbnail stays sharp on a
 * high-density screen. */
/* The column holding a session's floor plans, one per room.
 *
 * Full width by default. A 320px column beside the listings needs a page wide
 * enough for both, and on a phone that split leaves a cramped strip of map
 * beside a cramped strip of titles. Wide enough, and it floats instead, so the
 * listings begin at the top of the page rather than below a picture most
 * readers open once.
 *
 * 48em is the width the listings themselves already split into two columns at,
 * and the theme's own breakpoint throughout. */
.cwd-posters-maps {
	margin: 0 0 1.5em;
}

@media (min-width: 48em) {
	.cwd-posters-maps {
		/* The float is on this column rather than on each plan, so a session
		   running in two rooms stacks them here instead of setting two floats
		   side by side and squeezing the listings into what is left. */
		float: right;
		width: 320px;
		max-width: 45%;
		margin: 0 0 1em 1.5em;
	}
}

.cwd-posters-map {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	/* The theme gives every figure a faint grey ground. Left flush it looks
	   like a rendering artefact under the image, so it gets padding and
	   becomes a frame around the thumbnail and its link. */
	padding: 0.5em;
}

.cwd-posters-map + .cwd-posters-map {
	margin-top: 1em;
}

/* Names the room, and only appears when a day has more than one. */
.cwd-posters-map figcaption {
	margin-top: 0.4em;
	font-size: 0.85em;
	text-align: center;
}

/* Positioning context for the badge that sits over the image. */
.cwd-posters-map-thumb {
	display: block;
	position: relative;
}

/* Every map fills the same 4:3 tile. The registered image size already crops to
   this shape, so these two lines normally change nothing: they are here so an
   image uploaded before that size existed, and therefore served at its own
   proportions, still cannot make one day's tile taller than another's. */
.cwd-posters-map img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid #d5d5d5;
	background: #fff;
}

/* The interactive floor plan, previewed as a live scaled-down copy of itself.
 *
 * There is no picture to make a thumbnail from, and asking for a screenshot
 * alongside the file would leave two things to keep in step. So the tile shows
 * the page itself, laid out at its natural width and scaled down to fit.
 *
 * The scale is the tile's width over that natural width, which container query
 * units express exactly and follow at every size, with no script and no value
 * to keep in sync. Anything without cqw support keeps the plain scale below,
 * which is correct at the full 320px tile and merely approximate under it. */
.cwd-posters-map-frame {
	--cwd-map-width: 1180px;

	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid #d5d5d5;
	background: #fff;
	container-type: inline-size;
}

.cwd-posters-map-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--cwd-map-width);
	/* 4:3 of the laid-out width, so the scaled copy fills the tile exactly. */
	height: calc( var(--cwd-map-width) * 3 / 4 );
	border: 0;
	transform: scale( 0.271 );
	transform-origin: 0 0;
	/* A picture of a page, not a page. Every control inside belongs to the copy
	   that opens in the dialog, where there is room to use it. */
	pointer-events: none;
}

@supports ( width: 1cqw ) {
	.cwd-posters-map-frame iframe {
		transform: scale( calc( 100cqw / var(--cwd-map-width) ) );
	}
}

/* Names the thumbnail and marks it as something to open, over the image itself
   rather than as a line of text above it. The magnifier is the theme's own
   FontAwesome, the same way cwd_wp.css draws its icons.
 *
 * On the contrast: white on 60% black is worst when the photograph behind it is
 * pure white, which composites to #666 and gives 5.7:1. That clears AA for
 * normal text at this size whatever map is uploaded, so the reading stays
 * legible without having to vet each image. */
.cwd-posters-map-badge {
	position: absolute;
	left: 1px;
	bottom: 1px;
	right: 1px;
	padding: 1em 0.6em;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
}

.cwd-posters-map-icon::before {
	content: "\f00e";
	font-family: "FontAwesome";
	font-weight: 400;
	margin-right: 0.45em;
}

/* The image lifts slightly on hover or keyboard focus, so the whole tile reads
   as one control rather than a picture with a link under it. */
.cwd-posters-map a:hover .cwd-posters-map-badge,
.cwd-posters-map a:focus .cwd-posters-map-badge {
	background: rgba(0, 0, 0, 0.85);
}


.cwd-posters-list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.cwd-posters-list li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.9em;
	break-inside: avoid;
}

/* The board number, hung in the margin where the list marker used to be. It is
   real text rather than a marker, so it matches the floor plan even after the
   listing is copied into a document or printed. */
.cwd-posters-list .item-number {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 400;
	line-height: 1.35;
}

.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,
.cwd-posters-directions 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,
.cwd-posters-directions summary:hover,
.cwd-posters-directions summary:focus-visible {
	text-decoration: underline;
}

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

/* Walking directions to the poster session's building, sitting between the room
   name and the first poster. Styled as the abstracts are, so the page has one
   kind of "there is more here" control rather than two that behave alike but
   look different.
   
   The one difference is the marker. An abstract keeps the browser's disclosure
   triangle; this is a place, so it gets a pin. Font Awesome 4.7.0's fa-map-marker,
   the same font already used for the floor plan badge above. */
.cwd-posters-directions {
	margin: 0.4em 0 1.2em;
	font-size: 0.9em;
}

.cwd-posters-directions summary {
	list-style: none;
}

/* Safari still needs its own pseudo-element suppressed, or the triangle sits
   alongside the pin. */
.cwd-posters-directions summary::-webkit-details-marker {
	display: none;
}

.cwd-posters-directions-icon::before {
	content: "\f041";
	font-family: "FontAwesome";
	font-weight: 400;
	margin-right: 0.45em;
}

/* The steps and the two lines under them share one left edge, so the opened
   block reads as a single indented aside rather than a list with two stray
   paragraphs beside it. The list's numbers hang in that same padding. */
.cwd-posters-directions ol,
.cwd-posters-directions p {
	padding-left: 2.2em;
}

.cwd-posters-directions ol {
	margin: 0.5em 0 0;
	max-width: 44em;
	line-height: 1.5;
}

.cwd-posters-directions ol li {
	margin-bottom: 0.25em;
}

/* 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 > *,
	.cwd-posters-directions > * {
		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;
	}
}