/**
 * WoollyTrees — front-end chart styles.
 *
 * The chart is one or more tab panels inside a <figure>, each holding an
 * aspect-ratio canvas of absolutely-positioned rectangles. Geometry arrives
 * as inline percentages from the PHP layout; each rectangle's fill
 * (--arboreal-c) and label colour (--arboreal-t) come from one scoped
 * per-item style rule, and the border width/colour (--arboreal-bw,
 * --arboreal-bc) are set inline on the figure. Every rectangle is a size
 * query container, so labels the server rendered still hide themselves when
 * a narrow viewport makes their rectangle too small. Without JavaScript
 * every panel is visible under its own heading and the tab bar stays
 * hidden.
 */

.arboreal-treemap {
	position: relative;
	margin: 1.5em auto;
	/* Claim full available width explicitly: in shrink-to-fit contexts
	   (flex/centred theme layouts) an empty-looking chart's intrinsic width
	   is zero. The inline max-width still caps the figure. */
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.arboreal-treemap__panel {
	position: relative;
}

/* -------------------------------------------------------------------------
   Tabs.
   ------------------------------------------------------------------------- */

.arboreal-treemap__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}

.arboreal-treemap__tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 4px 10px;
	margin: 0;
	font: inherit;
	font-size: 0.9em;
	color: inherit;
	opacity: 0.65;
	cursor: pointer;
}

.arboreal-treemap__tab.is-selected {
	border-bottom-color: currentColor;
	opacity: 1;
	font-weight: 600;
}

.arboreal-treemap__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Headings label each panel in the no-JS stacked view; the script hides
   them once the tab bar takes over. */
.arboreal-treemap__tab-heading {
	margin: 0 0 8px;
	font-size: 0.95em;
}

.arboreal-treemap--tabbed .arboreal-treemap__tab-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Canvas and rectangles.
   ------------------------------------------------------------------------- */

.arboreal-treemap__map {
	position: relative;
	width: 100%;
	/* aspect-ratio is set inline by the renderer. */
}

.arboreal-treemap__rect {
	position: absolute;
	box-sizing: border-box;
	background: var(--arboreal-c, #B0B0B5);
	border: var(--arboreal-bw, 1px) solid var(--arboreal-bc, #FFFFFF);
	overflow: hidden;
	container-type: size;
	transition: opacity 0.25s ease;
}

.arboreal-treemap__rect--link {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Labels. The server only renders a label when the item's share clears the
   chart's thresholds; the container queries below are the responsive
   backstop — a rectangle that shrinks under a usable size on a narrow
   viewport drops its value line, then the whole label. Browsers without
   container queries simply keep the labels, clipped by overflow: hidden.
   ------------------------------------------------------------------------- */

.arboreal-treemap__label {
	display: block;
	padding: 0.35em 0.5em;
	color: var(--arboreal-t, rgba(255, 255, 255, 0.92));
	font-size: 0.78em;
	line-height: 1.3;
	overflow: hidden;
}

.arboreal-treemap__label-name {
	display: block;
	font-weight: 600;
}

.arboreal-treemap__label-value {
	display: block;
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
}

@container (width < 88px) {
	.arboreal-treemap__label-value {
		display: none;
	}
}

@container (width < 52px) or (height < 30px) {
	.arboreal-treemap__label {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Fade-in animation.

   The hidden state is applied by JS (panel --armed) only when animation is
   enabled and the visitor does not prefer reduced motion, so the chart is
   always fully visible without JS. JS removes both classes once the fill
   finishes so the per-rectangle transition-delay never leaks into hover
   and highlight effects. Runs on scroll into view and again on tab switch.
   ------------------------------------------------------------------------- */

.arboreal-treemap__panel--armed .arboreal-treemap__rect {
	opacity: 0;
	transition: opacity 0.3s ease;
	/* Per-rectangle transition-delay is set inline by the script
	   (largest-first, matching DOM order). */
}

.arboreal-treemap__panel--filled .arboreal-treemap__rect {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Item / category highlight and isolate (legend hover/click, rect hover).
   ------------------------------------------------------------------------- */

.arboreal-treemap--focus .arboreal-treemap__rect {
	opacity: 0.22;
}

.arboreal-treemap--focus .arboreal-treemap__rect.is-active {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Legend.
   ------------------------------------------------------------------------- */

.arboreal-treemap__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin-top: 12px;
	font-size: 0.85em;
	line-height: 1.4;
}

.arboreal-treemap__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 2px 4px;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	border-radius: 3px;
}

.arboreal-treemap__key:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.arboreal-treemap__key.is-locked .arboreal-treemap__key-label {
	font-weight: 700;
	text-decoration: underline;
}

.arboreal-treemap__swatch {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	flex-shrink: 0;
	border-radius: 2px;
}

.arboreal-treemap__key-value {
	opacity: 0.7;
}

.arboreal-treemap__key-link {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Tooltip (created by JS, positioned relative to the panel).
   ------------------------------------------------------------------------- */

.arboreal-tooltip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 8px));
	background: #1d2327;
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.8rem;
	line-height: 1.5;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 10;
}

.arboreal-tooltip.is-visible {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Reduced motion: no transitions at all; highlight states still apply.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.arboreal-treemap__rect,
	.arboreal-tooltip {
		transition: none;
	}
}