@layer components {
  /* Below 768px the box is dialog.css's bottom sheet; from 768 to 1099px its centred 560px box. The cards follow the box, not the screen. */
  .new-channel-dialog { container-type: inline-size; gap: 16px; }
  .new-channel-title { margin: 0; font-size: 18px; font-weight: 600; }
  .new-channel-intro { margin: -8px 0 0; color: var(--muted-foreground); line-height: 1.45; }
  .new-channel-form, .new-channel-page .new-channel-form { display: flex; flex-direction: column; gap: 14px; }
  .new-channel-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
  .new-channel-form .hint { margin: 0; }
  .new-channel-kinds { min-width: 0; padding: 0; border: 0; }
  .new-channel-kinds > legend { padding: 0; margin-bottom: 6px; }
  .new-channel-form .alert[hidden] { display: none; }
  .new-channel-actions { display: flex; justify-content: flex-start; gap: 8px; }
  /* In a narrow box the cards lose their side room before their text does. */
  @container (max-width: 380px) {
    .new-channel-dialog .settings-card { padding: 8px 10px; gap: 8px; }
  }
  @media (max-width: 767px) {
    .new-channel-form .input { min-height: var(--tap); }
  }
}