/* Cormass Global Auth -- Header Widget Only
   Auth pages (login/signup) are served by the cormass-auth-app React SPA.
   Variables provided by design-tokens.css via --ds-* aliases. */

/* Header widget -- fixed pill + dropdown */
.cormass-gh {
  position: fixed;
  top: var(--ds-space-150);
  right: var(--ds-space-150);
  z-index: 9999;
  font-family: var(--ds-font-family-sans);
}

.cormass-gh__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-100);
  padding: var(--ds-space-100) var(--ds-space-150);
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-weight: var(--ds-font-weight-semibold);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.cormass-gh__pill:hover {
  box-shadow: var(--ds-shadow-raised);
}
.cormass-gh__pill:focus-visible {
  outline: 2px solid var(--ds-border-focused);
}
.cormass-gh__pillIcon {
  display: inline-flex;
  color: var(--ds-icon-brand);
}

.cormass-gh__dropdown {
  position: absolute;
  right: 0;
  margin-top: var(--ds-space-100);
  min-width: 200px;
  border-radius: var(--ds-radius-200);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-overlay);
  border: 1px solid var(--ds-border);
  padding: var(--ds-space-100);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease;
}
.cormass-gh__dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cormass-gh__link {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: var(--ds-space-100);
  border-radius: var(--ds-radius-200);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text);
  cursor: pointer;
  transition: background 120ms ease;
}
.cormass-gh__link:hover {
  background: var(--ds-background-neutral-subtle-hovered);
}

.cormass-gh__email {
  font-weight: var(--ds-font-weight-bold);
  margin-bottom: var(--ds-space-075);
}
.cormass-gh__guest {
  display: grid;
  gap: var(--ds-space-075);
}

@media (max-width: 768px) {
  .cormass-gh {
    top: var(--ds-space-100);
    right: var(--ds-space-100);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cormass-gh__dropdown,
  .cormass-gh__pill {
    transition: none !important;
  }
}