.fubar-display {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	font-size: 0.9em;
}

.fubar-display__heading {
	margin: 0 0 0.4em;
}

.fubar-display__heading--sub {
	margin-top: 0.75em;
}

.fubar-display__empty {
	opacity: 0.7;
}

.fubar-display__exhibition-name {
	font-weight: normal;
	opacity: 0.85;
}

.fubar-display__exhibition-name[data-exhibition-id] {
	cursor: pointer;
}

.fubar-display__piece--none {
	opacity: 0.7;
}

.fubar-display__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.fubar-display__table th,
.fubar-display__table td {
	text-align: left;
	padding: 0.25em 0.5em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: break-word;
}

.fubar-display__table th {
	font-weight: bold;
}

.fubar-display__year,
.fubar-display__time,
.fubar-display__plays {
	white-space: nowrap;
}

.fubar-display__current-plays th:nth-child(3),
.fubar-display__current-plays td.fubar-display__time {
	padding-right: 0.15em;
}

.fubar-display__current-plays th:nth-child(4),
.fubar-display__current-plays td.fubar-display__position {
	padding-left: 0.15em;
}

.fubar-display__play[data-piece-id] {
	cursor: pointer;
}

/*
 * "Hacky terminal" stats bar above the live-polled current-plays table
 * (see fubar-display.js) -- deliberately styled distinctly from the
 * theme-neutral table above/below it, reusing the plugin's existing
 * accent purple (#e2acff, same as the modal border/artist text) rather
 * than a generic green-terminal palette.
 */
.fubar-display__terminal-bar {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.85em;
	color: #e2acff;
	background: #000;
	padding: 0.5em 0.8em;
	margin-bottom: 0.6em;
	border: 1px solid #e2acff;
}

.fubar-display__terminal-spinner {
	display: inline-block;
	min-width: 1ch;
}

.fubar-display__terminal-exhibition-name,
.fubar-display__terminal-exhibition-name:link,
.fubar-display__terminal-exhibition-name:visited,
.fubar-display__terminal-exhibition-name:hover,
.fubar-display__terminal-exhibition-name:active {
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

.fubar-display__terminal-past-link,
.fubar-display__terminal-past-link:link,
.fubar-display__terminal-past-link:visited,
.fubar-display__terminal-past-link:hover,
.fubar-display__terminal-past-link:active {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

@keyframes fubar-display-row-in {
	from {
		opacity: 0;
		transform: translateY(-0.4em);
		background-color: rgba(226, 172, 255, 0.35);
	}
	60% {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		background-color: transparent;
	}
}

.fubar-display__play--new {
	animation: fubar-display-row-in 900ms ease-out;
}

/*
 * Unlike the rest of this file (deliberately theme-neutral so the
 * embedding page owns the look), the modal is new interactive UI with no
 * existing theme hook. The outer .fubar-display__modal is just an
 * invisible positioning/centering pane (no fill of its own) so the rest
 * of the page stays visible around it -- the visible "card" is
 * .fubar-display__modal-inner, sized to match the theme's own content
 * box (.content-container in the fubar theme's main.css) and bordered
 * in the theme's accent color, with the thumbnail floated left of the
 * text and a close icon (same 24x25 white SVG glyph as the theme's
 * .lb-close) positioned absolutely at the card's top-right corner.
 */
.fubar-display__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 4vh 4vw;
}

.fubar-display__modal[hidden] {
	display: none;
}

.fubar-display__modal-inner {
	position: relative;
	width: 53vw;
	height: 80vh;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.95em;
	line-height: 1.5;
	text-align: left;
	background: #000;
	border: 2px solid #e2acff;
	padding: 2em;
}

.fubar-display__modal-body {
	height: 100%;
	overflow-y: auto;
}

.fubar-display__modal-body::after {
	content: "";
	display: block;
	clear: both;
}

.fubar-display__modal-close {
	position: absolute;
	top: 1em;
	right: 1em;
	z-index: 1;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fubar-display__modal-close img {
	display: block;
	width: 20px;
	height: auto;
}

.fubar-display__modal-thumb {
	float: left;
	max-width: 120px;
	max-height: 68px;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #111;
	margin: 0 0.5em 0.2em 0;
}

.fubar-display__modal-title,
.fubar-display__modal-artist,
.fubar-display__modal-year,
.fubar-display__modal-description,
.fubar-display__modal-bio-heading,
.fubar-display__modal-bio {
	margin: 0 0 0.6em;
}

.fubar-display__modal-title {
	font-weight: bold;
	font-size: 1.2em;
}

.fubar-display__modal-artist {
	color: #e2acff;
}

.fubar-display__modal-artist a {
	color: inherit;
}

.fubar-display__modal-year {
	opacity: 0.7;
}

.fubar-display__modal-bio-heading {
	font-weight: bold;
	opacity: 0.85;
	margin-top: 1em;
}

.fubar-display__modal-bio {
	opacity: 0.85;
}

.fubar-display__modal-meta {
	opacity: 0.7;
}

.fubar-display__modal-back {
	display: inline-block;
	margin-bottom: 0.6em;
	color: #e2acff;
	text-decoration: underline;
	cursor: pointer;
}

/* The default table border (rgba(0,0,0,0.1), set above for the
   theme-neutral page tables) is invisible against the modal's black
   background -- the exhibition-detail piece list reuses .fubar-display__table
   verbatim, so it needs a lighter border scoped to the modal instead of a
   whole new table variant. */
.fubar-display__modal-body .fubar-display__table th,
.fubar-display__modal-body .fubar-display__table td {
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* The modal defaults to white text (.fubar-display__modal-inner), but the
   exhibition-detail piece list should read like the live current-plays
   table on the page, which is purple (#e2acff, set by the theme's
   .content-container) -- not the modal's own white. */
.fubar-display__exhibition-pieces {
	color: #e2acff;
}

/* Matches the theme's own .content-container breakpoint (main.css),
   which switches from 53vw to 90% width at 768px. */
@media (max-width: 768px) {
	.fubar-display__modal-inner {
		width: 90vw;
		padding: 1.5em;
	}
}

@media (max-width: 640px) {
	.fubar-display__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.fubar-display__table,
	.fubar-display__table tbody,
	.fubar-display__table tr,
	.fubar-display__table td {
		display: block;
		width: 100%;
	}

	.fubar-display__table tr {
		margin-bottom: 0.4em;
		padding-bottom: 0.2em;
		border-bottom: 2px solid rgba(0, 0, 0, 0.15);
	}

	.fubar-display__table tr:last-child {
		margin-bottom: 0;
	}

	.fubar-display__table td {
		padding: 0.1em 0;
		border-bottom: none;
	}

	.fubar-display__table td::before {
		content: attr(data-label) ": ";
		font-weight: bold;
		opacity: 0.7;
	}
}