/*
 * Collapsible filter groups.
 *
 * Shared by the explore grid and My AIs — both show the same nineteen
 * regions, so both get the same six-row layout. Kept out of either page's
 * own stylesheet so the two cannot drift.
 */

/*
 * A part-selected group.
 *
 * Distinct from both states it sits between: an empty box says "none of
 * these" and a tick says "all of these", and a group with two of four
 * regions chosen is neither. A dash is the conventional third state.
 */
.filter-checkbox.partial {
  background: var(--purple-400);
  border-color: var(--purple-400);
}

.filter-checkbox.partial::after {
  content: '';
  width: 10px;
  height: 2px;
  background: #000;
  border-radius: 1px;
}

/* ── Collapsible filter groups ─────────────────────────────────────────── */
/*
 * The row is the group; the chevron opens its members. Used on the public
 * explore page, where twenty regions is an accurate list and a poor filter.
 */
.filter-group-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The label takes the row so the chevron sits at the far edge, away from
   the checkbox — the two do different things and should not be adjacent. */
.filter-group-row .filter-option {
  flex: 1;
  min-width: 0;
}

.filter-group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--neutral-500);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s, transform 0.2s;
}

.filter-group-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* Points the way the list will move. */
.filter-group-toggle.is-open { transform: rotate(180deg); }

/*
 * Indented and quieter than their group, so the two levels are legible at a
 * glance rather than reading as one flat list of twenty-six things.
 */
.filter-group-children {
  padding-left: 14px;
  margin-left: 8px;
  border-left: 1px solid var(--neutral-700);
}

.filter-group-children .filter-option { font-size: 11px; }

.filter-group-children .filter-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}

.filter-group-children .filter-checkbox.checked::after {
  width: 8px;
  height: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .filter-group-toggle { transition: none; }
}