@charset "UTF-8";
/*
Erewhon – Pills (Modern React-app style)
Expert-reviewed for seamless cross-device experience
*/
/* ============= Foundation ============= */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
}

/* Base pill - optimized metrics */
.pill {
  /* Fluid padding scales with container, not viewport */
  --_pill-py: .30rem;
  --_pill-px: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 2rem; /* ensures touch target on mobile */
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--role-border-default, var(--border-light));
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.2; /* slight breathing room for descenders */
  letter-spacing: var(--ls-text-m);
  font-weight: 500;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pill > :is(a, span, button) {
  display: inline-flex;
  align-items: center;
  padding: var(--_pill-py) var(--_pill-px);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-radius: inherit;
}

/* ============= Interactions ============= */
@media (hover: hover) and (pointer: fine) {
  .pill:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--role-border-strong, var(--border-strong));
    transform: translateY(-1px);
    box-shadow: 0 2px 4px oklch(0% 0 0deg / 0.08);
  }
}
.pill:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px oklch(0% 0 0deg / 0.1);
}

.pill > :is(a, span, button):focus-visible {
  outline: 2px solid var(--focus-ring-primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Active state */
.pill.is-active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
}

/* ============= Size Variants ============= */
.pill--sm {
  --_pill-py: .25rem;
  --_pill-px: .625rem;
  font-size: 0.6875rem;
  min-height: 1.75rem;
}

.pill--lg {
  --_pill-py: .5rem;
  --_pill-px: 1rem;
  font-size: 0.875rem;
  min-height: 2.5rem;
}

/* ============= Color Variants ============= */
/* Primary (brand) */
.pill--primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .pill--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 2px 8px var(--primary-trans-25);
  }
}
/* Primary outline */
.pill--primary-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .pill--primary-outline:hover {
    background: var(--primary);
    color: var(--text-on-primary);
  }
}
/* Secondary */
.pill--secondary {
  background: var(--secondary-ultra-light);
  color: var(--secondary-dark);
  border-color: var(--secondary-light);
}

@media (hover: hover) and (pointer: fine) {
  .pill--secondary:hover {
    background: var(--secondary);
    color: var(--text-on-secondary);
    border-color: var(--secondary);
  }
}
/* Success */
.pill--success {
  background: var(--success-light);
  color: var(--success-dark);
  border-color: var(--success);
}

@media (hover: hover) and (pointer: fine) {
  .pill--success:hover {
    background: var(--success);
    color: var(--text-on-primary);
  }
}
/* Warning */
.pill--warning {
  background: var(--warning-light);
  color: var(--warning-dark);
  border-color: var(--warning);
}

@media (hover: hover) and (pointer: fine) {
  .pill--warning:hover {
    background: var(--warning);
    color: var(--text-on-primary);
  }
}
/* Error (was “danger”) */
.pill--error,
.pill--danger {
  background: var(--error-light);
  color: var(--error-dark);
  border-color: var(--error);
}

@media (hover: hover) and (pointer: fine) {
  .pill--error:hover,
  .pill--danger:hover {
    background: var(--error);
    color: var(--text-on-primary);
  }
}
/* Ghost */
.pill--ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  min-height: 1.75rem;
}

@media (hover: hover) and (pointer: fine) {
  .pill--ghost:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
  }
}
/* ============= Responsive tweaks ============= */
@media (max-width: 37.5em) {
  .pill {
    --_pill-py: .25rem !important;
    --_pill-px: .7rem !important;
    min-height: 2rem !important;
  }
  .pill > :is(a, span, button) {
    min-height: 2rem !important;
    min-width: auto !important;
  }
}
/* ============= Container Queries ============= */
@supports (container-type: inline-size) {
  /* Narrow cards */
  @container (max-width: 23.999rem) {
    .pill,
    .pill > :is(a, span, button) {
      --_pill-py: .25rem;
      --_pill-px: .7rem;
      font-size: 0.6875rem;
      min-height: 1.875rem !important;
      min-width: auto !important;
    }
    .pill-list {
      gap: 0.375rem;
    }
    .pill-list > *:nth-child(n+4) {
      display: none;
    }
  }
  /* Medium cards (tablet portrait) */
  @container (min-width: 24rem) and (max-width: 35.999rem) {
    .pill {
      --_pill-py: .325rem;
      --_pill-px: .7rem;
      font-size: 0.72rem;
    }
    .pill-list {
      gap: 0.425rem;
    }
  }
  /* Wide cards (tablet landscape, desktop) */
  @container (min-width: 36rem) {
    .pill {
      --_pill-py: .375rem;
      --_pill-px: .8rem;
      font-size: 0.75rem;
    }
    .pill-list {
      gap: 0.5rem;
    }
  }
}
/* ============= Overflow Control ============= */
.pill-more {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px dashed var(--role-border-default, var(--border-light));
  cursor: pointer;
}

.pill-more > button {
  all: unset;
  display: block;
  padding: var(--_pill-py) var(--_pill-px);
  cursor: pointer;
  border-radius: inherit;
}

.pill-more > button:focus-visible {
  outline: 2px solid var(--focus-ring-primary);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .pill-more:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--role-border-strong, var(--border-strong));
  }
}
.pill-list.is-expanded > * {
  display: inline-flex !important;
}

.pill-list.is-expanded .pill-more {
  display: none !important;
}

/* ============= Mobile Fallbacks ============= */
@media (max-width: 37.5em) {
  .pill {
    --_pill-py: .3rem;
    --_pill-px: .625rem;
    font-size: 0.6875rem;
    min-height: 2rem; /* comfortable touch target */
  }
  .pill-list {
    gap: 0.375rem;
  }
  .pill-list > *:nth-child(n+4) {
    display: none;
  }
}
/* Touch devices without hover */
@media (hover: none) {
  .pill {
    min-height: 2rem;
  }
  .pill:active {
    opacity: 0.7;
  }
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .pill {
    transition: none;
  }
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  .pill {
    border-width: 2px;
  }
}