/* 字型走 jsDelivr CDN 的 wfg-fsung-webfonts 套件(版號鎖死，換版時這裡
   跟著改)。更早曾試過 unpkg，但它代理 npm registry 的延遲不穩定，體驗
   不如同源字型，所以一度改回 vendored 副本；分片修成真正的 woff2、整包
   降到 80MB 之後已在 jsDelivr 的 150MB 上限內，改用 jsDelivr 的邊緣節點。
   web/webfonts/wfg-fsung/ 的 vendored 副本仍由 webfonts/build-wfg-fsung.py
   的 sync_vendor_copy() 維護，要離線/內網部署時把下面這行換回
   './webfonts/wfg-fsung/wfg-fsung.css' 即可。 */
@import url('https://cdn.jsdelivr.net/npm/wfg-fsung-webfonts@1.1.0/wfg-fsung.css');

/* 漢字優先複用系統內建宋體/明體(零下載)，系統字型缺字的碼位由瀏覽器
   逐字回退到 WFG FSung 的 webfont 切片(按 256 碼位分片、用到才下載)——
   罕用擴充區、新收錄的字自然落到 FSung。
   注意不能用 @font-face + local() 做範圍控制：Chrome 86+ 基於反指紋
   考量已不查詢本地字型(實測 headless/真實 Chrome、WebKit 都不匹配)。
   補充字(PUA)絕大多數在 15/16 輔助平面(系統字型不可能有字形，回退安全)，
   對已知是補充字的元素另用 .pua-char 強制 FSung 優先(見下)，避免
   個別系統字型的 BMP PUA 碼位撞車顯示成不相干的字(AGENTS.md 約束 5)。 */
:root {
  --font-han: 'Songti TC', 'Songti SC', 'SimSun', 'PMingLiU', 'MingLiU',
    'Noto Serif TC', 'Noto Serif CJK TC', 'WFG FSung', serif;
  --font-pua: 'WFG FSung', serif;
  /* 肉眼不可見的字號縮放係數(1 ↔ 1.0001)。Chrome 對「排版時字型切片還沒
     下載完」的字有時不會在切片到貨後重排，方框永久卡住(見 app.js 的
     reshapeAfterFontLoad)；只有字號這類字型描述層級的樣式變更能強迫它
     重建回退狀態，所以所有顯示資料字的 font-size 都乘上這個係數，讓 JS
     在字型到貨時翻轉一下。 */
  --font-nudge: 1;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-subtle: #f9fafb;
  --fg: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --accent: #2563eb;
  --exact: #15803d;
  --regu: #b45309;
  --infer-bg: #fffbeb; /* 「推測」徽章底色(琥珀-50,文字用 --regu 同族) */
  /* 字源色：低飽和的淺色底 + 同色系虛線框，dot 用稍深一級的同色 */
  --blk-s: 30%;
  --blk-bg-l: 93%;
  --blk-border-l: 72%;
  --blk-dot-l: 60%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --bg-subtle: #1d2026;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --border: #2e3238;
    --border-strong: #3f444c;
    --accent: #7aa2ff;
    --exact: #6fd88a;
    --regu: #f0a35e;
    --infer-bg: #3a3122;
    --blk-s: 25%;
    --blk-bg-l: 21%;
    --blk-border-l: 38%;
    --blk-dot-l: 55%;
  }
}

/* 13 個字源分類的色相（「基本」區佔絕大多數結果，一律中性不上色，
   避免整片結果變成彩虹；「相容」區預設不顯示，不需要顏色）。
   文字標籤(圖例/hover title)才是主要辨識依據，顏色只是輔助線索。 */
.blk-exa { --blk-h: 24; }
.blk-exb { --blk-h: 48; }
.blk-exc { --blk-h: 72; }
.blk-exd { --blk-h: 96; }
.blk-exe { --blk-h: 130; }
.blk-exf { --blk-h: 165; }
.blk-exg { --blk-h: 190; }
.blk-exh { --blk-h: 215; }
.blk-exi { --blk-h: 245; }
.blk-exj { --blk-h: 275; }
.blk-cmp { --blk-h: 305; }
.blk-sup { --blk-h: 330; }
.blk-oth { --blk-h: 0; }

* { box-sizing: border-box; }

/* .options label 的 display:flex 會蓋掉 hidden 屬性的預設 display:none，
   這裡把 hidden 的優先權拉回來(依模式顯示選項用) */
[hidden] { display: none !important; }

/* 部件鍵盤是頁面級的固定側欄，主內容用右側 padding 讓出它的寬度 */
:root { --sidebar-w: min(54vw, 56rem); }
body.panel-collapsed { --sidebar-w: 10rem; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.page {
  padding: 1.5rem calc(var(--sidebar-w) + 1.5rem) 3rem 1.5rem;
}

header { margin-bottom: 1.5rem; }

h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.subtitle {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.input-row {
  display: flex;
  gap: 0.5rem;
}

.input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

#input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(1.25rem * var(--font-nudge));
  font-family: var(--font-han);
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

/* 清除鈕放在輸入框內側，輸入框為空時不顯示 */
.input-clear {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--muted);
  padding: 0.3rem 0.55rem;
  font-size: 14px;
}

.input-clear:hover { color: var(--fg); }
.input-wrap:has(#input:placeholder-shown) .input-clear { display: none; }

/* 部首名稱自動完成：輸入「三點」等部分名稱時浮出的候選清單 */
.suggest {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 14rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
  z-index: 6;
  overflow: hidden;
}

.suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0.45rem 0.75rem;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}

.suggest-item.active, .suggest-item:hover { background: var(--bg-subtle); }

.suggest-item .suggest-char {
  font-family: var(--font-han);
  font-size: calc(1.25rem * var(--font-nudge));
  line-height: 1;
}

.suggest-hint {
  padding: 0.25rem 0.75rem 0.4rem;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

#input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

button {
  font-size: 14px;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
  border-color: transparent;
  color: var(--muted);
}

.btn-ghost:hover { color: var(--fg); background: var(--bg-subtle); }

.options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.options label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.options input[type='checkbox'] { accent-color: var(--accent); }

/* 輸入框用法提示(字號/碼位檢索的入口說明，放選項列之下、結果計數之上) */
.input-hint {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* 載入/檢索中的轉圈提示 */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 0.4rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.result-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  min-height: 1.25rem;
}

#output {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.3rem;
  min-height: 3rem;
}

.truncated-note {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  padding-top: 0.25rem;
}

/* 結果字塊：低飽和的字源淺色底 + 同色系虛線框；「基本」區維持中性。
   命中類型只動文字：精確=綠、正體=橙、僅正體命中=淡化。 */
.char-chip {
  font-family: var(--font-han);
  font-size: calc(1.5rem * var(--font-nudge));
  line-height: 1;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px dashed hsl(var(--blk-h, 0) var(--blk-s) var(--blk-border-l));
  background: hsl(var(--blk-h, 0) var(--blk-s) var(--blk-bg-l));
  color: var(--fg);
  cursor: pointer;
}

.char-chip.blk-bmp {
  border-color: var(--border);
  background: var(--bg-subtle);
}

.char-chip:hover { border-color: var(--accent); }

/* 補充字(PUA 碼位)必須用全宋體渲染，不走系統字型 */
.pua-char { font-family: var(--font-pua); }

.char-chip.hit-exact { font-weight: 600; color: var(--exact); }
.char-chip.hit-fuzzy { color: var(--fg); }
.char-chip.hit-regu0 { color: var(--muted); opacity: 0.75; }
.char-chip.hit-regu1 { font-weight: 600; color: var(--regu); }

/* 表外異體字(字號查詢時補進來的、教育部沒收的字形)：主要靠上方的
   .result-divider 小標分區，字塊本身只做輕微區隔——字源底色照舊(那是
   Unicode 區塊資訊，跟收錄與否無關)，外框改點線。 */
.char-chip.hit-outside {
  border-style: dotted;
  border-color: var(--muted);
}

/* 教育部字號的第三層字形(A01784-016-7 這種，掛在某個異體之下)：字號順序
   本來就讓它們緊跟在所屬的異體後面，這裡只做「從屬」的視覺標示——字塊
   略縮、前面加一個淡色的點，不另外分區，以免打散字號順序、讓 -016-x 跟
   它所屬的 -016 分家。 */
.char-chip.chip-sub {
  font-size: calc(1.25rem * var(--font-nudge));
  align-self: center;
}

.char-chip.chip-sub::before {
  content: "˙";
  color: var(--muted);
  margin-right: 0.1em;
}

/* 附錄字(教育部原始類別標「附」的身份，全表 2002 個)：右上角掛一個小
   「附」字。它跟異體是不同身份，但在字族列表裡出現得稀疏，不標就完全
   看不出來；用文字而非顏色，是因為顏色已經被字源與命中類型佔滿了。 */
.char-chip.chip-appendix::after {
  content: "附";
  /* 顯式指定字型棧：PUA 字塊掛了 .pua-char 強制 FSung，這個小標不需要
     跟著走 FSung，用一般漢字棧即可 */
  font-family: var(--font-han);
  font-size: 0.45em;
  vertical-align: super;
  color: var(--muted);
  margin-left: 0.1em;
}

/* 結果區裡撐滿一整列的小標，用來把後續字塊分成獨立一區 */
.result-divider {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* 拆分樹：真正的「自上而下」節點樹(org-chart 風格)。
   結構：ul.tree-chart > li > (span.tree-node + ul > li …)。
   連接線畫法(經典 CSS family-tree 技巧)：
   - 父節點往下的落線：子 ul 的 ::before(佔 ul 的 padding-top 區)
   - 每個子節點：::before/::after 各畫一半的水平軌 + ::after 的垂直落線
   - 獨生子不畫水平軌(only-child 隱藏)，只剩父 ul 的直落線
   - 第一個/最後一個子節點把外側的水平軌截掉並帶圓角 */
.split-trees {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.split-tree { flex: 0 0 auto; }

.split-tree-leaf {
  font-size: 13px;
  color: var(--muted);
}

.tree-chart, .tree-chart ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-chart ul {
  padding-top: 14px;
  position: relative;
}

.tree-chart li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 14px 5px 0;
}

.tree-chart > li { padding-top: 0; }

.tree-chart li::before, .tree-chart li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 14px;
  border-top: 1px solid var(--border-strong);
}

.tree-chart li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid var(--border-strong);
}

.tree-chart li:only-child::before, .tree-chart li:only-child::after { display: none; }
.tree-chart > li::before, .tree-chart > li::after { display: none; }
.tree-chart li:first-child::before, .tree-chart li:last-child::after { border-top: none; }

.tree-chart li:last-child::before {
  border-right: 1px solid var(--border-strong);
  border-radius: 0 6px 0 0;
}

.tree-chart li:first-child::after { border-radius: 6px 0 0 0; }

/* 父節點往下的落線(獨生子時是唯一的連接線) */
.tree-chart ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 14px;
  border-left: 1px solid var(--border-strong);
}

.tree-node {
  font-family: var(--font-han);
  font-size: calc(1.15rem * var(--font-nudge));
  line-height: 1;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
}

.tree-root {
  font-size: calc(1.4rem * var(--font-nudge));
  border-color: var(--border-strong);
}

/* 內層「┇」一字多拆的分隔節點 */
.tree-alt-chip {
  font-size: 11px;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  padding: 0.25rem 0.35rem;
}

/* 字源圖例：純顏色說明，不可點擊，直接展開顯示 */
.legend-wrap {
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.legend-title { font-weight: 500; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0.5rem 0 0.25rem;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
}

.legend-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  background: hsl(var(--blk-h, 0) var(--blk-s) var(--blk-dot-l));
}

.legend-chip.blk-bmp .legend-dot { background: var(--bg-subtle); border: 1px solid var(--border-strong); }

.legend-note {
  margin: 0.25rem 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* 部件鍵盤：頁面級的固定側欄，貼住視口右緣、佔滿整個視窗高度、內部捲動。
   側欄內部**不分欄**——所有分類單欄從上到下一次列出，每個分類是一條
   flex-wrap 的「文字流」：行內小標籤 + 該分類全部按鍵攤平連排，按鍵縮小，
   讓一屏能看到的部件數量最大化。
   （flex 容器裡要讓 overflow-y:auto 生效，中間每層都要 min-height:0，
   這是 flexbox 常見的坑，光加 overflow-y 不夠。） */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sidebar-w);
  border-left: 1px solid var(--border);
  background: var(--bg);
  padding: 0.75rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.side-panel.collapsed {
  bottom: auto;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.side-panel.collapsed:hover { background: var(--bg-subtle); }

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  flex: 0 0 auto;
}

/* 只設「收起/展開」鈕(唯一直屬子元素)，故意用 > 而非後代選擇器——
   .side-tab 也是 .side-panel-header 底下的 <button>(隔了一層 .side-panel-tabs)，
   後代選擇器的話這條規則的 specificity(0,1,1)會蓋掉 .side-tab 自己的
   padding/font-size(0,1,0)，手機上頁籤實測只有 ~20px 高，遠低於文件宣稱
   的 44px 觸控目標(見 web/README.md「部件鍵盤」條)。 */
.side-panel-header > button {
  padding: 0.1rem 0.5rem;
  font-size: 12px;
}

/* 側欄頂端「部件鍵盤／字詳情」頁籤，切換 #side-panel 的 data-view。
   做成分段控件(segmented control)：選中的用主色填充(視覺語言同
   .btn-primary)，未選中的維持完整可點按外觀——曾經是 12px 的灰字幽靈
   按鈕，看起來像說明文字，尤其手機上點開字詳情後使用者發現不了還能切回
   部件鍵盤(帶 ?q=U+…/字號 的分享連結一進來就是字詳情視圖，更嚴重)。 */
.side-panel-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.side-tab {
  appearance: none;
  border: none;
  background: none;
  border-radius: 6px;
  padding: 0.3rem 0.85rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
}

.side-tab:hover { background: var(--bg); }
.side-tab.active { background: var(--accent); color: #fff; font-weight: 600; }

/* 鍵盤／字詳情共用同一個可捲動容器，用 data-view 切換顯示哪一個，
   避免兩份各自的 overflow-y 邏輯要重複維護。 */
.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.side-panel[data-view='keypad'] .char-detail { display: none; }
.side-panel[data-view='detail'] .keypad { display: none; }
.side-panel.collapsed .panel-body { display: none; }

/* 字詳情：點一個查詢結果字塊後，右側面板顯示該字的碼位、拆分與快速動作。 */
.char-detail { position: relative; }

.char-detail-close {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  padding: 0.2rem 0.45rem;
}

.char-detail-close:hover { color: var(--fg); background: var(--bg-subtle); border-radius: 5px; }

.char-detail-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.char-detail-char {
  font-family: var(--font-han);
  font-size: calc(3.5rem * var(--font-nudge));
  line-height: 1;
  text-align: center;
  padding: 0.5rem 0;
}

/* 字詳情 metadata 表格：固定欄位的「標籤｜值」兩欄列表,只用橫向細分隔線
   (無外框、無斑馬紋),查無的欄位顯示 muted 的「—」——每個字一律列出全部
   類別,使用者一眼看出這個字有哪幾類資料、缺哪幾類 */
.char-detail-table {
  margin: 0.25rem 0 0.5rem;
  text-align: left;
}

.meta-row {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.meta-row:last-child { border-bottom: none; }

.meta-label {
  flex: 0 0 6.5em;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.meta-value {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: center;
}

.meta-value.meta-none { color: var(--muted); }
.meta-muted { color: var(--muted); }

.meta-mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
}

/* 「推測」徽章：語意色(琥珀)小藥丸,只掛在推測性欄位的標籤旁,
   hover 有比對方法與「請核對字形」的完整說明 */
.badge-infer {
  font-size: 11px;
  line-height: 1.5;
  padding: 0 0.4rem;
  border-radius: 9999px;
  background: var(--infer-bg);
  color: var(--regu);
}

/* 表格值欄裡的連結/按鈕比獨立按鈕列略緊湊一級(表格本身已提供分組結構,
   不需要大按鈕的視覺重量)，但**只小一級**：曾經壓到 12px/0.15rem
   (高 26px，桌機難點、手機遠低於 44px 觸控目標)，比表格化之前的
   14px/0.4rem(高 36px)小掉一大截，實際使用時整個面板都覺得「縮水」。 */
.meta-value .char-detail-link {
  font-size: 13px;
  padding: 0.32rem 0.7rem;
  border-radius: 6px;
}

/* 字源列複用圖例的分類色點;「基本」區與圖例同款的中性底特例 */
.meta-value .legend-dot { flex: 0 0 auto; }
.meta-value .legend-dot.blk-bmp { background: var(--bg-subtle); border: 1px solid var(--border-strong); }

.char-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  display: inline-block;
  margin: 0.75rem 0 0.4rem;
}

/* 外部字典：詳情面板的主要動作，放在大字正下方、做成醒目的大按鈕 */
.char-detail-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}

.char-detail-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
}

.char-detail-link:hover { background: var(--accent); color: #fff; }

/* 字統网組字候選連結裡的條目文字(⿰糸殿 這類 IDS)：結構符 U+2FF0-2FFB
   多數系統 UI 字型沒有字形，走漢字字型棧讓它回退到 FSung webfont 切片
   (已確認收有這批符號)，並比照其他資料字吃 --font-nudge 重排 workaround */
.char-detail-link .ids-text {
  font-family: var(--font-han);
  font-size: calc(14px * var(--font-nudge));
}

/* 「查異體字」是站內動作(以正字號重查整個字族)，主色填充，
   跟外部字典的外框連結做視覺區隔 */
.char-detail-action {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.char-detail-action:hover { filter: brightness(1.08); }

/* 鍵盤排列方式的切換(部件分類／部首筆畫)。做成跟側欄頁籤同一套分段控件的
   視覺語言，但層級低一階(尺寸小一號)：它切的是鍵盤內部的排列，不是換面板。
   sticky 貼在捲動容器頂端——鍵盤很長，捲到下面時還要能換一種排法。 */
.pad-switch {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 2px;
  background: var(--bg);
  padding: 0.35rem 0;
  margin-bottom: 0.15rem;
}

.pad-tab {
  flex: 1 1 0;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
}

.pad-tab:hover { border-color: var(--border-strong); }
.pad-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.pad-note {
  margin: 0 0 0.4rem;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.keypad[data-pad='cat'] #radpad-grid,
.keypad[data-pad='stroke'] #keypad-grid { display: none; }

/* bt.json/舊版 worker 導致部首鍵盤建不起來時，連切換鈕都藏掉，
   免得使用者切過去看到一片空白(說明文字改在 .pad-note 顯示) */
.keypad.no-radpad .pad-switch { display: none; }

/* 同一個部首的正形＋附形(人亻、水氵氺)是一組，不要被折行拆散 */
.radpad-item {
  display: inline-flex;
  gap: 0;
  white-space: nowrap;
  margin-right: 0.3rem;
}

.keypad-key-alt { color: var(--muted); }

/* 畫數組末尾的「簡化」小標籤：比分類標籤弱一階(無底色)，只做區隔用 */
.radpad-subtag {
  font-size: 11px;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  margin: 0 0.25rem 0 0.15rem;
  white-space: nowrap;
}

.keypad-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 0.2rem 0;
}

.keypad-cat + .keypad-cat { border-top: 1px solid var(--border); }

.keypad-cat-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  margin-right: 0.35rem;
  white-space: nowrap;
}

.keypad-key {
  font-family: var(--font-han);
  font-size: calc(1.1rem * var(--font-nudge));
  line-height: 1.25;
  padding: 0.1rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--fg);
}

.keypad-key:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

/* 自製即時 tooltip：原生 title 有內建延遲且無法調整，改用 JS 定位的浮層 */
#tooltip {
  position: fixed;
  z-index: 10;
  background: var(--fg);
  color: var(--bg);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

#tooltip.show { opacity: 1; }

#toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 0.5rem);
  background: var(--fg);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-size: 13px;
}

#toast.show { opacity: 1; transform: translate(-50%, 0); }

footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* 窄螢幕(手機)：鍵盤改成固定在螢幕底部的抽屜——收起時只剩一條標題列，
   點開後從下方彈出半屏高的鍵盤，輸入框保持可見，點鍵即輸入即看結果，
   不用在「捲下去找鍵、捲上來看結果」之間往返。按鍵同時加大到接近
   44px 的觸控目標。 */
@media (max-width: 60rem) {
  :root, body.panel-collapsed { --sidebar-w: 0rem; }
  .page { padding-bottom: 5rem; }
  .side-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 50vh;
    border: none;
    /* 邊界要跟上面的頁面內容明顯分開：粗一號的頂邊線 + 加重陰影，
       不能只靠 1px 細線(手機小螢幕、常見的背景色又跟卡片色接近，太不顯眼)。 */
    border-top: 2px solid var(--border-strong);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 20px rgb(0 0 0 / 16%);
    z-index: 5;
    padding-top: 1.2rem;
  }
  .side-panel.collapsed { bottom: 0; border-bottom: none; }
  /* 抽屜頂端置中的「把手」小橫條——常見 bottom sheet 的視覺慣例，
     兩個作用：進一步跟上面內容做出邊界，也暗示「這裡可以點開/收起」。 */
  .side-panel::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 2.75rem;
    height: 0.3rem;
    background: var(--border-strong);
    border-radius: 999px;
    transform: translateX(-50%);
  }
  /* 手機上頁籤撐滿抽屜頂部、加大到超過 44px 觸控目標——抽屜矮、內容擠，
     頁籤不夠大就會被當成裝飾看不見。「收起/展開」鈕也一併放大：原本沿用
     桌機的 12px/極窄 padding，在手機上根本點不準。 */
  .side-panel-header { gap: 0.5rem; min-height: 2.75rem; }
  .side-panel-tabs { flex: 1 1 auto; }
  .side-tab {
    flex: 1 1 0;
    padding: 0.85rem 0.5rem;
    font-size: 15px;
    text-align: center;
  }
  .side-panel-header > button {
    padding: 0.72rem 0.9rem;
    font-size: 14px;
  }
  .keypad-key {
    font-size: calc(1.35rem * var(--font-nudge));
    padding: 0.45rem 0.55rem;
  }
  .keypad-cat { gap: 4px; padding: 0.3rem 0; }
  /* 抽屜很矮，排列方式的切換也要撐到好按的觸控目標 */
  .pad-tab { padding: 0.62rem 0.5rem; font-size: 14px; }
  /* 字詳情表格裡的字典連結/「查異體字」鈕同理：桌機那級緊湊尺寸在手機上
     點不準(外部字典一列十來顆、彼此又貼得近，誤觸就是開錯分頁) */
  .meta-value .char-detail-link {
    font-size: 14px;
    padding: 0.5rem 0.85rem;
  }
}

/* 觸屏裝置沒有 hover，tooltip 只會在點按時閃一下，直接停用
   （碼位資訊已併入複製時的 toast） */
@media (hover: none) {
  #tooltip { display: none !important; }
}