/* 練習相關元件：選項晶片、題目、選項、回饋、拼字比對、熟悉度點數、統計、表格。
   顏色與字級一律使用 tokens.css 的變數；不使用 inline style（CSP style-src 'self'）。 */

[hidden] {
  display: none !important;
}

.row.between {
  justify-content: space-between;
}

.row.center {
  justify-content: center;
}

.row.nowrap {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.stack.tight {
  gap: var(--space-1);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-200);
  font: inherit;
  font-size: var(--type-caption-size);
  text-align: center;
}

/* 設定頁的選項晶片（radio 外觀改成晶片，鍵盤操作與表單送出照常） */
.chips-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.chips-field legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: var(--type-label-weight);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  position: relative;
  font-weight: normal;
}

.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
}

.chip > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-100);
  cursor: pointer;
}

.chip input:checked + span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--ink);
  font-weight: var(--type-label-weight);
}

.chip input:focus-visible + span {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.chip-count {
  color: var(--ink-muted);
  font-size: var(--type-caption-size);
}

/* 技能標籤 */
.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-200);
  color: var(--on-primary);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: 1.8;
}

.badge.skill-listen {
  background: var(--skill-listen);
}

.badge.skill-speak {
  background: var(--skill-speak);
}

.badge.skill-read {
  background: var(--skill-read);
}

.badge.skill-write {
  background: var(--skill-write);
}

/* 進度條（寬度由 JS 設定 element.style.width） */
.progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-200);
}

.progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width 0.2s ease;
}

/* 題目文字 */
.word-xl {
  font-family: var(--font-word);
  font-size: var(--type-word-xl-size);
  line-height: var(--type-word-xl-line);
  font-weight: var(--type-word-xl-weight);
  overflow-wrap: anywhere;
}

.word-md {
  font-family: var(--font-word);
  font-size: var(--type-word-md-size);
  line-height: var(--type-word-md-line);
  font-weight: var(--type-word-md-weight);
}

.meaning-xl {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
}

.sentence {
  margin: 0;
  font-family: var(--font-word);
  font-size: var(--type-sentence-size);
  line-height: var(--type-sentence-line);
  font-weight: var(--type-sentence-weight);
  overflow-wrap: anywhere;
}

.sentence.small {
  min-width: 0;
  font-size: var(--type-body-size);
}

.blank {
  display: inline-block;
  width: 5em;
  margin: 0 0.2em;
  border-bottom: 2px solid var(--ink);
}

/* 播放鍵 */
.btn-icon {
  min-width: var(--tap-min);
  padding: 0 var(--space-2);
}

.icon {
  width: 1.25em;
  height: 1.25em;
}

.play-big {
  min-width: 72px;
  min-height: 72px;
  border-radius: var(--radius-pill);
}

.play-big .icon {
  width: 2em;
  height: 2em;
}

/* 選擇題選項：手機一欄，較寬的畫面兩欄 */
.opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 560px) {
  .opts {
    grid-template-columns: 1fr 1fr;
  }
}

.opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-meaning-size);
  text-align: left;
  cursor: pointer;
}

.opt:hover:not(:disabled) {
  border-color: var(--primary);
}

.opt:disabled {
  cursor: default;
}

.opt .k {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-sm);
  background: var(--surface-200);
  color: var(--ink-muted);
  font-size: var(--type-caption-size);
  line-height: 1.6em;
  text-align: center;
}

.opt-text[lang="en"] {
  font-family: var(--font-word);
}

.opt.ok {
  border-color: var(--correct);
  background: var(--correct-soft);
}

.opt.bad {
  border-color: var(--wrong);
  background: var(--wrong-soft);
}

/* 輸入題 */
.answer-input {
  font-family: var(--font-word);
  font-size: var(--type-word-md-size);
}

/* 作答回饋 */
.fb {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-200);
}

.fb.ok {
  border-left-color: var(--correct);
  background: var(--correct-soft);
}

.fb.bad {
  border-left-color: var(--wrong);
  background: var(--wrong-soft);
}

.fb-title {
  font-weight: var(--type-h2-weight);
}

.feedback-host {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 拼字比對：錯的字母標色，漏打以底線表示 */
.diff {
  font-family: var(--font-word);
  font-size: var(--type-word-md-size);
  letter-spacing: 0.04em;
}

.diff .x {
  color: var(--wrong);
  text-decoration: underline;
}

.diff .m {
  color: var(--ink-muted);
}

.diff-label {
  width: 4em;
}

/* 熟悉度點數 */
.box-dots {
  display: inline-flex;
  gap: 3px;
  margin: 0 var(--space-2);
  vertical-align: middle;
}

.box-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mastery-0);
}

.box-dots i.on {
  background: var(--primary);
}

/* 統計數字 */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 560px) {
  .grid-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-100);
}

.stat-value {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  font-variant-numeric: tabular-nums;
}

/* 表格（窄畫面可橫向捲動，不撐開頁面） */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--ink-muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.word-cell {
  font-family: var(--font-word);
  font-weight: 700;
}

/* 兩欄（窄畫面一欄） */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-6);
}

@media (min-width: 720px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

/* 切換與排序用的晶片按鈕（按下：aria-pressed；目前頁面：aria-current） */
.chip-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-100);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.chip-button[aria-pressed="true"],
.chip-button[aria-current="page"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: var(--type-label-weight);
}

/* 表格與清單裡可點的單字（開啟單字詳情） */
.word-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-word);
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.word-link:hover {
  color: var(--primary);
}

.badge-wrong {
  background: var(--wrong-soft);
  color: var(--wrong);
}

.meaning-md {
  font-size: var(--type-meaning-size);
  line-height: var(--type-meaning-line);
  font-weight: var(--type-meaning-weight);
}

/* 單字庫的搜尋列（窄畫面換行） */
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.search-row input {
  flex: 2 1 12em;
  width: auto;
}

.search-row select {
  flex: 1 1 8em;
  width: auto;
}

/* 熟悉度地圖：每列一個編號標籤加 10 格 */
.heat {
  display: grid;
  grid-template-columns: auto repeat(10, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}

.heat-list {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.heat-row-label {
  padding-right: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.heat-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.heat-cell:hover {
  outline: 2px solid var(--primary);
}

.m0 {
  background: var(--mastery-0);
}

.m1 {
  background: var(--mastery-1);
}

.m2 {
  background: var(--mastery-2);
}

.m3 {
  background: var(--mastery-3);
}

.m4 {
  background: var(--mastery-4);
}

.m5 {
  background: var(--mastery-5);
}

.heat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--type-caption-size);
}

.heat-legend span {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.heat-legend i {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* 長條圖（SVG，長度寫在 width 屬性） */
.bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bar {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.bar-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.bar-track {
  width: 100%;
  height: 12px;
}

.bar-bg {
  fill: var(--surface-200);
}

.bar-fill {
  fill: var(--primary);
}

.bar-fill.skill-listen {
  fill: var(--skill-listen);
}

.bar-fill.skill-speak {
  fill: var(--skill-speak);
}

.bar-fill.skill-read {
  fill: var(--skill-read);
}

.bar-fill.skill-write {
  fill: var(--skill-write);
}

.bar-fill.wrong {
  fill: var(--wrong);
}

.bar-value {
  color: var(--ink-muted);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 近 14 天趨勢（SVG） */
.trend {
  width: 100%;
  height: auto;
  overflow: visible;
}

.trend-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.trend-text {
  fill: var(--ink-muted);
  font-size: 10px;
}

.trend-bar {
  fill: var(--mastery-0);
}

.trend-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
}

.trend-dot {
  fill: var(--primary);
}

/* 單字詳情對話框 */
.word-dialog {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-6));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-100);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.word-dialog > .stack {
  padding: var(--space-4);
}

.word-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.word-dialog .stat .badge {
  margin-bottom: var(--space-1);
}

/* 後台：多行輸入（例句、匯入內容） */
textarea {
  width: 100%;
  min-height: calc(var(--tap-min) * 2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-200);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

input[readonly] {
  background: var(--surface-100);
  color: var(--ink-muted);
}

/* 後台：待核對標籤 */
.badge-review {
  background: var(--wrong-soft);
  color: var(--ink);
  white-space: nowrap;
}

/* 後台表格：Email、識別碼等長字串在窄畫面可任意斷行 */
.wrap-anywhere {
  overflow-wrap: anywhere;
}

/* 後台表格的操作按鈕：直向排列；表格裡的按鈕文字不斷行 */
.row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

table .btn {
  white-space: nowrap;
}