/* Meridian shared signup styles. The host page is expected to define the
   following CSS variables: --deep, --muted, --amber, --paper. The form uses
   the page's existing .form-row / button styling where present, so we only
   add OAuth + success state styling here. */

.signup-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.signup-oauth-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--deep, #0F2B3C);
  background: #fff;
  border: 1px solid rgba(15, 43, 60, 0.18);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.signup-oauth-btn svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.signup-oauth-btn:hover {
  background: #FAFAF6;
  border-color: rgba(15, 43, 60, 0.32);
}

.signup-oauth-google {
  width: 100%;
  display: flex;
  justify-content: center;
}

.signup-oauth-google > div {
  width: 100% !important;
}

.signup-oauth-divider {
  position: relative;
  text-align: center;
  margin: 4px 0 2px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #6B8FA3);
}

.signup-oauth-divider::before,
.signup-oauth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 18px);
  height: 1px;
  background: rgba(15, 43, 60, 0.12);
}

.signup-oauth-divider::before { left: 0; }
.signup-oauth-divider::after { right: 0; }

.signup-oauth-divider span {
  background: var(--paper, #F4F4F0);
  padding: 0 4px;
  position: relative;
}

/* Overlay primitives — page may already define these; we namespace with
   #meridian-overlay-* IDs to avoid clashing, but the .overlay class itself
   is shared with the page. If the page has its own .overlay styles, they
   win. If not, the rules below provide a sane default. */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.overlay.active {
  display: flex;
}