/* ============================================
   Chip — compact label pill (tag / filter / category).

   <xm-chip> is a transparent pill that sits on a surface* host, so
   default ink is --md-sys-color-on-surface (AD-13). Selected flips
   to the coral primary-container fill + on-primary-container ink —
   the selected-pill pattern (UX-DR3), never a status hue (AD-11).
   Removable chips carry a trailing x. A category chip may take a
   saturated background ONLY via the --xm-method-* / --xm-ext-* sets
   (category, never severity); --md-sys-color-error* is forbidden.

   Sizes share the canonical xs|sm|md|lg axis (AD-9).
   ============================================ */

.chip {
  --chip-height: 28px;
  --chip-pad-x: var(--s-3);
  --chip-font: var(--md-sys-typescale-label-medium-size);
  --chip-gap: var(--s-1);

  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  box-sizing: border-box;
  height: var(--chip-height);
  padding: 0 var(--chip-pad-x);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--chip-font);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* The host element owns focus (role=button + tabindex on <xm-chip>) so the
   3px ring is applied via :host(:focus-visible) .chip in the component's
   inline <style>. The forced-state helper still previews it. */
.chip.is-focus {
  box-shadow: var(--xm-state-focus-ring);
}
.chip:hover,
.chip.is-hover {
  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
  border-color: var(--md-sys-color-outline);
}

/* ---------- Selected — coral selected-pill ---------- */
.chip--selected {
  border-color: color-mix(in oklab, var(--md-sys-color-primary) 60%, transparent);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.chip--selected:hover,
.chip--selected.is-hover {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

/* ---------- Category — saturated ONLY for category (AD-11) ---------- */
.chip--category-get    { background: var(--xm-method-get-bg);    color: var(--xm-method-get-ink);    border-color: transparent; }
.chip--category-post   { background: var(--xm-method-post-bg);   color: var(--xm-method-post-ink);   border-color: transparent; }
.chip--category-put    { background: var(--xm-method-put-bg);    color: var(--xm-method-put-ink);    border-color: transparent; }
.chip--category-delete { background: var(--xm-method-delete-bg); color: var(--xm-method-delete-ink); border-color: transparent; }
.chip--category-patch  { background: var(--xm-method-patch-bg);  color: var(--xm-method-patch-ink);  border-color: transparent; }
.chip--category-yml    { background: var(--xm-ext-yml-bg);       color: var(--xm-ext-yml-ink);       border-color: transparent; }
.chip--category-json   { background: var(--xm-ext-json-bg);      color: var(--xm-ext-json-ink);      border-color: transparent; }
/* Category chips don't change hue on hover — the hue IS the meaning. */
.chip--category-get:hover, .chip--category-get.is-hover,
.chip--category-post:hover, .chip--category-post.is-hover,
.chip--category-put:hover, .chip--category-put.is-hover,
.chip--category-delete:hover, .chip--category-delete.is-hover,
.chip--category-patch:hover, .chip--category-patch.is-hover,
.chip--category-yml:hover, .chip--category-yml.is-hover,
.chip--category-json:hover, .chip--category-json.is-hover {
  filter: none;
  border-color: transparent;
}

/* ---------- Disabled — shared reduced-emphasis ---------- */
.chip--disabled {
  cursor: not-allowed;
  color: var(--xm-color-on-surface-disabled);
  border-color: var(--md-sys-color-outline-variant);
}
.chip--disabled:hover,
.chip--disabled.is-hover {
  background: transparent;
  border-color: var(--md-sys-color-outline-variant);
}
.chip--selected.chip--disabled:hover {
  background: var(--md-sys-color-primary-container);
}

/* ---------- Sizes ---------- */
.chip--xs { --chip-height: 22px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size);  --chip-gap: 3px; }
.chip--sm { --chip-height: 24px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size); }
.chip--md { --chip-height: 28px; --chip-pad-x: var(--s-3); --chip-font: var(--md-sys-typescale-label-medium-size); }
.chip--lg { --chip-height: 34px; --chip-pad-x: var(--s-4); --chip-font: var(--md-sys-typescale-label-large-size); }

/* ---------- Inner elements ---------- */
.chip__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.chip__icon.is-empty { display: none; }

.chip__label {
  display: inline-block;
}

.chip__count {
  display: inline-block;
  margin-left: var(--s-0-5);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-variant-numeric: tabular-nums;
}
.chip--selected .chip__count {
  color: var(--md-sys-color-on-primary-container);
}
.chip--disabled .chip__count {
  color: var(--xm-color-on-surface-disabled);
}
.chip--category-get .chip__count,
.chip--category-post .chip__count,
.chip--category-put .chip__count,
.chip--category-delete .chip__count,
.chip--category-patch .chip__count,
.chip--category-yml .chip__count,
.chip--category-json .chip__count {
  color: currentColor;
}

.chip__remove {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: var(--s-0-5);
  margin-right: -2px;
  padding: 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.chip__remove:hover {
  background: color-mix(in oklab, currentColor 18%, transparent);
}
.chip__remove:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}