/**
 * oollyWaffles: front-end chart styles.
 *
 * The chart is one or more tab panels inside a <figure>, each holding a CSS
 * grid of square cells. Column count and gap arrive as CSS custom properties
 * set inline by the renderer (--waffly-cols, --waffly-gap); each cell's
 * colour (--waffly-c) comes from one scoped per-item style rule, and the
 * fill-animation stagger is an inline transition-delay set by the script.
 * Without JavaScript every panel is visible under its own heading, the tab
 * bar stays hidden, and the resolution slider doesn't exist.
 */

.waffly-waffle {
	position: relative;
	margin: 1.5em auto;
	/* Claim full available width explicitly: the grid's cells are empty, so
	   in shrink-to-fit contexts (flex/centred theme layouts) the chart's
	   intrinsic width is zero and every cell collapses to 0×0. The inline
	   max-width still caps the figure. */
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.waffly-waffle__panel {
	position: relative;
}

/* -------------------------------------------------------------------------
   Head: optional title, fullscreen button.
   ------------------------------------------------------------------------- */

.waffly-waffle__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 0.6em;
}

.waffly-waffle__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 600;
}

.waffly-waffle__head .waffly-fullscreen-btn {
	margin-left: auto;
}

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

.waffly-waffle__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}

.waffly-waffle__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;
}

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

.waffly-waffle__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. */
.waffly-waffle__tab-heading {
	margin: 0 0 8px;
	font-size: 0.95em;
}

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

/* -------------------------------------------------------------------------
   Grid and cells.
   ------------------------------------------------------------------------- */

.waffly-waffle__grid {
	display: grid;
	grid-template-columns: repeat(var(--waffly-cols, 10), 1fr);
	gap: var(--waffly-gap, 3px);
	width: 100%;
}

/* Last-resort guard: if a theme still manages to zero the grid's width,
   keep the cells findable rather than letting the chart vanish. */
.waffly-waffle__cell {
	min-width: 1px;
	min-height: 1px;
}

.waffly-waffle__cell {
	background: var(--waffly-c, #B0B0B5);
	aspect-ratio: 1 / 1;
	border-radius: var(--waffly-radius, 18%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.waffly-waffle--square  { --waffly-radius: 0; }
.waffly-waffle--rounded { --waffly-radius: 18%; }
.waffly-waffle--circle  { --waffly-radius: 50%; }

/* Colour set inline on the figure from the chart's cell_border_colour
   setting (waffly_border_colour()); the class only exists so 'none' can
   skip the shadow-inset box-sizing entirely. */
.waffly-waffle--bordered .waffly-waffle__cell {
	box-shadow: inset 0 0 0 1px var(--waffly-border-colour, transparent);
}

/* Item separation: sides facing a different item (wfo-* classes computed
   by the renderer) inset the cell's paint via padding + background-clip,
   so the between-item channel reads wider than the within-item gap:
   separation by whitespace (Gestalt proximity), with no drawn outline and
   no added ink. Perimeter cells stay flush, so blocks that wrap rows run
   to the edge and continue naturally. */

.waffly-waffle--outlined .waffly-waffle__cell {
	box-sizing: border-box;
	background-clip: content-box;
}

.waffly-waffle--outlined .wfo-t {
	padding-top: var(--waffly-sep, 2px);
}

.waffly-waffle--outlined .wfo-r {
	padding-right: var(--waffly-sep, 2px);
}

.waffly-waffle--outlined .wfo-b {
	padding-bottom: var(--waffly-sep, 2px);
}

.waffly-waffle--outlined .wfo-l {
	padding-left: var(--waffly-sep, 2px);
}

.waffly-waffle__cell--link {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Fill 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-cell transition-delay never leaks into hover and
   highlight effects. Runs on scroll into view and again on tab switch.
   ------------------------------------------------------------------------- */

.waffly-waffle__panel--armed .waffly-waffle__cell {
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.3s ease, transform 0.3s ease;
	/* Per-cell transition-delay is set inline by the script (fill order). */
}

.waffly-waffle__panel--filled .waffly-waffle__cell {
	opacity: 1;
	transform: none;
}

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

.waffly-waffle--focus .waffly-waffle__cell {
	opacity: 0.22;
}

.waffly-waffle--focus .waffly-waffle__cell.is-active {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Visitor resolution slider (created by JS when resize is enabled; sits
   between the grid and the legend of the active panel).
   ------------------------------------------------------------------------- */

.waffly-waffle__resize {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 0.8em;
	opacity: 0.85;
}

.waffly-waffle__resize label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
}

.waffly-waffle__resize input[type="range"] {
	flex: 1 1 auto;
	max-width: 260px;
}

.waffly-waffle__resize output {
	min-width: 4.5em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

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

.waffly-waffle__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;
}

.waffly-waffle__key:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.waffly-waffle__key.is-locked .waffly-waffle__key-label {
	font-weight: 700;
	text-decoration: underline;
}

.waffly-waffle__swatch {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	flex-shrink: 0;
	border-radius: var(--waffly-radius, 18%);
}

.waffly-waffle__key-value {
	opacity: 0.7;
}

.waffly-waffle__key-link {
	text-decoration: none;
}

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

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

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

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

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