@layer components {
  /* Lists of channels, people or messages to pick from: directory, new DM, Mentions, search results. */
  .directory { list-style: none; margin: 0; padding: 0; }
  .directory-entry {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--border);
  }
  .directory-entry:last-child { border-bottom: 0; }
  .directory-entry > svg { color: var(--muted-foreground); flex: none; }
  .directory-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .directory-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .directory-title { font-weight: 600; color: var(--foreground); text-decoration: none; }
  a.directory-title:hover { text-decoration: underline; }
  a.directory-title:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; border-radius: 2px; }
  .directory-meta { color: var(--muted-foreground); font-size: 13px; }
  .mentions-list > .activity-row + .activity-row { border-top: 1px solid var(--border); }

  /* On a desktop the row keeps to one line: the excerpt alone shrinks; a place only past 40% gets an ellipsis (the 1px
     covers the sub-pixel glyph overflow that otherwise ellipsised a place that fits). */
  @media (min-width: 1100px) {
    .mentions-list .activity-row-description { display: flex; gap: 0.3em; min-width: 0; }
    .mentions-list .activity-row-description > * { white-space: nowrap; }
    .mentions-list .mention-place { flex: 0 0 auto; max-width: 40%; padding-inline-end: 1px; overflow: hidden; text-overflow: ellipsis; }
    .mentions-list .mention-excerpt { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .mentions-list .activity-row-description time { flex: none; }
  }

  /* Both always in the DOM so a live row can arrive: the list hides when empty, the message when it has rows. */
  .mentions-list:not(:has(> li)) { display: none; }
  .mentions-empty:has(~ .mentions-list > li) { display: none; }

  .mentions-more:has(form), .mentions-end { margin-top: 12px; text-align: center; }
  .mentions-end { color: var(--muted-foreground); }

  /* A whole row that is one action (open a DM with this person). */
  .directory-entry--action { padding: 0; }
  .directory-entry--action form.button_to { display: flex; flex: 1; }
  .directory-button {
    flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 20px;
    font: inherit; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer;
  }
  .directory-button:is(:hover, :active) { background: var(--accent); }
  .directory-button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--jx-accent); }

  /* A row whose control is a checkbox: the label is the click target, the box shows the focus. */
  label.directory-button { position: relative; }
  label.directory-button input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
  label.directory-button:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--jx-accent); }
  label.directory-button:has(input:checked) { background: var(--accent); }
  .directory-people { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
  .directory-people legend { padding: 0 0 8px; font-weight: 600; }
}