/* The three secondary disposition actions (keep / hide / strip) carry long,
   self-describing labels. Render them compact — smaller type + tight padding —
   so they group on one row beneath the primary Assign action instead of each
   stacking onto its own line. They still wrap on narrow screens. */
.genre-dispositions button,
.genre-current-status button {
  font-size: var(--font-size-small);
  padding: var(--gap-xsmall) var(--gap-small);
}

/* Genre index tab groups: a short vertical rule separating the tree-status
   filters (all / placed / unplaced) from the parked dispositions. */
.genre-status-filters .filter-divider {
  align-self: center;
  height: 1.2em;
  border-left: var(--border-width) solid var(--theme-fg-muted);
  margin-inline: var(--gap-xsmall);
}

/* Sort toggle: a muted row; the active option goes full-colour + bold, and
   neither reads as an underlined link. */
.genre-sort-option {
  text-decoration: none;
}

.genre-sort-option.active {
  color: var(--theme-fg-color);
  font-weight: bold;
}

/* Genre tree (admin hierarchy view): nested lists, no bullets, each level
   indented behind a hairline so the parent → child structure reads at a glance.
   Roots stand out in full colour + bold; deeper names stay quieter. */
.genre-tree,
.genre-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Scoped under .genre-tree so this out-specifies the `.genre-tree ul` reset
   above (else its padding:0 would flatten every level to the same indent). Each
   nested level compounds this inset, so depth reads at a glance; the hairline
   traces each subtree back to its parent. */
.genre-tree .genre-tree-children {
  margin-left: var(--gap-medium);
  padding-left: var(--gap-xlarge);
  border-left: var(--border-width) solid var(--theme-accent-muted);
}

.genre-tree-node {
  padding-block: var(--gap-small);
}

/* Roots get extra air above so each top-level subtree reads as its own block. */
.genre-tree > .genre-tree-node {
  padding-top: var(--gap-large);
}

.genre-tree > .genre-tree-node:first-child {
  padding-top: 0;
}

.genre-tree-name {
  text-decoration: none;
}

.genre-tree-name.root {
  font-weight: bold;
}

/* "Set parent" picker — lay each option out as name (left) + descendant count
   (right), so the umbrella genres (which also sort to the top) read at a glance.
   Scoped to this form so the merge picker and other comboboxes are untouched. */
.genre-set-parent .hw-combobox__option {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-medium);
}

.genre-option-count {
  color: var(--theme-fg-muted);
  font-size: 0.85em;
}

/* Genre editor — separate the three task groups (file under a parent / merge /
   sample events) with a hairline + generous space, so the dense stack of form
   rows reads as distinct decisions instead of one cramped block. */
.genre-editor-section {
  border-top: var(--border-width) solid var(--theme-accent-muted);
  padding-top: var(--gap-large);
}

/* The "appears on" sample events. A hairline *between* events (not above the
   first — that would double the section divider under the header) gives a clear
   break, whose muted date/venue header otherwise blends into the previous
   event's (equally muted) genre/style meta. */
.genre-sample-event + .genre-sample-event {
  border-top: var(--border-width) solid var(--theme-accent-muted);
  padding-top: var(--gap-medium);
}