/**
 * OSHIDA — accordion.
 *
 * @figma 2014:2632  panel — veil rgba(0,0,0,.32), r=30
 * @figma 2014:2633  head  — 24px / 900 / -0.01em, line-height 1.324
 * @figma 2014:2634  body  — 19px / 200 / -0.01em, line-height 2.3
 *
 * Native <details>, so the content is reachable with JavaScript off. Do not add
 * a rule here that hides the panel when it is closed — the element already
 * does that, and re-implementing it in CSS is how a no-JS accordion breaks.
 *
 * NOT in the shared layer — routes add it themselves.
 *
 * Owner: work package B1.
 */

.o-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-xs);
}

.o-accordion__item {
	padding: var(--o-space-md);
	border-radius: var(--o-radius-lg);
	background-color: var(--o-veil-panel);
}

.o-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-space-md);
	border-radius: var(--o-radius-xs);
}

.o-accordion__title {
	margin: 0;
	font-size: var(--o-fs-h4);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-micro);
}

/* A plus that becomes a minus. Two bars, no glyph asset needed. */
.o-accordion__marker {
	position: relative;
	flex: none;
	inline-size: 20px;
	block-size: 20px;
}

.o-accordion__marker::before,
.o-accordion__marker::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 16px;
	block-size: 2px;
	translate: -50% -50%;
	background-color: var(--o-gold);
}

.o-accordion__marker::after {
	rotate: 90deg;
}

[open] > .o-accordion__summary .o-accordion__marker::after {
	rotate: 0deg;
	opacity: 0;
}

.o-accordion__panel {
	margin-block-start: var(--o-space-2xs);
	font-size: var(--o-fs-body);
	font-weight: var(--o-fw-extralight);
	line-height: var(--o-lh-loose);
	letter-spacing: var(--o-track-micro);
}

@media (prefers-reduced-motion: no-preference) {
	.o-accordion__marker::after {
		transition:
			rotate var(--o-dur-base) var(--o-ease-standard),
			opacity var(--o-dur-fast) var(--o-ease-standard);
	}
}

@media (max-width: 599px) {
	.o-accordion__item {
		padding: var(--o-space-xs);
	}
}