/* ============================================================================
 * guji-help.css — 「語法手冊」浮動卡片（由 guji-editor.js 建立）
 *
 * 設計原則：
 *  1) 排版語法原本塞在編輯卡裡一坨 4KB 的純文字，佔版面又沒法查。現拆成獨立卡片：
 *     可拖動、可縮放、位置記憶，與「編輯」「預覽」兩張卡同一套手感。
 *  2) 面板本體樣式（背景 / 描邊 / 陰影 / 圓角）沿用 .guji-float-panel 的視覺語言，
 *     但該 class 的樣式是寫在 SPA bundle 的 inline style 裡的，這裡照抄一份，
 *     避免依賴 minified 產物。位置與大小走 --guji-hp-x/y/w/h（由 guji-editor.js 寫入）。
 *  3) 每條語法＝籌碼(chip)＋說明；點籌碼即插入編輯框光標處。
 * ==========================================================================*/

.guji-help-card{
  position:fixed;
  left:var(--guji-hp-x,940px);
  top:var(--guji-hp-y,92px);
  width:var(--guji-hp-w,360px);
  height:var(--guji-hp-h,470px);
  display:none;                 /* 預設收起，點「語法手冊」才出現 */
  flex-direction:column;
  background:#fffdf6;
  border:1px solid #d8cdb8;
  border-radius:10px;
  box-shadow:0 12px 44px rgba(92,58,46,.28);
  overflow:hidden;
  z-index:78;
  font-family:"Songti SC","STSong",serif;
  color:#5c3a2e;
}
.guji-help-card.is-open{ display:flex; }

/* 標題列（可拖動） */
.guji-help-card .gy-bar{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;background:#f3e9d4;border-bottom:1px solid #e0d5bd;
  cursor:move;flex:0 0 auto;user-select:none;
}
.guji-help-card .gy-title{ font-size:13px;font-weight:700;color:#7a5a2e; }
.guji-help-card .gy-sub{ font-size:10.5px;color:#a08a68;letter-spacing:.02em; }
.guji-help-card .gy-spacer{ flex:1 1 auto; }
.guji-help-card .gy-btn{
  border:1px solid #d8cdb8;background:#fff;color:#7a5a2e;
  font-size:11px;font-family:inherit;border-radius:5px;
  padding:1px 6px;cursor:pointer;line-height:1.6;
}
.guji-help-card .gy-btn:hover{ background:#faf5e8; }

/* 搜尋 */
.guji-help-card .gy-search{ padding:8px 10px 4px;flex:0 0 auto; }
.guji-help-card .gy-search input{
  width:100%;box-sizing:border-box;
  font-size:12px;font-family:inherit;color:#5c3a2e;
  border:1px solid #e2d7c2;border-radius:6px;
  background:#fff;padding:4px 8px;outline:none;
}
.guji-help-card .gy-search input:focus{ border-color:#c3a06a; }

/* 分類籌碼 */
.guji-help-card .gy-cats{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:4px 10px 8px;border-bottom:1px solid #eee3cf;flex:0 0 auto;
}
.guji-help-card .gy-cat{
  font-size:11px;font-family:inherit;line-height:1.75;
  padding:0 8px;border-radius:999px;cursor:pointer;
  border:1px solid #e0d5bd;background:#fff;color:#7a5a2e;
}
.guji-help-card .gy-cat:hover{ background:#faf5e8; }
.guji-help-card .gy-cat.on{ background:#7a5a2e;border-color:#7a5a2e;color:#fdf8ec; }

/* 條目列表 */
.guji-help-card .gy-list{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 8px 14px;
}
.guji-help-card .gy-grp{
  font-size:10.5px;color:#a08a68;letter-spacing:.14em;
  margin:9px 4px 3px;
}
.guji-help-card .gy-grp:first-child{ margin-top:2px; }
.guji-help-card .gy-item{
  padding:5px 6px;border-radius:6px;cursor:pointer;
  border:1px solid transparent;
}
.guji-help-card .gy-item:hover{ background:#faf5e8;border-color:#eadfc8; }
.guji-help-card .gy-item:active{ background:#f3e9d4; }
.guji-help-card .gy-syn{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;color:#8a3b2e;
  background:#fdf2e7;border:1px solid #eddcc6;border-radius:4px;
  padding:0 5px;line-height:1.85;
  word-break:break-all;
}
.guji-help-card .gy-desc{
  font-size:11.5px;color:#6b5138;line-height:1.65;margin-top:2px;
}
.guji-help-card .gy-note{
  font-size:11px;color:#8a3b2e;line-height:1.6;margin-top:3px;
  background:#fdf2e7;border-left:2px solid #e0b48a;border-radius:0 4px 4px 0;
  padding:2px 6px;
}
.guji-help-card .gy-none{
  font-size:12px;color:#a08a68;text-align:center;padding:18px 8px;
}

/* 插入回饋 */
.guji-help-card .gy-toast{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(6px);
  background:rgba(92,58,46,.92);color:#fdf8ec;font-size:11px;
  padding:3px 10px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;white-space:nowrap;
}
.guji-help-card .gy-toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

/* 縮放握把（與另外兩張卡一致） */
.guji-help-card .guji-float-resize{
  position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 46%,#c9b896 46%,#c9b896 54%,transparent 54%,transparent 64%,#c9b896 64%,#c9b896 72%);
}

/* 編輯卡裡的入口 */
.guji-help-row{ display:flex;align-items:center;gap:8px;margin-top:6px; }
.guji-help-row .guji-help-tip{
  flex:1 1 auto;font-size:11px;color:#8a6a3e;line-height:1.7;
}
.guji-help-open{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-family:inherit;color:#7a5a2e;
  border:1px solid #d8cdb8;background:#fdf8ec;border-radius:5px;
  padding:2px 9px;cursor:pointer;line-height:1.7;
}
.guji-help-open:hover{ background:#f3e9d4; border-color:#c3a06a; }

/* ============================================================================
 * 「全書默認」面板（設定所有書的默認開關）
 * ==========================================================================*/
.guji-opt-mask{
  position:fixed;inset:0;z-index:120;background:rgba(60,42,20,.34);
  display:flex;align-items:center;justify-content:center;
}
.guji-opt-panel{
  width:min(460px,92vw);background:#fffdf6;border:1px solid #d8cdb8;border-radius:10px;
  box-shadow:0 18px 60px rgba(92,58,46,.35);overflow:hidden;
  font-family:"Songti SC","STSong",serif;color:#5c3a2e;
}
.guji-opt-panel button:disabled{ cursor:default; }
.guji-opt-panel button:not(:disabled):hover{ filter:brightness(.97); }

/* ============================================================================
 * 浮批（頁面級批註）在編輯預覽裡可拖動
 *   .ts-pizhu 預設 pointer-events:none（閱讀頁不該擋選字）；
 *   只有編輯預覽卡裡才放開，並給可拖的視覺提示。
 * ==========================================================================*/
#guji-prev-card .wtc-page .ts-pizhu{
  pointer-events:auto;
  cursor:move;
  outline:1px dashed rgba(184,134,47,.55);
  outline-offset:1px;
  border-radius:2px;
}
#guji-prev-card .wtc-page .ts-pizhu:hover{ outline-color:rgba(156,59,46,.85); background:rgba(253,242,231,.55); }
#guji-prev-card .wtc-page .ts-pizhu.dragging{
  outline:1px solid rgba(156,59,46,.9);
  background:rgba(253,242,231,.75);
  z-index:9;
}