/* Dark FAQ — scoped to .dfaq so it never leaks into the theme. */

.dfaq {
	--dfaq-accent: #7c9cff;
	--dfaq-bg: #0f1117;
	--dfaq-surface: #171a23;
	--dfaq-surface-2: #1e2230;
	--dfaq-border: #2a2f3d;
	--dfaq-text: #e6e8ee;
	--dfaq-muted: #9aa1b2;
	--dfaq-radius: 12px;

	background: var(--dfaq-bg);
	color: var(--dfaq-text);
	border-radius: calc(var(--dfaq-radius) + 4px);
	padding: clamp(16px, 3vw, 32px);
	font-size: 16px;
	line-height: 1.6;
	color-scheme: dark;
	box-sizing: border-box;
}
.dfaq *, .dfaq *::before, .dfaq *::after { box-sizing: border-box; }

/* "Follow device" mode: light palette when the visitor prefers light. */
@media (prefers-color-scheme: light) {
	.dfaq[data-theme="auto"] {
		--dfaq-bg: #f6f7fb;
		--dfaq-surface: #ffffff;
		--dfaq-surface-2: #eef0f6;
		--dfaq-border: #dde1ea;
		--dfaq-text: #1b1f2a;
		--dfaq-muted: #5b6375;
		color-scheme: light;
	}
}

.dfaq-title {
	margin: 0 0 16px;
	color: var(--dfaq-text);
	font-size: 1.6em;
	line-height: 1.25;
}

/* Search */
.dfaq-search {
	position: relative;
	margin-bottom: 14px;
}
.dfaq-search svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--dfaq-muted);
	pointer-events: none;
}
.dfaq .dfaq-search-input {
	width: 100%;
	margin: 0;
	padding: 12px 14px 12px 42px;
	background: var(--dfaq-surface);
	color: var(--dfaq-text);
	border: 1px solid var(--dfaq-border);
	border-radius: var(--dfaq-radius);
	font: inherit;
	box-shadow: none;
}
.dfaq .dfaq-search-input::placeholder { color: var(--dfaq-muted); opacity: 1; }
.dfaq .dfaq-search-input:focus {
	outline: none;
	border-color: var(--dfaq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dfaq-accent) 30%, transparent);
}

/* Category chips */
.dfaq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.dfaq .dfaq-chip {
	margin: 0;
	padding: 6px 14px;
	background: var(--dfaq-surface);
	color: var(--dfaq-muted);
	border: 1px solid var(--dfaq-border);
	border-radius: 999px;
	font: inherit;
	font-size: 0.85em;
	line-height: 1.4;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.dfaq .dfaq-chip:hover { color: var(--dfaq-text); border-color: var(--dfaq-muted); }
.dfaq .dfaq-chip.is-active {
	background: color-mix(in srgb, var(--dfaq-accent) 18%, var(--dfaq-surface));
	border-color: var(--dfaq-accent);
	color: var(--dfaq-text);
}
.dfaq .dfaq-chip:focus-visible { outline: 2px solid var(--dfaq-accent); outline-offset: 2px; }

.dfaq-count {
	margin: 0 0 12px;
	color: var(--dfaq-muted);
	font-size: 0.85em;
	min-height: 1.4em;
}

/* Accordion */
.dfaq-list { display: flex; flex-direction: column; gap: 10px; }

.dfaq-item {
	background: var(--dfaq-surface);
	border: 1px solid var(--dfaq-border);
	border-radius: var(--dfaq-radius);
	overflow: hidden;
	transition: border-color .15s;
}
.dfaq-item.is-open { border-color: color-mix(in srgb, var(--dfaq-accent) 55%, var(--dfaq-border)); }

.dfaq .dfaq-q { margin: 0; padding: 0; font-size: 1em; line-height: inherit; }
.dfaq .dfaq-q button {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	color: var(--dfaq-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	overflow-wrap: anywhere;
}
.dfaq .dfaq-q button:hover { background: var(--dfaq-surface-2); }
.dfaq .dfaq-q button:focus-visible { outline: 2px solid var(--dfaq-accent); outline-offset: -2px; }
.dfaq-q-text { flex: 1; }

.dfaq-icon {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dfaq-surface-2);
}
.dfaq-icon::before, .dfaq-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 2px;
	background: var(--dfaq-accent);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .2s;
}
.dfaq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.dfaq-item.is-open .dfaq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.dfaq-a { padding: 0 18px 18px; color: var(--dfaq-text); }
.dfaq-a-inner { overflow-wrap: anywhere; }
.dfaq-a-inner > :first-child { margin-top: 0; }
.dfaq-a-inner > :last-child { margin-bottom: 0; }
.dfaq-a-inner p { margin: 0 0 0.8em; }
.dfaq-a-inner a { color: var(--dfaq-accent); text-decoration: underline; text-underline-offset: 2px; }
.dfaq-a-inner strong, .dfaq-a-inner b { color: var(--dfaq-text); }
.dfaq-a-inner img { max-width: 100%; height: auto; border-radius: 8px; }
.dfaq-a-inner table { width: 100%; border-collapse: collapse; }
.dfaq-a-inner th, .dfaq-a-inner td { border: 1px solid var(--dfaq-border); padding: 6px 8px; }
.dfaq-a-inner code, .dfaq-a-inner pre { background: var(--dfaq-surface-2); border-radius: 6px; }

.dfaq-meta { margin: 12px 0 0; color: var(--dfaq-muted); font-size: 0.8em; }

/* Views + likes */
.dfaq-foot {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	margin-top: 16px; padding-top: 12px;
	border-top: 1px solid var(--dfaq-border);
	color: var(--dfaq-muted); font-size: 0.85em;
}
.dfaq-views { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.dfaq-like-wrap { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.dfaq .dfaq-like {
	display: inline-flex; align-items: center; gap: 7px;
	margin: 0; padding: 6px 14px 6px 11px;
	background: var(--dfaq-surface-2); color: var(--dfaq-text);
	border: 1px solid var(--dfaq-border); border-radius: 999px;
	font: inherit; font-size: 1em; line-height: 1.2; font-variant-numeric: tabular-nums;
	cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.dfaq .dfaq-like:hover { border-color: var(--dfaq-accent); }
.dfaq .dfaq-like:focus-visible { outline: 2px solid var(--dfaq-accent); outline-offset: 2px; }
.dfaq .dfaq-like[disabled] { cursor: progress; }
.dfaq-like .dfaq-thumb { fill: none; transition: fill .15s; }
.dfaq .dfaq-like.is-liked {
	background: color-mix(in srgb, var(--dfaq-accent) 22%, var(--dfaq-surface));
	border-color: var(--dfaq-accent); color: var(--dfaq-text);
}
.dfaq-like.is-liked .dfaq-thumb { fill: var(--dfaq-accent); stroke: var(--dfaq-accent); }
.dfaq-like.pop svg { animation: dfaq-pop .35s ease-out; }
@keyframes dfaq-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-12deg); } 100% { transform: scale(1); } }

.dfaq mark.dfaq-hl {
	background: color-mix(in srgb, var(--dfaq-accent) 35%, transparent);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
}

.dfaq-none, .dfaq-empty { color: var(--dfaq-muted); text-align: center; margin: 20px 0 0; }

/* "New" dot: glowing red, removed automatically after the days set on the FAQ */
.dfaq-new-dot {
	position: relative;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff2d3d;
	box-shadow: 0 0 6px 1px rgba(255, 45, 61, .85), 0 0 14px 4px rgba(255, 45, 61, .45);
	animation: dfaq-glow 1.8s ease-in-out infinite;
}
.dfaq-new-dot.is-chip { display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 1px; }
.dfaq-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dfaq-item.is-new { border-color: rgba(255, 45, 61, .35); }
@keyframes dfaq-glow {
	0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 45, 61, .8), 0 0 10px 2px rgba(255, 45, 61, .35); opacity: .85; }
	50%      { box-shadow: 0 0 8px 2px rgba(255, 45, 61, 1),  0 0 20px 7px rgba(255, 45, 61, .5);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.dfaq-new-dot { animation: none; }
	.dfaq-like.pop svg { animation: none; }
	.dfaq * { transition: none !important; }
}