/* Offspring results page (Figma 7b, 182:4775) — layout + the group→category
 * sidebar tree. The search field, flag tabs, result bar and pagination reuse
 * the dashboard's rec-* widgets (rec-rail / rec-themes / rec-resultbar /
 * rec-pagination); only the tree is offspring-specific. */

/* ---- Browser: sidebar + content (Figma sidebar 320px, gap 32) ---- */
.offspring-browser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32);
}
@media (min-width: 64rem) {
  .offspring-browser__grid { grid-template-columns: 20rem minmax(0, 1fr); }
}
.offspring-browser__main { min-width: 0; }

/* ---- Sidebar: group → category accordion ---- */
.offspring-tree {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Group row (a native <details><summary>). */
.offspring-tree__summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-block: var(--spacing-8);
  padding-inline: var(--spacing-12);
  border-radius: var(--corner-radius-xs);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.offspring-tree__summary::-webkit-details-marker { display: none; }
.offspring-tree__summary:hover { background-color: var(--background-hover); }

.offspring-tree__caret {
  flex-shrink: 0;
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--symbol-default);
  transition: transform 150ms ease;
}
.offspring-tree__group[open] > .offspring-tree__summary .offspring-tree__caret {
  transform: rotate(90deg);
}

.offspring-tree__group-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offspring-tree__count {
  flex-shrink: 0;
  font-size: var(--font-size-14);
  color: var(--text-tertiary);
}

.offspring-tree__cats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-left: var(--spacing-24);
}

/* Category row (the actual filter) + the "All categories" reset on top. */
.offspring-tree__cat {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  text-align: left;
  padding-block: var(--spacing-8);
  padding-inline: var(--spacing-12);
  border-radius: var(--corner-radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
}
.offspring-tree__cat:hover { background-color: var(--background-hover); color: var(--text-primary); }
.offspring-tree__cat.is-active { background-color: var(--background-surface-2); color: var(--text-primary); }

.offspring-tree__cat-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offspring-tree__cat--all { color: var(--text-primary); }
.offspring-tree__cat--all .offspring-tree__cat-name {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
}

/* ---- Results list (Figma results column gap = 8) ---- */
.offspring-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}