/* ══════════════════════════════════════════════════════════════════════
   selection-hint  ·  选中器件时画布顶部居中的操作提示条
   ─────────────────────────────────────────────────────────────────────
   干净单行 glass 胶囊，选中淡入 / 清选淡出。pointer-events:none 不挡画布。
   键帽与快捷键面板同源视觉（--surface-2 / --line-1 / --font-mono）。
   ══════════════════════════════════════════════════════════════════════ */

.sel-hint {
  position: absolute;
  /* 紧贴底部 action-dock 上方：dock 在 bottom:22px、总高 ~42px，此处留 ~10px 间隙。 */
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 199;   /* 就在 action-dock（200）之下，与其同处底部中线一族 */
  pointer-events: none;                 /* 纯提示：绝不拦截画布点击 / 拖拽 */

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);

  color: var(--ink-2-v1);
  background: var(--float-bg);
  border: 1px solid var(--line-1);
  backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  -webkit-backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  box-shadow: var(--float-edge);

  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.sel-hint[hidden] {
  display: flex;                        /* 覆盖 [hidden]，用透明度做淡出 */
  opacity: 0;
  transform: translateX(-50%) translateY(4px);   /* 向下（朝工具条）淡出 */
  pointer-events: none;
}

.sel-hint-group { display: inline-flex; align-items: center; gap: 5px; }

.sel-hint-label { font-size: 12px; color: var(--ink-3-v1); white-space: nowrap; }

.sel-hint-sep {
  width: 1px; height: 24px;
  background: var(--line-1);
  flex: 0 0 auto;
}

.sel-hint kbd {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink-2-v1); background: var(--surface-2);
  border: 1px solid var(--line-1); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; min-width: 16px; text-align: center; white-space: nowrap;
  line-height: 1.4;
}

/* ── 方向键十字（物理键盘排布：上行 ↑、下行 ← ↓ →）── */
.sel-hint-move { gap: 8px; }

.sel-hint-arrows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ".    up    ."
    "left down right";   /* 2×3 矩形栅格 —— 非矩形会静默失效（V4） */
  gap: 2px;
  flex: 0 0 auto;
}
.sel-hint-arrows .ak-up    { grid-area: up; }
.sel-hint-arrows .ak-left  { grid-area: left; }
.sel-hint-arrows .ak-down  { grid-area: down; }
.sel-hint-arrows .ak-right { grid-area: right; }
.sel-hint-arrows kbd {
  width: 15px; height: 15px; min-width: 0; padding: 0;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1; border-bottom-width: 1.5px;
}

/* ── Move 组双行说明（主行 Move / 副行 1 mm · Alt 0.1 mm）── */
.sel-hint-move-labels { display: inline-flex; flex-direction: column; gap: 1px; }
.sel-hint-move-main { font-size: 12px; color: var(--ink-1); line-height: 1.2; }
.sel-hint-move-sub {
  font-size: 11px; color: var(--ink-3-v1); line-height: 1.3;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.sel-hint-move-sub kbd {
  font-size: 9px; padding: 0 4px; min-width: 14px; border-bottom-width: 1.5px;
}