/* ═══════════════════════════════════════════════════════════════════
   WorkBuddy 数码印刷平台 · 共享 UI 组件样式表（ADR-059，v4.74）
   ─────────────────────────────────────────────────────────────────
   定位：与 wb-theme.css 配套的第二层事实源。
        · wb-theme.css 管「取值」（颜色 + 尺寸刻度令牌）
        · 本文件   管「组件」（按钮 / 表单 / 行 / 卡片 / 徽标）

   背景：此前 6 个业务模块各自抄了一份 .btn 定义，已漂移出 8 处实质
        差异（高度 30 vs 32、字号 12 vs 13、悬停效果两种、禁用态缺失、
        危险态有无不一）。任何一次「局部美化」都只改一个模块，其他
        模块同步不了，于是越改越不齐——这是「改着改着就变丑」的根因。

   接入方式（渐进，可逐个模块推进）：
     <link rel="stylesheet" href="../00-平台核心/wb-ui.css">
     然后删除本模块 index.html 里对应的 .btn / .row / .card 等定义。

   优先级设计（关键）：
     全表包在 @layer wb-ui 中。CSS 层叠规则规定——**未分层样式优先级
     永远高于分层样式**。因此：
       · 模块内已有的定义（未分层）会继续生效，不会被本表覆盖
       · 删除模块内的定义后，本表自动接管，无需改任何 JS / HTML
     这样接入顺序完全自由，可以一个模块一个模块收，随时可回退。

   铁律：
     1. 本表内只允许出现 var(--wb-*) 令牌，禁止裸 px / 裸色值
        （唯一例外：强调色底上的 #fff 文字——语义上恒为白）
     2. 新增组件必须先加到这里，再由模块引用；不允许模块自建平行定义
     3. 改这里等于改全平台，必须跑 node test/run-all.js 确认无回归
   ═══════════════════════════════════════════════════════════════════ */

@layer wb-ui {

/* ── 按钮（合并 6 模块后的超集，基准取多数派 30px / 12px）────────── */
.btn {
  height: var(--wb-h-md);
  padding: 0 var(--wb-sp-3);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-ctrl);
  background: var(--wb-input-bg);
  color: var(--wb-text);
  font-family: inherit;
  font-size: var(--wb-fs-sm);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  /* v4.76：hover 过渡消费动效令牌（ADR-060 第二批，禁写死 ms） */
  transition: background var(--wb-dur-sm), border-color var(--wb-dur-sm), color var(--wb-dur-sm);
}
.btn:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.btn:focus-visible { outline: var(--wb-focus-ring); outline-offset: 1px; }

/* 尺寸变体 */
.btn.small { height: var(--wb-h-sm); padding: 0 var(--wb-sp-2); font-size: var(--wb-fs-xs); }
.btn.large { height: var(--wb-h-lg); padding: 0 var(--wb-sp-4); font-size: var(--wb-fs-md); }

/* 语义变体 */
.btn.accent { background: var(--wb-accent); border-color: var(--wb-accent); color: #fff; }
.btn.accent:hover { background: var(--wb-accent-2); border-color: var(--wb-accent-2); color: #fff; }

.btn.danger { color: var(--wb-danger); border-color: var(--wb-danger); }
.btn.danger:hover { background: var(--wb-danger); border-color: var(--wb-danger); color: #fff; }

.btn.ok { color: var(--wb-ok); border-color: var(--wb-ok); }
.btn.ok:hover { background: var(--wb-ok); border-color: var(--wb-ok); color: #fff; }

/* 开关态（选中/激活） */
.btn.on { background: var(--wb-accent-soft); border-color: var(--wb-accent); color: var(--wb-accent); }
.btn.on:hover { background: var(--wb-accent-soft); border-color: var(--wb-accent); }

/* 禁用态：05 此前缺失此规则，按钮禁用后外观无变化 */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover {
  background: var(--wb-input-bg); border-color: var(--wb-border); color: var(--wb-text);
}
.btn.accent:disabled:hover { background: var(--wb-accent); border-color: var(--wb-accent); color: #fff; }

/* 纯图标按钮（01 箱型设计器顶部撤销/重做） */
.btn.icon-btn {
  width: var(--wb-h-md); height: var(--wb-h-md); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn.icon-btn.small { width: var(--wb-h-sm); height: var(--wb-h-sm); }
.btn.icon-btn svg { width: var(--wb-icon-sm); height: var(--wb-icon-sm); }

/* ── 按钮行：解决「按键摆放不规律」的核心布局件 ──────────────────
   用法：<div class="btn-row">          顺序排布，自动换行
         <div class="btn-row tight">    紧凑（4px 间隙）
         <div class="btn-row equal">    所有按钮等宽均分整行
   ──────────────────────────────────────────────────────────────── */
.btn-row { display: flex; align-items: center; gap: var(--wb-sp-2); flex-wrap: wrap; }
.btn-row.tight { gap: var(--wb-sp-1); }
.btn-row.between { justify-content: space-between; }
.btn-row.equal > .btn { flex: 1 1 0; min-width: 0; }
/* 换行兜底：等宽行内的按钮宽度不足时，至少保留可读宽度 */
.btn-row.equal > .btn { min-width: 40px; }

/* ── 分段按钮组（多个互斥选项拼成一条）────────────────────────── */
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--wb-radius-ctrl) 0 0 var(--wb-radius-ctrl); margin-left: 0; }
.btn-group > .btn:last-child { border-radius: 0 var(--wb-radius-ctrl) var(--wb-radius-ctrl) 0; }

/* 水平行 / 弹性留白
   注：.row 带 8px 下边距——03/05/06 原本的 .row 定义均含此值，
   删模块定义后布局才不会变紧。 */
.row {
  display: flex; align-items: center; gap: var(--wb-sp-2);
  flex-wrap: wrap; margin-bottom: var(--wb-sp-2);
}
.row.tight { gap: var(--wb-sp-1); }
.row.between { justify-content: space-between; }
.row.nowrap { flex-wrap: nowrap; }
.spacer { flex: 1 1 auto; }

/* ── 卡片 ──────────────────────────────────────────────────────── */
.card {
  background: var(--wb-panel-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-card);
  padding: var(--wb-sp-3) var(--wb-sp-4);
  margin-bottom: var(--wb-sp-3);
  /* v4.76：hover 过渡消费动效令牌（模块定义的 .card:hover 自动获得过渡，无 hover 态时零视觉差异） */
  transition: border-color var(--wb-dur-sm), box-shadow var(--wb-dur-sm), background var(--wb-dur-sm);
}

/* ── 信息行（左标签 · 右数值）──────────────────────────────────── */
.info-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wb-sp-2);
  font-size: var(--wb-fs-sm);
  color: var(--wb-text-2);
}
.info-row > b { color: var(--wb-text); font-weight: 500; }

/* ── 表单控件 ──────────────────────────────────────────────────────
   用 :where() 把特异性压到 0，保证任何模块的局部定义都能覆盖。
   ──────────────────────────────────────────────────────────────── */
:where(input[type=text], input[type=number], input[type=password], select, textarea) {
  height: var(--wb-h-md);
  padding: 0 var(--wb-sp-2);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-ctrl);
  background: var(--wb-input-bg);
  color: var(--wb-text);
  font-family: inherit;
  font-size: var(--wb-fs-sm);
}
:where(textarea) { height: auto; padding: var(--wb-sp-1) var(--wb-sp-2); line-height: var(--wb-lh); resize: vertical; }
:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 2px var(--wb-accent-soft);
}
/* 显式表单控件类（推荐新代码使用，避免裸元素选择器歧义） */
.field { height: var(--wb-h-md); padding: 0 var(--wb-sp-2); }
.field.small { height: var(--wb-h-sm); padding: 0 var(--wb-sp-1); font-size: var(--wb-fs-xs); }

/* ── 键盘导航统一焦点环（ADR-060 第二批，v4.76）────────────────────
   按钮 / 链接 / 原生控件 / 输入框 / 可聚焦容器统一消费 --wb-focus-ring。
   :where() 压平特异性（仅 :focus-visible 一级），模块局部定义仍可覆盖；
   位置在表单 :focus 规则之后——键盘聚焦时以本焦点环为准（替代 outline:none），
   鼠标点击不触发 :focus-visible，输入框保持原有 accent-soft 光晕。 */
:where(.btn, a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--wb-focus-ring);
  outline-offset: 1px;
}

/* ── 徽标 / 标签 ───────────────────────────────────────────────────
   收敛此前 .st-tag 的 10px / 1px 8px 等散值。
   ──────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  height: var(--wb-h-tag); padding: 0 var(--wb-sp-2);
  border-radius: var(--wb-radius-sm);
  font-size: var(--wb-fs-xs);
  line-height: 1;
  white-space: nowrap;
}
.tag.ok     { background: var(--wb-ok-soft);     color: var(--wb-ok); }
.tag.danger { background: var(--wb-danger-soft); color: var(--wb-danger); }
.tag.warn   { background: var(--wb-warn-soft);   color: var(--wb-warn); }
.tag.info   { background: var(--wb-accent-soft); color: var(--wb-accent); }
.tag.muted  { background: var(--wb-hover);       color: var(--wb-text-3); }

/* ── 命令面板（ADR-060，Ctrl+K 呼出）───────────────────────────────
   壳层居中浮层：搜索框 + 分组结果列表。宽度无对应刻度令牌，用 rem 取值。 */
.wb-palette { position: fixed; inset: 0; z-index: var(--wb-z-popover); display: none; }
.wb-palette.open { display: block; }
.wb-palette-mask { position: absolute; inset: 0; background: var(--wb-bg); opacity: .55; }
.wb-palette-panel {
  position: relative; width: min(35rem, 92vw); margin: 15vh auto 0;
  background: var(--wb-panel-solid); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-card); box-shadow: var(--wb-shadow-hover);
  padding: var(--wb-sp-3);
}
.wb-palette-input {
  width: 100%; box-sizing: border-box;
  height: var(--wb-h-lg); padding: 0 var(--wb-sp-3);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-ctrl);
  background: var(--wb-input-bg); color: var(--wb-text);
  font-family: inherit; font-size: var(--wb-fs-md);
  outline: none;
}
.wb-palette-input:focus { border-color: var(--wb-accent); box-shadow: 0 0 0 2px var(--wb-accent-soft); }
.wb-palette-list { max-height: 50vh; overflow-y: auto; margin-top: var(--wb-sp-2); }
.wb-palette-cat {
  font-size: var(--wb-fs-xs); color: var(--wb-text-3);
  padding: var(--wb-sp-2) var(--wb-sp-2) var(--wb-sp-1);
}
.wb-palette-item {
  display: flex; align-items: center; gap: var(--wb-sp-2);
  padding: var(--wb-sp-2); border-radius: var(--wb-radius-ctrl);
  font-size: var(--wb-fs-sm); color: var(--wb-text); cursor: pointer;
}
.wb-palette-item.active { background: var(--wb-accent-soft); }
.wb-palette-item .wb-palette-item-cat { margin-left: auto; font-size: var(--wb-fs-xs); color: var(--wb-text-3); }
.wb-palette-empty { padding: var(--wb-sp-4); text-align: center; color: var(--wb-text-3); font-size: var(--wb-fs-sm); }

/* ── 键位帮助面板（ADR-060，Ctrl+Shift+? 呼出；数据源 = Keys 注册表）── */
.wb-khelp { position: fixed; inset: 0; z-index: var(--wb-z-popover); }
.wb-khelp-mask { position: absolute; inset: 0; background: var(--wb-bg); opacity: .55; }
.wb-khelp-panel {
  position: relative; width: min(30rem, 92vw); margin: 10vh auto 0;
  max-height: 76vh; overflow-y: auto;
  background: var(--wb-panel-solid); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-card); box-shadow: var(--wb-shadow-hover);
  padding: var(--wb-sp-4);
}
.wb-khelp-title { font-size: var(--wb-fs-lg); font-weight: 600; color: var(--wb-text); margin-bottom: var(--wb-sp-3); }
.wb-khelp-scope {
  font-size: var(--wb-fs-xs); color: var(--wb-text-3);
  border-bottom: 1px solid var(--wb-border);
  padding-bottom: var(--wb-sp-1); margin: var(--wb-sp-3) 0 var(--wb-sp-2);
}
.wb-khelp-row {
  display: flex; align-items: baseline; gap: var(--wb-sp-3);
  font-size: var(--wb-fs-sm); color: var(--wb-text-2);
  padding: var(--wb-sp-1) 0;
}
.wb-khelp-row kbd {
  min-width: 6em; flex-shrink: 0;
  display: inline-block;
  padding: 0 var(--wb-sp-1);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
  background: var(--wb-hover); color: var(--wb-text);
  font-family: inherit; font-size: var(--wb-fs-xs); line-height: var(--wb-h-tag);
  text-align: center;
}
.wb-khelp-note { margin-left: var(--wb-sp-2); font-style: normal; font-size: var(--wb-fs-xs); color: var(--wb-warn); }

}