/* Account control: header on desktop, main menu on mobile. */

.auth-host {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.auth-host[hidden] {
  display: none;
}

.auth-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.auth-button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--glass-border-strong);
}

.auth-button:active {
  transform: translateY(1px);
}

.auth-button:focus-visible {
  outline: 2px solid #f8b40b;
  outline-offset: 2px;
}

/* Strava orange. Replace this rule with Strava's official "Connect with
   Strava" button asset before public launch: their brand guidelines require
   the supplied artwork rather than a restyled native button. */
.auth-button--login {
  background: #fc4c02;
  border-color: #fc4c02;
}

.auth-button--login:hover {
  background: #e34402;
  border-color: #e34402;
}

.auth-account {
  position: relative;
}

.auth-account__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-border);
}

.auth-account__name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-surface-strong);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.auth-menu__item {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
}

.auth-menu__item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.auth-menu__item:focus-visible {
  outline: 2px solid #f8b40b;
  outline-offset: -2px;
}

.auth-menu__item--danger {
  color: #ff9b8a;
}

/* Inside the mobile main menu the control is a full-width row, and the popup
   menu becomes inline so it cannot overflow the panel. */
.auth-host--menu {
  justify-content: stretch;
}

.auth-host--menu .auth-account,
.auth-host--menu .auth-button {
  width: 100%;
}

.auth-host--menu .auth-button {
  justify-content: center;
}

.auth-host--menu .auth-menu {
  position: static;
  margin-top: 8px;
  min-width: 0;
  box-shadow: none;
}