/**
 * WoollyWaffles — shared fullscreen viewer, used by both the waffle chart
 * and the Ratios table. Unlike the chart CSS files, which deliberately
 * never assume a background since they sit inline in whatever theme is
 * active, this one picks its own light/dark presentation on purpose: the
 * chart is lifted clean out of the page (dimmed to near-invisible behind
 * the backdrop) rather than trying to keep looking like part of it, so
 * there's nothing left to match.
 */

.waffly-fullscreen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.3em;
	margin: 0;
	background: none;
	border: none;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
}

/* The expand glyph is only ever for entering fullscreen -- once inside
   it, .waffly-fullscreen-close ("x") is the only way back out, so the
   trigger has no reason to still be visible (it moves along with the
   rest of the chart, since the whole element is relocated rather than
   cloned). */
.is-fullscreen .waffly-fullscreen-btn {
	display: none;
}

.waffly-fullscreen-btn:hover,
.waffly-fullscreen-btn:focus-visible {
	opacity: 1;
}

.waffly-fullscreen-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(0, 0, 0, 0.85);
}

.waffly-fullscreen-content {
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	padding: 2em;
	border-radius: 6px;
	background: #fff;
	color: #1a1a1a;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	.waffly-fullscreen-content {
		background: #1e1e1e;
		color: #f2f2f2;
		color-scheme: dark;
	}
}

.waffly-fullscreen-close {
	position: fixed;
	top: 2vh;
	right: 2vw;
	z-index: 100001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}

.waffly-fullscreen-close:hover,
.waffly-fullscreen-close:focus-visible {
	background: rgba(255, 255, 255, 0.25);
}

/* Locks background scroll while the overlay is open. */
html.waffly-fullscreen-lock,
html.waffly-fullscreen-lock body {
	overflow: hidden;
}

/* max_width exists to keep a chart from overwhelming a normal post
   column -- exactly what fullscreen is for undoing, so it's cleared
   (restored on close) by the JS rather than fought with !important
   here. Only the natural "how wide should this get" default needs
   setting via CSS. */
.waffly-waffle.is-fullscreen,
.waffly-ratios.is-fullscreen {
	width: min(90vw, 1400px);
}