/* NEXUS — Chip
   小型标签 / 快捷入口：独立于 Button，不套按钮外壳。
   表面语义来自 S2-B-1 的 --surface-chip 与控件状态槽，四态各自明确：
   静止（标签面）→ hover（中性表面）→ active（更深一档）→ 选中（强调色）。 */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--chip-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-pill);
  background: var(--surface-chip);
  color: var(--color-text-mute);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-cn);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.chip:hover {
  background: var(--control-hover);
  border-color: var(--color-panel-border-strong);
  color: var(--color-text);
}

.chip:active { background: var(--control-active); }

.chip:focus-visible {
  outline: none;
  border-color: var(--color-ice-line);
  box-shadow: var(--focus-ring);
}

/* 选中态：留给未来的筛选/分类，不靠形状变化表达 */
.chip.is-selected,
.chip[aria-pressed='true'] {
  background: var(--color-ice-ghost);
  border-color: var(--color-ice-line);
  color: var(--color-ice-strong);
}

.chip:disabled,
.chip[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
}
.chip:disabled:hover,
.chip[aria-disabled='true']:hover {
  background: var(--surface-chip);
  border-color: var(--color-panel-border);
  color: var(--color-text-mute);
}

.chip svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.chip:hover svg,
.chip:focus-visible svg {
  opacity: 1;
}