/* ============================================================
   Chip — 選択チップ
   選択は 点＋塗り＋枠＋太字 の四重表現で色覚に依存させない。
   色は分類色 --accent に追従。.alt で別系統の分類色を使う。
   インタラクション：タップで分類色が内側から満ちる（満ち引き＝surge）。
   方向の規則に従い、選択＝上から満ち／解除＝上から引く（複数選択のみ）。
   選択の核（点）は常設しておき、選択で scale して満ちる。配線は js/catalog.js。
   ============================================================ */

.chip {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-control);
  padding: 9px 16px; min-height: var(--tap-min);
  font-size: 14px; line-height: 1.3; color: var(--ink);
  display: inline-flex; align-items: center; gap: 0;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform .12s var(--ease);
}

/* 選択の核（点）。常設し、選択で幅とスケールで満ちる——四重表現の一つを動かす */
.chip::before {
  content: ""; flex: none; position: relative; z-index: 1;
  width: 0; height: 6px; border-radius: 50%;
  margin-right: 0; background: var(--accent);
  opacity: 0; transform: scale(.4);
  transition: width var(--dur-fast) var(--ease),
              margin-right var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              transform var(--dur-mid) var(--ease);
}

.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 700;
}
.chip[aria-pressed="true"]::before {
  width: 6px; margin-right: 7px; opacity: 1; transform: scale(1);
}

/* 別系統の分類色（例：Slate） */
.chip.alt[aria-pressed="true"] {
  border-color: var(--c-slate);
  background: color-mix(in srgb, var(--c-slate) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--c-slate);
}
.chip.alt::before { background: var(--c-slate); }

/* 満ち引きの色は分類色に追従（記号色brandは使わない）。解除は中立のash */
.chip .surge { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.chip.alt .surge { background: color-mix(in srgb, var(--c-slate) 15%, transparent); }
.chip[data-surge="down"] .surge { background: color-mix(in srgb, var(--ash) 14%, transparent); }

/* hover＝枠を一段持ち上げる（未選択時のみ）。active＝軽い押し込み */
.chip:hover:not(:disabled):not([aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}
.chip:active:not(:disabled) { transform: scale(.97); }

.chip.ghost { border-style: dashed; color: var(--ash); }
.chip.ghost::before { content: none; }
.chip:disabled { opacity: .4; cursor: not-allowed; }