/* ============================================================
   警察特考選擇題 H5 — components the 司律 design system does not have
   ------------------------------------------------------------
   Everything else comes from /mcq/design-system.css, which the spec
   names as the shared SSOT: same tokens, same colours, no additions.
   The rules below are lifted verbatim from the 警特 UI spec v2
   (________UI_Spec_Copy.html) — the 類別 tabs, the 年度 radio rows,
   the 題數 segmented row, the result-page 錯題回顧 carousel (dots +
   arrows + scroll-snap) and the 你的答案／正解 option tags.
   v1 的章節 tri-state checkbox、多選題 badge／verdict／漏選狀態已隨
   v2「全部單選、拿掉章節」移除 —— 單選的 is-correct / is-wrong /
   is-disabled 狀態已經在 design-system.css 的 .option 裡，這裡不重複。
   ============================================================ */

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--gray-100); margin-bottom: var(--space-2); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-500); font-family: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.tab b { font-size: var(--text-base); font-weight: var(--weight-bold); line-height: 1.2; }
.tab small { font-size: 11px; line-height: 1.2; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab.is-on { background: var(--white); color: var(--brand-700); box-shadow: 0 1px 3px rgba(21,19,59,.10), inset 0 0 0 1px var(--brand-100); }
.tab.is-on small { color: var(--brand-700); opacity: .75; }
.rd { flex: none; width: 22px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--gray-200); background: var(--white); display: flex; align-items: center; justify-content: center; }
.rd.on { box-shadow: inset 0 0 0 6px var(--brand-500); }
.seg-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.seg { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 44px; padding: 0 4px; margin: 0; border: 0; border-radius: var(--radius-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--gray-200); color: var(--ink-700); font-family: inherit; font-size: 16px; line-height: 1; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); -webkit-appearance: none; appearance: none; }
.seg b { font-size: 16px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.seg small { font-size: 11px; line-height: 1; }
.seg.on { background: var(--brand-50); box-shadow: inset 0 0 0 1.5px var(--brand-500); color: var(--brand-700); }
.seg.on b { font-weight: var(--weight-black); }
.seg:disabled { opacity: .38; cursor: not-allowed; box-shadow: inset 0 0 0 1px #E4E4EE; }

/* 你的答案／正解 tag：錯題回顧卡每個選項右側的小標籤 */
.option .opt-tag { flex: none; margin-left: auto; align-self: center; font-size: 11px; font-weight: var(--weight-bold); padding: 2px 8px; border-radius: 999px; }
.option.is-correct .opt-tag { background: var(--success-bg); color: var(--success-500); }
.option.is-wrong .opt-tag { background: var(--error-bg); color: var(--error-500); }

/* 建議閱讀列：可點擊，跳到錯題回顧對應那一題 */
.read-item .ri-q { margin-left: auto; flex: none; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--brand-500); }

/* ── 錯題回顧：收合列 + 展開後左右滑動切換每一題錯題 ── */
.wr-toggle { width: 100%; border: 0; display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); border-radius: var(--radius-lg, 16px); background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--gray-100); font: inherit; text-align: left; cursor: pointer; }
.wr-toggle .wt-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--error-bg); color: var(--error-500); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: var(--weight-black); }
.wr-toggle .wt-tx { flex: 1; min-width: 0; }
.wr-toggle .wt-tx b { display: block; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--ink-900); }
.wr-toggle .wt-tx span { font-size: var(--text-xs); color: var(--ink-500); }
.wr-toggle .wt-chev { flex: none; color: var(--ink-400); transition: transform var(--dur-slow) var(--ease-out); }
#r-review.is-open .wr-toggle .wt-chev { transform: rotate(180deg); }
.wr-body { display: none; margin-top: var(--space-4); }
#r-review.is-open .wr-body { display: block; }
.wr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); padding: 0 var(--space-1); }
.wr-nav { display: flex; align-items: center; gap: var(--space-2); }
.wr-count { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-500); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.wr-arrow { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--gray-200); color: var(--ink-700); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wr-arrow:disabled { opacity: .35; cursor: default; }
.wr-viewport { overflow: hidden; transition: height var(--dur-slow) var(--ease-out); margin: 0 calc(-1 * var(--space-4)); }
.wr-track { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wr-track::-webkit-scrollbar { display: none; }
.wr-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 var(--space-4); box-sizing: border-box; }
.wr-slide .card { padding: var(--space-5) var(--space-4); }
.wr-slide .q-text { margin-bottom: var(--space-4); }
.wr-slide .option { pointer-events: none; }
.wr-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-3); }
.wr-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--gray-200); transition: all var(--dur-base, .2s) var(--ease-out); }
.wr-dots i.on { width: 18px; background: var(--brand-500); }