.tab-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  /* Tabs centered top to bottom in the bar. */
  align-items: center;
  gap: 4px;
  height: var(--tab-bar-h);
  padding: 0 48px;
  background: var(--color-background);
  /* Extra tabs scroll sideways rather than shrink or wrap, so every child is
     flex-shrink: 0. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

/* CSS-only swap, so "system" appearance follows the OS theme live. */
/* Stretched to the bar's height, less 10px above and below. */
.tab-bar-logo {
  align-self: stretch;
  box-sizing: border-box;
  padding: 10px 0;
  flex-shrink: 0;
  width: auto;
  margin-right: 20px;
}

.tab-bar-logo--dark {
  display: none;
}

:root[data-theme="dark"] .tab-bar-logo--light {
  display: none;
}

:root[data-theme="dark"] .tab-bar-logo--dark {
  display: block;
}

.tab {
  position: relative;
  flex-shrink: 0;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-gray-dark);
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover {
  color: var(--color-text-primary);
}

/* The open tab: a blue bar just under its label, as wide as the text (the
   tab's 28px side padding left out), a few pixels below the letters. A real
   element in each page's active tab rather than a ::after, so the script
   after each page's tab bar can slide it in from the previous tab's place.
   Scaled from its left edge, as that script stretches it from the old
   tab's width. */
.tab-underline {
  transform-origin: left center;
  position: absolute;
  right: 28px;
  bottom: 8px;
  left: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}

/* Hidden until auth.js confirms an admin, so it never flashes for anyone else. */
.tab--admin-only {
  display: none;
}

/* Told apart by its darker text alone: no fill or underline. */
.tab--active,
.tab--active:hover {
  color: var(--color-tab-accent);
}

.auth-container {
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  gap: 10px;
  margin-left: auto;
}

.auth-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  /* --color-shadow is transparent in dark mode, which drops this to just the
     background there. */
  box-shadow: 0 2px 8px var(--color-shadow);
}

.auth-signin-btn:hover {
  background: var(--color-gray-lighter);
}

.auth-signin-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Carries the avatar's plain circle and resting edge itself, so both stay
   put while the picture fades in over them (see .auth-avatar--loaded). */
.auth-avatar-btn {
  display: block;
  margin-left: 16px;
  padding: 0;
  border: none;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-gray-lighter);
  cursor: pointer;
}

:root[data-theme="dark"] .auth-avatar-btn {
  background: #000000;
}

/* The picture's own hover ring takes over. */
.auth-avatar-btn:hover,
.auth-avatar-btn--open {
  box-shadow: none;
}

.auth-avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  /* Only shows through a profile picture's transparent parts: the image
     covers the whole circle everywhere else. */
  background: #ffffff;
  /* box-shadow rather than border so it doesn't change the element's box size.
     The hover ring is already here at 0% opacity, so only its opacity animates,
     not its width. */
  --avatar-ring-opacity: 75%;
  --avatar-hover-border: transparent;
  box-shadow:
    0 0 0 1px var(--color-gray-lighter),
    0 0 0 5px color-mix(in srgb, var(--color-gray-light) 0%, transparent);
  transition: box-shadow 0.125s ease, opacity 0.3s ease;
}

/* The picture fades in once it has loaded (see renderAuthUI). */
img.auth-avatar {
  opacity: 0;
}

img.auth-avatar--loaded {
  opacity: 1;
}

/* The border stays on top on hover here, since the ring can be fainter than
   it against the near-black page and would otherwise replace it with something
   dimmer. */
:root[data-theme="dark"] .auth-avatar {
  background: #000000;
  --avatar-ring-opacity: 45%;
  --avatar-hover-border: var(--color-gray-lighter);
}

.auth-avatar-btn:hover .auth-avatar,
.auth-avatar-btn--open .auth-avatar {
  box-shadow:
    0 0 0 1px var(--avatar-hover-border),
    0 0 0 5px color-mix(in srgb, var(--color-gray-light) var(--avatar-ring-opacity), transparent);
}