/* 字型是 web/webfonts/wfg-fsung/ 底下的 vendored 副本(跟 repo 根目錄的
   webfonts/wfg-fsung/ 內容一致，那份是給 wfg-fsung-webfonts npm 套件用
   的)，不透過 CDN 載入。曾經試過改指向 unpkg CDN(見 git 歷史)，但 unpkg
   代理 npm registry 的延遲不穩定，體驗不如本機同源字型；vendored 副本
   讓 web/ 不必依賴任何外部服務就能獨立部署。字型檔案更新時記得同步這份
   副本，見 webfonts/build-wfg-fsung.py 的 sync_vendor_copy()。 */
@import url('./webfonts/wfg-fsung/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;
}

: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;
  /* 字源色：低飽和的淺色底 + 同色系虛線框，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;
    --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: 1.25rem;
  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: 1.25rem;
  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); }

/* 載入/檢索中的轉圈提示 */
.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: 1.5rem;
  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); }

/* 拆分樹：真正的「自上而下」節點樹(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: 1.15rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
}

.tree-root {
  font-size: 1.4rem;
  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-panel-header button {
  padding: 0.1rem 0.5rem;
  font-size: 12px;
}

/* 側欄頂端「部件鍵盤／字詳情」小頁籤，切換 #side-panel 的 data-view。
   點字詳情時樣式沿用主分頁 .tab 的邏輯但縮小尺寸，維持視覺語言一致。 */
.side-panel-tabs { display: flex; gap: 0.2rem; }

.side-tab {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  border-radius: 5px;
  padding: 0.15rem 0.55rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.side-tab:hover { color: var(--fg); background: var(--bg-subtle); }
.side-tab.active { color: var(--fg); background: var(--bg-subtle); border-color: var(--border); }

/* 鍵盤／字詳情共用同一個可捲動容器，用 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-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

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

.char-detail-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 0.75rem;
}

.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; }

.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: 1.1rem;
  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;
    border-top: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
    z-index: 5;
  }
  .side-panel.collapsed { bottom: 0; border-bottom: none; }
  .keypad-key {
    font-size: 1.35rem;
    padding: 0.45rem 0.55rem;
  }
  .keypad-cat { gap: 4px; padding: 0.3rem 0; }
}

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