/* ============================================================
   builder.css — 组队工具样式(工具页 + 生成内容页共用件)
   18 属性徽章色为社区通用配色约定;不使用任何官方素材。
   ============================================================ */

/* ---------- 小字说明 ---------- */
.ds-caption {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-16) var(--space-10); }
.hero .ds-eyebrow { color: var(--color-brand-coral-600); }
.hero .ds-lede { max-width: 52ch; }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* ---------- 属性徽章 ---------- */
.tb {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-caption)/1.5 var(--font-body);
  color: #fff;
  text-transform: capitalize;
  letter-spacing: var(--tracking-wide);
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  background: var(--color-text-muted);
}
.tb--normal   { background: #A8A878; }
.tb--fire     { background: #F08030; }
.tb--water    { background: #6890F0; }
.tb--electric { background: #E4B800; }
.tb--grass    { background: #78C850; }
.tb--ice      { background: #74CEC8; }
.tb--fighting { background: #C03028; }
.tb--poison   { background: #A040A0; }
.tb--ground   { background: #CFB863; }
.tb--flying   { background: #A890F0; }
.tb--psychic  { background: #F85888; }
.tb--bug      { background: #A8B820; }
.tb--rock     { background: #B8A038; }
.tb--ghost    { background: #705898; }
.tb--dragon   { background: #7038F8; }
.tb--dark     { background: #705848; }
.tb--steel    { background: #9FA9C0; }
.tb--fairy    { background: #EE99AC; }

/* ---------- 队伍槽 ---------- */
.builder { padding-block: var(--space-6) var(--space-12); }
.team-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
@media (max-width: 720px) { .team-strip { grid-template-columns: repeat(3, 1fr); } }
.slot {
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  padding: var(--space-2);
  min-height: 86px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s ease, transform .15s ease;
}
.slot:hover { border-color: var(--color-text-strong); transform: translateY(-1px); }
.slot--active { border-color: var(--color-brand-coral); box-shadow: var(--shadow-glow-coral); }
.slot--filled { border-color: var(--color-border-strong); }
.slot__num { font: 600 var(--fs-caption)/1 var(--font-mono); color: var(--color-text-muted); }
.slot__name { font: 600 var(--fs-body-sm)/1.2 var(--font-body); color: var(--color-text-strong); }
.slot__types { display: flex; flex-wrap: wrap; gap: 3px; }
.slot__empty { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: auto 0; }

/* ---------- 选择器 + 编辑器布局 ---------- */
.builder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) { .builder__grid { grid-template-columns: 1fr; } }
.picker__tools { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.picker__tools input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font: var(--fs-body-md)/1.4 var(--font-body);
}
.picker__tools select {
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
}
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
  max-height: 420px;
  overflow-y: auto;
  padding: 2px;
}
.pkm {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  padding: var(--space-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pkm:hover { border-color: var(--color-text-strong); }
.pkm--active { border-color: var(--color-brand-coral); background: var(--color-bg-tint-coral); }
.pkm__name { font: 600 var(--fs-body-sm)/1.2 var(--font-body); }
.pkm__types { display: flex; flex-wrap: wrap; gap: 3px; }
.pkm__bst { font: 500 var(--fs-caption)/1 var(--font-mono); color: var(--color-text-muted); }
.picker__empty { color: var(--color-text-muted); padding: var(--space-4); grid-column: 1/-1; }

/* ---------- 编辑器 ---------- */
.builder__editor { display: flex; flex-direction: column; gap: var(--space-3); }
.editor__empty {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.ed-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.ed-card h3 { margin: 0 0 var(--space-1); font: 640 var(--fs-display-sm)/1.2 var(--font-display); }
.ed-card__sub { color: var(--color-text-secondary); font-size: var(--fs-body-sm); margin: 0 0 var(--space-3); }
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .ed-row { grid-template-columns: 1fr; } }
.ed-field { display: flex; flex-direction: column; gap: var(--space-1); }
.ed-field label {
  font: 600 var(--fs-caption)/1.4 var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ed-field select, .ed-field input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font: var(--fs-body-md)/1.4 var(--font-body);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  width: 100%;
}
.ed-forms { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.ed-forms button {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-card);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font: 500 var(--fs-body-sm)/1.6 var(--font-body);
  cursor: pointer;
}
.ed-forms button[aria-pressed="true"] {
  background: var(--color-text-strong);
  color: #fff;
  border-color: var(--color-text-strong);
}

/* Stat Points 分配器 */
.sp-row { display: grid; grid-template-columns: 64px 1fr 56px; gap: var(--space-2); align-items: center; }
.sp-row + .sp-row { margin-top: var(--space-1); }
.sp-row label { font: 500 var(--fs-body-sm)/1 var(--font-body); color: var(--color-text-secondary); }
.sp-row input[type="range"] { width: 100%; }
.sp-row output { font: 600 var(--fs-body-sm)/1 var(--font-mono); text-align: right; }
.sp-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--color-bg-muted);
  font: 600 var(--fs-body-sm)/1.4 var(--font-body);
}
.sp-total--over { background: var(--color-accent-peach); color: var(--color-status-danger); }
.sp-preset { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-2); }
.sp-preset button {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-card);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font: 500 var(--fs-caption)/1.6 var(--font-body);
  cursor: pointer;
}
.sp-preset button:hover { border-color: var(--color-text-strong); }

/* 技能选择 */
.move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 560px) { .move-grid { grid-template-columns: 1fr; } }
.move-slot { display: flex; flex-direction: column; gap: 2px; }
.move-slot select {
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font: var(--fs-body-sm)/1.4 var(--font-body);
  width: 100%;
  background: var(--color-bg-card);
}
.move-slot .move-meta { display: flex; gap: 4px; align-items: center; font: 500 var(--fs-caption)/1.4 var(--font-mono); color: var(--color-text-muted); }

/* 防守画像 chips */
.def-profile { display: flex; flex-wrap: wrap; gap: 4px; }
.def-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font: 600 var(--fs-caption)/1.6 var(--font-mono);
  border: 1px solid var(--color-border-subtle);
}
.def-chip--4x { background: #ffd9d9; border-color: var(--color-status-danger); color: #7a0000; }
.def-chip--2x { background: #ffeee4; border-color: var(--color-status-warning); color: #7a4a00; }
.def-chip--half { background: #e6fff3; border-color: var(--color-status-success); color: #005a38; }
.def-chip--zero { background: #eef3f5; border-color: var(--color-border-default); color: var(--color-text-muted); }

/* ---------- 分析面板 ---------- */
.analysis { margin-top: var(--space-8); }
.analysis__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.analysis .ds-card h3 { margin: 0 0 var(--space-1); font: 640 1.15rem/1.2 var(--font-display); }

.wm-table { width: 100%; border-collapse: collapse; font: 500 var(--fs-caption)/1.6 var(--font-mono); }
.wm-table td { padding: 2px 4px; }
.wm-type { display: inline-block; width: 62px; }
.wm-cell { text-align: right; border-radius: 4px; padding: 2px 8px !important; }
.wm-cell--danger { background: #ffd9d9; color: #7a0000; font-weight: 700; }
.wm-cell--warn { background: #ffeee4; color: #7a4a00; }
.wm-cell--ok { background: #e6fff3; color: #005a38; }
.wm-cell--muted { background: var(--color-bg-muted); color: var(--color-text-muted); }

.warnings { display: flex; flex-direction: column; gap: var(--space-2); }
.warn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-card);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body-sm);
  display: flex; gap: var(--space-2); align-items: baseline;
}
.warn--danger { border-color: var(--color-status-danger); background: #fff5f5; }
.warn--warn { border-color: var(--color-status-warning); background: #fffaf2; }
.warn--info { border-color: var(--color-status-info); background: #f2fcff; }
.warn__kind { font: 700 var(--fs-caption)/1.8 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.warn--danger .warn__kind { color: var(--color-status-danger); }
.warn--warn .warn__kind { color: #b06a00; }
.warn--info .warn__kind { color: var(--color-status-info); }

.speed-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: var(--space-2); align-items: center; margin-bottom: 4px; }
.speed-row__name { font: 500 var(--fs-body-sm)/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speed-row__bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-brand-coral); min-width: 4px; }
.speed-row--alt .speed-row__bar { background: var(--color-accent-sky-600); }
.speed-row__val { font: 600 var(--fs-body-sm)/1 var(--font-mono); text-align: right; }

.cov-list { display: flex; flex-wrap: wrap; gap: 4px; }

.share-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }
.share-row__status { font-size: var(--fs-body-sm); color: var(--color-status-success); }

/* ---------- 内容页共用件(pokemon/types 生成页) ---------- */
.stat-table { width: 100%; border-collapse: collapse; font: 500 var(--fs-body-sm)/1.6 var(--font-body); }
.stat-table th, .stat-table td { text-align: right; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-bg-muted); overflow: hidden; }
.stat-bar i { display: block; height: 100%; background: var(--color-brand-coral); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.card-grid .ds-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.card-grid .ds-card a { font: 600 var(--fs-body-md)/1.3 var(--font-body); text-decoration: none; color: var(--color-text-strong); }
.card-grid .ds-card a:hover { color: var(--color-brand-coral-600); }