@layer components {
  .account-menu { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
  .account-menu__username { max-inline-size: 10ch; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
  .account-menu button { padding: 8px 14px; min-block-size: 40px; }

  @media (max-width: 1000px) {
    .site-header { flex-wrap: wrap; gap: 20px; }
    .main-nav { order: 3; inline-size: 100%; justify-content: center; }
  }
}

@layer pages {
  .authentication { max-inline-size: 480px; margin: 48px auto; }
  .authentication h1 { font-size: 2.2rem; }
  .authentication__form { display: grid; gap: 20px; margin-block-start: 28px; }
  .authentication__form label { display: block; margin-block-end: 8px; font-weight: 600; }
  .authentication__form input:not([type=submit]) { inline-size: 100%; padding: 12px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-paper); color: var(--color-ink); }
  .authentication__switch { margin-block-start: 24px; color: var(--color-muted); }
}