/* 字首字根字尾學習工具（docs/js/vocab.js）樣式；沿用 Material 色彩變數以支援深色模式 */
:root {
  --pv-p: #1e88e5;   /* 字首 */
  --pv-r: #43a047;   /* 字根 */
  --pv-s: #fb8c00;   /* 字尾 */
  --pv-star: #f9a825;
  --pv-border: var(--md-default-fg-color--lightest);
  --pv-soft: var(--md-code-bg-color);
  --pv-tint: color-mix(in srgb, var(--md-primary-fg-color) 7%, var(--md-default-bg-color));
  --pv-hover: color-mix(in srgb, var(--md-accent-fg-color) 7%, transparent);
  --pv-radius: .6rem;
  --pv-ctrl: 2.1rem;   /* 輸入框、按鈕、下拉選單統一高度 */
}

.pv-app { margin: 1.2em 0 2em; font-size: .78rem; }
.pv-app [hidden] { display: none !important; }
.pv-muted { color: var(--md-default-fg-color--light); }
.pv-nowrap { white-space: nowrap; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 單字一律整個字顯示在同一行（Material 預設連結會 word-break，這裡關掉） */
.md-typeset .pv-wl,
.md-typeset .pv-title,
.md-typeset .pv-fc-word,
.md-typeset .pv-chip,
.md-typeset .pv-tile b {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  white-space: nowrap;
}

/* ---------- 搜尋列、工具列 ---------- */
.pv-search, .pv-toolbar, .pv-inline {
  display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin: .7em 0; position: relative;
}
.pv-inline { margin: 0; flex: 1 1 18em; flex-wrap: nowrap; }
.pv-toolbar label { display: inline-flex; gap: .4em; align-items: center; color: var(--md-default-fg-color--light); }
.pv-input, .pv-select, .pv-note {
  font: inherit; color: var(--md-default-fg-color); background: var(--md-default-bg-color);
  border: 1px solid var(--pv-border); border-radius: .4em; padding: 0 .8em; min-height: var(--pv-ctrl);
  transition: border-color .15s, box-shadow .15s;
}
.pv-input { flex: 1 1 14em; min-width: 0; }
.pv-select { padding-right: .4em; cursor: pointer; }
.pv-input:focus, .pv-select:focus, .pv-note:focus {
  outline: none; border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-accent-fg-color) 18%, transparent);
}
.pv-check { display: inline-flex; gap: .35em; align-items: center; white-space: nowrap; cursor: pointer; }
.md-typeset .pv-app .md-button {
  margin: 0; padding: 0 1.1em; min-height: var(--pv-ctrl); display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; border-radius: .4em; white-space: nowrap;
}
.md-typeset .pv-app .md-button[disabled] { opacity: .4; pointer-events: none; }
.md-typeset .pv-app .pv-danger { color: #e53935; border-color: #e53935; }
.pv-file { cursor: pointer; }

.pv-suggest {
  position: absolute; top: calc(100% + .2em); left: 0; right: 0; z-index: 5; margin: 0 !important; padding: .3em 0 !important;
  list-style: none; background: var(--md-default-bg-color); border: 1px solid var(--pv-border);
  border-radius: .5em; box-shadow: var(--md-shadow-z2); max-height: 20em; overflow: auto;
}
.md-typeset .pv-suggest li { margin: 0; }
.pv-suggest a { display: flex; gap: .8em; align-items: baseline; padding: .4em .9em; color: var(--md-default-fg-color); }
.pv-suggest a:hover, .pv-suggest a:focus { background: var(--pv-hover); }
.pv-suggest b { white-space: nowrap; }
.pv-suggest span { color: var(--md-default-fg-color--light); font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 小按鈕 ---------- */
.pv-btn {
  font: inherit; font-size: .9em; cursor: pointer; padding: .25em .7em; margin: 0;
  border: 1px solid var(--pv-border); border-radius: 2em; background: transparent; color: var(--md-default-fg-color);
  white-space: nowrap; line-height: 1.4; transition: background .15s, border-color .15s, color .15s;
}
.pv-btn:hover { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); }
.pv-btn.pv-icon {
  border-color: transparent; width: 2em; height: 2em; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1em;
}
.pv-btn.pv-icon:hover { background: var(--pv-hover); border-color: transparent; }
.pv-save.pv-on { color: var(--pv-star); border-color: var(--pv-star); }
.pv-star { font-size: 1.15em !important; color: var(--md-default-fg-color--light); }
.pv-star.pv-on { color: var(--pv-star); }
.pv-del:hover { color: #e53935 !important; }

/* ---------- 單字卡片 ---------- */
.pv-card {
  border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 1em 1.2em; margin: .9em 0;
  background: var(--md-default-bg-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .7em; }
.pv-title { font-size: 1.7em; font-weight: 700; line-height: 1.2; }
.pv-kk { color: var(--md-default-fg-color--light); font-family: var(--md-code-font-family); }
p.pv-def { font-size: 1.1em; margin: .6em 0 .2em; }
.pv-def-en { color: var(--md-default-fg-color--light); margin: 0 0 .7em; font-style: italic; }
.pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin: .5em 0; }
.pv-label { font-weight: 700; min-width: 4.2em; color: var(--md-default-fg-color--light); }
.pv-plus { color: var(--md-default-fg-color--lighter); }
.pv-rel a { display: inline-block; padding: .1em .55em; border-radius: .35em; background: var(--pv-soft); }
.pv-rel a:hover { background: var(--pv-hover); }
.pv-hint {
  background: var(--pv-tint); border-left: 3px solid var(--md-primary-fg-color); padding: .6em .9em;
  margin: .7em 0; border-radius: 0 .4em .4em 0; line-height: 1.6;
}
.pv-hint b { color: var(--md-primary-fg-color); margin-right: .3em; }
.md-typeset .pv-h { margin: 1.2em 0 .3em; font-size: .95em; }

/* ---------- 字首字根字尾標籤 ---------- */
.pv-chip {
  display: inline-flex; gap: .3em; align-items: baseline; padding: .12em .55em; border-radius: .35em;
  border: 1px solid currentColor; font-size: .9em; margin: .1em .2em .1em 0;
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.pv-chip span { color: var(--md-default-fg-color); }
.pv-chip.pv-big { font-size: 1.4em; }
.pv-p { color: var(--pv-p) !important; }
.pv-r { color: var(--pv-r) !important; }
.pv-s { color: var(--pv-s) !important; }

/* 單字表等級標籤 */
.pv-lv {
  display: inline-block; font-size: .78em; padding: .1em .55em; margin: .1em .2em .1em 0; border-radius: 1em;
  background: var(--pv-soft); color: var(--md-default-fg-color--light); white-space: nowrap;
}
.pv-lv-basic { color: #2e7d32; }
.pv-lv-core { color: #1565c0; }
.pv-lv-academic { color: #00838f; }
.pv-lv-toeic { color: #6a1b9a; }
.pv-lv-toefl { color: #c62828; }
.pv-lv-gre { color: #ef6c00; }

/* ---------- 例句與外部字典 ---------- */
.md-typeset .pv-ex { margin: .3em 0; padding-left: 1.2em; }
.md-typeset .pv-ex li { margin: .45em 0; }
.pv-ex mark { background: color-mix(in srgb, var(--pv-star) 30%, transparent); color: inherit; padding: 0 .1em; border-radius: .15em; }
.pv-zh { color: var(--md-default-fg-color--light); }
.pv-src { font-size: .78em; color: var(--md-default-fg-color--lighter) !important; }
.pv-tag { font-size: .8em; background: var(--pv-star); color: #000; padding: 0 .4em; border-radius: .3em; }
.pv-dicts { display: flex; flex-wrap: wrap; gap: .4em; }
.pv-dicts a { padding: .25em .8em; border: 1px solid var(--pv-border); border-radius: 2em; font-size: .9em; white-space: nowrap; }
.pv-dicts a:hover { border-color: var(--md-accent-fg-color); background: var(--pv-hover); }

/* ---------- 單字表格 ---------- */
.pv-table-wrap {
  overflow-x: auto; border: 1px solid var(--pv-border); border-radius: var(--pv-radius); margin: .7em 0;
  background: var(--md-default-bg-color);
}
.md-typeset table.pv-table {
  display: table; width: 100%; margin: 0; border: none; border-collapse: collapse; border-radius: 0;
  font-size: .95em; box-shadow: none;
}
.md-typeset .pv-table th {
  background: var(--pv-soft); font-weight: 600; text-align: left; white-space: nowrap;
  color: var(--md-default-fg-color--light); font-size: .9em; padding: .55em .9em; border: none;
}
.md-typeset .pv-table td {
  padding: .55em .9em; border: none; border-top: 1px solid var(--pv-border); vertical-align: middle;
}
.md-typeset .pv-table tbody tr { transition: background .12s; }
.md-typeset .pv-table tbody tr:hover { background: var(--pv-hover); }
.md-typeset .pv-table td.pv-w { white-space: nowrap; }
.md-typeset .pv-table .pv-wl { font-weight: 600; font-size: 1.05em; }
.pv-kk-s {
  display: block; font-size: .8em; color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font-family); white-space: nowrap;
}
.md-typeset .pv-table td.pv-def { min-width: 10em; line-height: 1.5; }
.md-typeset .pv-table td.pv-notes { min-width: 8em; }
.md-typeset .pv-table td.pv-lvs, .md-typeset .pv-table td.pv-extra { min-width: 6em; }
.md-typeset .pv-table .pv-act { white-space: nowrap; text-align: right; width: 1%; }
.pv-empty { padding: 1em 0; }
.pv-note { width: 100%; min-width: 6em; min-height: 1.9rem; padding: 0 .5em; margin: .12em 0; font-size: .92em; display: block; }

/* ---------- 字首字根字尾格狀列表 ---------- */
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: .6em; }
.pv-tile {
  display: flex; flex-direction: column; gap: .15em; padding: .7em .9em; border-radius: var(--pv-radius);
  border: 1px solid var(--pv-border); border-top: 3px solid currentColor; background: var(--md-default-bg-color);
  transition: box-shadow .15s, transform .15s;
}
.pv-tile b { font-size: 1.3em; }
.pv-tile span, .pv-tile small { color: var(--md-default-fg-color); }
.pv-tile small { color: var(--md-default-fg-color--light); }
.pv-tile .pv-type { font-size: .78em; color: inherit; font-weight: 600; }
.pv-tile:hover { box-shadow: var(--md-shadow-z2); transform: translateY(-1px); }

/* ---------- 分頁籤（藥丸樣式，窄螢幕可橫向捲動） ---------- */
.pv-tabs {
  display: flex; gap: .4em; margin: .4em 0 .8em; overflow-x: auto; scrollbar-width: none; padding-bottom: .1em;
}
.pv-tabs::-webkit-scrollbar { display: none; }
.pv-tab {
  font: inherit; cursor: pointer; padding: .4em 1em; border: 1px solid var(--pv-border); border-radius: 2em;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color--light); white-space: nowrap; flex: 0 0 auto;
  transition: background .15s, color .15s, border-color .15s;
}
.pv-tab:hover { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }
.pv-tab.pv-on { background: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color); font-weight: 600; }

/* ---------- 統計 ---------- */
.pv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: .6em; margin: .7em 0; }
.pv-stat {
  background: var(--pv-tint); border-radius: var(--pv-radius); padding: .7em .9em; display: flex; flex-direction: column; gap: .1em;
}
.pv-stat b { font-size: 1.6em; line-height: 1.2; color: var(--md-primary-fg-color); }
.pv-stat span { color: var(--md-default-fg-color--light); font-size: .88em; }
.pv-meter, .pv-progress {
  display: inline-block; width: 4.5em; height: .5em; background: var(--pv-soft); border-radius: 1em; overflow: hidden; vertical-align: middle;
}
.pv-meter i, .pv-progress i { display: block; height: 100%; background: var(--md-accent-fg-color); border-radius: 1em; transition: width .3s; }
.pv-progress { display: block; width: 100%; margin: .6em 0; }
.pv-pager { display: flex; gap: .8em; align-items: center; justify-content: center; margin: 1em 0; color: var(--md-default-fg-color--light); }

/* ---------- 閃卡 ---------- */
.pv-fc {
  min-height: 11em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em;
  border: 1px solid var(--pv-border); border-radius: 1em; padding: 1.5em 1em; cursor: pointer; text-align: center;
  background: linear-gradient(160deg, var(--pv-tint), var(--md-default-bg-color));
  box-shadow: var(--md-shadow-z1); user-select: none; transition: border-color .2s, box-shadow .2s;
}
.pv-fc:hover, .pv-fc:focus { border-color: var(--md-accent-fg-color); box-shadow: var(--md-shadow-z2); outline: none; }
.pv-fc.pv-flipped { min-height: 6em; cursor: default; }
.pv-fc-word { font-size: clamp(1.6em, 7vw, 2.6em); font-weight: 700; line-height: 1.2; }
.pv-fc-zh { font-size: 1.3em; line-height: 1.6; }
.pv-fc-tip { font-size: .8em; color: var(--md-default-fg-color--lighter); margin-top: .6em; }
.pv-grades {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin: .7em 0; position: sticky; bottom: .6em; z-index: 2;
  padding: .4em; border-radius: var(--pv-radius); background: color-mix(in srgb, var(--md-default-bg-color) 88%, transparent);
  backdrop-filter: blur(6px);
}
.md-typeset .pv-grades .md-button { background: var(--md-default-bg-color); }
.pv-grades kbd { font-size: .75em; opacity: .6; margin-left: .3em; }
.md-typeset .pv-app .pv-g0 { color: #e53935; border-color: #e53935; }
.md-typeset .pv-app .pv-g1 { color: #fb8c00; border-color: #fb8c00; }
.md-typeset .pv-app .pv-g2 { color: #43a047; border-color: #43a047; }
.md-typeset .pv-app .pv-g3 { color: #1e88e5; border-color: #1e88e5; }

/* ---------- 選擇題 ---------- */
.pv-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: .55em; margin: .7em 0; }
.pv-opt {
  font: inherit; text-align: left; cursor: pointer; padding: .7em .9em; border-radius: var(--pv-radius); line-height: 1.5;
  border: 1px solid var(--pv-border); background: var(--md-default-bg-color); color: var(--md-default-fg-color);
  transition: border-color .15s, background .15s;
}
.pv-opt:hover:not(:disabled) { border-color: var(--md-accent-fg-color); background: var(--pv-hover); }
.pv-opt:disabled { cursor: default; }
.pv-opt.pv-right { border-color: #43a047; background: rgba(67, 160, 71, .14); }
.pv-opt.pv-wrong { border-color: #e53935; background: rgba(229, 57, 53, .14); }

/* ---------- 窄螢幕：表格改成卡片列，單字與按鈕在第一行，中文與其他資訊在下面 ---------- */
@media screen and (max-width: 44.9375em) {
  .pv-search .pv-input, .pv-toolbar .pv-input { flex-basis: 100%; }
  .pv-toolbar label { flex: 1 1 45%; justify-content: space-between; }
  .pv-toolbar label .pv-select { flex: 1; }
  .pv-inline { flex-basis: 100%; }

  .md-typeset .pv-table thead { display: none; }
  .md-typeset table.pv-table, .md-typeset .pv-table tbody { display: block; }
  .md-typeset .pv-table tr {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: .8em; row-gap: .35em;
    padding: .7em .85em; border-top: 1px solid var(--pv-border);
  }
  .md-typeset .pv-table tbody tr:first-child { border-top: none; }
  .md-typeset .pv-table td { display: block; padding: 0; border: none; min-width: 0; }
  /* 第一行：單字（含 KK）＋按鈕；之後：中文、等級／拆解、熟悉度與上次複習（同一行）、筆記 */
  .md-typeset .pv-table td.pv-w { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; }
  .md-typeset .pv-table td.pv-w .pv-kk-s { display: inline; }
  .md-typeset .pv-table td { order: 2; }
  .md-typeset .pv-table td.pv-w { order: 0; }
  .md-typeset .pv-table td.pv-act { order: 1; flex: 0 0 auto; margin-left: auto; width: auto; }
  .md-typeset .pv-table td.pv-def,
  .md-typeset .pv-table td.pv-lvs,
  .md-typeset .pv-table td.pv-extra,
  .md-typeset .pv-table td.pv-notes { flex: 1 1 100%; min-width: 0; }
  .md-typeset .pv-table td.pv-meta { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--md-default-fg-color--light); font-size: .9em; }
  .md-typeset .pv-table td.pv-lvs:empty, .md-typeset .pv-table td.pv-extra:empty { display: none; }

  .pv-grades { grid-template-columns: repeat(2, 1fr); }
  .pv-card { padding: .9em 1em; }
  .pv-title { font-size: 1.5em; }
  .pv-grid { grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); }
}