@layer components {
  /* « Canaux »: rows of the privates-page layout, one line each: name, then project · description · members. */
  .channel-list { list-style: none; margin: 0; padding: 0; }
  .channel-row {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
    border-bottom: 1px solid var(--border);
  }
  .channel-row-icon { display: inline-flex; flex: none; color: var(--muted-foreground); }
  .channel-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .channel-row-name {
    display: inline-block; align-self: flex-start; max-width: 100%; min-height: 24px; line-height: 24px;
    font-weight: 600; color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .channel-row-name:hover { text-decoration: underline; }
  .channel-row-name:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; border-radius: 2px; }
  .channel-row-meta { display: flex; min-width: 0; color: var(--muted-foreground); font-size: 13px; white-space: nowrap; }
  .channel-row-meta-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .channel-row-count { flex: none; white-space: pre; }
  .channel-row-joined {
    flex: none; margin-inline: 8px; padding: 2px 10px; border-radius: 999px; background: var(--muted);
    color: var(--muted-foreground); font-size: 13px;
  }
  .channel-row form.button_to { flex: none; }

  @media (max-width: 1099px) {
    .channels-page .privates-new-plus { display: inline-flex; }
    .channel-row { padding-inline: 4px; }
    .channel-row-join { min-height: var(--tap); }
  }
}