/* kbd-float.css —— 透明悬空键盘浮层（老师 2026-10-13）
 * ============================================================================
 * 老师原话：「你再用 jimeng 的 CLI 做一组**透明悬空键盘**，保留数字键和空格和退格。
 *   然后尝试做一个盲打的同时透明键盘高亮动画。当然透明悬空键盘也可以**在平板上触摸
 *   使用**，把系统里现在的打字模式加上这个功能。」
 *
 * ★★★ 为什么是**浮层**、而且要 `position: fixed`：
 *   本项目有一条硬教训叫「零位移」—— 打字卡上原来把键盘当普通块放进流里，
 *   键盘一撑就把下面的文字顶走（老师 2026-10-12 报过：「键帽…穿插到了文字的下方」）。
 *   所以这层键盘**绝不参与文档流**：fixed 定位、指针事件只在键盘自己的方块上吃，
 *   其余一律 `pointer-events: none` ⇒ 打字/拼写界面的字母格、输入框、手指提示
 *   一个像素都不会动（verify 里用 bounding rect 前后对比 <=1px 来卡）。
 *
 * ★ 半透明：键帽是 canvas 贴的 PNG（alpha 87~113），板座只有很淡的一层，
 *   空槽真透明 —— 底下的页面内容能透出来，这才是老师要的「悬空」。
 * ========================================================================== */

.kbdf {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  /* 默认整层不吃事件：只有下面的按钮与键盘画布吃 */
  pointer-events: none;
  /* 贴屏幕底边的一点点安全距离（安卓平板有手势条） */
  padding: 0 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* 出现/收起都别"跳"，淡入淡出 */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.kbdf.is-on { opacity: 1; transform: none; }
.kbdf[hidden] { display: none !important; }

/* 键盘画布：canvas 按 layout.json 的坐标贴键帽 PNG
   ★ 2026-10-19 二轮（老师：「去除掉边框」）：玻璃板座（渐变底/发光描边/阴影/blur）
     全部撤掉 —— 只有键帽本身悬空，空槽真透明，不再有那一圈"板子"。 */
.kbdf-canvas-wrap {
  position: relative;
  pointer-events: auto;          /* ★ 只有这里吃触摸 */
  touch-action: none;            /* 触屏上别把长按退格变成选中/滚动 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.kbdf-canvas { display: block; width: 100%; height: auto; }

/* 右上角的小工具条（收起/展开、贴不贴边）—— 不吃键盘的触摸区 */
.kbdf-tools {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  margin-right: 6px;
}
.kbdf-btn {
  pointer-events: auto;
  min-width: 30px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(150, 222, 240, .5);
  background: rgba(10, 26, 48, .72);
  color: #d7f4ff;
  font: 600 12px/1 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kbdf-btn:active { transform: translateY(1px); }
.kbdf-btn.is-on { border-color: #6fe0f4; box-shadow: 0 0 0 2px rgba(111, 224, 244, .22); }

/* ---- 皮肤/材质面板（2026-10-19）：点「🎨 皮肤」弹出。
      挂在 .kbdf（fixed）里、贴工具条上方；比键盘画布高一层。 ---- */
.kbdf-panel {
  pointer-events: auto;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 10px;
  z-index: 2;
  min-width: 230px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10, 26, 48, .92);
  border: 1px solid rgba(150, 222, 240, .4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.kbdf-panel[hidden] { display: none !important; }

/* 材质四档（透明 / 原塑 / 磨砂 / 金属） */
.kbdf-mats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kbdf-mats-lab { font: 600 12px/1 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; color: #9fb4cc; margin-right: 2px; }
.kbdf-mat {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(150, 222, 240, .4);
  background: rgba(10, 26, 48, .6);
  color: #cfe9f5;
  font: 500 12px/1 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kbdf-mat:hover { border-color: #6fe0f4; }
.kbdf-mat.is-on {
  border-color: #6fe0f4;
  background: rgba(111, 224, 244, .18);
  color: #eaf9ff;
  font-weight: 700;
}

/* 皮肤清单（kbd.js::skinPicker 画进来的 .kbd-skins 在深色面板里稍微透一点） */
.kbdf-skinhost { margin-top: 8px; }
.kbdf-skinhost .kbd-skins { margin-top: 0; }
.kbdf-skinhost .kbd-skin {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
  color: #dfeaf5;
}
.kbdf-skinhost .kbd-skin:hover { border-color: #6fe0f4; }
.kbdf-skinhost .kbd-skin.is-on { border-color: #6fe0f4; }

/* 收起态：只留工具条，键盘画布藏起来（省屏幕，手机默认折叠用的就是这一档） */
.kbdf.is-min .kbdf-canvas-wrap { display: none; }

/* ★★ 2026-10-19（老师报的「穿模」）：键盘开着时，页面可用的视口少了键盘那一块
   （≤52% 视口高）。浮层绝不进文档流（「零位移」铁律），但**文档流要让位**：
   body 垫上键盘实际高度的滚动余量（--kbdf-h 由 kbd-float.js 在 fit() 时写入），
   打字卡/拼写屏的内容从此能滚到键盘上沿之上，不再被键帽半透明地压在下面。
   键盘一关（body.kbdf-open 摘掉）立即还原 —— 这不是"键盘顶走内容"，
   而是页面自己多出一截可滚动空间，零位移断言不受影响。 */
body.kbdf-open { padding-bottom: calc(var(--kbdf-h, 380px) + 12px); }

/* ★ 手机竖屏（<=560px）：默认折叠。
 *   老师要的是"小屏（手机）与平板横屏都要能用"，手机上 54 键铺满会盖掉半个屏幕，
 *   所以默认只留一行「⌨ 键盘」按钮，点一下再展开（选择记在 localStorage）。 */
@media (max-width: 560px) {
  .kbdf { padding: 0 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px; }
}

/* ============================================================================
   开关条（打字卡 / 练习拼写各一处）
   ★ 只是 label + checkbox，**不占额外行高**：插在本来就有的一行里，
     这样"零位移"的前提不被破坏（浮层本身也是 fixed，不进文档流）。
   ========================================================================== */
.ln-float-sw,
.pc-float-sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t-muted, #8a93a0);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.ln-float-sw input,
.pc-float-sw input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2f6fed;
}
/* 深色版打字卡里用亮一点的文字 */
.ln-type.is-dark ~ .ln-float-sw,
.ln-card-wrap.is-type .ln-float-sw { color: #9fb4cc; }

/* 开关条本体（`.ln-float-bar` 是它的容器）：
   ★ 必须**显式定义**，不能只靠子元素撑 —— `_audit_classes.py` 会把
     "JS 里写了 class、CSS 里没有对应规则"列出来（它就是这么抓到这一条的）。
     这里对齐 .ln-type 的居中列布局，且不占额外行高（是一行小字 + 复选框）。 */
.ln-float-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* ============================================================================
   ★★★ 透明键盘开着时，把打字卡里**那把内嵌的指法键盘**收起来
   ----------------------------------------------------------------------------
   为什么（实测出来的，不是想当然）：
     · 浮层 fixed 贴屏幕底部、高约 372px（1280×800 的 Tab S7 上量过）；
     · 内嵌的 `.kbd`（kbd.js：键盘 + 手型图）在文档流里、总高约 600px；
     ⇒ 两者**必然重叠**：手机上打开浮层时，内嵌那块正好被压住一大半，
        手型图只露出一角 —— 看着像页面坏了。
   处理：开着浮层就 `display:none` 掉内嵌那块，指法提示改由**浮层的橙色呼吸圈**
        （kbd.js 的 is-target 那套在浮层里是 `press` 高亮 + 内嵌提示）承担；
       卡片里另外给一颗「手指提示被挡住了？点这里看」把浮层关掉、内嵌的回来。
   ★ 这不是"位移"：内嵌块在卡片里的**位置**没变，只是不显示；
     `_verify_floating_kbd.mjs` 的第 [3] 条照样断言 rect 差 = 0。
   ========================================================================== */
.ln-card-wrap.is-type.is-float-on .kbd,
.ln-type.is-float-on .kbd { display: none; }

/* 双键盘提示按钮（只有浮层开着时才有意义） */
.ln-dual-hint { display: none; }
.ln-card-wrap.is-type.is-float-on .ln-dual-hint { display: block; text-align: center; margin-top: 8px; }
.ln-dual-btn {
  border: 1px solid rgba(150, 222, 240, .45);
  background: rgba(10, 26, 48, .6);
  color: #cfe9f5;
  border-radius: 999px;
  padding: 6px 14px;
  font: 500 12.5px/1.3 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.ln-dual-btn:hover { border-color: #6fe0f4; color: #eaf9ff; }