/*
 * 「あなたのPC」の質問（template-parts/distro/pc-questions.php）。詳細ページと一覧で共通。
 * 色はサイトの図鑑の色（インク・オレンジ）。親に --dx-* / --dz-* が無くても読めるように既定値を持つ。
 */

.pcq {
	--pcq-ink: #1d1813;
	--pcq-ground: #fff4e1;
	--pcq-surface: #fff;
	--pcq-line: #d8cebb;
	--pcq-muted: #6f6052;
	--pcq-accent: #ff5b00;
	display: grid;
	gap: 16px;
	margin-top: 18px;
}
.pcq[hidden] {
	display: none !important;
}
.pcq fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.pcq-q[hidden] {
	display: none !important;
}
.pcq-q legend {
	margin-bottom: 8px;
	padding: 0;
	font-weight: 800;
	color: var(--pcq-ink);
}
.pcq-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pcq-opts label {
	position: relative;
	cursor: pointer;
}
.pcq-opts input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.pcq-opts span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border: 2px solid var(--pcq-line);
	border-radius: 999px;
	background: var(--pcq-surface);
	color: var(--pcq-ink);
	font-size: 14px;
	font-weight: 700;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pcq-opts label:hover span {
	border-color: var(--pcq-ink);
}
.pcq-opts input:checked + span {
	border-color: var(--pcq-ink);
	background: var(--pcq-ink);
	color: var(--pcq-ground);
}
.pcq-opts input:focus-visible + span {
	outline: 3px solid var(--pcq-accent);
	outline-offset: 2px;
}
.pcq-opts input:disabled + span {
	opacity: 0.4;
	cursor: not-allowed;
}
.pcq-hint {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--pcq-muted);
}
@media (prefers-reduced-motion: reduce) {
	.pcq-opts span {
		transition: none;
	}
}