/**
 * FAQ — split / centered families + accordion width / tone.
 * Companion to app.css; input.css is root-owned on this host.
 * Split never paints two accordion columns.
 */
.tw-faq-split,
.tw-faq-split__copy,
.tw-faq-split__panel,
.tw-faq-centered,
.tw-faq-centered__panel {
	min-width: 0;
}

.tw-faq-split,
.tw-faq-centered {
	gap: var(--tw-intro-panel-gap, calc(var(--tw-content-gap, 1rem) * 2));
}

.tw-faq-split {
	display: flex;
	flex-direction: column;
}

.tw-faq-centered {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.tw-faq-centered[data-tw-faq-width="sm"] {
	max-width: 42rem;
}

.tw-faq-centered[data-tw-faq-width="md"] {
	max-width: 48rem;
}

.tw-faq-centered[data-tw-faq-width="lg"] {
	max-width: 56rem;
}

.tw-faq-centered[data-tw-faq-width="full"] {
	max-width: none;
}

@media (max-width: 1023.98px) {
	[data-tw-faq-stack="above"] .tw-faq-split__panel {
		order: -1;
	}
}

@media (min-width: 1024px) {
	.tw-faq-split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.tw-faq-split[data-tw-faq-split-ratio="60_40"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.tw-faq-split[data-tw-faq-split-ratio="75_25"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

	.tw-faq-split[data-tw-faq-panel-side="start"][data-tw-faq-split-ratio="60_40"] {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.tw-faq-split[data-tw-faq-panel-side="start"][data-tw-faq-split-ratio="75_25"] {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}

	.tw-faq-split[data-tw-faq-panel-side="start"] .tw-faq-split__panel {
		order: -1;
	}
}

/* Accordion tone owns item fill. Light glow stays surface; dark uses body-text fill.
   Copy color is PHP (faq_accordion_text_tone) — do not force ink here. */
[data-tw-faq-tone="dark"][data-tw-faq-item-style="glow"] [data-faq-item],
[data-tw-faq-tone="dark"][data-tw-faq-item-style="classic"] [data-faq-item],
[data-tw-faq-tone="dark"][data-tw-faq-item-style="cards"] [data-faq-item],
[data-tw-faq-tone="dark"][data-tw-faq-item-style="compact"] [data-faq-item] {
	background-color: var(--tw-color-text, #0f172a);
}

[data-tw-faq-tone="light"][data-tw-faq-item-style="glow"] [data-faq-item],
[data-tw-faq-tone="light"][data-tw-faq-item-style="cards"] [data-faq-item] {
	background-color: var(--tw-color-surface, #fff);
}