/**
 * WoollyTrees — Ratios view styles.
 *
 * Unlike the treemap, this drops into an arbitrary WordPress post inside
 * whatever theme is active, so it deliberately has no colour system of its
 * own: text inherits the surrounding colour, and structural lines are
 * mixed from currentColor at low opacity so they hold up on any light or
 * dark theme without a separate light/dark toggle. The only explicit
 * colours are the ratio chips and legend swatches, set inline per-cell
 * from the chart's chosen diverging palette.
 */

.arboreal-ratios {
	margin: 1.5em 0;
	font-size: 0.92em;
}

.arboreal-ratios__title {
	margin: 0 0 0.6em;
	font-size: 1.15em;
	font-weight: 600;
}

.arboreal-ratios__table-wrap {
	overflow-x: auto;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 4px;
}

.arboreal-ratios__table {
	border-collapse: collapse;
	width: 100%;
}

.arboreal-ratios__table th,
.arboreal-ratios__table td {
	padding: 0.55em 0.75em;
	text-align: left;
	white-space: nowrap;
}

.arboreal-ratios__table th.num,
.arboreal-ratios__table td.num {
	text-align: right;
}

.arboreal-ratios__table thead th {
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	cursor: pointer;
	user-select: none;
}

.arboreal-ratios__table thead th:hover,
.arboreal-ratios__table thead th:focus-visible {
	opacity: 1;
}

.arboreal-ratios__table thead th:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.arboreal-ratios__table thead th.is-active {
	opacity: 1;
	font-weight: 700;
}

.arboreal-ratios__caret {
	display: inline-block;
	width: 0.7em;
}

.arboreal-ratios__table thead th.is-active .arboreal-ratios__caret::after {
	content: "\25BE";
}

.arboreal-ratios__table thead th.is-active.is-desc .arboreal-ratios__caret::after {
	content: "\25B4";
}

.arboreal-ratios__table tbody tr {
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.arboreal-ratios__table tbody tr:last-child {
	border-bottom: none;
}

.arboreal-ratios__item {
	font-weight: 500;
}

.arboreal-ratios__tag {
	display: inline-block;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.65;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 2px;
	padding: 0.05em 0.4em;
}

.arboreal-ratios__chip {
	display: inline-block;
	min-width: 2.6em;
	padding: 0.15em 0.55em;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.arboreal-ratios__dash {
	opacity: 0.4;
}

.arboreal-ratios__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 1.1em;
	margin-top: 0.85em;
	font-size: 0.82em;
	opacity: 0.85;
}

.arboreal-ratios__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

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

.arboreal-ratios__legend-note {
	flex-basis: 100%;
	opacity: 0.75;
}

@media (min-width: 700px) {
	.arboreal-ratios__legend-note {
		flex-basis: auto;
	}
}