/* =====================================================================
   行健 XINGJIAN · 标准组件层（Components）v1.0
   ---------------------------------------------------------------------
   与 xingjian-tokens.css 配套：令牌管「值」，本文件管「组件范式」。
   全站（网站 / AI 伴侣 / 学习模块）共用同一套组件类，
   新增界面优先复用本文件类，禁止再造第二套样式。

   覆盖范围（P1）：按钮（主/次/警示/幽灵）、输入框、卡片、
   底部抽屉、标签、列表行、区块标题。

   所有引用均写成 var(--xj-xxx, fallback) 形式，即使令牌加载失败
   样式也不崩。2026-09-01 建立。
   ===================================================================== */

/* ---------------------------------------------------------------
   按钮（Button）
   - 主按钮 .xj-btn           绿底白字，默认动作
   - 幽灵   .xj-btn.ghost     白底绿字，次级动作
   - 警示   .xj-btn.warn      赭底白字，删除/退出类动作
   - 小号   .xj-btn.sm        行内小按钮
   - 通栏   .xj-btn.block     满宽
   触摸目标 ≥44px；按压 scale(.98) 反馈；克制无弹跳。
   --------------------------------------------------------------- */
.xj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--xj-tap, 44px);
  padding: 11px 22px;
  border: 1px solid var(--xj-green, #0e9f6e);
  border-radius: var(--xj-radius-ctl, 8px);
  background: var(--xj-green, #0e9f6e);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1)),
              background var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1)),
              opacity var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1));
  white-space: nowrap;
  flex-shrink: 0;
}
.xj-btn:active { transform: scale(.98); }
.xj-btn:disabled { opacity: .5; pointer-events: none; }

/* 幽灵：白底绿字绿边（次级动作，视觉弱于主按钮） */
.xj-btn.ghost {
  background: var(--xj-surface, #fff);
  color: var(--xj-green-ink, #0b7a54);
}

/* 警示：赭色（删除/退出/暂停；不用纯红，见令牌说明） */
.xj-btn.warn {
  background: var(--xj-ochre, #b4623f);
  border-color: var(--xj-ochre, #b4623f);
}

/* 小号：行内紧凑（字号 15px 起，不小于适老化底线 14px） */
.xj-btn.sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 15px;
  border-radius: var(--xj-radius-pill, 999px);
}

/* 通栏 */
.xj-btn.block { width: 100%; }

/* 文字按钮：无边框无底，仅文字（导航/次要动作） */
.xj-btn.link {
  background: none;
  border: none;
  color: var(--xj-green-ink, #0b7a54);
  min-height: 40px;
  padding: 6px 10px;
}

/* ---------------------------------------------------------------
   输入框（Input）
   - 普通 .xj-input
   - 胶囊 .xj-input.pill（如搜索框）
   - 文本域 textarea.xj-input
   --------------------------------------------------------------- */
.xj-input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--xj-tap, 44px);
  padding: 11px 14px;
  border: 1px solid var(--xj-line-2, #d9d6cd);
  border-radius: var(--xj-radius-ctl, 8px);
  background: var(--xj-surface, #fff);
  color: var(--xj-ink, #2b3a34);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1)),
              box-shadow var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1));
}
.xj-input:focus {
  outline: none;
  border-color: var(--xj-green, #0e9f6e);
  box-shadow: 0 0 0 3px var(--xj-green-mist, #e8f5ef);
}
.xj-input::placeholder { color: var(--xj-ink-3, #8a9a93); }
.xj-input.pill { border-radius: var(--xj-radius-pill, 999px); }
textarea.xj-input { resize: vertical; min-height: 80px; }

/* ---------------------------------------------------------------
   卡片（Card）
   - 白卡 .xj-card：白底 + 柔影 + 16px 圆角（VI 规范）
   - 按压反馈 .xj-card.tap（可点击卡片）
   --------------------------------------------------------------- */
.xj-card {
  background: var(--xj-surface, #fff);
  border-radius: var(--xj-radius-card, 16px);
  padding: var(--xj-sp-4, 16px);
  box-shadow: var(--xj-shadow-2, 0 2px 10px rgba(43,58,52,.07));
  box-sizing: border-box;
}
.xj-card.tap { cursor: pointer; transition: box-shadow var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1)); }
.xj-card.tap:active { box-shadow: var(--xj-shadow-1, 0 1px 3px rgba(43,58,52,.05)); }

/* ---------------------------------------------------------------
   底部抽屉（Sheet）
   - 遮罩 .xj-sheet-overlay（点击关闭）
   - 面板 .xj-sheet-panel（流式布局，圆角顶 + 安全区留白）
   遵循布局铁律 21：全屏覆盖层一律流式布局，不绝对定位钉底。
   --------------------------------------------------------------- */
.xj-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 30, 26, .42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--xj-dur-base, 300ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1));
}
.xj-sheet-overlay.show { opacity: 1; }

.xj-sheet-panel {
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--xj-paper, #faf8f4);
  border-radius: var(--xj-radius-card, 16px) var(--xj-radius-card, 16px) 0 0;
  padding: var(--xj-sp-4, 16px) var(--xj-sp-4, 16px) calc(var(--xj-sp-5, 24px) + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px);
  transition: transform var(--xj-dur-slow, 600ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1));
  box-shadow: var(--xj-shadow-3, 0 6px 24px rgba(43,58,52,.10));
}
.xj-sheet-overlay.show .xj-sheet-panel { transform: translateY(0); }

/* 抽屉头部：拖拽条 + 标题行 */
.xj-sheet-grab {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--xj-line-2, #d9d6cd);
  margin: 0 auto var(--xj-sp-3, 12px);
}
.xj-sheet-head {
  display: flex;
  align-items: center;
  gap: var(--xj-sp-2, 8px);
  margin-bottom: var(--xj-sp-3, 12px);
  font-size: var(--xj-fs-card, 18px);
  font-weight: 800;
  color: var(--xj-ink, #2b3a34);
}

/* ---------------------------------------------------------------
   标签（Chip）
   - 默认 .xj-chip       绿雾底绿字
   - 选中 .xj-chip.on    绿底白字
   - 警示 .xj-chip.warn  赭雾底赭字
   --------------------------------------------------------------- */
.xj-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid var(--xj-green-mist, #e8f5ef);
  border-radius: var(--xj-radius-pill, 999px);
  background: var(--xj-green-mist, #e8f5ef);
  color: var(--xj-green-ink, #0b7a54);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1)),
              color var(--xj-dur-fast, 180ms) var(--xj-ease, cubic-bezier(.22,.61,.36,1));
}
.xj-chip:active { transform: scale(.97); }
.xj-chip.on {
  background: var(--xj-green, #0e9f6e);
  border-color: var(--xj-green, #0e9f6e);
  color: #fff;
}
.xj-chip.warn {
  background: var(--xj-ochre-mist, #fdf6f3);
  border-color: var(--xj-ochre-mist, #fdf6f3);
  color: var(--xj-ochre, #b4623f);
}

/* ---------------------------------------------------------------
   列表行（List Row）
   - 行 .xj-row          上下行分隔线
   - 标题行 .xj-row-h    大字号 + 图标
   --------------------------------------------------------------- */
.xj-row {
  display: flex;
  align-items: center;
  gap: var(--xj-sp-3, 12px);
  padding: 13px 2px;
  border-bottom: 1px solid var(--xj-line, #eceae3);
}
.xj-row:last-child { border-bottom: none; }
.xj-row .xj-row-t { flex: 1; min-width: 0; font-size: 16px; color: var(--xj-ink, #2b3a34); }
.xj-row .xj-row-d { font-size: 14px; color: var(--xj-ink-3, #8a9a93); }
.xj-row .xj-row-go { font-size: 14px; font-weight: 700; color: var(--xj-green-ink, #0b7a54); flex-shrink: 0; }

/* ---------------------------------------------------------------
   区块标题（Section Title）：左图标 + 标题（首页区块通用）
   --------------------------------------------------------------- */
.xj-sec-t {
  display: flex;
  align-items: center;
  gap: var(--xj-sp-2, 8px);
  margin: var(--xj-sp-5, 24px) 0 var(--xj-sp-3, 12px);
  font-size: var(--xj-fs-card, 18px);
  font-weight: 800;
  color: var(--xj-ink, #2b3a34);
}
.xj-sec-t svg.xj-ic { color: var(--xj-green, #0e9f6e); }

/* ---------------------------------------------------------------
   分隔线 / 工具类
   --------------------------------------------------------------- */
.xj-divider { height: 1px; background: var(--xj-line, #eceae3); border: none; margin: var(--xj-sp-3, 12px) 0; }
.xj-note { font-size: var(--xj-fs-note, 14px); color: var(--xj-ink-3, #8a9a93); line-height: 1.7; }
.xj-center { text-align: center; }
.xj-mt2 { margin-top: var(--xj-sp-2, 8px); }
.xj-mt3 { margin-top: var(--xj-sp-3, 12px); }
.xj-mt4 { margin-top: var(--xj-sp-4, 16px); }
.xj-mt5 { margin-top: var(--xj-sp-5, 24px); }