/* 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;
}

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