/**
 * Shared behaviors runtime CSS, registered once as the `lumitra-behaviors`
 * handle (behaviors spec section 2). Panels is the first consumer; the
 * collapse trick and the transition vocabulary here are THE shared
 * primitives every later behavior (overlay, variants) reuses. Static plugin
 * CSS: distinct from the generated per-post artifacts.
 *
 * House rule: cosmetic base rules sit in :where() (specificity 0) so
 * per-instance engine rules and theme CSS always win; functional rules
 * (collapse state machine, no-JS fallbacks, reduced motion) keep real
 * specificity because they must beat UA/base styles.
 */

/* Transition vocabulary tokens (behaviors spec 2.2). */
:root {
	--lumitra-dur-fast: 150ms;
	--lumitra-dur: 250ms;
	--lumitra-dur-slow: 400ms;
	--lumitra-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--lumitra-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--lumitra-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * The height-auto collapse trick (behaviors spec 2.1): THE canonical
 * open/close animation. The render plan wraps collapsible pane children in
 * .lumitra-collapse__inner server-side.
 */
.lumitra-collapse {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lumitra-dur, 250ms) var(--lumitra-ease, ease);
}

.lumitra-collapse > .lumitra-collapse__inner {
	overflow: hidden;
	min-height: 0;
}

.lumitra-collapse.is-open {
	grid-template-rows: 1fr;
}

/* Fade vocabulary entry (shared enum: none | fade | collapse). */
.lumitra-anim-fade.is-open {
	animation: lumitra-fade-in var(--lumitra-dur, 250ms) var(--lumitra-ease, ease);
}

@keyframes lumitra-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Panels: unopinionated structural bases (design systems style on top). */
:where(.lumitra-panels__tablist) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
}

:where(.lumitra-panels__tablist[aria-orientation='vertical']) {
	flex-direction: column;
}

:where(.lumitra-panels__tab) {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:where(.lumitra-panels__heading) {
	margin: 0;
	font-size: inherit;
}

:where(.lumitra-panels__trigger) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	padding: 0.5em 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

:where(.lumitra-panels__marker)::before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--lumitra-dur, 250ms) var(--lumitra-ease, ease);
}

:where(.lumitra-panels__trigger[aria-expanded='true'] .lumitra-panels__marker)::before {
	transform: rotate(225deg);
}

/*
 * No-JS degradation (behaviors spec 1.3: panels degrade to all-panels-
 * visible stacked content). Scoped to `scripting: none` instead of the
 * spec's bare :not(.lumitra-hydrated) guard so JS-enabled visitors never see
 * an all-panels flash between SSR and module hydration; `data-wp-init`
 * still adds .lumitra-hydrated as the hydration marker for tests/tooling.
 * Panels are frames, hence display:flex when force-shown.
 */
@media (scripting: none) {
	.lumitra-panels:not(.lumitra-hydrated) > .lumitra-panels__tablist {
		display: none;
	}

	.lumitra-panels:not(.lumitra-hydrated) > .lumitra-panels__panel[hidden] {
		display: flex;
	}

	.lumitra-panels:not(.lumitra-hydrated) .lumitra-panels__region[hidden] {
		display: block;
		content-visibility: visible;
	}

	.lumitra-panels:not(.lumitra-hydrated) .lumitra-collapse {
		grid-template-rows: 1fr;
	}
}

/*
 * Reduced motion (behaviors spec 2.3): 1ms, NOT 0, so transitionend /
 * animationend still fire and the accordion seal state machine never hangs.
 */
@media (prefers-reduced-motion: reduce) {
	.lumitra-collapse,
	[class*='lumitra-anim-'] {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}