@layer components {
  /* Topnav — quiet horizontal bar over the desk surface. */
  .topnav {
    background: var(--desk);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: var(--space-3) 0;
  }
  .topnav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand {
    font-family: var(--display);
    font-weight: var(--weight-semibold);
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .brand .brand-mark { color: var(--arrive); }

  .topnav-links {
    display: flex;
    gap: var(--space-5);
    align-items: center;
  }
  .topnav-links a {
    color: var(--ink-soft);
    font-size: 14px;
    text-decoration: none;
  }
  .topnav-links a:hover { color: var(--ink); }
  .topnav-links a.active { color: var(--ink); font-weight: var(--weight-semibold); }

  .role-badge {
    font-size: var(--cap-md);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--arrive);
    border: 1px solid var(--arrive);
    padding: 2px 8px;
    font-weight: var(--weight-semibold);
  }

  /* Avatar — circular, ink-on-paper. */
  .avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: var(--weight-semibold);
    font-size: 15px;
    flex-shrink: 0;
  }
  .avatar-sm { width: 32px; height: 32px; font-size: 12px; }
  .avatar-xs { width: 22px; height: 22px; font-size: 10px; }
  .avatar-lg { width: 96px; height: 96px; font-size: 32px; }
  /* Photo variant — img fills the circle.
     Works whether the img IS .avatar-photo or is a child of .avatar-photo. */
  img.avatar-photo { object-fit: cover; border-radius: 50%; }
  .avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
}