/* 建築師之路 — 線上練習題庫
   設計代幣沿用 case-study.css（.ar-cs 作用域），這裡只加練習專用的元件。 */

.ar-qz .ar-hero--tight {
	padding: 56px 0 44px;
}

.ar-qz-h {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.4;
	color: var(--ar-ink);
	margin: 56px 0 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ar-line);
}

.ar-qz-lead {
	font-size: 15px;
	color: var(--ar-ink-soft);
	line-height: 1.85;
	margin: 0 0 22px;
	max-width: 62ch;
}

.ar-qz-src {
	margin: 48px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ar-line-soft);
	font-size: 13px;
	line-height: 1.9;
	color: var(--ar-muted);
}

/* ---------- 模式卡 ---------- */

.ar-qz-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 44px 0 8px;
}

.ar-qz-mode {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 28px 26px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ar-qz-mode:hover,
.ar-qz-mode:focus-visible {
	border-color: var(--ar-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -22px rgba(22, 34, 62, .5);
}

.ar-qz-mode__k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .28em;
	color: var(--ar-muted);
}

.ar-qz-mode__t {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 22px;
	color: var(--ar-ink);
}

.ar-qz-mode__d {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ar-ink-soft);
}

.ar-qz-mode__go {
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ar-ink);
	border-bottom: 1px solid var(--ar-accent);
	align-self: flex-start;
	padding-bottom: 2px;
}

/* ---------- 年度格 ---------- */

.ar-qz-years {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 10px;
}

.ar-qz-year {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
	padding: 16px 8px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
	text-decoration: none;
	color: var(--ar-ink);
	transition: border-color .16s ease, background .16s ease;
}

.ar-qz-year:hover,
.ar-qz-year:focus-visible {
	border-color: var(--ar-accent);
	background: #FFFDF6;
}

.ar-qz-year__n {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 21px;
	font-variant-numeric: tabular-nums;
}

.ar-qz-year__u {
	font-size: 12px;
	color: var(--ar-muted);
}

.ar-qz-year--lock {
	background: var(--ar-cream);
	border-style: dashed;
	color: var(--ar-muted);
}

.ar-qz-year--lock .ar-qz-year__n {
	color: var(--ar-muted);
}

.ar-qz-year--lock::after {
	content: "需登入";
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var(--ar-muted);
	align-self: center;
	margin-left: 4px;
}

.ar-qz-gate {
	margin: 18px 0 0;
	padding: 16px 20px;
	background: var(--ar-cream);
	border-left: 3px solid var(--ar-accent);
	border-radius: 0 var(--ar-r-sm) var(--ar-r-sm) 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--ar-ink-soft);
}

/* ---------- 體系長條 ---------- */

.ar-qz-sys {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ar-qz-sysrow {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) 78px;
	align-items: center;
	gap: 14px;
	font-size: 14px;
}

.ar-qz-sysrow__nm {
	color: var(--ar-ink);
	font-weight: 500;
}

.ar-qz-sysrow__bar {
	position: relative;
	height: 12px;
	background: var(--ar-line-soft);
	border-radius: var(--ar-r-pill);
	overflow: hidden;
}

.ar-qz-sysrow__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: #C9D2E4;
	border-radius: var(--ar-r-pill);
}

.ar-qz-sysrow__fill--recent {
	background: var(--ar-accent);
}

.ar-qz-sysrow__n {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ar-ink-soft);
}

.ar-qz-sysrow__n small {
	color: var(--ar-muted);
	font-size: 12px;
}

/* ---------- 設定 ---------- */

.ar-qz-setup {
	max-width: 640px;
	margin: 40px 0 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.ar-qz-field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ar-qz-field__k {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--ar-muted);
}

.ar-qz-field__note {
	font-size: 13px;
	color: var(--ar-muted);
	line-height: 1.8;
}

.ar-qz-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ar-qz-segb {
	font-family: var(--ar-sans);
	font-size: 14.5px;
	padding: 10px 20px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-pill);
	color: var(--ar-ink-soft);
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.ar-qz-segb:hover:not(:disabled) {
	border-color: var(--ar-accent);
}

.ar-qz-segb.is-on {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
	font-weight: 700;
}

.ar-qz-segb.is-off,
.ar-qz-segb:disabled {
	opacity: .38;
	cursor: not-allowed;
}

/* ---------- 按鈕 ---------- */

.ar-qz-btn {
	display: inline-block;
	font-family: var(--ar-sans);
	font-size: 14.5px;
	font-weight: 500;
	padding: 12px 24px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-pill);
	color: var(--ar-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, opacity .16s ease;
}

.ar-qz-btn:hover:not(:disabled) {
	border-color: var(--ar-accent);
}

.ar-qz-btn:disabled {
	opacity: .5;
	cursor: default;
}

.ar-qz-btn--go {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
	font-weight: 700;
}

.ar-qz-btn--go:hover:not(:disabled) {
	background: #1E2E52;
	border-color: var(--ar-accent);
}

.ar-qz-btn--big {
	align-self: flex-start;
	padding: 15px 40px;
	font-size: 16px;
}

.ar-qz-btn--flag.is-on {
	border-color: var(--ar-accent);
	background: #FFFAEC;
	font-weight: 700;
}

.ar-qz-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 40px 0 0;
}

.ar-qz-err {
	color: #8C3B33;
	font-size: 14px;
	margin: 0;
}

.ar-qz-resume {
	margin: 32px 0 0;
	padding: 16px 20px;
	background: var(--ar-cream);
	border-left: 3px solid var(--ar-accent);
	border-radius: 0 var(--ar-r-sm) var(--ar-r-sm) 0;
	font-size: 14.5px;
	color: var(--ar-ink-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* ---------- 作答列 ---------- */

.ar-qz-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--ar-ink);
	color: #FFFFFF;
}

.ar-qz-bar__in {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 13px;
	padding-bottom: 13px;
	font-size: 14px;
}

.ar-qz-bar__pos b {
	font-family: var(--ar-serif);
	font-size: 19px;
	color: var(--ar-accent-bright);
	font-variant-numeric: tabular-nums;
}

.ar-qz-bar__done {
	color: rgba(255, 255, 255, .68);
}

.ar-qz-bar__done b {
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
}

.ar-qz-bar__clock {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .82);
}

.ar-qz-bar__exit {
	font-family: var(--ar-sans);
	font-size: 13px;
	padding: 7px 16px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: var(--ar-r-pill);
	color: #FFFFFF;
	cursor: pointer;
}

.ar-qz-bar__clock + .ar-qz-bar__exit {
	margin-left: 0;
}

.ar-qz-bar__in > .ar-qz-bar__exit:not(:last-child) {
	margin-left: auto;
}

.ar-qz-bar__in > .ar-qz-bar__done + .ar-qz-bar__exit {
	margin-left: auto;
}

.ar-qz-bar__exit:hover {
	border-color: var(--ar-accent);
}

/* ---------- 題卡 ---------- */

.ar-qz-stage {
	padding-top: 36px;
	padding-bottom: 72px;
}

.ar-qz-card {
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	padding: 32px 34px 30px;
}

.ar-qz-card__meta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--ar-muted);
	margin-bottom: 14px;
}

.ar-qz-card__stem {
	font-size: 18.5px;
	line-height: 1.95;
	color: var(--ar-ink);
	font-weight: 500;
	margin-bottom: 26px;
}

.ar-qz-opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ar-qz-opt {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	text-align: left;
	font-family: var(--ar-sans);
	font-size: 16px;
	line-height: 1.8;
	padding: 15px 20px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
	color: var(--ar-ink);
	cursor: pointer;
	transition: border-color .14s ease, background .14s ease;
}

.ar-qz-opt:hover {
	border-color: var(--ar-accent);
	background: #FFFDF6;
}

.ar-qz-opt__l {
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ar-line);
	border-radius: 50%;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ar-ink-soft);
}

.ar-qz-opt.is-pick {
	border-color: var(--ar-ink);
	background: #F6F7FA;
}

.ar-qz-opt.is-pick .ar-qz-opt__l {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
}

.ar-qz-opt.is-right {
	border-color: #2C6A4F;
	background: #F2F8F4;
}

.ar-qz-opt.is-right .ar-qz-opt__l {
	background: #2C6A4F;
	border-color: #2C6A4F;
	color: #FFFFFF;
}

.ar-qz-opt.is-wrong {
	border-color: #8C3B33;
	background: #FBF3F2;
}

.ar-qz-opt.is-wrong .ar-qz-opt__l {
	background: #8C3B33;
	border-color: #8C3B33;
	color: #FFFFFF;
}

/* ---------- 即時回饋 ---------- */

.ar-qz-fb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin-top: 22px;
	padding: 14px 18px;
	border-radius: var(--ar-r-sm);
	font-size: 14.5px;
}

.ar-qz-fb.is-ok {
	background: #F2F8F4;
	border-left: 3px solid #2C6A4F;
}

.ar-qz-fb.is-no {
	background: #FBF3F2;
	border-left: 3px solid #8C3B33;
}

.ar-qz-fb__k {
	font-weight: 700;
	color: var(--ar-ink);
}

.ar-qz-fb__a {
	font-weight: 700;
	color: var(--ar-ink);
}

.ar-qz-fb__s {
	color: var(--ar-ink-soft);
	font-size: 13.5px;
}

/* ---------- 導覽 ---------- */

.ar-qz-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
}

.ar-qz-nav .ar-qz-btn:last-child {
	margin-left: auto;
}

.ar-qz-gridwrap {
	margin: 40px 0 0;
	padding: 22px 24px 24px;
	background: var(--ar-cream);
	border-radius: var(--ar-r-md);
}

.ar-qz-gridk {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--ar-muted);
	margin-bottom: 14px;
}

.ar-qz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
	gap: 6px;
}

.ar-qz-g {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	font-family: var(--ar-sans);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
	color: var(--ar-muted);
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

.ar-qz-g:hover {
	border-color: var(--ar-accent);
}

.ar-qz-g.is-done {
	background: #E7EBF3;
	border-color: #CBD4E4;
	color: var(--ar-ink);
	font-weight: 700;
}

.ar-qz-g.is-flag {
	border-color: var(--ar-accent);
	border-width: 2px;
}

.ar-qz-g.is-now {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
	font-weight: 700;
}

.ar-qz-stage > .ar-qz-btn--big {
	margin-top: 32px;
}

/* ---------- 成績 ---------- */

.ar-qz-savetag {
	margin: 18px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .7);
}

.ar-qz-savetag a {
	color: var(--ar-accent-bright);
}

.ar-qz-ws {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ar-qz-w {
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
}

.ar-qz-w__s {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 14px;
	padding: 14px 18px;
	cursor: pointer;
	font-size: 14.5px;
	list-style: none;
}

.ar-qz-w__s::-webkit-details-marker {
	display: none;
}

.ar-qz-w__n {
	font-family: var(--ar-serif);
	font-weight: 700;
	color: var(--ar-muted);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
}

.ar-qz-w__t {
	color: var(--ar-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ar-qz-w[open] .ar-qz-w__t {
	white-space: normal;
	line-height: 1.8;
}

.ar-qz-w__k {
	font-size: 12.5px;
	color: var(--ar-muted);
	white-space: nowrap;
}

.ar-qz-w__b {
	padding: 4px 18px 18px;
	border-top: 1px solid var(--ar-line-soft);
}

.ar-qz-w__o {
	display: flex;
	gap: 12px;
	padding: 9px 12px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ar-ink-soft);
	border-radius: var(--ar-r-sm);
}

.ar-qz-w__o b {
	flex: none;
	color: var(--ar-muted);
}

.ar-qz-w__o.is-right {
	background: #F2F8F4;
	color: var(--ar-ink);
}

.ar-qz-w__o.is-right b {
	color: #2C6A4F;
}

.ar-qz-w__o.is-wrong {
	background: #FBF3F2;
}

.ar-qz-w__o.is-wrong b {
	color: #8C3B33;
}

.ar-qz-w__src {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ar-line-soft);
	font-size: 13px;
	color: var(--ar-muted);
}

/* ---------- 手機 ---------- */

@media (max-width: 720px) {
	.ar-qz-modes {
		grid-template-columns: minmax(0, 1fr);
	}

	.ar-qz-card {
		padding: 24px 20px 22px;
	}

	.ar-qz-card__stem {
		font-size: 17px;
	}

	.ar-qz-opt {
		font-size: 15.5px;
		padding: 13px 15px;
		gap: 11px;
	}

	.ar-qz-sysrow {
		grid-template-columns: 104px minmax(0, 1fr) 64px;
		gap: 10px;
		font-size: 13px;
	}

	.ar-qz-bar__in {
		gap: 12px;
		font-size: 13px;
	}

	.ar-qz-nav .ar-qz-btn {
		flex: 1;
		padding: 12px 10px;
		text-align: center;
	}

	.ar-qz-w__s {
		grid-template-columns: 52px minmax(0, 1fr);
		row-gap: 6px;
	}

	.ar-qz-w__k {
		grid-column: 2;
	}

	.ar-qz-grid {
		grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	}
}

/* ---------- 考科頁的練習入口 ---------- */

.ar-qz-banner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "k k" "t go" "d go";
	align-items: center;
	gap: 4px 24px;
	margin: 0 0 32px;
	padding: 24px 28px;
	background: linear-gradient(158deg, #1B2A4C 0%, #16223E 100%);
	border-radius: var(--ar-r-md);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ar-qz-banner:hover,
.ar-qz-banner:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -26px rgba(22, 34, 62, .85);
}

.ar-qz-banner__k {
	grid-area: k;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .32em;
	color: var(--ar-accent-bright);
	margin-bottom: 8px;
}

.ar-qz-banner__t {
	grid-area: t;
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	color: #FFFFFF;
}

.ar-qz-banner__d {
	grid-area: d;
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .68);
}

.ar-qz-banner__go {
	grid-area: go;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--ar-ink);
	background: var(--ar-accent);
	padding: 12px 24px;
	border-radius: var(--ar-r-pill);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.ar-qz-banner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "k" "t" "d" "go";
		gap: 6px;
		padding: 22px 20px;
	}

	.ar-qz-banner__go {
		margin-top: 12px;
		justify-self: start;
	}

	.ar-qz-banner__t {
		font-size: 18px;
	}
}
/* ---------- 蓋掉 Astra 的按鈕 hover ----------
   Astra 的 `button:hover, button:focus` 會把文字刷成白色、底色刷成橘色，
   而本頁的選項與導覽格都是 <button>，於是 hover 時變成白字白底看不見。
   下面每一個元件都把 color / background / border 三個值一起釘死，
   而且 hover 與狀態（已選、正解、答錯）要各自寫一條，否則後寫的 hover
   會蓋掉同權重的狀態色。 */

/* 選項 */

.ar-qz-opt:hover,
.ar-qz-opt:focus,
.ar-qz-opt:focus-visible,
.ar-qz-opt:active {
	color: var(--ar-ink);
	background-color: #FFF6DF;
	border-color: var(--ar-accent);
}

.ar-qz-opt:hover .ar-qz-opt__l,
.ar-qz-opt:focus-visible .ar-qz-opt__l {
	border-color: var(--ar-accent);
	color: var(--ar-ink);
}

.ar-qz-opt.is-pick:hover,
.ar-qz-opt.is-pick:focus,
.ar-qz-opt.is-pick:focus-visible {
	color: var(--ar-ink);
	background-color: #EDF0F7;
	border-color: var(--ar-ink);
}

.ar-qz-opt.is-pick:hover .ar-qz-opt__l,
.ar-qz-opt.is-pick:focus-visible .ar-qz-opt__l {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
}

.ar-qz-opt.is-right:hover,
.ar-qz-opt.is-right:focus,
.ar-qz-opt.is-right:focus-visible {
	color: var(--ar-ink);
	background-color: #E8F3EC;
	border-color: #2C6A4F;
}

.ar-qz-opt.is-right:hover .ar-qz-opt__l,
.ar-qz-opt.is-right:focus-visible .ar-qz-opt__l {
	background: #2C6A4F;
	border-color: #2C6A4F;
	color: #FFFFFF;
}

.ar-qz-opt.is-wrong:hover,
.ar-qz-opt.is-wrong:focus,
.ar-qz-opt.is-wrong:focus-visible {
	color: var(--ar-ink);
	background-color: #F7E9E7;
	border-color: #8C3B33;
}

.ar-qz-opt.is-wrong:hover .ar-qz-opt__l,
.ar-qz-opt.is-wrong:focus-visible .ar-qz-opt__l {
	background: #8C3B33;
	border-color: #8C3B33;
	color: #FFFFFF;
}

/* 一般按鈕 */

.ar-qz-btn:hover,
.ar-qz-btn:focus,
.ar-qz-btn:focus-visible,
.ar-qz-btn:active {
	color: var(--ar-ink);
	background-color: #FFF6DF;
	border-color: var(--ar-accent);
}

.ar-qz-btn:disabled,
.ar-qz-btn:disabled:hover {
	color: var(--ar-ink);
	background-color: var(--ar-surface);
	border-color: var(--ar-line);
}

.ar-qz-btn--go:hover,
.ar-qz-btn--go:focus,
.ar-qz-btn--go:focus-visible,
.ar-qz-btn--go:active {
	color: #FFFFFF;
	background-color: #1E2E52;
	border-color: var(--ar-accent);
}

.ar-qz-btn--go:disabled,
.ar-qz-btn--go:disabled:hover {
	color: #FFFFFF;
	background-color: var(--ar-ink);
	border-color: var(--ar-ink);
}

.ar-qz-btn--flag.is-on,
.ar-qz-btn--flag.is-on:hover,
.ar-qz-btn--flag.is-on:focus-visible {
	color: var(--ar-ink);
	background-color: #FFF6DF;
	border-color: var(--ar-accent);
}

/* 題數／判卷／計時的切換鈕 */

.ar-qz-segb:hover,
.ar-qz-segb:focus,
.ar-qz-segb:focus-visible,
.ar-qz-segb:active {
	color: var(--ar-ink);
	background-color: #FFF6DF;
	border-color: var(--ar-accent);
}

.ar-qz-segb.is-on,
.ar-qz-segb.is-on:hover,
.ar-qz-segb.is-on:focus,
.ar-qz-segb.is-on:focus-visible {
	color: #FFFFFF;
	background-color: var(--ar-ink);
	border-color: var(--ar-ink);
}

.ar-qz-segb:disabled,
.ar-qz-segb:disabled:hover,
.ar-qz-segb.is-off:hover {
	color: var(--ar-ink-soft);
	background-color: var(--ar-surface);
	border-color: var(--ar-line);
}

/* 題目導覽格 */

.ar-qz-g:hover,
.ar-qz-g:focus,
.ar-qz-g:focus-visible {
	color: var(--ar-ink);
	background-color: #FFF6DF;
	border-color: var(--ar-accent);
}

.ar-qz-g.is-done:hover,
.ar-qz-g.is-done:focus-visible {
	color: var(--ar-ink);
	background-color: #DDE4F0;
	border-color: var(--ar-accent);
}

.ar-qz-g.is-now,
.ar-qz-g.is-now:hover,
.ar-qz-g.is-now:focus,
.ar-qz-g.is-now:focus-visible {
	color: #FFFFFF;
	background-color: var(--ar-ink);
	border-color: var(--ar-ink);
}

/* 作答列的離開鈕（深底） */

.ar-qz-bar__exit:hover,
.ar-qz-bar__exit:focus,
.ar-qz-bar__exit:focus-visible,
.ar-qz-bar__exit:active {
	color: #FFFFFF;
	background-color: rgba(255, 255, 255, .12);
	border-color: var(--ar-accent);
}

/* 鍵盤焦點看得見 */

.ar-qz-opt:focus-visible,
.ar-qz-btn:focus-visible,
.ar-qz-segb:focus-visible,
.ar-qz-g:focus-visible,
.ar-qz-bar__exit:focus-visible,
.ar-qz-w__s:focus-visible {
	outline: 2px solid var(--ar-accent);
	outline-offset: 2px;
}

/* ================= 階段二：錯題複習、重點收藏、學習分析 ================= */

/* ---------- 進度條（練習首頁最上面） ---------- */

.ar-qz-progress {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	margin: 40px 0 0;
	padding: 22px 26px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.ar-qz-progress:hover,
.ar-qz-progress:focus-visible {
	border-color: var(--ar-accent);
	box-shadow: 0 14px 32px -24px rgba(22, 34, 62, .55);
}

.ar-qz-progress__ring {
	flex: none;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--ar-accent) calc(var(--p) * 1%), var(--ar-line-soft) 0);
}

.ar-qz-progress__ring::before {
	content: "";
	grid-area: 1 / 1;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--ar-surface);
}

.ar-qz-progress__pct {
	grid-area: 1 / 1;
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 20px;
	color: var(--ar-ink);
	font-variant-numeric: tabular-nums;
}

.ar-qz-progress__pct small {
	font-size: 11px;
	color: var(--ar-muted);
	margin-left: 1px;
}

.ar-qz-progress__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ar-qz-progress__t {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 18px;
	color: var(--ar-ink);
}

.ar-qz-progress__d {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ar-ink-soft);
}

.ar-qz-progress__go {
	flex: none;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ar-ink);
	border-bottom: 1px solid var(--ar-accent);
	padding-bottom: 2px;
	white-space: nowrap;
}

/* ---------- 模式卡的計數與淡化 ---------- */

.ar-qz-mode__t em {
	font-style: normal;
	font-family: var(--ar-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--ar-ink);
	background: var(--ar-accent);
	border-radius: var(--ar-r-pill);
	padding: 2px 11px;
	vertical-align: 3px;
}

.ar-qz-mode--quiet {
	background: var(--ar-cream);
	border-style: dashed;
}

.ar-qz-mode--quiet .ar-qz-mode__t,
.ar-qz-mode--quiet .ar-qz-mode__go {
	color: var(--ar-ink-soft);
}

/* ---------- 建議練哪裡 ---------- */

.ar-qz-recs {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--ar-line);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	overflow: hidden;
}

.ar-qz-rec {
	display: grid;
	grid-template-columns: 34px 148px minmax(0, 1fr);
	align-items: baseline;
	gap: 14px;
	padding: 18px 22px;
	background: var(--ar-surface);
}

.ar-qz-rec__n {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 19px;
	color: var(--ar-accent);
	font-variant-numeric: tabular-nums;
}

.ar-qz-rec__nm {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 17px;
	color: var(--ar-ink);
}

.ar-qz-rec__d {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ar-ink-soft);
}

/* ---------- 掌握度長條（做過但答錯的用淺色） ---------- */

.ar-qz-sysrow__fill--seen {
	background: #C9D2E4;
}

.ar-qz-sysrow__fill--ok {
	background: var(--ar-accent);
}

/* ---------- 練習紀錄 ---------- */

.ar-qz-log {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--ar-line);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-md);
	overflow: hidden;
}

.ar-qz-logrow {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) 70px 58px 60px;
	align-items: baseline;
	gap: 12px;
	padding: 13px 22px;
	background: var(--ar-surface);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.ar-qz-logrow__d {
	color: var(--ar-muted);
	font-size: 13px;
}

.ar-qz-logrow__s {
	color: var(--ar-ink);
	font-weight: 500;
}

.ar-qz-logrow__r,
.ar-qz-logrow__p,
.ar-qz-logrow__t {
	text-align: right;
	color: var(--ar-ink-soft);
}

.ar-qz-logrow__p {
	font-weight: 700;
	color: var(--ar-ink);
}

.ar-qz-logrow__t {
	color: var(--ar-muted);
	font-size: 13px;
}

/* ---------- 空狀態 ---------- */

.ar-qz-empty {
	margin: 40px 0 0;
	padding: 40px 32px;
	background: var(--ar-cream);
	border: 1px dashed var(--ar-line);
	border-radius: var(--ar-r-md);
	text-align: center;
}

.ar-qz-empty__t {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 21px;
	color: var(--ar-ink);
	margin-bottom: 8px;
}

.ar-qz-empty__d {
	font-size: 15px;
	line-height: 1.85;
	color: var(--ar-ink-soft);
	max-width: 46ch;
	margin-inline: auto;
}

.ar-qz-empty .ar-qz-cta {
	justify-content: center;
	margin-top: 26px;
}

/* ---------- 收藏鈕 ---------- */

.ar-qz-btn--star.is-on,
.ar-qz-btn--star.is-on:hover,
.ar-qz-btn--star.is-on:focus-visible {
	color: var(--ar-ink);
	background-color: var(--ar-accent);
	border-color: var(--ar-accent);
	font-weight: 700;
}

/* ---------- 手機 ---------- */

@media (max-width: 720px) {
	.ar-qz-progress {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.ar-qz-progress__go {
		grid-column: 1 / -1;
	}

	.ar-qz-rec {
		grid-template-columns: 26px minmax(0, 1fr);
		row-gap: 4px;
		padding: 16px 18px;
	}

	.ar-qz-rec__d {
		grid-column: 2;
	}

	.ar-qz-logrow {
		grid-template-columns: minmax(0, 1fr) 66px 52px;
		row-gap: 4px;
		padding: 13px 18px;
	}

	.ar-qz-logrow__d {
		grid-column: 1 / -1;
	}

	.ar-qz-logrow__t {
		display: none;
	}
}

/* ================= 付費層：相似題、依體系抽題、解析 ================= */

/* ---------- 章節籤 ---------- */

.ar-qz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ar-qz-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 15px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-pill);
	font-size: 13.5px;
}

.ar-qz-chip__nm {
	color: var(--ar-ink);
}

.ar-qz-chip__n {
	color: var(--ar-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* ---------- 相似題的出題依據（作答頁最上面） ---------- */

.ar-qz-basis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	padding: 16px 20px;
	background: var(--ar-cream);
	border-left: 3px solid var(--ar-accent);
	border-radius: 0 var(--ar-r-sm) var(--ar-r-sm) 0;
}

.ar-qz-basis__k {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--ar-muted);
	margin-right: 6px;
}

.ar-qz-basis .ar-qz-chip {
	background: var(--ar-surface);
	font-size: 12.5px;
	padding: 6px 13px;
}

/* ---------- 這一題為什麼被推出來 ---------- */

.ar-qz-card__why {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 13px;
	background: #FFF6DF;
	border: 1px solid var(--ar-accent);
	border-radius: var(--ar-r-pill);
	font-size: 12.5px;
	color: var(--ar-ink);
}

/* ---------- 解析 ---------- */

.ar-qz-fb__note {
	flex-basis: 100%;
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid rgba(22, 34, 62, .12);
	font-size: 14px;
	line-height: 1.9;
	color: var(--ar-ink);
}

.ar-qz-w__note {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--ar-cream);
	border-radius: var(--ar-r-sm);
	font-size: 14px;
	line-height: 1.9;
	color: var(--ar-ink);
}

/* ---------- 體系 chips（設定頁，數量多要能換行） ---------- */

.ar-qz-seg--wrap {
	max-width: 720px;
}

.ar-qz-seg--wrap .ar-qz-segb {
	padding: 8px 15px;
	font-size: 13.5px;
}

.ar-qz-seg--wrap .ar-qz-segb small {
	margin-left: 7px;
	font-size: 11.5px;
	opacity: .62;
	font-variant-numeric: tabular-nums;
}

/* ---------- 付費模式卡 ---------- */

.ar-qz-mode--wide {
	grid-column: 1 / -1;
}

.ar-qz-mode--paid {
	background:
		linear-gradient(158deg, rgba(242, 177, 52, .10) 0%, rgba(242, 177, 52, 0) 60%),
		var(--ar-surface);
	border-color: var(--ar-accent);
}

.ar-qz-mode--paid .ar-qz-mode__k {
	color: var(--ar-accent);
}

@media (max-width: 720px) {
	.ar-qz-basis {
		padding: 14px 16px;
	}

	.ar-qz-seg--wrap .ar-qz-segb {
		padding: 7px 12px;
		font-size: 12.5px;
	}
}

/* ---------- <a> 版實心鈕的字色 ----------
   case-study.css 的 .ar-doc a { color: var(--ar-ink) } 權重 0,1,1，
   高於 .ar-qz-btn--go 的 0,1,0，所以模板裡用 <a> 寫的實心鈕會變成
   深藏青底＋深藏青字，整顆看不見。quiz.js 產的是 <button>，不受影響。 */

.ar-doc a.ar-qz-btn--go,
.ar-doc a.ar-qz-btn--go:hover,
.ar-doc a.ar-qz-btn--go:focus,
.ar-doc a.ar-qz-btn--go:focus-visible,
.ar-doc a.ar-qz-btn--go:active {
	color: #FFFFFF;
}

.ar-doc a.ar-qz-btn,
.ar-doc a.ar-qz-btn:hover,
.ar-doc a.ar-qz-btn:focus,
.ar-doc a.ar-qz-btn:focus-visible,
.ar-doc a.ar-qz-btn:active {
	text-decoration: none;
}

/* 深色 hero 上的實心鈕改用金色：深藏青底疊在深藏青 hero 上看不出是一顆鈕。 */

.ar-hero a.ar-qz-btn--go {
	background-color: var(--ar-accent);
	border-color: var(--ar-accent);
	color: var(--ar-ink);
	font-weight: 700;
}

.ar-hero a.ar-qz-btn--go:hover,
.ar-hero a.ar-qz-btn--go:focus,
.ar-hero a.ar-qz-btn--go:focus-visible,
.ar-hero a.ar-qz-btn--go:active {
	background-color: var(--ar-accent-bright);
	border-color: var(--ar-accent-bright);
	color: var(--ar-ink);
}

/* ---------- 只有 hero 的畫面把深色底鋪滿 ----------
   Astra 的 #page 是 flex column、min-height:100vh，.site-content 是 flex-grow:1，
   內容不夠高時 .site-content 會被撐開，多出來的那一截露出米白底 --ar-bg，
   看起來像 hero 和頁尾之間夾了一條白邊。
   做法是把 hero 的漸層移到 .site-content 上、hero 自己轉透明，
   整塊（含被撐開的那一截）就是同一道連續漸層，一行版面都不用動。
   :only-child 是關鍵——作答頁、練習首頁、完整報表（hero＋.ar-list）都不會被命中。 */

body.ar-qz #content:has(> .ast-container > .ar-doc > .ar-hero:only-child) {
	background:
		radial-gradient(120% 140% at 82% 0%, rgba(242, 177, 52, .20) 0%, rgba(242, 177, 52, 0) 55%),
		linear-gradient(158deg, #1B2A4C 0%, #16223E 52%, #101B33 100%);
}

body.ar-qz #content:has(> .ast-container > .ar-doc > .ar-hero:only-child) > .ast-container > .ar-doc > .ar-hero {
	background: none;
}

/* ------------------------------------------------------------------ *
 * 圖片題
 * 圖是從考選部原卷裁下來的 PNG（白底黑線），放在白色面板上。
 * 整題以圖呈現的題目，選項只留字母，排成一列四顆。
 * ------------------------------------------------------------------ */

.ar-qz-fig {
	margin: 0 0 24px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
	overflow-x: auto;
}

.ar-qz-fig img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.ar-qz-fig img + img {
	margin-top: 12px;
}

.ar-qz-opts.is-letter {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.ar-qz-opts.is-letter .ar-qz-opt {
	width: auto;
	flex: 1 1 120px;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
}

.ar-qz-opts.is-letter .ar-qz-opt__l {
	margin-top: 0;
	width: 30px;
	height: 30px;
	font-size: 14px;
}

.ar-qz-w__b .ar-qz-fig {
	margin: 4px 0 14px;
}

@media ( max-width: 600px ) {

	.ar-qz-fig {
		padding: 10px;
	}

	.ar-qz-opts.is-letter .ar-qz-opt {
		flex: 1 1 40%;
	}
}

/* ---------- 逐題詳解的內層（來自共同筆記） ---------- */

/* .ar-qz-fb 是 flex，子元素要自己成列 */
.ar-qz-note__src,
.ar-qz-note__exp,
.ar-qz-note__amend {
	display: block;
}

/* 備註：官方給分公告與考後修法提示 */
.ar-qz-note__amend {
	margin-top: 8px;
	padding: 8px 12px;
	border: 1px solid #EBD9A8;
	border-radius: 6px;
	background: #FFF9EC;
	font-size: 13px;
	line-height: 1.8;
	color: #6B5312;
}

.ar-qz-note__amend b {
	font-weight: 700;
	letter-spacing: .12em;
	color: #8A6A18;
	margin-right: 8px;
}

.ar-qz-note__amend strong {
	font-weight: 700;
	color: #4A390C;
}

.ar-qz-note__src {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.7;
	color: var(--ar-ink-soft);
	margin-bottom: 5px;
}

.ar-qz-note__exp strong {
	font-weight: 700;
	color: var(--ar-ink);
}

/* 訪客：詳解的位置改放一行提示，不要留白 */
.ar-qz-note--lock {
	font-size: 13.5px;
	line-height: 1.8;
}

.ar-qz-note__lock {
	display: block;
	color: var(--ar-ink-soft);
}

/* .ar-doc a 的權重會把連結刷成深藏青，這裡三個狀態都要自己釘死 */
.ar-qz-note__lock a.ar-qz-note__login,
.ar-qz-note__lock a.ar-qz-note__login:hover,
.ar-qz-note__lock a.ar-qz-note__login:focus {
	color: var(--ar-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- 作答頁的回報錯誤 ---------- */

/* Astra 有一條 button:hover{color:#fff}，每個狀態都要把三個顏色一起釘死 */
.ar-qz-btn--report {
	border-color: var(--ar-line);
	background: var(--ar-surface);
	color: var(--ar-ink-soft);
}

.ar-qz-btn--report:hover,
.ar-qz-btn--report:focus {
	border-color: var(--ar-accent);
	background: var(--ar-surface);
	color: var(--ar-ink);
}

.ar-qz-btn--report:focus-visible {
	outline: 2px solid var(--ar-accent);
	outline-offset: 2px;
}

.ar-qz-btn--report.is-on,
.ar-qz-btn--report.is-on:hover,
.ar-qz-btn--report.is-on:focus {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
}

.ar-qz-rp {
	margin: 14px 0 4px;
	padding: 18px 20px;
	background: var(--ar-cream);
	border: 1px solid var(--ar-line-soft);
	border-radius: var(--ar-r-md);
}

.ar-qz-rp[hidden] {
	display: none;
}

.ar-qz-rp__t {
	font-size: 14px;
	font-weight: 700;
	color: var(--ar-ink);
	margin: 0 0 10px;
}

.ar-qz-rp__q {
	font-weight: 500;
	color: var(--ar-muted);
	margin-left: 8px;
}

.ar-qz-rp__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 12px;
}

.ar-qz-rp__radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--ar-ink-soft);
	cursor: pointer;
}

.ar-qz-rp__radio input {
	accent-color: var(--ar-accent);
	margin: 0;
}

.ar-qz-rp__ta {
	width: 100%;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ar-ink);
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
	padding: 11px 13px;
	resize: vertical;
}

.ar-qz-rp__ta:focus {
	outline: 2px solid var(--ar-accent);
	outline-offset: 1px;
	border-color: var(--ar-accent);
}

.ar-qz-rp__act {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.ar-qz-rp__msg {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ar-ink-soft);
}

.ar-qz-rp__msg.is-bad {
	color: #A3352C;
}

.ar-qz-rp__msg.is-good {
	color: #2F6B3C;
}

/* ================= VIP 功能免費開放期（2026-08-31 起） =================
   相似題推薦／依體系抽題／學習分析暫時對登入會員免費，
   標記由 ar_qz_vip_badge() 產生；改回付費層時整段可以留著不動。 */

.ar-qz-vip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	align-self: flex-start;
	padding: 4px 12px;
	background: rgba(242, 177, 52, .12);
	border: 1px solid var(--ar-accent);
	border-radius: var(--ar-r-pill);
	font-family: var(--ar-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.6;
	color: var(--ar-ink-soft);
	white-space: nowrap;
	vertical-align: middle;
}

.ar-qz-vip i {
	font-style: normal;
	color: var(--ar-muted);
}

.ar-qz-vip b {
	font-weight: 700;
	color: var(--ar-accent);
}

.ar-qz-mode .ar-qz-vip {
	margin: 2px 0 0;
}

.ar-qz-field .ar-qz-vip {
	margin-left: 10px;
}

.ar-qz-vipline {
	margin: 16px 0 0;
}

/* ---------- 練習首頁的免費開放橫幅 ---------- */

.ar-qz-vipbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin: 44px 0 -20px;
	padding: 17px 22px;
	background:
		linear-gradient(158deg, rgba(242, 177, 52, .12) 0%, rgba(242, 177, 52, 0) 62%),
		var(--ar-surface);
	border: 1px solid var(--ar-accent);
	border-left-width: 3px;
	border-radius: var(--ar-r-md);
}

.ar-qz-vipbar__k {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ar-accent);
	white-space: nowrap;
}

.ar-qz-vipbar__d {
	flex: 1 1 320px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--ar-ink-soft);
}

@media (max-width: 720px) {
	.ar-qz-vipbar {
		margin: 36px 0 -16px;
		padding: 15px 17px;
	}

	.ar-qz-vip {
		white-space: normal;
	}
}

/* 建築結構的上下標：不要把回饋框的行高頂開 */
.ar-qz sup,
.ar-qz sub {
	font-size: .74em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.ar-qz sup {
	top: -.42em;
}

.ar-qz sub {
	bottom: -.2em;
}

/* ================= AR-QZ-RESULT 2026-09-07 ==========================
   整卷結果頁、年度卡的作答狀態、可點的練習紀錄。
   顏色一律用 --ar-* 變數，或本檔既有的對錯兩色（#2C6A4F／#8C3B33）。
   ================================================================== */

/* ---------- 年度卡：有狀態的那幾格要放得下狀態列與動作 ---------- */

.ar-qz-years {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	align-items: stretch;
}

.ar-qz-year--doing,
.ar-qz-year--done,
.ar-qz-year--part {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 7px;
	padding: 14px 15px 13px;
	text-align: left;
}

.ar-qz-year__h {
	display: flex;
	align-items: baseline;
	gap: 3px;
}

.ar-qz-year__st {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ar-muted);
	font-variant-numeric: tabular-nums;
}

.ar-qz-year--done {
	border-color: rgba(44, 106, 79, .38);
}

.ar-qz-year--done .ar-qz-year__st {
	color: #2C6A4F;
	font-weight: 700;
}

.ar-qz-year--doing {
	border-color: var(--ar-accent);
	background: #FFFDF6;
}

.ar-qz-year--doing .ar-qz-year__st,
.ar-qz-year--part .ar-qz-year__st {
	color: #8F6410;
	font-weight: 700;
}

.ar-qz-year--part {
	border-style: dashed;
}

.ar-qz-year__go {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 12px;
	margin-top: auto;
	padding-top: 4px;
}

.ar-qz-year__a {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ar-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ar-qz-year__a.is-main {
	font-weight: 700;
	color: var(--ar-ink);
	border-bottom-color: var(--ar-accent);
}

.ar-qz-year__a:hover,
.ar-qz-year__a:focus-visible {
	color: var(--ar-ink);
	border-bottom-color: var(--ar-accent);
}

/* 一格裡有兩三個連結，每一個都要讀得出是哪一年。 */
.ar-qz-year__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 最近的練習：整列連到那一次的結果頁 ---------- */

a.ar-qz-logrow {
	grid-template-columns: 86px minmax(0, 1fr) 70px 58px 60px auto;
	text-decoration: none;
	color: inherit;
	transition: background .16s ease;
}

a.ar-qz-logrow:hover,
a.ar-qz-logrow:focus-visible {
	background: #FFFDF6;
}

.ar-qz-logrow__go {
	text-align: right;
	font-size: 12.5px;
	color: var(--ar-muted);
	white-space: nowrap;
}

a.ar-qz-logrow:hover .ar-qz-logrow__go,
a.ar-qz-logrow:focus-visible .ar-qz-logrow__go {
	color: #8F6410;
}

/* ---------- 歷次紀錄切換 ---------- */

.ar-qz-runs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ar-qz-run {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 10px 15px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-sm);
	text-decoration: none;
	color: var(--ar-ink-soft);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	transition: border-color .16s ease, background .16s ease;
}

.ar-qz-run:hover,
.ar-qz-run:focus-visible {
	border-color: var(--ar-accent);
	background: #FFFDF6;
}

.ar-qz-run.is-now {
	border-color: var(--ar-accent);
	background: var(--ar-cream);
}

.ar-qz-run__d {
	color: var(--ar-muted);
}

.ar-qz-run__p {
	font-family: var(--ar-serif);
	font-weight: 700;
	font-size: 17px;
	color: var(--ar-ink);
}

.ar-qz-run__p small {
	font-size: 11px;
	margin-left: 1px;
}

.ar-qz-run__n {
	color: var(--ar-muted);
}

.ar-qz-run.is-part .ar-qz-run__n {
	color: #8F6410;
}

/* ---------- 逐題檢討的篩選 ---------- */

.ar-qz-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.ar-qz-fb2 {
	font-family: var(--ar-sans);
	font-size: 13.5px;
	font-weight: 500;
	padding: 10px 18px;
	background: var(--ar-surface);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-r-pill);
	color: var(--ar-ink-soft);
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}

.ar-qz-fb2:hover {
	border-color: var(--ar-accent);
}

.ar-qz-fb2.is-on {
	background: var(--ar-ink);
	border-color: var(--ar-ink);
	color: #FFFFFF;
	font-weight: 700;
}

.ar-qz-ws--no .ar-qz-w:not(.is-no),
.ar-qz-ws--blank .ar-qz-w:not(.is-blank),
.ar-qz-ws--ok .ar-qz-w:not(.is-ok) {
	display: none;
}

/* ---------- 逐題卡的對錯狀態 ---------- */

.ar-qz-w.is-ok {
	border-left: 3px solid rgba(44, 106, 79, .55);
}

.ar-qz-w.is-no {
	border-left: 3px solid rgba(140, 59, 51, .7);
}

.ar-qz-w.is-blank {
	border-left: 3px solid var(--ar-muted);
}

.ar-qz-w__mk {
	display: inline-block;
	padding: 2px 9px;
	margin-right: 8px;
	border-radius: var(--ar-r-pill);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
}

.is-ok .ar-qz-w__mk {
	background: #F2F8F4;
	color: #2C6A4F;
}

.is-no .ar-qz-w__mk {
	background: #FBF3F2;
	color: #8C3B33;
}

.is-blank .ar-qz-w__mk {
	background: var(--ar-cream);
	color: var(--ar-ink-soft);
}

.ar-qz-w__o.is-pick {
	box-shadow: inset 0 0 0 1px var(--ar-line);
}

.ar-qz-w__o.is-pick.is-right {
	box-shadow: inset 0 0 0 1px #2C6A4F;
}

.ar-qz-w__o.is-wrong {
	box-shadow: inset 0 0 0 1px #8C3B33;
}

.ar-qz-w__multi {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: #8F6410;
}

/* 交卷當下的成績頁：整卷沒答完時的說明（在深藍 hero 裡） */
.ar-qz-partial {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .08);
	border-left: 3px solid var(--ar-accent-bright);
	border-radius: 0 var(--ar-r-sm) var(--ar-r-sm) 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .86);
}

@media (max-width: 720px) {
	.ar-qz-years {
		grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
	}

	/* 整列本來就可以點，右邊那句「看結果 →」在窄畫面只是噪音。 */
	a.ar-qz-logrow {
		grid-template-columns: minmax(0, 1fr) 66px 52px;
	}

	.ar-qz-logrow__go {
		display: none;
	}

	.ar-qz-run {
		flex: 1 1 auto;
	}
}

/* ---------- 成績頁逐題卡的收藏鈕 ---------- */

.ar-qz-w__act {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

.ar-qz-w__act .ar-qz-btn--star {
	padding: 7px 18px;
	font-size: 13.5px;
}