/**
 * WoollyTrees — shared fullscreen viewer, used by both the treemap and
 * the Ratios table. A new UI surface for this plugin — there's no
 * modal/overlay pattern anywhere else in it. 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.
 */

.arboreal-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, .arboreal-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 .arboreal-fullscreen-btn {
	display: none;
}

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

.arboreal-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);
}

.arboreal-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) {
	.arboreal-fullscreen-content {
		background: #1e1e1e;
		color: #f2f2f2;
		color-scheme: dark;
	}
}

.arboreal-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;
}

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

/* Locks background scroll while the overlay is open. */
html.arboreal-fullscreen-lock,
html.arboreal-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. */
.arboreal-treemap.is-fullscreen,
.arboreal-ratios.is-fullscreen {
	width: min(90vw, 1400px);
}