/* Revolutionary Chat Bot, answers page.
 *
 * The list is plain HTML: native <details>/<summary>, no script. This file
 * only makes it readable.
 *
 * Color follows the theme rather than the plugin. When the theme runs a color
 * mode (html[data-color-mode], multipurpose-theme 1.48+ and other revdash
 * themes) it prints its palette as --dash-mode-* variables and every surface,
 * border and text color here is read from it, the same contract Revolutionary
 * Forms 0.9.0 follows. Without a color mode the fallbacks below apply, and a
 * site that sets its own --rcb-answers-* variables still wins, because they
 * are declared on the block, not on the element.
 *
 * Nothing here sets a brand color. The only accent is the theme's own link
 * color, so the list looks like the rest of the page in either mode.
 */

.rcb-answers {
	--rcb-answers-text: #1f2937;
	--rcb-answers-muted: #4b5563;
	--rcb-answers-border: #e5e7eb;
	--rcb-answers-surface: transparent;
	--rcb-answers-surface-hover: rgba(0, 0, 0, 0.03);
	--rcb-answers-link: #1d4ed8;
	--rcb-answers-focus: #1f2937;

	color: var(--rcb-answers-text);
	/* Match the active theme's body font via the suite font contract. */
	font-family: var(--rev-font, inherit);
}

html[data-color-mode] .rcb-answers {
	--rcb-answers-text: var(--dash-mode-text, #1f2937);
	--rcb-answers-muted: var(--dash-mode-muted, #4b5563);
	--rcb-answers-border: var(--dash-mode-border, #e5e7eb);
	--rcb-answers-surface: var(--dash-mode-surface, transparent);
	--rcb-answers-surface-hover: var(--dash-mode-surface-alt, rgba(0, 0, 0, 0.03));
	--rcb-answers-link: var(--dash-mode-link, var(--dash-mode-text, #1d4ed8));
	--rcb-answers-focus: var(--dash-mode-link, var(--dash-mode-text, #1f2937));
}

html[data-color-mode="dark"] .rcb-answers {
	--rcb-answers-text: var(--dash-mode-text, #f3f4f6);
	--rcb-answers-muted: var(--dash-mode-muted, #cbd5e1);
	--rcb-answers-border: var(--dash-mode-border, #374151);
	--rcb-answers-surface: var(--dash-mode-surface, transparent);
	--rcb-answers-surface-hover: var(--dash-mode-surface-alt, rgba(255, 255, 255, 0.04));
	--rcb-answers-link: var(--dash-mode-link, var(--dash-mode-text, #f3f4f6));
	--rcb-answers-focus: var(--dash-mode-link, var(--dash-mode-text, #f3f4f6));
}

.rcb-answers-intro {
	margin: 0 0 1.5em;
	color: var(--rcb-answers-muted);
}

.rcb-answers-group {
	margin: 0 0 2em;
}
.rcb-answers-group:last-child {
	margin-bottom: 0;
}
.rcb-answers-group-title {
	margin: 0 0 0.5em;
	color: var(--rcb-answers-text);
}

.rcb-answers-list {
	border-top: 1px solid var(--rcb-answers-border);
}

.rcb-answers-item {
	border-bottom: 1px solid var(--rcb-answers-border);
	background: var(--rcb-answers-surface);
}

/* The whole summary row is the control: a large target on a phone, and one
   stop in the keyboard order that <details> gives us for free. */
.rcb-answers-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	/* 44px minimum tap target, including the padding. */
	min-height: 44px;
	padding: 0.75em 0.25em;
	cursor: pointer;
	list-style: none;
}
.rcb-answers-summary::-webkit-details-marker {
	display: none;
}
.rcb-answers-summary:hover {
	background: var(--rcb-answers-surface-hover);
}
.rcb-answers-summary:focus-visible {
	outline: 2px solid var(--rcb-answers-focus);
	outline-offset: 2px;
}

.rcb-answers-question {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--rcb-answers-text);
}

/* A chevron drawn from the text color, so it is visible in either mode and
   carries no color of its own. */
.rcb-answers-marker {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.35em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform 150ms ease;
	opacity: 0.7;
}
.rcb-answers-item[open] > .rcb-answers-summary .rcb-answers-marker {
	transform: rotate(-135deg) translate(-0.1em, -0.1em);
}
@media (prefers-reduced-motion: reduce) {
	.rcb-answers-marker {
		transition: none;
	}
}

.rcb-answers-answer {
	padding: 0 0.25em 1.25em;
	color: var(--rcb-answers-text);
}
.rcb-answers-answer > :first-child {
	margin-top: 0;
}
.rcb-answers-answer a {
	color: var(--rcb-answers-link);
}

.rcb-answers-permalink {
	margin: 1em 0 0;
	font-size: 0.85em;
}
.rcb-answers-permalink a {
	color: var(--rcb-answers-muted);
	text-decoration: underline;
}
.rcb-answers-permalink a:hover,
.rcb-answers-permalink a:focus {
	color: var(--rcb-answers-link);
}

/* A followed per-answer link lands here. Browsers open a closed <details>
   when the fragment is inside it; this marks where the reader arrived. */
.rcb-answers-item:target > .rcb-answers-summary {
	background: var(--rcb-answers-surface-hover);
}

@media print {
	/* Print every answer, open or not. */
	.rcb-answers-item > .rcb-answers-answer {
		display: block;
	}
	.rcb-answers-marker,
	.rcb-answers-permalink {
		display: none;
	}
}