/* ============================================================
 * Counter Pill — theme-matched
 * File: /assets/css/counter.css
 * Updated: 2025-10-03
 * ============================================================ */

/* Counter Pill — theme match with icon badge */
.lz-count{
  display:inline-flex;
  align-items:center;
  gap:.55rem;

  /* match control height/feel */
  height: var(--field-h, 38px);
  padding: 0 .95rem;
  border-radius: 9999px;
  border: 1px solid var(--c-border, #cbd5e1);
  background: var(--c-surface-alt, #ffffff);

  /* bigger, bolder text */
  font: 800 2.08rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  letter-spacing:.01em;
  color: #111827; /* darker gray; avoid bluish tone */
  box-shadow: 0 1px 1.5px rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Text wrapper for safe truncation */
.lz-count .lz-count__text{
  display:inline-block;
  min-width:0;
  text-overflow:ellipsis;
  overflow:hidden;
  color: inherit; /* be explicit */
}

/* FILTERED state: whole pill brand red with white text,
   invert the icon badge for contrast */
.lz-count.is-filtered{
  background:#fff;
  border-color:#cd001e;
 color:#000;
  box-shadow:none;
}
.lz-count.is-filtered .lz-count__text{ color:#000; }

/* Inverted badge: white disk, red glyph */
.lz-count.is-filtered .lz-count__icon{
  background:#fff;
  color:#cd001e;
}

/* Focus ring */
.lz-count:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
  border-radius:9999px;
}

/* Dark mode alignment */
.dark .lz-count{
  background:#0b0f14;
  color:#e5e7eb;
  border-color:#fff;
  box-shadow:0 1px 1.5px rgba(0,0,0,.30);
}
.dark .lz-count.is-filtered{
  background:#cd001e;
  border-color:#cd001e;
  color:#fff;
  box-shadow:none;
}
/* keep the badge contrast in dark mode */
.dark .lz-count .lz-count__icon{ background:#cd001e; color:#fff; }
.dark .lz-count.is-filtered .lz-count__icon{ background:#fff; color:#cd001e; }

/* Small screens: truncate gracefully */
@media (max-width: 480px){
  .lz-count{
    max-width: 75vw;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
/* --- tighter counter pill spacing --- */
.lz-count{
  /* was padding: 0 .95rem; */
  padding: 0 .65rem;          /* tighter left/right */
  gap: .40rem;                /* was .55rem */
  font: 800 1.06rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial; /* keep size, slightly crisper */
}