/* ==========================================================================
   MUHCINE / pills
   Shared by the view switch and the filters.
   ========================================================================== */

.pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  transition: color 0.3s ease, background 0.4s var(--ease);
}

html[dir="rtl"] .pill {
  letter-spacing: 0;
}

.hover-circle {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: var(--fg);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.label-stack {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
}

.pill-label,
.pill-label-hover {
  display: block;
  will-change: transform;
}

.pill-label-hover {
  position: absolute;
  inset: 0;
  color: var(--bg);
}

.pill[aria-pressed="true"],
.pill.is-active {
  background: var(--fg);
  color: var(--bg);
}

/* --- the folded filter ----------------------------------------------------- */

/* Its own strip under the header, so the header background never sits over
   it. The pills carry their own ground to stay legible above the page. */
.filters {
  position: fixed;
  top: var(--head-h);
  inset-inline: 0;
  z-index: 190;
  display: flex;
  justify-content: center;
  padding: 10px var(--pad);
  pointer-events: none;
}

.filters__seg {
  pointer-events: auto;
  background: var(--bg);
}

.filters__seg {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}

.filters__list {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
}

/* Folded away the row is zero wide, and without this the pills would be
   squashed with it and measure their circles wrong. */
.filters__list > .pill {
  flex: 0 0 auto;
}

.pill--toggle {
  color: var(--fg);
}

.filters[data-open="true"] .pill--toggle {
  background: var(--fg);
  color: var(--bg);
}

/* Shown only while a filter is on, to get back to everything in one press. */
.filters__clear {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  color: var(--fg);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.filters__clear[hidden] {
  display: none;
}

.filters__clear:hover {
  background: var(--fg);
  color: var(--bg);
}