/**
 * AI 數位健檢樣式。色彩一律走 --jm-* token（定義在子主題的 tokens.css）。
 *
 * 這個區塊會出現在兩種底色上：/ai-audit/ 頁是白底，首頁的 Section 06 是
 * Cobalt 底。所以問卷本身用白卡，不假設外層底色。
 */

.jm-audit-form {
	background: var(--jm-surface, #FFFFFF);
	border: 1px solid var(--jm-line, #DEDED8);
	border-radius: var(--jm-radius, 20px);
	padding: 32px;
}

.jm-audit__questions {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: jm-q;
}

.jm-audit__q { margin-bottom: 28px; }
.jm-audit__q:last-child { margin-bottom: 0; }

.jm-audit__q fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.jm-audit__q legend {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 12px;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.jm-audit__num {
	font-size: var(--jm-fs-xs, 12px);
	font-weight: 800;
	color: var(--jm-muted, #686864);
	letter-spacing: .1em;
}

.jm-audit__opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--jm-line, #DEDED8);
	border-radius: 12px;
	margin-bottom: 8px;
	cursor: pointer;
	font-size: var(--jm-fs-sm, 14px);
	transition: border-color .15s ease, background .15s ease;
}
.jm-audit__opt:hover { border-color: var(--jm-accent, #2B4FFF); }
.jm-audit__opt:has( input:checked ) {
	border-color: var(--jm-accent, #2B4FFF);
	background: rgba( 43, 79, 255, .05 );
}
.jm-audit__opt input { margin-top: 3px; accent-color: var(--jm-accent, #2B4FFF); }

.jm-audit__progress {
	font-size: var(--jm-fs-sm, 14px);
	color: var(--jm-muted, #686864);
	margin: 24px 0 12px;
}

.jm-audit__go {
	background: var(--jm-accent, #2B4FFF);
	color: #fff;
	border: 1px solid var(--jm-accent, #2B4FFF);
	border-radius: 999px;
	padding: 14px 26px;
	font-weight: 750;
	font-size: var(--jm-fs-sm, 14px);
	cursor: pointer;
	font-family: inherit;
	transition: background .2s ease, transform .2s ease;
}
.jm-audit__go:hover:not( :disabled ) {
	background: var(--jm-accent-hover, #1E3FE0);
	transform: translateY( -2px );
}
.jm-audit__go:disabled { opacity: .4; cursor: not-allowed; }

/* ── 結果：記分卡 ──────────────────────────────────────────────── */
.jm-score {
	background: var(--jm-ink, #111111);
	color: #fff;
	border-radius: 24px;
	padding: 32px;
	margin-top: 32px;
}
.jm-score[hidden] { display: none; }

.jm-score__head { border-bottom: 1px solid #444; padding-bottom: 18px; margin-bottom: 18px; }
.jm-score__head .jm-kicker { color: var(--jm-muted-dark, #9A9A94); margin-bottom: 4px; }

.jm-score__big {
	font-size: 74px;
	font-weight: 850;
	letter-spacing: -.08em;
	line-height: 1;
}

.jm-score__band {
	font-size: var(--jm-fs-md, 19px);
	font-weight: 700;
	margin: 6px 0 0;
}

.jm-score__summary {
	color: var(--jm-muted-dark, #9A9A94);
	font-size: var(--jm-fs-sm, 14px);
	margin: 0 0 24px;
}

/* 分數條。填充用亮的那一階 accent：Cobalt 在深色軌道上只有 1.99:1，
   使用者看不出填了多少。 */
.jm-bar {
	display: grid;
	grid-template-columns: 110px 1fr 34px;
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	font-size: var(--jm-fs-xs, 12px);
}
.jm-bar__label { color: var(--jm-muted-dark, #9A9A94); }
.jm-bar__track {
	height: 6px;
	background: var(--jm-track, #1E1E1C);
	border-radius: 99px;
	overflow: hidden;
}
.jm-bar__fill {
	height: 100%;
	background: var(--jm-accent-bright, #5B7CFF);
	transition: width .6s cubic-bezier( .2, .8, .2, 1 );
}
.jm-bar__value { text-align: right; font-weight: 700; }

@media ( prefers-reduced-motion: reduce ) {
	.jm-bar__fill { transition: none; }
}

.jm-score__gaps { margin-top: 28px; border-top: 1px solid #444; padding-top: 22px; }
/* Blocksy 的標題色是 color4 #111111，在深色卡上等於隱形。
   深色容器內的標題一律繼承容器的前景色。 */
.jm-score :is( h1, h2, h3, h4, h5, h6 ) { color: inherit; }
.jm-score__gaps h3 { font-size: var(--jm-fs-md, 19px); margin: 0 0 14px; }
.jm-score__gaps ol { margin: 0; padding-left: 20px; }
.jm-score__gaps li { margin-bottom: 12px; font-size: var(--jm-fs-sm, 14px); }
.jm-score__gaps .jm-mute { color: var(--jm-muted-dark, #9A9A94); }

.jm-score__disclaimer {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid #444;
	font-size: var(--jm-fs-xs, 12px);
	color: var(--jm-muted-dark, #9A9A94);
}

.jm-audit-form--placeholder { color: var(--jm-muted, #686864); }

@media ( max-width: 560px ) {
	.jm-audit-form { padding: 22px; }
	.jm-score      { padding: 24px; }
	.jm-score__big { font-size: 60px; }
	.jm-bar        { grid-template-columns: 92px 1fr 30px; gap: 8px; }
}