/* ============================================================
   w16-vertical-arith（直式計算教練）— v2 風格覆寫
   年齡層：kids（國小）　科目：數學（--tp-subject-math）
   自訂屬性→權杖對應簡表：
   --ink→--tp-text；--muted→--tp-text-soft；--paper→--tp-bg；--desk→--tp-bg-deep
   --card→--tp-surface；--line→--tp-line；--primary→--tp-accent；--primary-ink→--tp-accent-on
   --accent→--tp-accent；--accent-ink→--tp-accent-on；--hat→--tp-focus-ring
   --danger→--tp-error；--danger-bg→--tp-error-soft；--good-bg→--tp-success-soft
   --radius→--tp-radius-card；--shadow→--tp-shadow-2；--font→--tp-font-sans
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --paper: var(--tp-bg);
  --card: var(--tp-surface);
  --line: var(--tp-line);
  --desk: var(--tp-bg-deep);
  --primary: var(--tp-accent-strong);
  --primary-ink: var(--tp-accent-on);
  --accent: var(--tp-accent-strong);
  --accent-ink: var(--tp-accent-on);
  --hat: var(--tp-focus-ring);
  --danger: var(--tp-error);
  --danger-bg: var(--tp-error-soft);
  --good-bg: var(--tp-success-soft);
  --radius: var(--tp-radius-card);
  --shadow: var(--tp-shadow-2);
  --font: var(--tp-font-sans);
}

/*  標題換襯線  */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] .qblock h3 {
  font-family: var(--tp-font-serif);
}

/*  主按鈕：朱砂底＋白字，hover／按下加深  */
html[data-tp-theme="v2"] .btn.primary {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn.primary:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.primary:active:not(:disabled) {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn.accent {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn.accent:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.accent:active:not(:disabled) {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/*  --primary 已指向 accent；把科目識別用的次要元素指回數學墨藍  */
html[data-tp-theme="v2"] .shell {
  border-left-color: var(--tp-subject-math);
}
html[data-tp-theme="v2"] .eyebrow,
html[data-tp-theme="v2"] .progress,
html[data-tp-theme="v2"] .mini .sm {
  color: var(--tp-subject-math);
}

/*  作答格三態：答對用成功綠邊、揭示用科目色  */
html[data-tp-theme="v2"] .inbox {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .inbox.active {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
  box-shadow: 0 0 0 3px var(--tp-focus-ring-soft);
}
html[data-tp-theme="v2"] .inbox.good {
  background: var(--tp-success-soft);
  border-color: var(--tp-success);
}
html[data-tp-theme="v2"] .inbox.bad {
  background: var(--tp-error-soft);
  border-color: var(--tp-error);
}
html[data-tp-theme="v2"] .inbox.revealed {
  background: var(--tp-surface);
  border-color: var(--tp-subject-math);
  color: var(--tp-subject-math);
}
html[data-tp-theme="v2"] .inbox.shown {
  background: var(--tp-success-soft);
}

/*  選項 chip 勾選態：原黃底改 accent 淺底（選取態跟 accent）  */
html[data-tp-theme="v2"] .chip:has(input:checked) {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .chip input {
  accent-color: var(--tp-accent-strong);
}

/*  種子碼輸入框與列印卷原寫死白底  */
html[data-tp-theme="v2"] .seedbox input {
  background: var(--tp-surface);
  color: var(--tp-text);
  caret-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .paper {
  background: var(--tp-surface);
  color: var(--tp-text);
}

/*  教練提示泡泡的錯誤小字  */
html[data-tp-theme="v2"] .bubble .sub,
html[data-tp-theme="v2"] .note {
  color: var(--tp-error);
}

/*  焦點環（--hat 已指向 --tp-focus-ring）  */
html[data-tp-theme="v2"] #mute:focus-visible,
html[data-tp-theme="v2"] .btn:focus-visible,
html[data-tp-theme="v2"] .chip input:focus-visible {
  outline-color: var(--tp-focus-ring);
}